/* ==========================================================================
   ARTICLE CARDS — news list, featured article, filter pills, reader
   ==========================================================================
   The `ins-*` family (insight/article). Everything here styles Contao NEWS
   module output, so the markup lives in Twig templates rather than in a page
   spec:
     news_latest.html.twig           → .ins-card          (grid cell)
     news_latest_featured.html.twig  → .ins-featured      (featured block)
     news_latest_related.html.twig   → .ins-related__item (reader sidebar)
     news_full.html.twig             → .ins-article*      (reader)
     nav_newscategories.html5        → .ins-filters       (filter pills)

   Because a news module renders one template per item, the GRID is applied to
   the module wrapper, not to the items: `.ins-grid` goes on the content
   element's cssID and lays its children out three-up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared meta line — "6 Feb 2026 · 4 min read"
   -------------------------------------------------------------------------- */
.ins-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;                              /* ~12px */
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   GRID  `.ins-grid` on the news-list element; cards are its children
   -------------------------------------------------------------------------- */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 48px;
    /* Contao's news list wraps all items in `.layout_wrapper`, which would be the
       grid's only child. `display: contents` lifts the cards back out so they are
       the grid items — and the grid stays defined in exactly one place whether the
       wrapper is there or not. */
    .layout_wrapper { display: contents; }
}
@media only screen and (max-width: 992px) {
    .ins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 600px) {
    .ins-grid { grid-template-columns: 1fr; row-gap: 32px; }
}

/* --------------------------------------------------------------------------
   CARD — a 2px navy rule across the top, then category / title / teaser / meta
   -------------------------------------------------------------------------- */
.ins-card {
    border-top: 2px solid var(--prime);
    padding-top: var(--space-24);
}
.ins-card__cat {
    margin: 0 0 0.9em;
    color: var(--prime);
    font-size: 0.75rem;                              /* ~12px */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ins-card__title {
    margin: 0 0 0.6em;
    font-family: var(--type-display);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);        /* ~24px */
    line-height: 1.3;
    color: var(--heading);
    a { color: inherit; border-bottom: 0; }
    a:hover { color: var(--prime); }
}
.ins-card__teaser {
    margin-bottom: 0.9em;
    color: var(--body);
    font-size: 1rem;                                 /* ~16px */
    line-height: 1.55;
    p { margin: 0; }
}

/* --------------------------------------------------------------------------
   FEATURED — copy column + a dark pull-quote panel
   --------------------------------------------------------------------------
   The design's panel is 17px taller than the white card and overhangs it; not
   reproduced (see the capture note) — both columns are equal height here.
   -------------------------------------------------------------------------- */
