/* ============================================================
   BEINC — Get The Order Right (Section CSS)

   Two stacked subsections that share the --gtor-* token scope:
     1) .gtor-business — horse-collision sticky/scroll choreography
        (desktop pin + scroll-driven crossfade; mobile CSS-sticky
        with a measured collision range)
     2) .gtor-believe  — "What We Believe" 4-up grid on desktop /
        2x2 on tablet / swipeable carousel on mobile

   Depends on: global.css
   ============================================================ */

:root {
    /* Typography — clamps that hit the desktop targets */
    --gtor-h-size:        clamp(28px, 3.2vw, 40px);   /* main heading + What We Believe */
    --gtor-sub-size:      clamp(20px, 2vw, 26px);     /* horse subheadings */
    --gtor-card-h-size:   clamp(18px, 1.8vw, 24px);   /* What We Believe card titles */

    /* Layout */
    --gtor-right-pad:     40px;       /* internal padding on right column TEXT only */
    --gtor-img-radius:    var(--radius);

    /* Image height — one token reused by bad-img, good-img, AND bad-track min-height.
       Single source of truth so the diagonal math can never go out of sync. */
    --gtor-img-h: clamp(280px, 28vw, 373px);

    /* Diagonal: vertical offset between bad-horse top and good-horse top.
       Set equal to --gtor-img-h so good-horse-top sits exactly at bad-horse-bottom in phase 1
       — i.e. the two images are stacked diagonally with no gap and no overlap.
       Naturally scales at every viewport because it inherits from the same image-height token. */
    --gtor-diagonal-offset: var(--gtor-img-h);

    /* What We Believe */
    --gtor-wb-grid-gap:   var(--space-8);

    /* Mobile carousel */
    --gtor-car-row-h:     180px;
    --gtor-car-fade:      80px;
    --gtor-car-dot:       5px;
}


/* ============================================================
   Reveal-on-entry — opacity + slight Y-shift, animates in when
   section enters viewport. [data-reveal-static] is opacity-only
   (for elements whose transform is JS-controlled).
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-static] {
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-static].is-revealed {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal-static] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   BUSINESS ORDER SECTION — Desktop
   ============================================================ */
.gtor-business {
    position: relative;
    background: var(--color-white);
    padding: 0 var(--pad-x) 10vh;   /* 10vh bottom — pairs with .gtor-believe 10vh top (20vh gap) */
}

.gtor-business__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: stretch;     /* right col stretches to match left col height */
    gap: 0;
}

/* ── Left col ── */
.gtor-business__col--left {
    position: relative;
    display: block;
    /* Padding-bottom extends the col below the sticky group, creating the scroll
       travel. The taller this is, the longer the sticky group stays pinned and
       the lower in the right col the good horse sits at section start. */
    padding-bottom: 80vh;
}

/* Sticky group — heading + bad horse stick TOGETHER at viewport top.
   GSAP ScrollTrigger handles the actual pinning (CSS sticky behaviour was
   inconsistent inside the section's containing-block chain). */
.gtor-business__sticky {
    position: relative;
}

.gtor-business__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--gtor-h-size);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    margin-bottom: var(--space-7);
}

/* Scrollable space the bad horse travels through inside left col.
   Height = bad-img height (= var(--gtor-img-h)). The diagonal travel space
   is provided by .gtor-business__col--left { padding-bottom }, not here. */
.gtor-business__bad-track {
    position: relative;
    flex: 1;
    min-height: var(--gtor-img-h);
}

.gtor-business__img {
    width: 100%;
    border-radius: var(--gtor-img-radius);
    overflow: hidden;
    position: relative;
    display: block;
}

.gtor-business__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* scale slightly so blur's transparent fade falls past the wrapper's
       overflow:hidden clip — kills the white halo at the edges */
    transform: scale(1.06);
    transition: filter 0.15s linear;
}

/* Depixelate-reveal layer — canvas overlaid on each horse image, used to
   render pixel-block frames during the depixelate / pixelate animations. */
.gtor-business__img .depix-cv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    display: none;
    opacity: 0;
}

