/**
 * The news teaser of the home page — the row around the cards.
 *
 * The card itself comes from archive.css, loaded next to this file (inc/news-teaser.php). What
 * stands here is only what the teaser does differently from the news list, measured against the
 * rendered legacy page with `scripts/measure-bestand.sh <width> newsteaser` (content importer,
 * work step 19):
 *
 *   width    grid                         card
 *   1920px   3 × 370px, gutter 30px       title 24px / 26.4px
 *   1280px   3 × 287px, gutter 30px       title 24px / 26.4px
 *    991px   3 × 190px, gutter 30px       title 16px / 20px
 *    768px   1 × 320px, centred           title 16px / 20px
 *    375px   1 column, full width         title 16px / 20px
 *
 * The ground of the section (#e2e2e2) is not set here — it is a setting of the section in the
 * page, where the editors see it.
 *
 * The lift of the button onto the heading line and the spacing below the heading are held by
 * bin/check-news-teaser.sh (NA4).
 */

/*
 * The button to the news list, right-aligned ON THE LINE of the section heading — as in the
 * legacy site, where the heading (c217) and the button row (c218) are two elements as well and
 * the button is lifted onto the heading line while its row keeps its height in the flow. Until
 * NA4 (2026-10-08, AI/plans/done/nacharbeiten.md) the button stood in a line of its own below
 * the heading, and the images stood 20 to 50px further from the heading than in the legacy site.
 *
 * Two things happen here, and both are measured (`scripts/measure-bestand.sh <width>
 * newsteaser`):
 *
 *   1. The margin takes back the heading's spacing. The heading is a Divi module of its own and
 *      carries the global H2 spacing from base.css (50px, 20px from 1600px). The legacy news
 *      section holds 30px there, 20px from 991px. The top margin is therefore the legacy value
 *      MINUS the global one — negative above 1600px, positive between 1600 and 992px, zero
 *      below. The tokens are the same ones base.css reads, at the same breakpoints, so the two
 *      cannot drift apart without this file's media queries being wrong as well.
 *   2. `top` lifts the button onto the heading line without taking its row out of the flow —
 *      the legacy mechanism. The flow below the heading is then: the legacy spacing, the button
 *      row, the grid — 107px from the top of the heading to the images above 991px, 92px below,
 *      measured in the legacy site; 93px here, because the button is one pixel taller.
 *
 * `position: relative` and not a negative margin on the whole row: a negative margin would pull
 * the GRID up as well, and the row's height in the flow is what the legacy site keeps.
 */
.wi-news-teaser .wi-news-teaser__more {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--wi-teaser-head-space) - var(--wi-space-heading)) 0 0;
  padding: 0;
  position: relative;
  top: calc(-1 * (var(--wi-teaser-head-space) + var(--wi-line-height-heading)));
}

/* 1600px: the global heading spacing steps (base.css), the legacy news spacing does not yet. */
@media only screen and (max-width: 1600px) {
  .wi-news-teaser .wi-news-teaser__more {
    margin-top: calc(var(--wi-teaser-head-space) - var(--wi-space-heading-narrow));
  }
}

/* 991px: the heading line gets lower (base.css) and the legacy news spacing steps to 20px —
 * level with the global value, nothing left to take back. The lift follows the lower line. */
@media only screen and (max-width: 991px) {
  .wi-news-teaser .wi-news-teaser__more {
    margin-top: calc(var(--wi-teaser-head-space-narrow) - var(--wi-space-heading-narrow));
    top: calc(-1 * (var(--wi-teaser-head-space-narrow) + var(--wi-line-height-heading-narrow)));
  }
}

/* Two classes on the button as well: `.wi-button` and `.wi-button--light` in sections.css carry one. */
.wi-news-teaser .wi-button {
  width: var(--wi-teaser-button-width);
  padding: var(--wi-teaser-button-padding-block) 0;
  font-size: var(--wi-teaser-button-size);
  font-weight: var(--wi-font-weight-regular);
  text-align: center;
}

.wi-news-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wi-card-gap);
}

/* Three classes: archive.css sets the list's title sizes with two, in three media queries. */
.wi-news-teaser .wi-card .wi-card__title {
  font-size: var(--wi-teaser-title-size);
  line-height: var(--wi-teaser-title-line-height);
}

@media only screen and (max-width: 991px) {
  .wi-news-teaser .wi-card .wi-card__title {
    font-size: var(--wi-teaser-title-size-narrow);
    line-height: var(--wi-teaser-title-line-height-narrow);
  }
}

/* 768px: single column, as in the news list — the legacy site drops from three straight to one. */
@media only screen and (max-width: 768px) {
  .wi-news-teaser__grid {
    grid-template-columns: 1fr;
    gap: var(--wi-card-gap-narrow);
  }

  .wi-news-teaser .wi-card {
    width: 100%;
    max-width: var(--wi-card-max-width);
    margin-inline: auto;
  }
}