/* ============================================================
   Connector Section
   ============================================================
   Layout
     Desktop : 3 cols (1fr 2fr 1fr) × 2 rows
     Tablet  : 2 cols (slightly wider left) × 2 rows + carousel
     Mobile  : 1 col × 4 rows + carousel

   Decorative dashed lines:
     - Horizontal lines are full-bleed (ignore --pad-x).
     - Vertical lines sit at column edges, fade at endpoints.

   The carousel (tablet + mobile) shows ONE card at a time and
   auto-cycles every 5s; clicking a chevron pins the new card
   for 10s before the auto-loop resumes.
   ============================================================ */


/* ── Section shell ─────────────────────────────────────────── */
.connector {
    position: relative;
    width: 100%;
    background: var(--color-white);
    color: var(--color-black2);
    padding: var(--pad-y) var(--pad-x);
    overflow: hidden;          /* contain vertical line fades */
    /* Sits above the brand-cube section's fixed canvas (z:2) on pages
       that host both. Mirrors our-story's z-index pattern. */
    z-index: 6;
    --connector-vline-extend: 24px; /* how far vlines pass below row 2 */
}


/* ── Inner container — provides positioning context ────────── */
.connector-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}


/* ── Grid (desktop default) ────────────────────────────────── */
.connector-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: var(--space-9);
    align-items: start;
}


/* ── Desktop top row cells ─────────────────────────────────── */
.connector-aster {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
}

.connector-aster svg {
    width: 22px;
    height: auto;
    display: block;
    transform-origin: 50% 50%;
    /* Continuous rotation is driven by GSAP (kicked off after the
       reveal cascade completes). The previous CSS keyframe animation
       fought with GSAP's inline transform during reveal — driving
       both the entrance spin AND the idle spin from GSAP avoids that. */
}

/* Center each asterisk between its adjacent vertical dashed line and
   the screen edge (not the column edge). Achieved by extending the
   asterisk container into the section's --pad-x via negative margin.
   Desktop: CW = col 1 (extend left), CCW = col 3 (extend right). */
.connector-aster--cw  { margin-left:  -2vw; }
.connector-aster--ccw { margin-right: -2vw; }


/* ── Heading (desktop top middle) ──────────────────────────── */
.connector-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    text-align: center;
    font-size: clamp(2rem, 3.2vw, 3rem);    /* 32 → 48px */
    margin: 0;
    padding: var(--space-7) var(--space-3) 0;
}

/* Heading line-break control — break point shifts per breakpoint */
.connector-heading .br-tablet  { display: none; }
.connector-heading .br-desktop { display: inline; }


/* ── Bottom row: CTA stack (desktop center col) ────────────── */
.connector-cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;       /* each button stays at its natural width */
    gap: var(--space-3);
    /* Vertically center the stack inside row 2 (overrides the grid's
       `align-items: start`) and horizontally center it in the middle
       column. */
    align-self: center;
    justify-self: center;
    padding: var(--space-7) 0;
}

.connector-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--duration-normal) var(--ease-primary),
        color var(--duration-normal) var(--ease-primary),
        border-color var(--duration-normal) var(--ease-primary);
    border: 1px dashed transparent;
    /* No min-width — let each button size to its own content so the
       primary (with brand-element SVGs on each side) naturally renders
       wider than the secondary (text-only). */
}

/* Primary — black2 fill, brand-element SVGs on each side */
.connector-btn--primary {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}

.connector-btn--primary .connector-btn-be {
    width: 32px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    /* The SVG bars are #1f1c1a; tint them to cream when not hovered */
    filter: brightness(0) invert(98%) sepia(8%) saturate(420%)
            hue-rotate(330deg) brightness(105%) contrast(98%);
    transition: filter var(--duration-normal) var(--ease-primary);
}

.connector-btn--primary:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
    border-style: dashed;
}

.connector-btn--primary:hover .connector-btn-be {
    /* invert tint to black2 on hover */
    filter: none;
}

/* Secondary — cream bg, dashed grey border */
.connector-btn--secondary {
    background: var(--color-white);
    color: var(--color-black2);
    border: 1px dashed var(--color-greyish);
}

.connector-btn--secondary:hover {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}


/* ── Cards ─────────────────────────────────────────────────── */
.connector-card {
    display: block;
    padding: 20px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-black2);
    /* Dashed grey-ish border on the default (transparent) state — fades
       out to transparent on hover so the dark fill takes over cleanly. */
    border: 1px dashed var(--color-greyish);
    transition:
        background-color var(--duration-fast) var(--ease-primary),
        color var(--duration-fast) var(--ease-primary),
        border-color var(--duration-fast) var(--ease-primary);
    cursor: pointer;
}

