/* ============================================================
   PROJECTS
   Premium architectural portfolio
============================================================ */

.projectsSection {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #fbfaf7 0%,
            #f4f1ec 52%,
            #eee7dc 100%
        );
    color: var(--wine-950);
}


/* ============================================================
   BACKGROUND BLUEPRINT
============================================================ */

.projectsBlueprint {
    position: absolute;
    z-index: -3;
    background-image: url("../img/blueprint-floorplan.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.projectsBlueprintOne {
    top: -130px;
    right: -210px;
    width: min(70vw, 1050px);
    height: 780px;
    opacity: 0.035;
    transform: rotate(-6deg);
}

.projectsBlueprintTwo {
    bottom: -260px;
    left: -260px;
    width: min(60vw, 900px);
    height: 720px;
    opacity: 0.025;
    transform: rotate(7deg);
}

.projectsSection::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(
            rgba(90, 31, 31, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 31, 31, 0.018) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    content: "";
    pointer-events: none;
}

.projectsSection::after {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(150, 112, 68, 0.14) 15%,
            rgba(150, 112, 68, 0.14) 85%,
            transparent
        );
    content: "";
    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.projectsContainer {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADER
============================================================ */

.projectsHeader {
    display: grid;
    grid-template-columns:
        minmax(190px, 0.55fr)
        minmax(0, 1.45fr);
    gap: clamp(55px, 8vw, 120px);
    align-items: end;
    margin-bottom: 90px;
}

.projectsHeaderMeta .sectionIndex {
    color: var(--wine-800);
}

.projectsHeaderMeta .sectionLabel {
    color: var(--wine-800);
}

.projectsHeaderContent {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(250px, 0.7fr);
    gap: 60px;
    align-items: end;
}

.projectsHeaderContent h2 {
    margin: 0;
    color: var(--wine-950);
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 5.8vw, 6.2rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.93;
}

.projectsHeaderContent h2 span {
    display: block;
    margin-top: 9px;
    color: var(--bronze-700);
    font-style: italic;
    font-weight: 500;
}

.projectsHeaderSummary {
    display: grid;
    gap: 28px;
}

.projectsHeaderSummary p {
    margin: 0;
    color: var(--charcoal-600);
    font-size: 0.93rem;
    line-height: 1.8;
}

.projectsHeaderCount {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 18px;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(90, 31, 31, 0.17);
}

.projectsHeaderCount strong {
    color: var(--wine-800);
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.projectsHeaderCount span {
    max-width: 130px;
    color: var(--charcoal-500);
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1.45;
    text-transform: uppercase;
}


/* ============================================================
   SHARED IMAGE EFFECTS
============================================================ */

.projectFeatureImage,
.projectEditorialImage {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ivory-200);
}

.projectFeatureImage img,
.projectEditorialImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.015);
    transition:
        transform 1100ms cubic-bezier(.2, .65, .3, 1),
        filter 700ms ease;
}

.projectImageOverlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(43, 13, 13, 0.68) 0%,
            rgba(43, 13, 13, 0.16) 38%,
            transparent 70%
        );
    opacity: 0.62;
    transition: opacity 550ms ease;
}

.projectFeatureImage:hover img,
.projectEditorialImage:hover img {
    transform: scale(1.055);
    filter: saturate(0.88);
}

.projectFeatureImage:hover .projectImageOverlay,
.projectEditorialImage:hover .projectImageOverlay {
    opacity: 0.82;
}


/* ============================================================
   FEATURED PROJECT
============================================================ */

.projectFeature {
    margin-bottom: 110px;
}

.projectFeatureImage {
    aspect-ratio: 16 / 8.2;
    box-shadow: 0 36px 85px rgba(43, 13, 13, 0.14);
}

.projectFeatureImage::before {
    position: absolute;
    z-index: 4;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    content: "";
    pointer-events: none;
}

.projectFeatureNumber {
    position: absolute;
    z-index: 4;
    top: 36px;
    left: 42px;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.projectFeatureTechnical {
    position: absolute;
    z-index: 4;
    top: 36px;
    right: 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: rgba(255, 255, 255, 0.55);
    font-family: "Courier New", monospace;
    font-size: 0.53rem;
    letter-spacing: 0.13em;
}

.projectFeatureAction {
    position: absolute;
    z-index: 4;
    right: 42px;
    bottom: 38px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
}

.projectFeatureAction span {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.projectFeatureAction i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    font-size: 1rem;
    font-style: normal;
    transition:
        background 350ms ease,
        color 350ms ease,
        transform 350ms ease;
}

.projectFeatureImage:hover .projectFeatureAction i {
    background: var(--gold-400);
    color: var(--wine-950);
    transform: rotate(45deg);
}

.projectFeatureInfo {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.86fr)
        minmax(0, 1.14fr);
    gap: 80px;
    padding: 40px 0 0;
}

