/* ============================================================
   BEINC — Insight Detail Page — View More Insights (Section CSS)
   Adapted variant of insights-section. Differences:
   - Order swap: text container LEFT, cards carousel RIGHT
   - Text contains heading + CTA only (no body paragraph)
   - Heading is bigger and intentionally wraps to 2 lines
   - "View All" CTA is left-aligned on every breakpoint
   - Tablet: heading + button row (centered) above carousel,
     dashed top + bottom around the row
   - Mobile: same as tablet

   Reuses the .insight-card styles from insights-section.css —
   no need to redefine the card.

   Depends on: global.css, insights-section.css
   ============================================================ */


.idp-view-more {
    background: var(--color-black2);
    color: var(--color-white);
    padding: var(--space-9) 0;
    position: relative;
}

/* Dashed top/bottom rails — same pattern as insights-section */
.idp-view-more__dash-top,
.idp-view-more__dash-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1;
    transform: scaleX(0);
    pointer-events: none;
}
.idp-view-more__dash-top {
    top: 0;
    border-top: var(--guide-border);
    transform-origin: left center;
}
.idp-view-more__dash-bottom {
    bottom: 0;
    border-bottom: var(--guide-border);
    transform-origin: right center;
}

/* Container: text LEFT, cards RIGHT (desktop) */
.idp-view-more__container {
    display: flex;
    align-items: center;
    padding: 0 var(--pad-x);
    margin: 0 auto;
}


/* ── Text block (desktop: LEFT) ── */
.idp-view-more__text {
    flex: 0 0 35%;
    min-width: 0;
    padding-right: var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Space-between: heading anchored to the top, CTA anchored to the bottom.
       align-self: stretch makes the column match the height of the cards
       carousel sibling so there's vertical room to push them apart. */
    justify-content: space-between;
    align-self: stretch;
    box-sizing: border-box;
}

.idp-view-more__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: var(--leading-none);
    color: var(--color-white);
    margin: 0;
}

.idp-view-more__cta {
    align-self: flex-start;
    display: inline-block;
    background: var(--color-white);
    color: var(--color-black2);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    transition: transform var(--duration-fast) var(--ease-primary);
}
.idp-view-more__cta:hover { transform: translateY(-2px); }


/* ── Cards viewport (desktop: RIGHT) ── */
.idp-view-more__cards-wrap {
    position: relative;
    flex: 0 0 65%;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
    cursor: grab;
    touch-action: pan-y;

    --cards-visible: 3;
    --cards-gap: 16px;
}
.idp-view-more__cards-wrap:active { cursor: grabbing; }

/* Edge fade gradients matching the dark bg */
.idp-view-more__cards-wrap::before,
.idp-view-more__cards-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    max-width: 120px;
    pointer-events: none;
    z-index: 2;
}
.idp-view-more__cards-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}
.idp-view-more__cards-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}

.idp-view-more__cards-track {
    display: flex;
    gap: var(--cards-gap);
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}


/* ============================================================
   TABLET + MOBILE (≤1023px)
   Heading + button form a centered row at the TOP, with dashed
   top + bottom rails directly framing that row. Cards carousel
   spans the full width below (still respecting global pad-x).
   ============================================================ */
@media (max-width: 1023px) {
    .idp-view-more {
        padding: 0;   /* the inner row provides its own vertical padding */
    }

    /* Hide the section-wide top/bottom rails — the row's own
       rails replace them at this breakpoint. */
    .idp-view-more__dash-top,
    .idp-view-more__dash-bottom { display: none; }

    .idp-view-more__container {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    /* Text row: full-width, centered, with its own dashed
       top + bottom rails. */
    .idp-view-more__text {
        order: 1;
        flex: 0 0 auto;
        padding: var(--space-9) var(--pad-x);
        align-items: center;
        text-align: center;
        gap: var(--space-5);
        position: relative;
    }
    .idp-view-more__text::before,
    .idp-view-more__text::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 0;
        border-top: var(--guide-border);
    }
    .idp-view-more__text::before { top: 0; }
    .idp-view-more__text::after { bottom: 0; }

    .idp-view-more__heading {
        font-size: clamp(2rem, 5.5vw, 3rem);
        text-align: center;
    }

    .idp-view-more__cta { align-self: center; }

    /* Cards row: below the text */
    .idp-view-more__cards-wrap {
        order: 2;
        flex: 0 0 auto;
        --cards-visible: 3;
        --cards-gap: 12px;
        margin-top: var(--space-9);
        margin-bottom: var(--space-9);
        padding: 0 var(--pad-x);
        box-sizing: border-box;
    }
    .idp-view-more__cards-wrap::before,
    .idp-view-more__cards-wrap::after { width: 12%; }
}


@media (max-width: 767px) {
    .idp-view-more__heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
    .idp-view-more__cards-wrap { --cards-visible: 2; }
}


/* ============================================================
   VIDEO SUPPORT inside .insight-card-image
   When an insight has a card-video, the binder sets the <video>
   src and the <img> below is auto-hidden by the binder's
   pair-handler. CSS positions the video to overlay the image so
   the card's media slot stays one consistent 4:3 frame.
   ============================================================ */
.insight-card-image {
    position: relative;
}

.insight-card-image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
}