/* =========================================================
   PROJECT DETAIL PAGE
========================================================= */

.project-detail {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    color: var(--color-charcoal);
}


/* =========================================================
   COMMON
========================================================= */

.project-detail-kicker {
    margin: 0 0 24px;

    color: #66666e;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.04em;
}


/* =========================================================
   PROJECT INTRO
========================================================= */

.project-detail-intro {
    padding: 48px 0 36px;
    background: #ffffff;
}


/* Main intro layout */

.project-detail-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(520px, 0.85fr);

    align-items: center;

    gap: clamp(40px, 5vw, 80px);
}


/* Project title */

.project-detail-heading h1 {
    max-width: 900px;

    margin: 0;

    color: #111116;

    font-family: var(--font-heading);

    font-size: clamp(58px, 6.4vw, 100px);
    font-weight: 600;

    letter-spacing: -0.06em;
    line-height: 0.9;
}


/* Metadata */

.project-detail-summary {
    display: grid;

    grid-template-columns:
        minmax(110px, 0.8fr)
        minmax(220px, 1.8fr)
        minmax(90px, 0.65fr);

    gap: 24px;
}


.project-detail-meta-item {
    min-width: 0;

    padding-top: 14px;

    border-top: 1px solid rgba(20, 20, 25, 0.16);
}


.project-detail-meta-item span {
    display: block;

    margin-bottom: 9px;

    color: #777780;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.project-detail-meta-item p {
    margin: 0;

    color: #111116;

    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;

    line-height: 1.45;
}

/* =========================================================
   COVER IMAGE
========================================================= */

.project-detail-hero {
    padding: 0 0 18px;

    background: #ffffff;
}


.project-detail-hero-media {
    width: 100%;

    overflow: hidden;

    border-radius: 12px;

    aspect-ratio: 16 / 7;

    background: #111116;
}


.project-detail-hero-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.8s cubic-bezier(.2, .7, .2, 1);
}


@media (hover: hover) and (pointer: fine) {

    .project-detail-hero-media:hover img {
        transform: scale(1.02);
    }

}


/* =========================================================
   THE EXPERIENCE
========================================================= */

.project-detail-about {
    padding: 68px 0 75px;

    background: var(--color-indigo);

    color: #ffffff;
}


.project-detail-about .project-detail-kicker {
    color: rgba(255, 255, 255, 0.68);
}


.project-detail-about-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: start;

    gap: clamp(45px, 6vw, 90px);
}


.project-detail-about h2 {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(50px, 5vw, 76px);
    font-weight: 600;

    letter-spacing: -0.055em;
    line-height: 0.96;
}


.project-detail-about h2 span {
    color: #111116;
}


.project-detail-about-content {
    width: 100%;
    max-width: 900px;
    color: rgba(255, 255, 255, 0.88);

    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.75;
}

.project-detail-about-content p,
.project-detail-about-content div,
.project-detail-about-content ul,
.project-detail-about-content ol,
.project-detail-about-content li {
    font-size: inherit;
    line-height: inherit;
}

.project-detail-about-content p,
.project-detail-about-content div {
    margin-top: 0;
}


.project-detail-about-content strong {
    font-weight: 700;
}


.project-detail-about-content em {
    font-style: italic;
}

/* .project-detail-about-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: clamp(17px, 1.25vw, 20px);

    line-height: 1.75;

    white-space: pre-line;
} */


/* =========================================================
   PROJECT FILM
========================================================= */

.project-detail-film {
    margin-top: 18px;

    padding: 70px 0 78px;

    background: #1d1c22;

    color: #ffffff;
}


.project-detail-film .project-detail-kicker {
    color: rgba(255, 255, 255, 0.52);
}


.project-detail-film-heading {
    margin-bottom: 34px;

    text-align: center;
}


.project-detail-film-heading h2 {
    max-width: 900px;

    margin: 0 auto;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(44px, 4.5vw, 66px);
    font-weight: 600;

    letter-spacing: -0.05em;
    line-height: 1;
}


.project-detail-film-heading h2 span {
    color: var(--color-indigo);
}


/* =========================================================
   VIDEO
========================================================= */

.project-detail-video {
    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    aspect-ratio: 16 / 9;

    background: #000000;
}


.project-detail-video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   GALLERY
========================================================= */

.project-detail-gallery {
    margin-top: 18px;

    padding: 65px 0 78px;

    background: #ffffff;
}


.project-detail-gallery-heading {
    margin-bottom: 35px;

    text-align: center;
}


.project-detail-gallery-heading .project-detail-kicker {
    margin-bottom: 16px;
}


.project-detail-gallery-heading h2 {
    margin: 0;

    color: #111116;

    font-family: var(--font-heading);

    font-size: clamp(44px, 4.5vw, 66px);
    font-weight: 600;

    letter-spacing: -0.05em;
    line-height: 0.98;
}


