/* ============================================================
   BEINC — Policy Page Connector (Section CSS — overrides only)
   Inverts the connector's color scheme so it sits on the policy
   page's black2 background. Geometry, layout, decorative dashed
   lines, button shapes, asterisks, carousel, motion — all stay
   identical to the source /previews/preview-connector-section.

   Two structural deltas vs. the base connector:
   1) Adds a TOP horizontal dashed line at y=0 of the section, so
      the policy frame's edge verticals dock cleanly against it.
   2) Inverts every fill / text color so the section reads on a
      dark page background.

   Depends on: connector-section.css
   ============================================================ */


/* ── Section shell ── */
.connector--policy {
    background: var(--color-black2);
    color: var(--color-white);
}


/* ── Top horizontal dashed line ──
   The base connector hides hTop on desktop & tablet via inline
   `style.display = 'none'` from connector-section.js. External
   CSS with `!important` outranks inline non-important styles, so
   these rules win without needing to touch the JS. */
.connector--policy .connector-hline--top {
    display: block !important;
    top: 0 !important;
}


/* ── All decorative dashed lines on this section use --color-grid
   so the policy page reads as one continuous dashed system from
   the hero down to the connector. Base CSS uses --color-greyish;
   override the BORDER-COLOUR side specifically (the dashed style
   and width are still inherited from the base shorthand).
   Cards, secondary button, primary button hover, and carousel
   chevron buttons all carry the same dashed-grey border in the
   base — flip every one of them to grid for visual consistency. */
.connector--policy .connector-hline           { border-top-color: var(--color-grid); }
.connector--policy .connector-vline           { border-left-color: var(--color-grid); }
.connector--policy .connector-card            { border-color: var(--color-grid); }
.connector--policy .connector-btn--secondary  { border-color: var(--color-grid); }
.connector--policy .connector-btn--primary:hover { border-color: var(--color-grid); }
.connector--policy .connector-carousel-nav    { border-color: var(--color-grid); }


/* ── Heading ── */
.connector--policy .connector-heading {
    color: var(--color-white);
}


/* ── Cards (insight + project, desktop) ──
   Base card uses dashed greyish border on transparent bg. On
   black2 page that already reads correctly, so we only need to
   flip the hover state. */
.connector--policy .connector-card {
    color: var(--color-white);
}

.connector--policy .connector-card-eyebrow {
    color: var(--color-white);
}
.connector--policy .connector-card-eyebrow svg path {
    fill: var(--color-white);
}

.connector--policy .connector-card:hover,
.connector--policy .connector-carousel-viewport:hover .connector-card {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: transparent;
}

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

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


/* ── Buttons ── */
/* Primary — was black2 fill / cream text. Inverted: cream fill / black2 text. */
.connector--policy .connector-btn--primary {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: transparent;
}

/* Brand-element SVGs are #1f1c1a; on cream bg leave them untinted. */
.connector--policy .connector-btn--primary .connector-btn-be {
    filter: none;
}

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

/* Tint to cream when the button flips to black2 on hover. */
.connector--policy .connector-btn--primary:hover .connector-btn-be {
    filter: brightness(0) invert(98%) sepia(8%) saturate(420%)
            hue-rotate(330deg) brightness(105%) contrast(98%);
}

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

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


/* ── Brand-element icon — stabilize sizing ──
   The base `.connector-btn-be` has `width: 32px; height: auto`. The
   intrinsic aspect ratio of the SVG (278.05 ÷ 128.4 from its viewBox)
   isn't known until the browser fetches + parses the SVG header,
   which races initial paint. The button's height briefly snaps from
   "icon=0px" to "icon=~15px" once the SVG settles, growing the CTA
   stack by a couple of pixels and bumping the carousel below it.
   Declaring aspect-ratio reserves the icon's vertical space from
   the very first frame and stops the visible jump. */
.connector--policy .connector-btn-be {
    aspect-ratio: 278.05 / 128.4;
}


/* ── Mobile: lock carousel track height ──
   On mobile, the carousel-track is `display: grid` with both slides
   stacked in the same cell. Cell height = max slide height, but the
   slide measures depend on font metrics + video metadata, which
   settle asynchronously after first paint. While they settle, the
   cell can briefly compute a shorter height and the carousel's top
   edge visually overlaps the CTA stack above it.

   Card height on mobile is deterministic: card padding (20px) +
   eyebrow (~16px) + title margin + title (~24px wrapped) + video
   (16:9 of (vw - 2*16% - 2*20px)) + card padding (20px). At
   375px viewport that's ~252px. Setting min-height to 240px gives
   a stable floor below the natural height — slightly lower than
   the natural max so it doesn't force-grow taller cards, but high
   enough that the brief pre-settle measurement can't collapse the
   row. */
@media (max-width: 767px) {
    .connector--policy .connector-carousel-track {
        min-height: 240px;
    }
}


/* ── Carousel chevrons (tablet / mobile) ──
   Match the inverted button palette so the chevron buttons stay
   visible on the dark page bg. */
.connector--policy .connector-carousel-nav {
    background: var(--color-white);
}

.connector--policy .connector-carousel-nav:hover {
    background: var(--color-greyish);
}

.connector--policy .connector-carousel-nav:hover img,
.connector--policy .connector-carousel-nav:hover svg {
    /* Override base behaviour: keep the chevron icon dark on the
       cream-grey hover state instead of tinting it back to cream. */
    filter: none;
}


/* ── Carousel progress bar ── */
.connector--policy .connector-carousel-progress {
    background: var(--color-darkgreyish);
}
.connector--policy .connector-carousel-progress-fill {
    background: var(--color-white);
}