/* ==========================================================================
   SECTIONS — Project Highlights / Testimonials (the non-hero screens)
   Load this AFTER the main Webflow stylesheet. It only adds to it.

   Contents
   1. Section panel layout        (.hero-screen.is-section)
   2. Section title              (.section-title)
   3. Frosted tags               (.tag / .tag.is-dark)
   4. Slider (reusable)          (.slider, .slider-track, .slide, controls)
   5. Case study card            (.case-card)
   6. Testimonial card           (.testimonial-card, .profile)
   7. Responsive
   8. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. SECTION PANEL LAYOUT
   Overrides the centred layout that .hero-screen gives every panel: section
   panels pin their content to the top-left and stack it as
   title -> slider. Same specificity as the per-screen background rules in the
   main stylesheet, and this file loads after it, so these win cleanly.
   ========================================================================== */
.hero-screen.is-section {
    justify-content: flex-start;
    align-items: flex-start;
    grid-row-gap: 24px;
    row-gap: 24px;
    padding: 32px;
}

/* Close (X) button sits level with the title */
.hero-screen.is-section .screen-close-btn {
    top: 32px;
    right: 32px;
}

/* ==========================================================================
   2. SECTION TITLE
   Same look and sizing steps as .metric-number (Anton, uppercase, 36px ->
   40px at 1440+ -> 30px on small phones), capped at 500px wide.
   ========================================================================== */
.section-title {
    max-width: 500px;
    margin: 0;
    font-family: 'Anton', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align: left;
    /* keeps a long title clear of the close button */
    padding-right: 56px;
}

.hero-screen[data-screen="highlights"] .section-title {
    color: var(--default-dark);
}

.hero-screen[data-screen="testimonials"] .section-title {
    color: var(--heading-light);
}

/* ==========================================================================
   3. FROSTED TAGS
   Same glass treatment as .coming-soon-pill and the "16+" badge.
   - default   : light tint, for DARK sections (Testimonials, hero)
   - .is-dark  : for the WHITE section only (Project Highlights). Despite the
     name (kept for markup compatibility), this uses a WHITE-based tint
     rather than a black-based one so the pill actually reads as light
     against the off-white card, instead of muddying toward gray.
   ========================================================================== */
.tags {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: row wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.tag {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--body-light);
    white-space: nowrap;
    background-color: #ffffff0d;
    border: 1px solid #ffffff1a;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: Outfit, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -.1px;
}

.tag.is-dark {
    color: var(--default-dark);
    background-color: #ffffff66;
    border-color: #06070614;
}

/* ==========================================================================
   4. SLIDER (reusable — Testimonials will use the same shell)
   Structure:
     .slider
       .slider-track            <- scroll-snap scroller
         .slide (x N)           <- each item; card content goes inside
       .slider-controls         <- prev / next / counter

   The track fills the space under the title (up to a cap) so the slides get
   as much height as the screen allows; on short screens it hits its minimum
   and the panel scrolls instead of squashing the cards.
   ========================================================================== */
.slider {
    flex: 1 1 auto;
    flex-flow: column;
    grid-row-gap: 16px;
    row-gap: 16px;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    display: flex;
}

