/* ==========================================================
   AXN Portfolio
   Layout System
   ========================================================== */

/* ==========================================================
   Container
   ========================================================== */

.container {

    width: min(var(--container-width), 92vw);

    margin-inline: auto;

}

/* ==========================================================
   Sections & Rhythm
   ========================================================== */

section {

    padding-block: var(--section-spacing);

}

.hero-section {

    padding-top: 120px;

    padding-bottom: clamp(6rem, 14vh, 14rem); /* Huge gap after hero */

}

.section-approach {

    padding-top: clamp(7rem, 15vh, 15rem); /* Huge gap before approach */

    padding-bottom: clamp(7rem, 15vh, 15rem); /* Huge gap after approach */

}

/* ==========================================================
   Header
   ========================================================== */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 100;

    background: rgba(250, 250, 248, .82);

    backdrop-filter: blur(16px);

}

.navbar {

    height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.nav-links {

    display: flex;

    gap: 3rem;

}

/* ==========================================================
   Hero
   ========================================================== */

.hero {

    min-height: 80vh;

    display: flex;

    align-items: center;

}

.hero-grid {

    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 4.5rem;

    align-items: center;

}

.hero-content {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}

.hero-image {

    display: flex;

    justify-content: flex-end;

    align-items: flex-start;

}

.hero-image img {

    width: 100%;

    max-width: 360px;

    aspect-ratio: 4/5;

    object-fit: cover;

    border-radius: 8px;

}

/* ==========================================================
   Featured Projects (Asymmetric Rhythm)
   ========================================================== */

.featured-projects {

    display: flex;

    flex-direction: column;

}

.project {

    display: grid;

    grid-template-columns: 330px 1fr;

    gap: 4.5rem;

    align-items: center;

}

/* Asymmetric Magazine Rhythm between project cards */

.project-rhythm-1 {

    margin-bottom: clamp(6rem, 12vh, 11rem); /* Huge gap after Project 1 */

}

.project-rhythm-2 {

    margin-bottom: clamp(2rem, 3.5vh, 3.5rem); /* Small/tiny gap after Project 2 */

}

.project-rhythm-3 {

    margin-bottom: 0;

}

.project-videos-dual {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.25rem;

    width: 100%;

}

.project-videos-single {

    width: 100%;

    max-width: 270px;

}

.project-video-unit {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

}

.project-video {

    width: 100%;

}

.project-video video {

    width: 100%;

    aspect-ratio: 9/16;

    object-fit: cover;

    display: block;

}

.project-info {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

/* ==========================================================
   Approach
   ========================================================== */

.approach {

    max-width: 760px;

}

/* ==========================================================
   Footer
   ========================================================== */

.footer {

    padding-top: clamp(6rem, 12vh, 10rem);

    padding-bottom: 5rem;

    border-top: 1px solid var(--color-border);

}

.footer .container {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}

.footer-centered .container {
    align-items: center;
    text-align: center;
}

.contact-email {
    margin-bottom: 2rem; /* Add white space to let it breathe */
}

.email-link {
    font-size: var(--text-lg);
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
}

.email-link:hover {
    opacity: 0.7;
}

.footer-centered .contact-links {
    justify-content: center;
}

.contact-links {

    display: flex;

    flex-wrap: wrap;

    gap: 2.5rem;

    align-items: center;

}

/* ==========================================================
   Project Page: Creative Directions
   ========================================================== */

.creative-direction {
    padding-bottom: clamp(6rem, 12vh, 10rem);
}

.creative-direction .container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.direction-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.direction-objective {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.creative-notes {
    padding-top: 2rem;
    padding-bottom: clamp(6rem, 12vh, 10rem);
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:1024px) {

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 5rem;

    }

    .hero-image {

        justify-content: flex-start;

    }

    .project {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

}

@media (max-width:768px) {

    .navbar {

        height: 72px;

    }

    .nav-links {

        gap: 1.5rem;

    }

    section {

        padding-block: 5rem;

    }

    .hero-section {

        padding-top: 100px;

        padding-bottom: 4rem;

    }

}