.connector-card:hover,
/* Inside the carousel (tablet/mobile): hovering ANY part of the
   viewport — chevron buttons or the card itself — keeps EVERY card
   in its dark-hover state. Apply to all slides (not just is-active)
   so the outgoing card doesn't visually reset to the light state
   while it's mid-transition during a swap. */
.connector-carousel-viewport:hover .connector-card {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}

.connector-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--color-black2);
    transition: color var(--duration-normal) var(--ease-primary);
}

.connector-card-eyebrow svg {
    width: 12px;
    height: auto;
    display: block;
}

/* Insight & Project marks ship with cream paths.
   Default state on cream background needs them in black2;
   on hover (card → black2) flip back to cream. */
.connector-card-eyebrow svg path {
    fill: var(--color-black2);
    transition: fill var(--duration-normal) var(--ease-primary);
}

.connector-card:hover .connector-card-eyebrow,
.connector-carousel-viewport:hover .connector-card .connector-card-eyebrow {
    color: var(--color-white);
}

.connector-card:hover .connector-card-eyebrow svg path,
.connector-carousel-viewport:hover .connector-card .connector-card-eyebrow svg path {
    fill: var(--color-white);
}

.connector-card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-size: clamp(18px, 1.6vw, 24px);
    margin: var(--space-2) 0 var(--space-5);
    color: inherit;
}

.connector-card-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-darkgreyish);
}


/* Desktop only: leave --pad-x of breathing room around each card so
   it doesn't touch the surrounding dashed lines (vertical OR horizontal).
   Use 2vw (matches --pad-x: 2% of the viewport) — a flat
   `var(--pad-x)` would resolve against the grid track instead of the
   viewport, giving a much smaller value. Tablet/mobile use the
   carousel so cards aren't direct grid items in those layouts. */
.connector-card--insight,
.connector-card--project {
    margin-top:    2vw;
    margin-bottom: 2vw;
}
.connector-card--insight { margin-right: 2vw; }
.connector-card--project { margin-left:  2vw; }


/* ── Decorative dashed lines (desktop) ─────────────────────── */
/*  Horizontal full-bleed (between rows + after row 2) */
.connector-hline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--color-greyish);
    pointer-events: none;
    z-index: 1;
}

/* Vertical lines between columns. Endpoint fades via mask. */
.connector-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--color-greyish);
    pointer-events: none;
    z-index: 1;
    /* Fade ~30px at top and bottom */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    );
}


/* ── Carousel — hidden on desktop ──────────────────────────── */
.connector-carousel { display: none; }


/* ============================================================
   TABLET  (768 – 1023)
   ============================================================
   Two cols, slightly wider left.
   Row 1 : [heading] [asterisk-CW]
   Row 2 : [buttons left-aligned, stacked] [carousel]
   ============================================================ */
