/* ==========================================================================
   Sammenligning (sektion 12)
   Rammen "12j, tekst 2" fra artefaktet "Sammenligning": samme opbygning som
   tabellen på den nuværende side. Punkterne er rækker, og vi og de fire
   alternativer er kolonner. Ingen grå flade: rækkerne står på hvidt med tynde
   streger, og kun vores kolonne har en flade (lys orange tone, kant og skygge
   som kortet på den nuværende side). Priserne står som nederste række uden
   etiket.

   Teksten er Emils egen (01.10.2026) og må ikke rettes uden at spørge.
   Fluebenene hos de fire alternativer er et skøn: bureauer har vinkler ud fra
   data og en creative strategist, og designer, bureau og freelancer har en
   grafisk designer. De fire priser til højre er dem fra juststatics.dk, vores
   er Starter fra prissektionen.

   Tabellen er bygget som et gitter med ARIA-roller (table, row, cell), fordi
   fladen bag vores kolonne skal gå på tværs af rækkerne. Rækkens nummer står
   i --r på hver række, antallet af rækker i --rows på tabellen.
   ========================================================================== */

.sml { padding-block: var(--section-space); background: var(--bg); color: var(--text-body); }

/* Overskrift til venstre, tekst og knap til højre, på samme bundlinje. */
.sml__head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: end; margin-bottom: var(--stack-block); }
.sml__side { display: grid; gap: var(--space-s); justify-items: start; }
.sml__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sml__table {
  --col: clamp(6.5rem, 4.5rem + 2.5vw, 8.5rem);   /* 104 -> 136 */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, var(--col));
  font-size: var(--type-body);
}
.sml__row { display: contents; }
.sml__row > * { position: relative; grid-row: var(--r); display: grid; place-items: center; padding: var(--space-s) var(--space-xs); }
.sml__row > :nth-child(1) { grid-column: 1; }
.sml__row > :nth-child(2) { grid-column: 2; }
.sml__row > :nth-child(3) { grid-column: 3; }
.sml__row > :nth-child(4) { grid-column: 4; }
.sml__row > :nth-child(5) { grid-column: 5; }
.sml__row > :nth-child(6) { grid-column: 6; }

/* Fladen bag vores kolonne. */
.sml__tone {
  grid-area: 1 / 2 / span var(--rows) / 3;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg));
  border-radius: var(--radius-surface);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg) 85%);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Kolonneoverskrifter. */
.sml__row--head > * { padding: var(--space-m) 0 var(--space-s); font-size: var(--type-small); line-height: var(--leading-title); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: center; color: var(--text-muted); }
/* .sml foran, ellers vinder .hp3a img { max-width: 100% } fra style-v3. Bredden styrer, højden følger med. */
.sml .sml__logo { width: 100%; max-width: 6rem; height: auto; }

/* Rækkerne: punktet til venstre, et mærke i hver kolonne. */
.sml__row:not(.sml__row--head) > * { border-top: 1px solid var(--line-strong); }
.sml__row:not(.sml__row--head) > .is-us { border-top-color: color-mix(in srgb, var(--accent) 18%, var(--bg)); }
.sml__label { justify-items: start; padding-left: 0; font-size: var(--type-lead); line-height: var(--leading-title); font-weight: var(--weight-regular); color: var(--text-muted); }
.sml__label b { font-weight: var(--weight-medium); color: var(--text); }

.sml__mark { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--line); color: var(--text-body); }
.sml__mark svg { width: .85em; height: .85em; }
.sml__mark--yes { color: var(--text); }
.sml__mark--us { background: var(--accent); color: var(--text-on-accent); }

/* Priserne: nederste række, uden etiket. */
.sml__row--price > * { align-content: center; gap: 0; padding: var(--space-m) 0; white-space: nowrap; }
.sml__row--price b { font-weight: var(--weight-semi); color: var(--text); font-variant-numeric: tabular-nums; }
.sml__row--price .is-us b { color: var(--accent-strong); }
.sml__row--price small { font-size: var(--type-small); color: var(--text-muted); }

/* Midlertidig mobil: stablet hoved, og tabellen kan rulles vandret, så intet
   går i stykker. Mobilreglerne kommer senere. */
@media (max-width: 860px) {
  .sml__head { grid-template-columns: 1fr; gap: var(--space-l); }
  .sml__scroll { overflow-x: auto; padding-bottom: var(--space-xl); }
  .sml__table { min-width: 44rem; }
}