/* src/static/styles/pages/service.css, owner: Service agent (W).
   The WordPress service page only (mockup C 4.2, restore2 PA-W01 to PA-W24):
   the components only this page has, all inside the page layer (§C.3).
   ≤ 15 KB. */
@layer page {
  /* "Wat er in elk pakket zit" (C [D: P1]): four ruled columns, two from a
     48rem container, four from 72rem. */
  @container content (min-width: 48rem) {
    .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  }
  @container content (min-width: 72rem) {
    .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  }

  /* "Onderhoudspakketten en prijzen" (C 5.10, #pakketten): a real table from 48rem
     with the advised column framed in 2 px ink (only while its label
     resolves); below 48rem the rows become grids (roles in the markup) and
     the head sticks. */
  .compare-wrap { max-inline-size: 62rem; margin-block-start: var(--space-6); }
  /* Fixed layout: the three package columns share the space evenly, as in
     the mockup, now that the "In één zin" row holds sentences instead of
     equal TODO marks (PA-W14). */
  .compare { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 1rem/1.45 var(--font-sans); }
  .compare :is(th, td) { padding: var(--space-3) var(--space-4); border-block-end: var(--hairline); }
  .compare thead :is(th, td) { padding-block: var(--space-4); border-block-end: var(--rule); vertical-align: bottom; }
  .compare thead th { color: var(--ink); font: 400 1rem/1.45 var(--font-sans); letter-spacing: 0; text-transform: none; }
  .compare :is(thead tr > :first-child, tbody th[scope="row"]) { inline-size: 28%; }
  .compare :is(thead tr > :first-child, tbody th[scope]) { padding-inline-start: 0; }
  .compare__name { display: block; font: 700 var(--text-h3)/1.25 var(--font-sans); }
  .compare__price { display: block; margin-block-start: var(--space-2); font: 400 var(--text-price)/1 var(--font-sans); letter-spacing: -0.01em; }
  .compare__per { color: var(--ink-2); font-size: var(--text-small); letter-spacing: 0; }
  .compare thead .label { display: block; margin-block-start: var(--space-2); }
  .compare .compare__group > * { padding-block-start: var(--space-5); border-block-end: 1px solid var(--ink-3); }
  .compare__group th { color: var(--ink-3); font: 400 var(--text-label)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
  .compare .is-advised { border-inline: var(--rule); }
  .compare thead .is-advised { border-block-start: var(--rule); }
  /* No foot row (PA-W16): the last body row closes the advised frame.
     :where keeps this at the weight of `.compare .is-advised`, so the
     phone layout below still drops the whole frame. */
  .compare :where(tbody:last-of-type > tr:last-child) > .is-advised { border-block-end: var(--rule); }
  @container content (max-width: 47.99rem) {
    .compare, .compare :is(thead, tbody) { display: block; }
    .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-3); }
    .compare :is(th, td) { padding: var(--space-2) 0; border-block-end: 0; font-size: 0.9375rem; }
    .compare thead { position: sticky; inset-block-start: 0; z-index: 2; background: var(--paper); border-block-end: var(--rule); }
    .compare thead :is(th, td) { padding-block: var(--space-3); border-block-end: 0; }
    .compare thead tr > :first-child { display: none; }
    .compare :is(thead tr > :first-child, tbody th[scope="row"]) { inline-size: auto; }
    .compare tbody th[scope="row"] { grid-column: 1 / -1; padding-block-start: var(--space-3); border-block-start: var(--hairline); }
    .compare__group th { grid-column: 1 / -1; padding-block-start: var(--space-5); border-block-end: 0; }
    .compare__group td { display: none; }
    .compare__per { display: block; margin-block-start: var(--space-1); }
    .compare__price { font-size: 1.5rem; }
    .compare__name { font-size: 1.0625rem; }
    .compare .is-advised { border: 0; }
  }
  /* The row head's link ("vaste lijst") gets a 44 px hit area on touch
     screens without moving anything (C [D] touch targets). */
  @media (pointer: coarse) {
    .compare th > a { display: inline-block; padding-block: calc((2.75rem - 1lh) / 2); margin-block: calc((2.75rem - 1lh) / -2); }
  }

  /* The notes under the table: serif 16 at the measure, 16 px apart. */
  .compare-note { max-inline-size: var(--measure); margin-block-start: var(--space-4); font: 400 1rem/1.6 var(--font-serif); }
}