/* ==========================================================================
   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. */
.ins-grid .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(--text-body);
    font-size: 1rem;                                 /* ~16px */
    line-height: 1.55;
}
.ins-card__teaser p { margin: 0; }

/* --------------------------------------------------------------------------
   FEATURED — copy column + a dark pull-quote panel
   --------------------------------------------------------------------------
   Both columns are equal height.
   -------------------------------------------------------------------------- */
.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(--accent-deep); }
.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(--text-body);
    font-size: clamp(1rem, 1.25vw, 1.1875rem);       /* ~19px */
    line-height: 1.55;
}
.ins-featured__teaser 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(--prime-deep);
    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 when the
   article has one.
   Same cell, so the card's proportions don't change between the two. */
.ins-featured__media {
    margin: 0;
    display: grid;
    background: var(--prime-deep);
}
.ins-featured__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 860px) {
    .ins-featured { grid-template-columns: 1fr; }
    /* 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 var(--text-on-dark-dim);
    border-radius: 24px;
    background: var(--white);
    color: var(--text-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 pills are 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 39px. */
@media only screen and (max-width: 1050px) {
    .ins-filter { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   READER
   -------------------------------------------------------------------------- */
.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);
}
.ins-article__head h1 {
    margin: 0 0 0.35em;
    max-width: 1400px;
}
.ins-article__lead {
    max-width: 1400px;
    color: var(--text-body);
    font-size: clamp(1.1rem, 1.5vw, 1.375rem);       /* ~22px */
    line-height: 1.5;
}
.ins-article__lead 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: var(--text-strong);
        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);
    }
    .ins-pull p {
        margin: 0;
        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(--placeholder);
    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(--placeholder); }
}
/* "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 — news_latest_related.html.twig, one <a> per item, stacked
   under the shared aside label 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. */
.ins-related > .mod_newslist,
.ins-related .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;
    }
    &:hover { color: var(--prime); }
}

/* ==========================================================================
   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);
}
.ins-article__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* "← All insights" — 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;
}
.ins-article__back 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; }
}