.gtor-business__img--bad {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--gtor-img-h);
    will-change: transform, border-radius;
}

.gtor-business__img--good {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;               /* anchor to bottom of right col so it aligns with bad-horse end position */
    width: 100%;
    height: var(--gtor-img-h);
    will-change: filter, border-radius;
}

/* Phase 1 default filter states. Good starts partially desaturated AND
   blurred — comes into focus + colour as the bad horse approaches.
   Bad starts clear and sharp. JS scroll listener overwrites these via
   inline `filter` once the user scrolls into the section. */
.gtor-business__img--good img {
    filter: grayscale(50%) blur(6px);
}

.gtor-business__img--bad img {
    filter: grayscale(0%) blur(0px);
}

/* ── Right col ── */
.gtor-business__col--right {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Ghost heading: invisible duplicate of the left-col heading inside the right col.
   Its only job is to claim the same vertical space at the top of the right col so
   that body text starts at exactly the same y as the bad-horse image. */
.gtor-business__heading--ghost {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

/* Body copy (top of right col, padded internally) */
.gtor-business__body {
    padding: 0 var(--gtor-right-pad);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-black2);
    max-width: 70ch;
    will-change: transform, opacity;
}

/* Subheading row (Don't place + chevron + The cart goes).
   Position absolute so its NATURAL position is "just above the good horse with
   --space-7 gap" — that's the phase-2 resting place. During the pin, the JS
   scroll listener animates translateY so the row STARTS visually at vp_y =
   bad-horse-bottom and slides up over the pin, landing exactly on its natural
   position when the pin releases. */
.gtor-business__subrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--gtor-img-h) + var(--space-7));
    padding: 0 var(--gtor-right-pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    will-change: transform;
}

.gtor-business__sub {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--gtor-sub-size);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
}

