/* ============================================================
   BEINC — Insights Blog Grid (Section CSS)
   Cards laid out in a 3×2 desktop (3 cols × 2 rows) /
   2×3 tablet / 1×6 mobile grid — 6 cards total at launch.
   Behind the cards are decorative dashed grid lines — one
   vertical per column (centered behind the column), one
   horizontal per row (centered behind the row, full-bleed).
   Cards mirror the about-hero project card with INVERTED
   colours: black2 default, soft-blur cream on hover.
   Depends on: global.css
   ============================================================ */

.insights-grid {
    position: relative;
    width: 100%;
    background: var(--color-white);
    padding: var(--space-9) var(--pad-x);
    isolation: isolate;
}

/* Decorative dashed lines container — sits behind the cards.
   Vertical lines run top→bottom of the section. Horizontals
   span screen edge to edge (escape padding via negative
   margins/positioning). */
.insights-grid__lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.insights-grid__vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-border);
    border-color: var(--color-greyish);
}

.insights-grid__hline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
}

/* Section bottom dashed line — full bleed, no padding. */
.insights-grid__bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
    z-index: 1;
}


/* ── GRID ──
   3 cols × 2 rows on desktop = 6 cards. Cards are placed in
   source order; empty cells stay empty (the dashed grid stays
   whole regardless). Capped at 70vw on desktop and centred
   so the cards never touch the screen-edge dashed verticals.
   The decorative row/column dashed lines (positioned by JS)
   anchor to the actual rendered card rects, not the section,
   so they follow the capped grid automatically. */
.insights-grid__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, auto);
    column-gap: var(--space-9);
    row-gap: var(--space-9);
    max-width: 70vw;
    margin: 0 auto;
}


/* ── INSIGHT CARD ──
   Mirrors about-hero project card structure with colour roles
   flipped: default = black2 / cream text; hover = cream-10%
   blur-3 / black2 text. */
.insight-card {
    --card-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 20px;
    background: var(--color-black2);
    color: var(--color-white);
    border-radius: var(--card-radius);
    text-decoration: none;
    cursor: pointer;
    border: var(--guide-width) solid transparent;
    transition: background var(--duration-fast) var(--ease-primary),
                color var(--duration-fast) var(--ease-primary),
                backdrop-filter var(--duration-fast) var(--ease-primary),
                border-color var(--duration-fast) var(--ease-primary);
}

.insight-card:hover {
    background: rgba(255, 251, 240, 0.10);
    color: var(--color-black2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-color: var(--color-greyish);
}

.insight-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: 1;
    color: inherit;
}

.insight-card__mark {
    display: block;
    width: auto;
    height: 11px;
    flex-shrink: 0;
}

.insight-card__mark svg {
    display: block;
    width: auto;
    height: 100%;
}

.insight-card__mark svg path {
    fill: currentColor;
}

.insight-card__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    margin: 0;
    color: inherit;
}

.insight-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--card-radius);
    overflow: clip;
    flex: 0 0 auto;
    background: var(--color-darkgreyish);
}

.insight-card__media img,
.insight-card__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.insight-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: inherit;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── TABLET (768 – 1023): 2 columns × 3 rows = 6 cards ── */
@media (max-width: 1023px) {
    .insights-grid__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-7);
        row-gap: var(--space-7);
        /* Wider cap so 2 cards don't get cramped; still keeps
           breathing room from the screen-edge verticals. */
        max-width: 84vw;
    }
}


/* ── MOBILE (≤767): 1 column × 6 rows = 6 cards ── */
@media (max-width: 767px) {
    .insights-grid {
        padding: var(--space-7) var(--pad-x);
    }
    .insights-grid__grid {
        grid-template-columns: 1fr;
        row-gap: var(--space-6);
        /* Mobile: fill the full padded width — the edge dashed
           verticals don't reach this section on mobile, so we
           don't need extra inset. The section's --pad-x already
           handles the global side padding. */
        max-width: none;
    }
}