/* =========================================================
   Cars & Care · keramisk-coating.css
   Kun sidens egne komponenter. Bruger udelukkende tokens og
   temavariabler fra site.css. Linkes efter site.css.

   Indhold
    1  Sidehoved: foto
    2  Det gør vi: arbejdsgang i hårstregsrækker
    3  Priser: tabel, størrelser, to pakkekort og boksen om ridser
    4  Før og efter: fod
    5  Spørgsmål og svar
   ========================================================= */

/* =========================================================
   1  Sidehoved: fotoet står i bunden ud for knapperne
   ========================================================= */
.page-head__media .photo { margin-left: auto; }
@media (max-width: 959px) {
  .page-head__media .photo { margin-left: 0; }
}

/* =========================================================
   2  Det gør vi: én række pr. del af arbejdet.
   Nummer og titel, tekst og et lille foto, delt af hårstreger.
   ========================================================= */
.process { border-top: 1px solid var(--line); }
.process__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-4) var(--space-7); align-items: start; padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.process__num { display: block; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .14em; color: var(--link); font-variant-numeric: tabular-nums; }
.process__title { margin-top: var(--space-3); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 400; letter-spacing: -.022em; line-height: 1.2; color: var(--fg); }
.process__title strong { font-weight: 650; }
.process__text { padding-top: calc(var(--space-3) + 1.1rem); color: var(--fg-muted); max-width: 30rem; }
.process__text p + p { margin-top: var(--space-3); }
.process__media { width: 100%; }
.process__foot { margin-top: var(--space-5); }

@media (max-width: 959px) {
  .process__item { grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); }
  .process__head { grid-column: 1; }
  .process__text { grid-column: 1; padding-top: 0; }
  .process__media { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .process__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-5); }
  .process__media { grid-column: 1; grid-row: auto; max-width: 18rem; margin-top: var(--space-2); }
}

/* =========================================================
   3  Priser: tabellen til venstre, størrelserne til højre,
   og de to pakkekort under (to kolonner)
   ========================================================= */
.price-split { margin-bottom: var(--space-7); }
.price-split .price-table { background: transparent; }
.price-table__book { font-weight: 650; }

.size-legend { border-top: 1px solid var(--line); }
.size-legend__label { padding-top: .8rem; margin-bottom: .8rem; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.size-legend__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); padding: .9rem 0; border-bottom: 1px solid var(--line); }
.size-legend dt { font-weight: 650; color: var(--fg); }
.size-legend dd { font-size: var(--fs-small); color: var(--fg-muted); }
.size-legend dd span { display: block; color: var(--fg); font-weight: 550; }
.size-legend__link { min-height: 44px; margin-top: var(--space-3); }

/* To kort pr. række */
.packages__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.packages__grid--pair .pkg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
@media (min-width: 1081px) {
  .packages__grid--pair .pkg__cta { align-self: start; }
}
.pkg__cta-row .link { min-height: 44px; margin-top: 0; }
.pkg__toggle { min-height: 44px; }

@media (max-width: 1080px) {
  .packages__grid--pair { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .packages__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: var(--space-5); }
  .packages__grid--pair .pkg__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .packages__grid--pair .pkg__list { grid-template-columns: minmax(0, 1fr); }
  .packages__grid { max-width: none; }
}

/* Kan polering fjerne ridser? (aside.notice under kortene) */
.scratch-box { max-width: 46rem; margin-top: var(--space-7); }
.scratch-box .link { min-height: 44px; }

/* =========================================================
   4  Før og efter: note og link under casene
   ========================================================= */
.case__actions .link { min-height: 44px; }
.cases__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); }
.cases__foot .ph-note { margin-top: 0; }
.cases__foot .link { min-height: 44px; }

/* Praktisk på mørk: links i kolonnerne */
.columns__item .link { min-height: 44px; margin-top: var(--space-2); }

/* =========================================================
   5  Spørgsmål og svar: overskrift til venstre, svar til højre
   ========================================================= */
.faq-side .h2 { max-width: 9em; }
.faq-side .link { min-height: 44px; margin-top: var(--space-5); }