/* ==========================================================================
   /insights-v2 — redesigned "Insights" mosaic and "Insights & Stories".

   Only these two sections are new; the rest of the page keeps the inline
   styles inherited from /insights. Every selector is scoped to .iv2-*, and
   component rules never rely on bare element selectors, so nothing here can
   reach the rest of the page and the page's own global CSS cannot outrank
   these by accident.
   ========================================================================== */

.iv2-mosaic,
.iv2-stories {
    --iv2-ink: #232e33;
    --iv2-muted: #6e767a;
    --iv2-dark: #151c1f;
    --iv2-light: #f3f5f5;
    --iv2-dim: #bcbfc1;
    --iv2-accent: #b0e5ec;
    --iv2-teal: #00acc1;
    --iv2-font: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
}

.iv2-mosaic *,
.iv2-stories * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   "Insights" mosaic
   -------------------------------------------------------------------------- */

.iv2-mosaic {
    padding: 24px 0;
    background: #fff;
    font-family: var(--iv2-font);
}

.iv2-mosaic .iv2-mosaic__inner {
    display: grid;
    grid-template-columns: minmax(0, 732fr) minmax(0, 334fr);
    gap: 16px;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 54px;
}

.iv2-mosaic .iv2-mosaic__head {
    margin-bottom: 32px;
}

.iv2-mosaic .iv2-mosaic__title {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--iv2-ink);
}

.iv2-mosaic .iv2-mosaic__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--iv2-ink);
}

.iv2-mosaic .iv2-mosaic__more {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #d7dcde;
    border-radius: 4px;
    font-size: 14px;
    color: var(--iv2-ink);
    text-decoration: none;
    white-space: nowrap;
}

.iv2-mosaic .iv2-mosaic__more svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.iv2-mosaic .iv2-mosaic__grid {
    display: grid;
    grid-template-columns: minmax(0, 334fr) minmax(0, 382fr);
    gap: 16px;
    align-items: start;
}

.iv2-mosaic .iv2-mosaic__stack,
.iv2-mosaic .iv2-mosaic__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The feature column starts lower than its neighbour, as drawn. */
.iv2-mosaic .iv2-mosaic__feature {
    padding-top: 32px;
}

/* --------------------------------------------------------------------------
   Mosaic card

   Sizes come straight from the design's six slots. Heights are fixed because
   the mosaic's rhythm depends on them; widths follow the grid.
   -------------------------------------------------------------------------- */

.iv2-mosaic .iv2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    text-decoration: none;
}

.iv2-mosaic .iv2-card--a { height: 320px; }
.iv2-mosaic .iv2-card--b { height: 240px; }
.iv2-mosaic .iv2-card--c { height: 578px; }
.iv2-mosaic .iv2-card--d { height: 240px; }
.iv2-mosaic .iv2-card--e { height: 320px; }
.iv2-mosaic .iv2-card--f { height: 150px; }

.iv2-mosaic .iv2-card__media {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform .35s ease;
}

.iv2-mosaic .iv2-card:hover .iv2-card__media,
.iv2-mosaic .iv2-card:focus-visible .iv2-card__media {
    transform: scale(1.04);
}

.iv2-mosaic .iv2-card:focus-visible {
    outline: 2px solid var(--iv2-accent);
    outline-offset: 2px;
}

