/* ==========================================================================
   insights-2027.css — page-specific rules for /insights
   --------------------------------------------------------------------------
   Loaded AFTER css/site-2027.css. Everything here is either a value the
   shared vocabulary does not carry (the filterable hairline post list, the
   split feature panel) or a deliberate per-page override of a shared value
   that the design file specifies differently.

   No importance flags. No bare descendant-element resets — every selector below is
   anchored on at least one .cy27-* class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — copy left, hairline-ruled note right, both baseline-aligned.
   Shared .cy27-phero--split aligns to start and reserves 120px below; the
   design bottom-aligns the two columns and closes the gap to 56px because
   the filter bar follows immediately.
   -------------------------------------------------------------------------- */

.cy27-insights-hero .cy27-phero__inner {
    align-items: end;
    padding-bottom: 56px;
}

.cy27-insights-hero h1 {
    font-size: clamp(2.3rem, 4.6vw, 4rem);
    line-height: 1.03;
    margin-bottom: 26px;
}

.cy27-insights-hero .cy27-phero__eyebrow {
    margin-bottom: 22px;
}

.cy27-insights-hero .cy27-phero__lead {
    max-width: 520px;
}

.cy27-insights-hero__aside {
    border-left: 1px solid var(--cy27-line);
    padding-left: 32px;
}

.cy27-insights-hero__aside p {
    color: var(--cy27-body);
    font-size: .98rem;
    line-height: 1.7;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Category filter — the shared segmented switcher, sized to the design's
   larger touch targets and recessed card surface.
   -------------------------------------------------------------------------- */

.cy27-insights-filters {
    padding-bottom: 34px;
}

.cy27-insights-seg {
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(20, 27, 40, .5), rgba(11, 16, 25, .42));
}

.cy27-insights-seg button {
    padding: 11px 18px;
    border-radius: 10px;
    font-family: var(--cy27-sans);
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Announced to assistive tech only; the design carries no visible count. */
.cy27-insights-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Results panel
   -------------------------------------------------------------------------- */

.cy27-insights-results {
    padding-bottom: 90px;
}

.cy27-insights-results:focus-visible {
    outline: 3px solid rgba(0, 192, 250, .75);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Featured case study — copy left, screenshot slot right.
   -------------------------------------------------------------------------- */

.cy27-insights-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    overflow: hidden;
    margin-bottom: 40px;
}

.cy27-insights-feature[hidden] {
    display: none;
}

.cy27-insights-feature__body {
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
}

.cy27-insights-feature__badge {
    margin-bottom: 22px;
    font-size: .7rem;
    color: #cdeefb;
}

.cy27-insights-feature h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.2;
    margin-bottom: 14px;
    text-wrap: pretty;
}

.cy27-insights-feature__dek {
    color: var(--cy27-body);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 24px;
    max-width: 46ch;
}

.cy27-insights-feature__meta {
    font-family: var(--cy27-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cy27-subtle);
    margin-bottom: 28px;
}

.cy27-insights-feature__cta {
    align-self: flex-start;
    margin-top: auto;
}

.cy27-insights-feature__shot {
    min-height: 320px;
    border-left: 1px solid rgba(255, 255, 255, .07);
}

/* The capture fills the cell rather than leaving placeholder hatching around it. */
.cy27-insights-feature__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.cy27-insights-feature__shot .cy27-shot__caption {
    max-width: 70%;
    padding: 24px 26px;
    font-size: .76rem;
}

/* --------------------------------------------------------------------------
   Post list — hairline rows, not cards. Title + dek left, mono category and
   date right.
   -------------------------------------------------------------------------- */

.cy27-insights-row {
    grid-template-columns: 1fr 200px;
    gap: 32px;
    align-items: baseline;
    border-radius: 10px;
    text-decoration: none;
    transition: background .3s var(--cy27-ease), padding-left .3s var(--cy27-ease);
}

.cy27-insights-row[hidden] {
    display: none;
}

/* The shared sheet rules the bottom hairline off :last-child, which a hidden
   trailing row would strand. Drive it off a class the filter maintains so the
   list always closes under the last VISIBLE row — set in the markup too, so it
   is correct before (and without) JavaScript. */
.cy27-insights-list > .cy27-row:last-child {
    border-bottom: 0;
}

.cy27-insights-list > .cy27-row.is-last {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.cy27-insights-row__body {
    display: block;
    min-width: 0;
}

.cy27-insights-row h3 {
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.cy27-insights-row p {
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--cy27-body);
}

.cy27-insights-row__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--cy27-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cy27-subtle);
}

.cy27-insights-row__tag {
    color: var(--cy27-accent);
}

.cy27-insights-empty {
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 30px 0;
    font-family: var(--cy27-sans);
    font-size: 1rem;
    color: var(--cy27-body);
}

.cy27-insights-empty[hidden] {
    display: none;
}

/* Pointer-only: the row nudge is a hover affordance, useless on touch. */
@media (hover: hover) {
    .cy27-insights-row:hover {
        background: rgba(255, 255, 255, .03);
        padding-left: 16px;
    }

    .cy27-insights-row:hover h3 {
        color: #fff;
    }
}

.cy27-insights-row:focus-visible {
    background: rgba(255, 255, 255, .03);
}

/* --------------------------------------------------------------------------
   Closing CTA — the page's single beam panel.
   -------------------------------------------------------------------------- */

.cy27-insights-cta-sec {
    padding-bottom: 140px;
}

.cy27-insights-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
    background:
        radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .14), transparent 60%),
        linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6));
}

.cy27-insights-cta__copy {
    max-width: 560px;
}

.cy27-insights-cta h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    line-height: 1.15;
    margin-bottom: 12px;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .cy27-insights-hero .cy27-phero__inner {
        align-items: start;
    }

    .cy27-insights-hero__aside {
        border-left: 0;
        border-top: 1px solid var(--cy27-line);
        padding-left: 0;
        padding-top: 28px;
    }

    .cy27-insights-feature {
        grid-template-columns: 1fr;
    }

    .cy27-insights-feature__body {
        padding: 36px 28px;
    }

    .cy27-insights-feature__shot {
        order: 2;
        min-height: 220px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
}

@media (max-width: 760px) {
    .cy27-insights-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cy27-insights-row__meta {
        flex-direction: row;
        gap: 12px;
    }

    .cy27-insights-cta {
        align-items: flex-start;
    }

    .cy27-insights-cta-sec {
        padding-bottom: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cy27-insights-row {
        transition: none;
    }

    .cy27-insights-row:hover {
        padding-left: 0;
    }
}