/* General Setup */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif; /* Applied Lato globally */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Main Container - 1000px width */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* --- STICKY UPDATES --- */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff; /* Must be solid so images don't show through */
    
    /* Reduced padding slightly for sticky mode, or keep your 40px */
    padding: 20px 0; 
    margin-bottom: 20px;
    
    /* Optional: subtle line to separate header from content when scrolling */
    border-bottom: none; 
}

.logo img {
    height: 40px; /* Adjust based on your LOGO.jpg proportions */
    display: block; /* Removes extra bottom space in the flex container */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav a {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

nav a:hover {
    opacity: 0.6;
}

/* ========================================== */
/* SECTION 1: HOMEPAGE MASONRY LAYOUT         */
/* ========================================== */
.masonry-layout {
    display: flex;
    gap: 20px; /* Space between the two columns */
    padding-bottom: 60px;
}

.masonry-col {
    flex: 1; /* Makes both columns take up exactly half the width */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between the items vertically */
}

.masonry-item {
    width: 100%;
    display: block;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Homepage Hero Text */
.hero-text {
    /* Priority: Helvetica Condensed -> Roboto Condensed -> Impact */
    font-family: "Helvetica Inserat", "Helvetica Neue", "Roboto Condensed", "Impact", sans-serif;
    font-stretch: condensed; /* Helps browsers that support stretching */
    font-size: 60px; /* Increased slightly for impact */
    font-weight: 700; 
    line-height: 1.05; /* Tighter line height for the condensed look */
    letter-spacing: -1px; /* Brings letters closer for that "Bold" feel */
    color: #1a1a1a;
    text-transform: none;
    padding-right: 10px;
    margin-bottom: 25px; 
}

.hero-text .highlight {
    font-family: "Helvetica Inserat", "Helvetica Neue", "Roboto Condensed", "Impact", sans-serif;
    font-stretch: condensed; /* Helps browsers that support stretching */
    color: #b5d334; /* Keeping your lime green accent */
}

/* Grey Text Blocks (PORTFOLIO, ABOUT, CONTACT) */
.text-block {
    background-color: #ebebeb; /* Light grey */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
    aspect-ratio: 16 / 10.6; /* Gives the boxes a nice landscape rectangle shape */
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.text-block:hover {
    background-color: #d6d6d6; /* Slightly darker grey on hover */
}

/* Make masonry images react when hovered so users know they are clickable */
.masonry-item.image-link {
    transition: opacity 0.3s ease;
}

.masonry-item.image-link:hover {
    opacity: 0.85; /* Slightly fades the image to show it's a link */
}

/* ========================================== */
/* SECTION 2: PORTFOLIO GRID                  */
/* ========================================== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px; /* 40px vertical gap, 20px horizontal gap */
    padding-bottom: 60px;
}

.project-card {
    display: block;
    cursor: pointer;
}

.thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Enforces the 3:4 ratio */
    overflow: hidden;
    background-color: #f0f0f0;
    margin-bottom: 12px;
}

.thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Overlay - Solid transparent grey */
.hover-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Transparent grey */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .hover-overlay {
    opacity: 1;
}

.project-title {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #333;
}

/* ========================================== */
/* SECTION 3: PROJECT DETAIL PAGE             */
/* ========================================== */
.project-container {
    display: flex;
    gap: 30px;
    padding-bottom: 60px;
}

.gallery-col {
    flex: 6; /* Takes up roughly 60% of the width */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.gallery-col img {
    width: 100%;
    height: auto;
    display: block;
    margin: 10px;
}

.info-col {
    flex: 4; /* Takes up roughly 40% of the width */
}

.info-col h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.info-details {
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.info-details p {
    display: flex;
    margin-bottom: 5px;
}

.info-details span.label {
    width: 70px; /* Aligns the colons perfectly */
    display: inline-block;
    font-weight: bold; /* Adds the bold effect */
}

.info-description {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap; /* Preserves line breaks from CSV */
    text-align: justify; /* Aligns text evenly on both left and right margins */
}

/* Push the arrow to the bottom-right of the column */
.back-arrow-container {
    margin-top: auto; /* Pushes the div to the bottom of the flex container */
    display: flex;
    justify-content: flex-end; /* Aligns arrow to the right */
    padding-top: 50px; /* Ensures space if the text is long */
    padding-bottom: 20px;
}

.back-arrow-link {
    font-size: 32px; /* Made slightly larger for a bold finish */
    font-weight: bold;
    text-decoration: none;
    color: #000;
    transition: transform 0.3s ease;
}

.back-arrow-link:hover {
    transform: translateX(10px);
}

/* ========================================== */
/* SECTION 4: ABOUT PAGE                      */
/* ========================================== */
.about-container {
    padding-top: 20px;
    padding-bottom: 60px;
    max-width: 900px; /* Keeps the text from stretching too far */
}

.about-heading {
    color: #1a1b41; /* The dark blue color from your image */
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
    margin-top: 50px;
}

/* Removes top margin from the very first heading so it aligns with the top */
.about-container .about-heading:first-child {
    margin-top: 0;
}

.about-text {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    word-break: keep-all; /* Prevents awkward line breaks in Korean text */
}

.service-list {
    list-style: none; /* Removes default bullet points */
    padding: 0;
}

.service-list li {
    font-size: 15px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ========================================== */
/* SECTION 5: CONTACT PAGE                    */
/* ========================================== */
.contact-container {
    padding-top: 20px;
    padding-bottom: 60px;
}

.contact-heading {
    color: #1a1b41; /* Matches the About page dark blue */
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 50px;
}

.contact-content {
    display: flex;
    gap: 80px;
    align-items: stretch; /* Space between the left and right columns */
}

.contact-left, .contact-right {
    flex: 1; /* Makes both columns take up equal width */
}

.contact-right {
    display: flex;
    flex-direction: column;
}

.map-container {
    flex: 1; /* Makes the map fill all remaining height */
}

.map-container iframe {
    height: 100%; /* iframe fills the map container */
    min-height: 200px;
}
/* Typography for the Left Column */
.company-name-kr {
    font-size: 24px;
    color: #1a1b41;
    margin-bottom: 5px;
}

.company-name-en {
    font-size: 14px;
    font-weight: bold;
    color: #1a1b41;
    margin-bottom: 60px; /* Pushes the form down slightly */
}

/* Form Styling */
.custom-form {
    width: 100%;
}

.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.input-group label {
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Minimalist Underline Inputs */
.custom-form input, 
.custom-form textarea {
    border: none;
    border-bottom: 2px solid #000; /* Only the bottom line */
    background: transparent;
    padding: 5px 0;
    font-size: 14px;
    outline: none; /* Removes the default blue glow when clicked */
    font-family: inherit;
}

.custom-form textarea {
    resize: none; /* Prevents users from dragging to resize the box */
    margin-top: 20px;
}

.custom-form textarea::placeholder {
    font-style: italic;
    color: #555;
}

/* Submit Button */
.submit-row {
    display: flex;
    justify-content: center; /* Centers the button */
    margin-top: 20px;
}

.submit-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    color: #000;
}

.submit-btn:hover {
    color: #555; /* Slight color change on hover */
}

/* Typography for the Right Column */
.contact-details {
    margin-bottom: 50px;
}

.contact-details p {
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
}

/* Map Embedded Container */
.map-container {
    width: 100%;
    background-color: #f0f0f0;
}

/* Load More Button Styling */
.load-more-btn {
    background: transparent;
    border: 1px solid #000;
    padding: 10px 30px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Back Arrow inside description */
.back-arrow-link {
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    vertical-align: middle;
}

.back-arrow-link:hover {
    color: #555;
}

/* Ensure description container is relative for text flow */
.info-description {
    position: relative;
    padding-bottom: 20px;
}

/* Container to push the arrow to the right */
.back-arrow-wrapper {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    margin-top: 20px; /* Space between text and arrow */
}

/* Style for the arrow link itself */
.back-arrow-link {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    transition: transform 0.3s ease;
}

.back-arrow-link:hover {
    color: #555;
    transform: translateX(5px); /* Subtle animation moving right on hover */
}

/* Container for the image and overlay */
.masonry-thumb-wrapper {
    position: relative;
    width: 100%;
    line-height: 0; /* Prevents tiny white space under images */
}

/* The White Transparent Layer */
.masonry-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* White with 70% transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay on hover */
.image-link:hover .masonry-hover-overlay {
    opacity: 1;
}

.masonry-project-title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 0 20px; /* Increased padding for better spacing */
    line-height: 1.4; /* Better spacing for multi-line titles */
    word-break: keep-all; /* Keeps Korean words together */
}

.contact-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.contact-details {
    text-align: right;
}

/* --- MOBILE ADAPTABILITY (Screens smaller than 768px) --- */
@media (max-width: 768px) {
    /* 1. Reduce container padding so content has more room */
    .container {
        padding: 0 20px;
    }

    /* 2. Header: Stack logo and menu or keep them tight */
    header {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    /* 3. Masonry: Switch from 2 columns to 1 column */
    .masonry-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .masonry-col {
        width: 100%;
    }

    .hero-text {
        font-size: 52px; /* Scale down the big-bold text for mobile */
    }

    /* 4. Project Page: Stack Gallery and Info columns */
    .project-container {
        flex-direction: column;
        gap: 30px;
    }

    .gallery-col, .info-col {
        flex: none;
        width: 100%;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    /* 1. Force the container to stack vertically */
 .contact-content {
    flex-direction: column;
    gap: 40px;
}

.contact-left,
.contact-right {
    flex: none;
    width: 100%;
}

.contact-right {
    display: block;
}

.map-container iframe {
    height: 250px;
}
    

    /* 6. Footer/Arrow: Center things for thumb-friendly clicking */
    .back-arrow-container {
        justify-content: center;
        padding-top: 30px;
    }
}