/* src/static/styles/pages/secondary.css, owner X (design-spec §C.1, §E.6,
   §E.7, §E.10, §E.11; mockup C): about, services overview, DevOps
   consultancy, web development, e-mail hosting, work and results, privacy,
   disable-analytics and 404. Only the page layer; shared components (page
   head, cards, readout, steps, link list, check list, FAQ) live in
   style.css. */
@layer page {
  /* Work and results (WR-01): below a 30rem container a case panel stacks
     each key above its value (long case sentences) */
  @container content (max-width: 29.99rem) {
    .card .readout--specs .readout__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
    .card .readout--specs dd + dt { margin-block-start: var(--space-3); }
  }

  /* Services overview (D-02, mockup C .team-card--lead): WordPress onderhoud
     first and largest, across the whole row, its line in the serif lede */
  .card-grid--boxed .card--lead { grid-column: 1 / -1; }
  .card--lead .card__text { max-inline-size: var(--measure-lede); color: var(--ink); font: 400 var(--text-lede)/1.5 var(--font-serif); }

  /* Work and results (WR-03): the logo list right under its own h2 */
  h2 + .logo-row__list { margin-block-start: var(--space-6); }

  /* E-mail hosting (E-04, mockup C [D: P1 e-mail]): the package split, the
     features 12 px under the text, one package as a card filling the side
     column */
  .split__main > .prose + .checklist { margin-block-start: var(--space-3); }
  .price-list--one { display: grid; margin: 0; padding: 0; list-style: none; font: 400 1rem/1.45 var(--font-sans); }
  .price-list--one .price-list__item { display: grid; row-gap: var(--space-2); padding: var(--space-5); border: var(--control-border); }
  .price-list--one .price-list__name { font-size: var(--text-h3); line-height: var(--leading-ui); }
  .price-list--one .price-list__price { margin-block-start: var(--space-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .price-list--one .price-list__amount { font-size: var(--text-price); line-height: 1; letter-spacing: -0.01em; }
  .price-list--one .price-list__per { margin-inline-start: 0.15em; color: var(--ink-2); }
  .price-list--one .price-list__sites { color: var(--ink-2); }
  .price-list--one .price-list__fit { font: 400 1rem/1.5 var(--font-serif); }
  @container content (min-width: 48rem) {
    .price-list--one .price-list__fit { margin-block-start: var(--space-2); }
  }
}