.iv2-mosaic .iv2-card__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 16px 16px 4px;
    background: linear-gradient(to bottom, rgba(35, 46, 51, 0) 0%, var(--iv2-dark) 82%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.iv2-mosaic .iv2-card__type {
    padding: 4px 0;
    font-size: 10px;
    font-weight: 500;
    line-height: normal;
    color: var(--iv2-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.iv2-mosaic .iv2-card__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}

/* Keeps the last word and the chevron on the same line, so the glyph can never
   wrap alone onto a new row. */
.iv2-mosaic .iv2-card__title-end {
    white-space: nowrap;
}

/* Inline, trailing the last word of the title rather than sitting on its own
   line. vertical-align keeps it on the text baseline instead of riding high. */
.iv2-mosaic .iv2-card__chevron {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -3px;
}

.iv2-mosaic .iv2-card__chevron svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.iv2-mosaic .iv2-card__button {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 8px 4px 8px 8px;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: var(--iv2-ink);
    letter-spacing: 0.28px;
    white-space: nowrap;
}

/* The large slot is laid out differently from the small ones: its overlay spans
   the whole card, the title grows to fill, and the button is pushed to the
   bottom — so the type and title sit near the top, as drawn. */
.iv2-mosaic .iv2-card--c .iv2-card__overlay {
    flex: 1 1 auto;
    justify-content: flex-end;
    height: 100%;
    padding: 16px;
    background: linear-gradient(to bottom, rgba(35, 46, 51, 0) 50.5%, var(--iv2-dark) 100%);
}

.iv2-mosaic .iv2-card--c .iv2-card__title {
    flex: 1 1 auto;
    font-size: 24px;
    line-height: 1.25;
}

.iv2-mosaic .iv2-card__button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   "Insights & Stories" — dark horizontal accordion
   -------------------------------------------------------------------------- */

.iv2-stories {
    padding: 32px 0 16px;
    background: var(--iv2-dark);
    font-family: var(--iv2-font);
}

/* Figma fixes this section at 570px tall while its content needs only ~457, so
   roughly 113px of dark space sits below the cards. A floor rather than a fixed
   height, so narrow viewports can still grow past it. */
@media (min-width: 1200px) {
    .iv2-stories {
        min-height: 570px;
    }
}

.iv2-stories .iv2-stories__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* The left inset is proportional, not fixed: 17.86vw resolves to exactly the
   244px Figma draws at 1366, and keeps that same proportion at every other
   width instead of drifting. Capped so it cannot run away on ultrawide screens.

   No right padding — in Figma the rule after the title runs to the very edge of
   the section, so div-title carries only the left inset. */
.iv2-stories {
    --iv2-inset: min(17.86vw, 420px);
}

.iv2-stories .iv2-stories__head {
    padding: 0 0 0 var(--iv2-inset);
}

.iv2-stories .iv2-stories__eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: normal;
    color: var(--iv2-dim);
}

.iv2-stories .iv2-stories__heading {
    display: flex;
    gap: 8px;
    align-items: center;
}

.iv2-stories .iv2-stories__heading h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--iv2-light);
    white-space: nowrap;
}

/* Teal, not grey. Figma exports this rule as an image asset rather than a style,
   so its colour is not readable from the design code — it was first implemented
   as a neutral grey and corrected against the rendered design. */
.iv2-stories .iv2-stories__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--iv2-teal);
}

.iv2-stories .iv2-stories__accordion {
    display: flex;
    gap: 24px;
    align-items: stretch;
    height: 320px;
    padding-left: var(--iv2-inset);
    overflow-x: auto;
    scrollbar-width: none;
}

.iv2-stories .iv2-stories__accordion::-webkit-scrollbar {
    display: none;
}

/* Collapsed by default: only the image strip shows. The open panel expands to
   reveal its copy column. Width is the only thing that animates, so the panels
   never reflow the sections around them. */
.iv2-stories .iv2-panel {
    position: relative;
    flex: 0 0 auto;
    width: 160px;
    overflow: hidden;
    transition: width .35s ease;
}

/* 768px is the design width at 1366, where the row overflows and the last strips
   are cut by the screen edge. flex-grow makes the open panel absorb any spare
   width on wider screens, so the row always runs to the right edge instead of
   stopping short and leaving dead space. */
.iv2-stories .iv2-panel.is-open {
    width: 768px;
    flex-grow: 1;
}

/* Desktop only: the copy column holds its designed 384px however wide the panel
   grows, and the image takes the surplus. Below 1200 the panel itself is
   narrower than 384, so it stays on the 50/50 split instead. */
@media (min-width: 1200px) {
    .iv2-stories .iv2-panel.is-open .iv2-panel__copy {
        flex: 0 0 384px;
    }

    .iv2-stories .iv2-panel.is-open .iv2-panel__media {
        flex: 1 1 auto;
    }
}