@media (max-width: 1023px) {

    .connector {
        padding: var(--pad-y) var(--pad-x);
    }

    /* Hide one of the two desktop asterisks; keep CW one */
    .connector-aster--ccw { display: none; }

    .connector-grid {
        grid-template-columns: 1.15fr 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--space-7);
        row-gap: var(--space-9);
    }

    /* Explicit grid placement for tablet (HTML source order doesn't match) */
    .connector-heading       { grid-column: 1; grid-row: 1; }
    .connector-aster--cw     { grid-column: 2; grid-row: 1; }
    .connector-cta-stack     { grid-column: 1; grid-row: 2; }
    .connector-carousel      { grid-column: 2; grid-row: 2; }

    /* Heading: top-left, left-aligned. Smaller than desktop. */
    .connector-heading {
        text-align: left;
        padding: 0;
        font-size: clamp(1.5rem, 3.6vw, 2.25rem);   /* 24 → 36px */
    }
    .connector-heading .br-tablet  { display: inline; }
    .connector-heading .br-desktop { display: none; }

    .connector-aster {
        justify-content: center;
        align-items: center;
        min-height: 0;
    }
    .connector-aster svg { width: 26px; }
    /* Tablet: CW lives in col 2 (right). Reset desktop's left-shift,
       extend right instead so it centers between the dashed line and
       the viewport's right edge. */
    .connector-aster--cw  { margin-left: 0; margin-right: -4vw; }
    .connector-aster--ccw { margin-left: 0; margin-right: 0; }

    /* Bottom-left: CTA stack left-aligned, still vertically centered */
    .connector-cta-stack {
        align-items: flex-start;   /* tablet: left-align each button */
        justify-self: start;       /* tablet: left-align stack in col */
        align-self: center;        /* still vertically centered in row */
        padding: 0;
    }

    /* Bottom-right: carousel replaces the two cards */
    .connector-card--insight,
    .connector-card--project { display: none; }

    .connector-carousel {
        display: block;
        position: relative;
        /* --pad-x (= 4vw on tablet) of visible breathing room between
           the carousel and the surrounding dashed lines. The grid has
           a column-gap of --space-7 (36px) and row-gap of --space-9
           (60px); the dashed lines sit in the middle of those gaps,
           so half of each gap already contributes to the visual
           spacing — we subtract that to land exactly on 4vw total.
           Right side: 0 — already gets --pad-x from section padding. */
        margin-left:   calc(4vw - 18px);   /* 4vw minus half of column-gap */
        margin-top:    calc(4vw - 30px);   /* 4vw minus half of row-gap */
        margin-bottom: 4vw;
        /* No width:100% — let auto width shrink the box for margins. */
    }
    .connector-carousel-viewport {
        position: relative;
        width: 100%;
        /* No overflow:hidden — chevrons need to extend slightly past
           the viewport edges to sit centered in the card's padding. */
    }
    /* Slides stack in a grid cell (instead of display:block/none) so we
       can crossfade + slide between them. Only the active slide is
       interactive. JS controls the transform, CSS handles the fade.
       overflow:hidden on the TRACK clips slides as they translate off
       to their home side — the chevrons live above the track and are
       not affected. */
    .connector-carousel-track {
        position: relative;
        display: grid;
        overflow: hidden;
        border-radius: var(--radius);
        /* Browser handles vertical scrolling; JS handles horizontal swipes */
        touch-action: pan-y;
        cursor: grab;
        /* Disable text selection inside the track so drag gestures don't
           start a text-selection drag. */
        user-select: none;
        -webkit-user-select: none;
    }
    .connector-carousel-track.is-dragging {
        cursor: grabbing;
    }
    /* Suppress the native "drag a link / drag an image" gesture. Without
       this, dragging the card or its video triggers the browser's
       built-in drag-and-drop (showing a ghost preview), which fights
       the swipe handler and feels like you're grabbing the link. */
    .connector-carousel-track .connector-card,
    .connector-carousel-track img,
    .connector-carousel-track video {
        -webkit-user-drag: none;
        user-drag: none;
    }
    .connector-carousel-slide {
        grid-column: 1;
        grid-row: 1;
        pointer-events: none;
        will-change: transform;
        /* No opacity crossfade — slides stay fully visible while their
           transform pushes them in/out, so the swap reads as one card
           physically shoving the other off-screen. JS parks each slide
           at its off-screen home (slide 0 → left, slide 1 → right) when
           it isn't active. */
    }
    .connector-carousel-slide.is-active {
        pointer-events: auto;
    }
    .connector-carousel-slide .connector-card {
        margin: 0;
    }

    /* Chevron buttons (overlay, vertically centered against video) */
    .connector-carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: var(--color-white);
        border: 1px dashed var(--color-greyish);
        border-radius: var(--radius);
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
            background-color var(--duration-fast) var(--ease-primary);
        line-height: 0;
    }
    /* Center each chevron horizontally in the card's 20px padding zone
       (between the card's outer edge and the video's outer edge). The
       button is wider than the 20px gap so it extends slightly past
       both edges — matches the reference design. */
    .connector-carousel-nav--prev { left:  -7px; }
    .connector-carousel-nav--next { right: -7px; }

    .connector-carousel-nav img,
    .connector-carousel-nav svg {
        width: 12px;
        height: auto;
        display: block;
        transition: filter var(--duration-fast) var(--ease-primary);
    }
    .connector-carousel-nav--prev img,
    .connector-carousel-nav--prev svg {
        transform: rotate(180deg);
    }
    .connector-carousel-nav:hover {
        background: var(--color-black);
    }
    .connector-carousel-nav:hover img,
    .connector-carousel-nav:hover svg {
        filter: brightness(0) invert(98%) sepia(8%) saturate(420%)
                hue-rotate(330deg) brightness(105%) contrast(98%);
    }

    /* Progress bar — sits below the card, width = video width */
    .connector-carousel-progress {
        position: relative;
        margin-top: 6px;
        height: 3px;
        width: 100%;        /* JS overrides to video width */
        background: var(--color-greyish);
        border-radius: 1px;
        overflow: hidden;
    }
    .connector-carousel-progress-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: var(--color-black2);
        border-radius: 1px;
        transform-origin: left center;
        will-change: transform, left, width;
    }

    /* On tablet decorative lines simplify to: 1 horizontal between
       rows, 1 horizontal at section bottom, 1 vertical between cols */
}