.gtor-business__chevron {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gtor-business__chevron svg {
    width: 14px;
    height: auto;
    opacity: 0;          /* hidden in phase 1 — paintStagger() fades each one in */
    transform: translateY(var(--stg-y, 0)) scale(var(--stg-s, 1));
    will-change: opacity, transform;
}

.gtor-business__sub--second {
    opacity: 0;          /* hidden in phase 1 */
    transform: translateY(var(--stg-y, 4px)) scale(var(--stg-s, 1));
    will-change: opacity, transform;
}

/* Mobile-only elements are hidden on desktop */
.gtor-business__chevron--mobile,
.gtor-business__sub--mobile { display: none; }


/* ============================================================
   BUSINESS ORDER — Tablet (768–1023)
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --gtor-h-size:    clamp(24px, 3.5vw, 32px);
        --gtor-sub-size:  clamp(15px, 1.8vw, 20px);
        --gtor-right-pad: 24px;
        --gtor-img-h:     clamp(200px, 28vw, 260px);
    }
    .gtor-business__heading { margin-bottom: var(--space-6); }
    .gtor-business__subrow {
        gap: var(--space-3);
        margin-top: var(--space-6);
    }
    .gtor-business__chevron svg { width: 12px; }
}


/* ============================================================
   BUSINESS ORDER — Mobile (≤767)
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --gtor-h-size:    clamp(28px, 8.5vw, 38px);
        --gtor-sub-size:  clamp(13px, 3.7vw, 18px);
    }

    /* Layout shifts to vertical: title → body → row(bad horse + sub) → row(chev)
       → row(good horse + sub2). Cols become a flex column; cols use display:contents
       so all visible blocks become direct flex children that can be reordered with
       `order`. No flex `gap` — gap would create unwanted space between bad-wrap
       and good-row that breaks the touch alignment. Use per-element margins. */
    .gtor-business__cols {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .gtor-business__col--left,
    .gtor-business__col--right {
        display: contents;
    }

    .gtor-business__col--left { padding-bottom: 0; }

    /* Mobile: sticky wrapper flattens out so heading + bad-wrap participate in
       the cols flex layout via `order`. Mobile sticky behaviour lives on
       .gtor-m-row--bad inside bad-wrap. */
    .gtor-business__sticky { display: contents; }

    .gtor-business__heading--ghost { display: none; }

    .gtor-business__heading        { order: 1; }
    .gtor-business__body           { order: 2; }
    .gtor-business__bad-wrap       { order: 3; }
    .gtor-m-row--good              { order: 4; }

    /* Wrapper that sets bad-row's sticky scroll travel.
       Height = bad-row height + travel. */
    .gtor-business__bad-wrap {
        position: relative;
        height: calc(60vh + 60vw * 0.6);   /* travel (60vh) + bad-img height (60% of 60vw) */
    }

    .gtor-m-row--bad {
        position: sticky;
        /* Engages when the bad-row is vertically centered on the screen.
           Row height ≈ bad-img height (60vw × 60% = 36vw). Half = 18vw.
           Sticky top = 50vh − half-row-height keeps the row centered while pinned. */
        top: calc(50vh - 18vw);
        z-index: 2;
        background: var(--color-white);
    }

    /* Right text column inside each m-row — `position: relative` so the
       chev can be absolutely-positioned at the bottom. */
    .gtor-m-row__text {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Good-row text col: sub2 aligns its BOTTOM with the bottom of the good
       horse image and reads LEFT-aligned. */
    .gtor-m-row--good .gtor-m-row__text {
        justify-content: flex-end;
    }
    .gtor-m-row--good .gtor-business__sub--mobile {
        text-align: left;
        align-self: flex-start;
    }

    .gtor-m-row__text .gtor-business__sub {
        margin-top: 0;
    }

    .gtor-business__heading {
        margin-bottom: var(--space-4);
    }

    .gtor-business__body {
        padding: 0;
        margin-bottom: var(--space-5);
    }

    /* No margin between bad-wrap and good-row — touch must be exact */
    .gtor-m-row--good {
        margin-top: 0;
    }

    .gtor-business__bad-track {
        min-height: 0;
    }

    /* Mobile rows wrapping each horse */
    .gtor-m-row {
        display: grid;
        grid-template-columns: 60vw 1fr;
        align-items: stretch;
        gap: var(--space-4);
        width: 100%;
    }

    .gtor-business__img--bad {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 0;
        padding-bottom: 60%;
        will-change: transform, border-radius;
    }

    .gtor-business__img--bad img,
    .gtor-business__img--good img {
        position: absolute;
        inset: 0;
    }

    .gtor-business__img--good {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 60%;
        margin-top: 0;
    }

    .gtor-business__sub--first,
    .gtor-business__sub--second {
        align-self: center;
    }

    /* Hide desktop subrow / show mobile chevron stack + mobile subs */
    .gtor-business__subrow { display: none; }

    .gtor-business__sub--mobile { display: block; }

    .gtor-business__chevron--mobile {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .gtor-business__chevron--mobile svg {
        display: block;
        width: 12px;
        height: 8px;
        transform: translateY(var(--stg-y, 0)) scale(var(--stg-s, 1)) rotate(90deg);
        transform-origin: center;
        overflow: visible;
        opacity: 0;
        will-change: opacity, transform;
    }

    .gtor-business__sub--second {
        opacity: 0;
        transform: translateY(var(--stg-y, 4px)) scale(var(--stg-s, 1));
    }
}


/* ============================================================
   WHAT WE BELIEVE SECTION — Desktop
   ============================================================ */
.gtor-believe {
    background: var(--color-white);
    color: var(--color-black2);
    padding: 10vh var(--pad-x) 0;   /* 10vh top — pairs with .gtor-business 10vh bottom (20vh gap) */
    position: relative;
}

.gtor-believe__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--gtor-h-size);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    margin-bottom: var(--space-7);
}

/* Dashed line — full screen width, ignores horizontal padding */
.gtor-believe__divider {
    border: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    margin: 0 calc(var(--pad-x) * -1) var(--space-9);
    height: 0;
}

.gtor-believe__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gtor-wb-grid-gap);
}

.gtor-believe__card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--gtor-card-h-size);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    margin-bottom: var(--space-4);
}