.projectType {
    color: var(--bronze-600);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.projectFeatureHeading h3 {
    max-width: 700px;
    margin: 10px 0 0;
    color: var(--wine-950);
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5.3rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.projectFeatureDetails {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 50px;
    align-items: start;
}

.projectFeatureDetails dl {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid rgba(90, 31, 31, 0.16);
}

.projectFeatureDetails dl > div {
    padding: 15px 0;
    border-bottom: 1px solid rgba(90, 31, 31, 0.16);
}

.projectFeatureDetails dt {
    margin-bottom: 3px;
    color: var(--charcoal-500);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.projectFeatureDetails dd {
    margin: 0;
    color: var(--wine-900);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.projectFeatureDetails p {
    margin: 0;
    color: var(--charcoal-600);
    line-height: 1.85;
}


/* ============================================================
   EDITORIAL GRID
============================================================ */

.projectsEditorialGrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 90px 32px;
    align-items: start;
}

.projectEditorialTall {
    grid-column: 1 / span 5;
}

.projectEditorialTall .projectEditorialImage {
    aspect-ratio: 4 / 5.25;
}

.projectEditorialWide {
    grid-column: 7 / span 6;
}

.projectEditorialWide .projectEditorialImage {
    aspect-ratio: 16 / 10.2;
}

.projectEditorialWide:nth-child(3) {
    grid-column: 4 / span 8;
}

.projectEditorialImage::before {
    position: absolute;
    z-index: 4;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    content: "";
    pointer-events: none;
}

.projectEditorialNumber {
    position: absolute;
    z-index: 4;
    top: 27px;
    left: 30px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.projectEditorialArrow {
    position: absolute;
    z-index: 4;
    right: 28px;
    bottom: 25px;
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.1rem;
    transition:
        background 350ms ease,
        color 350ms ease,
        transform 350ms ease;
}

.projectEditorialImage:hover .projectEditorialArrow {
    background: var(--gold-400);
    color: var(--wine-950);
    transform: rotate(45deg);
}

.projectEditorialInfo {
    padding-top: 22px;
}

.projectEditorialInfo h3 {
    margin: 8px 0 17px;
    color: var(--wine-950);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
}

.projectEditorialMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding-top: 15px;
    border-top: 1px solid rgba(90, 31, 31, 0.14);
}

.projectEditorialMeta span {
    position: relative;
    color: var(--charcoal-500);
    font-size: 0.59rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.projectEditorialMeta span + span::before {
    position: absolute;
    top: 50%;
    left: -14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bronze-500);
    content: "";
    transform: translateY(-50%);
}


/* ============================================================
   FOOTER
============================================================ */

.projectsFooter {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);
    gap: 80px;
    align-items: end;
    margin-top: 115px;
    padding-top: 40px;
    border-top: 1px solid rgba(90, 31, 31, 0.18);
}

.projectsFooterLine {
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(90, 31, 31, 0.48);
    font-family: "Courier New", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
}

.projectsFooterLine i {
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(90, 31, 31, 0.20);
}

.projectsFooterLine i::before,
.projectsFooterLine i::after {
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: rgba(90, 31, 31, 0.34);
    content: "";
}

.projectsFooterLine i::before {
    left: 0;
}

.projectsFooterLine i::after {
    right: 0;
}

.projectsFooterLine strong {
    color: var(--wine-800);
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.projectsNotice {
    padding-left: 28px;
    border-left: 2px solid var(--gold-400);
}

.projectsNoticeLabel {
    display: block;
    margin-bottom: 9px;
    color: var(--bronze-600);
    font-size: 0.59rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.projectsNotice p {
    margin: 0;
    color: var(--charcoal-500);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.45;
}


/* ============================================================
   SCROLL REVEAL
============================================================ */

.projectReveal {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity 900ms ease,
        transform 1100ms cubic-bezier(.18, .68, .25, 1);
}

.projectReveal.isVisible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1000px) {

    .projectsHeaderContent {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .projectFeatureInfo {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .projectFeatureDetails {
        grid-template-columns: 1fr 1fr;
    }

    .projectsFooter {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 820px) {

    .projectsHeader {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .projectFeatureImage {
        aspect-ratio: 4 / 3;
    }

    .projectsEditorialGrid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .projectEditorialTall,
    .projectEditorialWide,
    .projectEditorialWide:nth-child(3) {
        grid-column: auto;
    }

    .projectEditorialTall .projectEditorialImage,
    .projectEditorialWide .projectEditorialImage {
        aspect-ratio: 16 / 11;
    }

    .projectsSection::after {
        display: none;
    }

}


@media (max-width: 620px) {

    .projectFeature {
        margin-bottom: 75px;
    }

    .projectFeatureImage {
        aspect-ratio: 4 / 4.1;
    }

    .projectFeatureNumber {
        top: 27px;
        left: 28px;
    }

    .projectFeatureTechnical {
        display: none;
    }

    .projectFeatureAction {
        right: 27px;
        bottom: 27px;
    }

    .projectFeatureDetails {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .projectEditorialTall .projectEditorialImage,
    .projectEditorialWide .projectEditorialImage {
        aspect-ratio: 4 / 3.5;
    }

    .projectsFooterLine span:nth-of-type(2) {
        display: none;
    }

    .projectsBlueprint {
        opacity: 0.018;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .projectReveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .projectFeatureImage img,
    .projectEditorialImage img,
    .projectEditorialArrow,
    .projectFeatureAction i {
        transition: none;
    }

}