.project-detail-gallery-heading h2 span {
    color: var(--color-indigo);
}


/* =========================================================
   DEFAULT GALLERY GRID
========================================================= */

.project-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 14px;
}


.project-gallery-item {
    margin: 0;

    overflow: hidden;

    border-radius: 10px;

    background: #ecebf0;
}


.project-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(.2, .7, .2, 1);
}


@media (hover: hover) and (pointer: fine) {

    .project-gallery-item:hover img {
        transform: scale(1.025);
    }

}


/* =========================================================
   ONE IMAGE
========================================================= */

.project-gallery-grid--count-1 {
    display: block;
}


.project-gallery-grid--count-1
.project-gallery-item {
    width: 100%;

    aspect-ratio: 16 / 7;
}


/* =========================================================
   TWO IMAGES
========================================================= */

.project-gallery-grid--count-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.project-gallery-grid--count-2
.project-gallery-item {
    grid-column: auto;

    aspect-ratio: 4 / 3;
}


/* =========================================================
   THREE OR MORE IMAGES
========================================================= */

.project-gallery-item--1 {
    grid-column: span 12;

    aspect-ratio: 16 / 7;
}


.project-gallery-item--2,
.project-gallery-item--3 {
    grid-column: span 6;

    aspect-ratio: 4 / 3;
}


.project-gallery-item--4 {
    grid-column: span 8;

    aspect-ratio: 4 / 3;
}


.project-gallery-item--5 {
    grid-column: span 4;

    aspect-ratio: 3 / 4;
}


/* =========================================================
   NEXT PROJECT
========================================================= */

.project-next {
    margin-top: 18px;

    background: var(--color-indigo);

    color: #ffffff;
}


.project-next-link {
    display: block;

    padding: 65px 0;

    color: inherit;

    text-decoration: none;
}


.project-next-label {
    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.project-next-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.project-next h2 {
    margin: 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(48px, 6vw, 88px);
    font-weight: 600;

    letter-spacing: -0.06em;
    line-height: 0.92;
}


.project-next p {
    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
}


/* Arrow */

.project-next-arrow {
    display: flex;

    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    color: #ffffff;

    font-size: 21px;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.project-next-link:hover {
    color: #ffffff;
}


.project-next-link:hover
.project-next-arrow {
    background: #ffffff;

    color: var(--color-indigo);

    transform: translateX(6px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .project-detail-intro {
        padding: 55px 0 40px;
    }


    .project-detail-heading {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .project-detail-heading h1 {
        font-size: clamp(54px, 8vw, 82px);
    }


    .project-detail-summary {
        max-width: 700px;
    }


    .project-detail-about-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Intro */

    .project-detail-intro {
        padding: 45px 0 32px;
    }


    .project-detail-kicker {
        margin-bottom: 18px;

        font-size: 9px;
    }


    .project-detail-heading h1 {
        font-size: clamp(44px, 13vw, 62px);
    }


    .project-detail-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px 16px;
    }


    /* Cover */

    .project-detail-hero {
        padding-bottom: 10px;
    }


    .project-detail-hero-media {
        border-radius: 9px;

        aspect-ratio: 4 / 3;
    }


    /* Experience */

    .project-detail-about {
        padding: 48px 0 55px;
    }


    .project-detail-about-grid {
        gap: 28px;
    }


    .project-detail-about h2 {
        font-size: clamp(42px, 11vw, 56px);
    }


    .project-detail-about-content {
        font-size: 15px;
    }


    /* Film */

    .project-detail-film {
        margin-top: 10px;

        padding: 52px 0 58px;
    }


    .project-detail-film-heading {
        margin-bottom: 27px;
    }


    .project-detail-film-heading h2 {
        font-size: 38px;
    }


    .project-detail-video {
        border-radius: 8px;
    }


    /* Gallery */

    .project-detail-gallery {
        margin-top: 10px;

        padding: 50px 0 55px;
    }


    .project-detail-gallery-heading {
        margin-bottom: 27px;
    }


    .project-detail-gallery-heading h2 {
        font-size: 38px;
    }


    /*
       Mobile gallery becomes a simple stack.
    */

    .project-gallery-grid,
    .project-gallery-grid--count-2 {
        display: block;
    }


    .project-gallery-item,
    .project-gallery-grid--count-1
    .project-gallery-item,
    .project-gallery-grid--count-2
    .project-gallery-item {
        width: 100%;

        margin-bottom: 10px;

        border-radius: 8px;

        aspect-ratio: 4 / 3;
    }


    /* Next project */

    .project-next {
        margin-top: 10px;
    }


    .project-next-link {
        padding: 50px 0;
    }


    .project-next-row {
        align-items: flex-end;

        gap: 20px;
    }


    .project-next-arrow {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 18px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .project-detail-summary {
        grid-template-columns: 1fr;
    }


    .project-next h2 {
        font-size: 40px;
    }

}