.ins-featured {
    display: grid;
    grid-template-columns: minmax(0, 936fr) minmax(0, 916fr);
    background: var(--white);
}
.ins-featured__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.75rem, 3vw, 3rem);
}
.ins-card__cat--featured { color: var(--red-700); }
.ins-featured__title {
    margin: 0 0 0.5em;
    font-family: var(--type-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.8125rem);       /* ~45px */
    line-height: 1.15;
    color: var(--heading);
    a { color: inherit; border-bottom: 0; }
    a:hover { color: var(--prime); }
}
.ins-featured__teaser {
    color: var(--body);
    font-size: clamp(1rem, 1.25vw, 1.1875rem);       /* ~19px */
    line-height: 1.55;
    p { margin: 0; }
}
.ins-featured__cta { margin: clamp(1.25rem, 2.4vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
/* the meta line sits at the bottom of the copy column */
.ins-featured__copy .ins-meta { margin-top: auto; }

.ins-featured__panel {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 4vw, 3.75rem);
    background: var(--ink);
    blockquote { margin: 0; }
    p {
        margin: 0;
        color: var(--white);
        font-family: var(--type-display);
        font-weight: 600;
        font-size: clamp(1.25rem, 1.95vw, 1.75rem);      /* ~28px */
        line-height: 1.35;
    }
}
/* Image variant: the photo fills the right panel instead of the quote (the
   designer's note on the Insights board — "if image template uses image").
   Same cell, so the card's proportions don't change between the two. */
.ins-featured__media {
    margin: 0;
    display: grid;
    background: var(--ink);
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 860px) {
    .ins-featured { grid-template-columns: 1fr; }
    /* stacked, the right side (the quote panel or the photo) goes on top (John, 16 Oct) */
    :is(.ins-featured__panel, .ins-featured__media) { order: -1; }
    /* keep the photo from becoming a tall band once stacked */
    .ins-featured__media { aspect-ratio: 916 / 437; }
}

/* --------------------------------------------------------------------------
   FILTER PILLS — the extension's reset item is the design's "All"
   --------------------------------------------------------------------------
   The active item is rendered as <strong>, the rest as <a>, so both are styled.
   -------------------------------------------------------------------------- */
.ins-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ins-filters__item { margin: 0; }
.ins-filter {
    display: inline-flex;
    align-items: center;
    min-height: 39px;
    padding: 0 1.25rem;
    border: 1px solid #C4CCD6;
    border-radius: 24px;
    background: var(--white);
    color: var(--body);
    font-size: 0.875rem;                             /* ~14px */
    line-height: 1;
    text-decoration: none;
}
a.ins-filter:hover {
    border-color: var(--prime);
    color: var(--prime);
}
.ins-filter.is-active {
    border-color: var(--prime);
    background: var(--prime);
    color: var(--white);
    font-weight: 600;
}
/* 39px is the board's pill height and is fine for a mouse, but these are real
   controls — the only way to filter the list — so on touch they take the same
   44px minimum as a button (WCAG 2.5.5). Desktop keeps the design's height. */
@media only screen and (max-width: 1050px) {
    .ins-filter { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   READER
   -------------------------------------------------------------------------- */
/* board: eyebrow -> rule 31px of 2400 */
.ins-article__eyebrow { margin: 0 0 clamp(0.9rem, 1.3vw, 1.9375rem); }
.ins-article__head {
    border-top: 1px solid var(--prime);
    border-bottom: 1px solid var(--prime);
    padding-block: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
    h1 {
        margin: 0 0 0.35em;
        max-width: 1400px;
    }
}
.ins-article__lead {
    max-width: 1400px;
    color: var(--body);
    font-size: clamp(1.1rem, 1.5vw, 1.375rem);       /* ~22px */
    line-height: 1.5;
    p { margin: 0 0 0.5em; }
}
.ins-article__byline {
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;                             /* ~14px */
}

/* body column + sidebar: 1132 | 380 of 1800 */
.ins-article__body {
    display: grid;
    grid-template-columns: minmax(0, 1132fr) minmax(0, 380fr);
    column-gap: clamp(2.5rem, 8vw, 143px);
    align-items: start;
}
.ins-article__main {
    max-width: 1132px;
    p {
        color: #333B44;
        font-size: clamp(1.0625rem, 1.4vw, 1.25rem);     /* ~20px */
        line-height: 1.75;
    }
    /* the design opens the article on a bolder paragraph */
    .ins-lead p { font-weight: 700; }
    h2 {
        margin: 2em 0 0.8em;
        font-family: var(--type-display);
        font-weight: 600;
        font-size: clamp(1.4rem, 2.2vw, 2rem);           /* ~32px */
        color: var(--heading);
    }
    /* pull quote: a 3px navy rule on the left, text inset from it */
    .ins-pull {
        margin: clamp(1.75rem, 3vw, 2.5rem) 0;
        border-left: 3px solid var(--prime);
        padding-left: clamp(1.25rem, 2.2vw, 2.1875rem);
        padding-block: clamp(0.25rem, 0.42vw, 0.625rem);   /* the bar runs 10px past the text (board) */
    }
    .ins-pull p {
        margin: 0;
        max-width: 54rem;   /* the board's 865px measure */
        color: var(--heading);
        font-family: var(--type-display);
        font-weight: 600;
        font-size: clamp(1.25rem, 1.95vw, 1.75rem);      /* ~28px */
        line-height: 1.35;
    }
}

/* sidebar blocks: a small caps label over a hairline */
.ins-aside__block + .ins-aside__block { margin-top: clamp(1.5rem, 3vw, 2rem); }
.ins-aside__label {
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--prime);
    color: var(--text-muted);   /* was #9AA5B3: under WCAG AA on cream (8 Oct) */
    font-size: 0.6875rem;                            /* ~11px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ins-aside__links {
    margin: 0;
    color: var(--prime);
    font-size: 0.9375rem;                            /* ~15px */
    font-weight: 600;
    a { color: inherit; }
    span { margin: 0 0.5rem; color: var(--text-muted); }
}
/* "Copy link" is a button so it can use the clipboard; make it read as a link */
.ins-copy {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* RELATED — module 24 → news_latest_related.html.twig, one <a> per item.
   The board sets these at 17/500 navy under the shared aside label, stacked
   with a hairline between. */
.ins-related {
    display: flex;
    flex-direction: column;
    /* A news module wraps its items twice — `.mod_newslist > .layout_wrapper` —
       so the links are grandchildren, not flex items, and the three of them ran
       together as one paragraph. `display: contents` lifts them out of the
       wrappers without changing the markup, the same fix `.ins-grid` needs. */
    > .mod_newslist, .layout_wrapper { display: contents; }
}
.ins-related__link {
    font-family: var(--type-display);
    font-weight: 500;
    font-size: 1.0625rem;                            /* ~17px */
    line-height: 1.35;
    color: var(--heading);
    border-bottom: 0;
    + .ins-related__link {
        margin-top: 1rem;
        border-top: 1px solid var(--hairline);
        padding-top: 1rem;
    }
    /* the link is a block (a flex item): underline the words, not the box */
    &:hover { color: var(--prime); border-bottom: 0; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
}

/* ==========================================================================
   READER — the article's own image, and the way back
   ========================================================================== */
/* An image set in the article's settings leads the body column. Block spacing
   matches the gap this column puts between its own blocks, so the image reads
   as the first block rather than as part of the header above it. */
.ins-article__media {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
}

/* "← All insights". Not on the board; John asked for it, because the reader is
   otherwise a dead end. Sits under the two-column body, aligned with the copy
   column rather than centred, and clears the body above it. */
.ins-article__back {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    a.btn { margin: 0; }
}

/* The filter row is a scroll target: every category pill links to
   #insights-list so the results are what you land on. The offset clears the
   fixed header, which would otherwise sit over the pills. */
#insights-list {
    scroll-margin-top: clamp(96px, 12vw, 140px);
}

@media only screen and (max-width: 992px) {
    .ins-article__body { grid-template-columns: 1fr; row-gap: 2.5rem; }
}