.iv2-stories .iv2-panel__tab {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.iv2-stories .iv2-panel.is-open .iv2-panel__tab {
    pointer-events: none;
}

.iv2-stories .iv2-panel__tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.iv2-stories .iv2-panel__tab:focus-visible {
    outline: 2px solid var(--iv2-accent);
    outline-offset: -2px;
}

/* The body tracks the panel width rather than being fixed at 768px. Fixed, the
   closed panel's 160px window would fall on the copy column and show an empty
   strip instead of the image. */
.iv2-stories .iv2-panel__body {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

/* flex-basis 50%, not 0. With basis 0 the copy column's 32px of padding is added
   on top of its share, so the 768px card split 400/368 instead of Figma's even
   384/384. */
.iv2-stories .iv2-panel__copy {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
    padding: 16px;
    opacity: 1;
    transition: opacity .25s ease;
}

/* Closed: the copy column collapses to nothing so the image fills the strip,
   and it is hidden from assistive tech so a closed panel cannot be tabbed into. */
.iv2-stories .iv2-panel:not(.is-open) .iv2-panel__copy {
    flex: 0 0 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
}

.iv2-stories .iv2-panel__copy h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: var(--iv2-light);
}

.iv2-stories .iv2-panel__copy p {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #dfdfdf;
}

.iv2-stories .iv2-panel__cta {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 8px 4px 8px 8px;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: var(--iv2-ink);
    text-decoration: none;
    letter-spacing: 0.28px;
    white-space: nowrap;
}

.iv2-stories .iv2-panel__cta svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.iv2-stories .iv2-panel__media {
    flex: 1 1 50%;
    min-width: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Closed panels read as muted stills; the open one is in full colour. */
.iv2-stories .iv2-panel:not(.is-open) .iv2-panel__media {
    filter: grayscale(1);
}

.iv2-stories .iv2-panel__media {
    transition: filter .35s ease;
}

/* --------------------------------------------------------------------------
   Below desktop
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .iv2-mosaic .iv2-mosaic__inner {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 24px;
    }

    /* The aside stops being a column here, so its three cards sit in a row
       instead of stretching into full-width letterboxes. */
    .iv2-mosaic .iv2-mosaic__aside {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .iv2-mosaic .iv2-card--d,
    .iv2-mosaic .iv2-card--e,
    .iv2-mosaic .iv2-card--f {
        height: 240px;
    }

    .iv2-stories {
        --iv2-inset: 24px;
    }

    .iv2-stories .iv2-stories__head {
        padding-right: 24px;
    }
}

@media (max-width: 767px) {
    .iv2-mosaic .iv2-mosaic__inner {
        padding: 0 16px;
    }

    .iv2-mosaic .iv2-mosaic__grid,
    .iv2-mosaic .iv2-mosaic__aside {
        grid-template-columns: minmax(0, 1fr);
        display: grid;
    }

    .iv2-mosaic .iv2-mosaic__feature {
        padding-top: 0;
    }

    /* One rhythm on a single column beats six transplanted desktop heights. */
    .iv2-mosaic .iv2-card--a,
    .iv2-mosaic .iv2-card--b,
    .iv2-mosaic .iv2-card--c,
    .iv2-mosaic .iv2-card--d,
    .iv2-mosaic .iv2-card--e,
    .iv2-mosaic .iv2-card--f {
        height: 240px;
    }

    .iv2-stories {
        --iv2-inset: 16px;
    }

    .iv2-stories .iv2-stories__head {
        padding-right: 16px;
    }

    /* ----------------------------------------------------------------------
       Mobile: the accordion turns vertical.

       A horizontal accordion cannot survive a 375px screen — squeezed into it,
       the copy column fell to 150px, the description was clipped mid-sentence
       and the CTA disappeared entirely. So below 768 each category becomes a
       full-width row: image banner with the title over it, expanding downwards
       to reveal the description and button. One open at a time, exactly as on
       desktop; only the axis changes.
       ---------------------------------------------------------------------- */

    .iv2-stories .iv2-stories__accordion {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: auto;
        padding-right: var(--iv2-inset);
        overflow-x: visible;
    }

    .iv2-stories .iv2-panel,
    .iv2-stories .iv2-panel.is-open {
        width: 100%;
        transition: none;
    }

    .iv2-stories .iv2-panel__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    /* Image first, copy under it. */
    .iv2-stories .iv2-panel__media {
        order: 1;
        flex: 0 0 auto;
        height: 96px;
        transition: height .25s ease, filter .25s ease;
    }

    .iv2-stories .iv2-panel.is-open .iv2-panel__media {
        height: 168px;
    }

    .iv2-stories .iv2-panel__copy {
        order: 2;
        flex: 0 0 auto;
        gap: 12px;
        padding: 16px;
    }

    .iv2-stories .iv2-panel:not(.is-open) .iv2-panel__copy {
        display: none;
    }

    /* The tab stops being an invisible hit area and becomes the row header,
       sitting over the image with its label shown. */
    .iv2-stories .iv2-panel__tab {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        display: flex;
        align-items: flex-end;
        height: 96px;
        padding: 12px 16px;
        background: linear-gradient(to bottom, rgba(21, 28, 31, 0) 35%, rgba(21, 28, 31, .8) 100%);
        transition: height .25s ease;
    }

    .iv2-stories .iv2-panel.is-open .iv2-panel__tab {
        height: 168px;
    }

    .iv2-stories .iv2-panel__tab-label {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
        font-size: 18px;
        line-height: 1.2;
        color: var(--iv2-light);
        text-align: left;
    }

    /* The heading would repeat the label now shown on the banner. */
    .iv2-stories .iv2-panel.is-open .iv2-panel__copy h3 {
        display: none;
    }

    .iv2-stories .iv2-panel__copy p {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iv2-mosaic .iv2-card__media,
    .iv2-stories .iv2-panel,
    .iv2-stories .iv2-panel__copy,
    .iv2-stories .iv2-panel__media {
        transition: none !important;
    }
}