.gtor-believe__card-body {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-black2);
}


/* ============================================================
   WHAT WE BELIEVE — Tablet (2×2)
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
    .gtor-believe__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-9) var(--space-8);
    }
    .gtor-believe__heading { margin-bottom: var(--space-6); }
}


/* ============================================================
   WHAT WE BELIEVE — Mobile (carousel)
   ============================================================ */
@media (max-width: 767px) {
    .gtor-believe {
        padding: 10vh 0 15vh;   /* 15vh bottom on mobile only */
    }

    .gtor-believe__heading {
        padding: 0 var(--pad-x);
        text-align: center;
        font-size: clamp(28px, 8vw, 36px);
        margin-bottom: var(--space-6);
    }

    .gtor-believe__divider {
        display: none;
    }

    .gtor-believe__grid {
        display: none;
    }

    /* Carousel — full bleed row, top + bottom DASHED strokes, no padding */
    .gtor-carousel {
        position: relative;
        width: 100%;
        border-top: 1px dashed var(--color-greyish);
        border-bottom: 1px dashed var(--color-greyish);
        background: var(--color-white);
        overflow: hidden;
    }

    .gtor-carousel__viewport {
        position: relative;
        width: 100%;
        height: var(--gtor-car-row-h);
        overflow: hidden;
        touch-action: pan-y;
    }

    .gtor-carousel__track {
        display: flex;
        width: 100%;
        height: 100%;
        will-change: transform;
        transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .gtor-carousel__slide {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 var(--pad-x);
    }

    /* Slide content centered AND constrained to 70vw — slide container itself
       stays 100% wide (so swipe transitions still work), title and body never
       exceed 70vw, leaving 15vw breathing room on each side. */
    .gtor-carousel__slide-title {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-medium);
        font-size: var(--gtor-card-h-size);
        letter-spacing: var(--tracking-tight);
        line-height: var(--leading-tight);
        color: var(--color-black2);
        margin-bottom: var(--space-3);
        max-width: 70vw;
    }

    .gtor-carousel__slide-body {
        font-family: var(--font-body);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-body);
        line-height: var(--leading-relaxed);
        color: var(--color-black2);
        max-width: 70vw;
    }

    /* Side cream gradients (above the slides) */
    .gtor-carousel__fade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--gtor-car-fade);
        pointer-events: none;
        z-index: 2;
    }
    .gtor-carousel__fade--left {
        left: 0;
        background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
    }
    .gtor-carousel__fade--right {
        right: 0;
        background: linear-gradient(to left, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
    }

    /* Chevron buttons inside row, above gradients */
    .gtor-carousel__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .gtor-carousel__nav svg {
        width: 18px;
        height: auto;
    }
    .gtor-carousel__nav--prev {
        left: var(--space-4);
    }
    .gtor-carousel__nav--prev svg {
        transform: rotate(180deg);
    }
    .gtor-carousel__nav--next {
        right: var(--space-4);
    }

    /* Pagination */
    .gtor-carousel__dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: center;
        padding: var(--space-5) 0 var(--space-3);
        background: var(--color-white);
    }

    .gtor-carousel__dot {
        width: var(--gtor-car-dot);
        height: var(--gtor-car-dot);
        border-radius: 0.7px;
        background: var(--color-greyish);
        transition: background 0.25s ease, transform 0.25s ease;
        transform-origin: center;
    }

    .gtor-carousel__dot.is-active {
        background: var(--color-black2);
        animation: gtorDotPulse 5s ease-in-out infinite;
    }
}

@keyframes gtorDotPulse {
    0%   { transform: scale(1); }
    18%  { transform: scale(1.45); }
    36%  { transform: scale(0.85); }
    58%  { transform: scale(1.25); }
    80%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}


/* ============================================================
   Reduced motion — disable scroll-driven anims
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gtor-business__img--bad,
    .gtor-business__img--good,
    .gtor-business__body,
    .gtor-business__subrow,
    .gtor-business__chevron,
    .gtor-business__sub--second {
        transition: none !important;
        animation: none !important;
    }
}