.slider-track {
    flex: 1 1 auto;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    min-height: 560px;
    max-height: 660px;
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-track:focus-visible {
    outline: 2px solid var(--default-orange);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Desktop mouse: grab cursor + drag-to-scroll (handled in slider.js) */
@media (hover: hover) and (pointer: fine) {
    .slider-track {
        cursor: grab;
    }
}

.slider-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
    -webkit-user-select: none;
}

.slide {
    /* min(700px, 88%): capped at 700px, and on narrow screens 88% of the track so
     the next slide peeks in from the right as a "there is more" hint */
    flex: 0 0 min(700px, 88%);
    min-width: 0;
    scroll-snap-align: start;
}

.slider-controls {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: none;
    align-items: center;
    display: flex;
}

.slider-arrow {
    color: var(--default-dark);
    cursor: pointer;
    background-color: #0607060d;
    border: none;
    border-radius: 100px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    transition: opacity .7s;
    display: flex;
}

.slider-arrow svg {
    width: 18px;
    height: 18px;
}

.slider-arrow:hover:not(:disabled) {
    opacity: .7;
}

.slider-arrow:disabled {
    cursor: default;
    opacity: .3;
}

.slider-arrow:focus-visible {
    outline: 2px solid var(--default-orange);
    outline-offset: 2px;
}

.slider-counter {
    color: var(--default-dark);
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.25px;
    line-height: 120%;
    font-variant-numeric: tabular-nums;
}

.slider-counter .is-total {
    opacity: .5;
}

/* Light-on-dark variant for Testimonials later: add .is-light to .slider */
.slider.is-light .slider-arrow {
    color: var(--body-light);
    background-color: #ffffff1a;
}

.slider.is-light .slider-counter {
    color: var(--body-light);
}

/* ==========================================================================
   5. CASE STUDY CARD
   The card sizes to its own content (title + full summary + tags + link) —
   no internal scroll. Requires the "is-fit" variant on the .slider wrapper
   in the HTML (same one Testimonials already uses): that makes the track
   height-to-content instead of clamped, so a taller card simply grows the
   whole panel, and the panel's own scroll (already in place for
   Testimonials) takes over if it doesn't fit the viewport.

   The image sits in a wrapper sized by aspect-ratio (matching the 1400x760
   source images, ~1.842:1) rather than a fixed pixel height. Since the
   wrapper's width is itself capped by .slide's min(700px, 88%), the wrapper
   scales proportionally at every breakpoint instead of jumping between
   fixed values — and its height can never exceed ~380px (700px / 1.842),
   with max-height as an explicit safety net. object-fit: cover fills the
   wrapper edge-to-edge like a true cover image (cropping instead of
   letterboxing), and always stays responsive to the card's width.
   ========================================================================== */
.case-card {
    background-color: var(--default-off-white);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.case-media {
    background-color: #0607060d;
    width: 100%;
    aspect-ratio: 1400 / 760;
    height: auto;
    max-height: 400px;
    flex: none;
    position: relative;
    overflow: hidden;
}

/* Fills the wrapper edge-to-edge, cropping as needed rather than
   letterboxing — this is what makes it behave like a cover image */
.case-media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: var(--img-pos, 50% 50%);
    position: absolute;
    inset: 0;
    -webkit-user-drag: none;
    user-select: none;
}

.case-content {
    grid-row-gap: 12px;
    row-gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    flex-flow: column;
    padding: 20px;
    display: flex;
}

.case-content>* {
    flex: none;
}

.case-title {
    color: var(--default-dark);
    margin: 0;
    font-family: 'Anton', sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 105%;
    letter-spacing: -.5px;
    text-transform: uppercase;
}

/* Full summary always visible — no line-clamp/ellipsis. .case-content's
   overflow-y: auto above is the safety net for unusually long copy. */
.case-summary {
    color: var(--body-dark);
    margin: 0;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    line-height: 140%;
}

/* Pushed to the bottom of the card so every "View live site" lines up
   across slides, whatever the title/summary length */
.case-link {
    color: var(--default-orange);
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    align-self: flex-start;
    align-items: center;
    margin-top: auto;
    padding: 2px 0;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity .7s;
    display: inline-flex;
}

.case-link svg {
    width: 14px;
    height: 14px;
    transition: transform .3s var(--screen-ease);
}

.case-link:hover {
    opacity: .7;
}

.case-link:hover svg {
    transform: translate(2px, -2px);
}

.case-link:focus-visible {
    outline: 2px solid var(--default-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================================================================
   6. TESTIMONIAL CARD
   Sits on the dark Testimonials panel, so it uses the light frosted glass
   (same family as .coming-soon-pill / the "16+" badge) and the slider's
   .is-light variant for arrows + counter.

   .slider.is-fit: slides size to their content instead of filling the panel.
   All slides still match the tallest one (the track stretches them), and the
   profile row is pinned to the bottom so it lines up across slides. The
   arrows + counter are pinned to the bottom of the panel.
   ========================================================================== */
.slider.is-fit {
    flex: 1 1 auto;
}

.slider.is-fit .slider-track {
    flex: none;
    min-height: 0;
    max-height: none;
}

/* Slides hug their content at the top; arrows + counter sit at the bottom of the panel */
.slider.is-fit .slider-controls {
    margin-top: auto;
}

.testimonial-card {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: #ffffff0d;
    border: 1px solid #ffffff1a;
    border-radius: 8px;
    grid-row-gap: 24px;
    row-gap: 24px;
    flex-flow: column;
    align-items: flex-start;
    padding: 32px;
    display: flex;
}

/* Bold, solid, and much larger than body text */
.quote-icon {
    color: var(--default-orange);
    flex: none;
    width: 56px;
    height: 40px;
    display: block;
}

.testimonial-text {
    color: var(--body-light);
    margin: 0;
    font-family: Outfit, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 145%;
    letter-spacing: -.1px;
}

.testimonial-text p {
    margin: 0;
}

/* Avatar + two stacked text lines, left-aligned, 8px between */
.profile {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    display: flex;
}

.profile-avatar {
    border: 1px solid var(--default-light);
    border-radius: 100px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
    overflow: hidden;
}

.profile-info {
    grid-row-gap: 2px;
    row-gap: 2px;
    flex-flow: column;
    min-width: 0;
    display: flex;
}

/* Outfit, sentence case, responsive size (not Anton, not uppercase) */
.profile-name {
    color: var(--heading-light);
    margin: 0;
    font-family: Outfit, sans-serif;
    font-size: clamp(16px, .6vw + 13px, 20px);
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -.25px;
    text-transform: none;
}

/* Deeper (more muted) than the name */
.profile-role {
    color: #f7f3ee99;
    margin: 0;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
}

/* ==========================================================================
   7. RESPONSIVE
   Note: .case-media no longer needs a --media-height override per
   breakpoint — its aspect-ratio scales it automatically with the card's
   width at every size.
   ========================================================================== */

/* 1440px and up: title steps up with .metric-number */
@media screen and (min-width: 1440px) {
    .section-title {
        font-size: 40px;
    }
}

/* Desktop and up: a little more type now that the card is large */
@media screen and (min-width: 992px) {
    .case-title {
        font-size: 28px;
    }

    .case-summary {
        font-size: 15px;
    }
}

/* Short laptop screens: tighten the card so the image keeps its share */
@media screen and (max-height: 760px) and (min-width: 768px) {
    .slider-track {
        min-height: 520px;
    }

    .case-content {
        grid-row-gap: 8px;
        row-gap: 8px;
        padding: 16px;
    }

    .case-title {
        font-size: 24px;
    }
}

/* Tablet */
@media screen and (max-width: 991px) {
    .hero-screen.is-section {
        padding: 24px;
    }

    .hero-screen.is-section .screen-close-btn {
        top: 24px;
        right: 24px;
    }

    .testimonial-card {
        padding: 28px;
    }

    .testimonial-text {
        font-size: 18px;
    }
}

/* Mobile landscape and below */
@media screen and (max-width: 767px) {
    .hero-screen.is-section {
        grid-row-gap: 20px;
        row-gap: 20px;
        /* extra bottom room so the slider arrows never sit against the edge
       (or under a phone browser's toolbar / home indicator) */
        padding: 16px 16px calc(48px + env(safe-area-inset-bottom, 0px));
    }

    .hero-screen.is-section .screen-close-btn {
        top: 16px;
        right: 16px;
    }

    /* On a phone the card is narrow, so the content needs more vertical room
     than on desktop; the track's minimum grows to match and the panel
     scrolls if the screen is shorter than that. */
    .slider-track {
        min-height: 600px;
        max-height: 640px;
    }

    .slide {
        flex-basis: 88%;
    }

    .case-content {
        grid-row-gap: 10px;
        row-gap: 10px;
        padding: 16px;
    }

    .case-title {
        font-size: 22px;
    }

    .slider-controls {
        justify-content: flex-start;
    }

    .testimonial-card {
        grid-row-gap: 20px;
        row-gap: 20px;
        padding: 20px;
    }

    .quote-icon {
        width: 48px;
        height: 34px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .profile-avatar {
        width: 44px;
        height: 44px;
    }
}

/* Mobile portrait */
@media screen and (max-width: 479px) {
    .section-title {
        font-size: 30px;
    }

    .slider-track {
        min-height: 600px;
    }
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    .slider-arrow,
    .case-link,
    .case-link svg {
        transition: none;
    }

    .case-link:hover svg {
        transform: none;
    }
}

/* ==========================================================================
   9. NOISE OVERLAY
   Sits above every screen (hero / highlights / testimonials) as a single
   fixed layer — cheap SVG feTurbulence grain, no image request.

   mix-blend-mode: overlay is what makes this work across both the light
   (Project Highlights) and dark (hero, Testimonials) sections without any
   per-section tuning: it darkens the grain speckles against light
   backgrounds and lightens them against dark ones, so the grain reads at a
   consistent strength everywhere instead of looking too strong on white and
   nearly invisible on dark.

   Markup: add a single empty element as the last child of .wec-hero-wrap
   (after the screens, before it closes) —
       <div class="noise-overlay" aria-hidden="true"></div>
   It needs no content and is excluded from the accessibility tree.
   ========================================================================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: .50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}