/* ============================================================
   PHONE  (<= 767)
   ============================================================
   Single column, 4 stacked rows:
     1. Asterisk CW
     2. Heading
     3. Buttons (centered, vertically stacked)
     4. Carousel
   Row inner padding: 8% horizontal.
   ============================================================ */
@media (max-width: 767px) {

    .connector {
        padding: var(--pad-y) 0;
    }

    .connector-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Reset desktop's row-gap (60px) — mobile uses individual
           item margins for vertical spacing instead. */
        gap: 0;
    }

    /* Visual stacking order on mobile: aster → heading → buttons → carousel */
    .connector-aster--cw   { order: 1; }
    .connector-heading     { order: 2; }
    .connector-cta-stack   { order: 3; }
    .connector-carousel    { order: 4; }

    .connector-row {
        padding: 0 8%;
    }

    /* Mobile rows all use the same padding so each row's content has
       8% breathing room from every adjacent dashed line. Rows touch
       (no margin) — the dashed lines are drawn at the row boundaries
       and the padding-top/bottom on each row creates the visible gap.
       Horizontal padding = 16% so content sits 8% inside the vlines
       (which are at 8% from screen edges). */

    /* Reorder: asterisk first */
    .connector-aster {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8% 16%;
        min-height: 0;
        margin-bottom: 0;
    }
    .connector-aster svg { width: 28px; }
    .connector-aster--ccw { display: none; }
    /* Mobile: asterisk is full-width row, no dashed line beside it —
       no negative margin needed. Reset any inherited shifts. */
    .connector-aster--cw { margin-left: 0; margin-right: 0; }

    .connector-heading {
        text-align: center;
        padding: 8% 16%;
        font-size: clamp(1.5rem, 6.4vw, 2rem);   /* 24 → 32px (smaller for mobile) */
        margin-bottom: 0;
    }

    .connector-cta-stack {
        align-items: center;          /* horizontally center each button */
        justify-content: center;      /* vertically center buttons in container */
        margin-left: auto;
        margin-right: auto;
        padding: 16% 16%;             /* doubled top/bottom for extra breathing room */
        margin-bottom: 0;
    }
    .connector-btn {
        width: auto;
    }

    /* Carousel uses the same structure as tablet */
    .connector-card--insight,
    .connector-card--project { display: none; }

    .connector-carousel {
        display: block;
        /* 8% (= 2× --pad-x on mobile) of breathing room around the card.
           Horizontal 16% = 8% row inset + 8% gap from the vline. Vertical
           8% creates the gap from hMid (above) and hEnd (below). The JS
           anchors hMid/hEnd to the card itself with the same 8% offset. */
        padding: 8% 16%;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .connector-carousel-viewport {
        position: relative;
        width: 100%;
        /* No overflow:hidden — chevrons need to extend slightly past
           the viewport edges to sit centered in the card's padding. */
    }
    /* Slide stacking + crossfade rules inherited from the tablet
       @media block above (max-width: 1023 covers mobile too). */

    .connector-carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: var(--color-white);
        border: 1px dashed var(--color-greyish);
        border-radius: var(--radius);
        padding: 4px 10px;
        display: inline-flex;
        cursor: pointer;
        line-height: 0;
        transition: background-color var(--duration-fast) var(--ease-primary);
    }
    /* Centered in the card's 20px padding zone (between card outer edge
       and video outer edge). Identical to tablet now that the carousel
       has its own padding — the viewport's edges line up with the
       card's edges, so a flat -7px offset gives correct positioning. */
    .connector-carousel-nav--prev { left:  -7px; }
    .connector-carousel-nav--next { right: -7px; }
    .connector-carousel-nav svg {
        width: 12px; height: auto; display: block;
        transition: filter var(--duration-fast) var(--ease-primary);
    }
    .connector-carousel-nav--prev svg { transform: rotate(180deg); }
    .connector-carousel-nav:hover { background: var(--color-black); }
    .connector-carousel-nav:hover img,
    .connector-carousel-nav:hover svg {
        filter: brightness(0) invert(98%) sepia(8%) saturate(420%)
                hue-rotate(330deg) brightness(105%) contrast(98%);
    }

    .connector-carousel-progress {
        position: relative;
        margin-top: 6px;
        height: 3px;
        width: 100%;
        background: var(--color-greyish);
        border-radius: 1px;
        overflow: hidden;
    }
    /* Smaller eyebrow text + slightly smaller mark icon on mobile only */
    .connector-card-eyebrow {
        font-size: 13px;
    }
    .connector-card-eyebrow svg {
        width: 10px;
    }

    .connector-carousel-progress-fill {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        width: 100%;
        background: var(--color-black2);
        border-radius: 1px;
        transform-origin: left center;
        will-change: transform, left, width;
    }
}


/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .connector-aster svg { animation: none; }
}