/* =========================================================
   Cars & Care · bilpleje.css (Bilpleje og priser)
   Kun sidens egne komponenter. Bruger udelukkende tokens og
   temavariabler fra site.css (ingen nye farver, fonte, radier
   eller skygger). Linkes efter site.css.

   Indhold
    1  Prisoversigt i sidehovedet
    2  Størrelsesguide
    3  Pakker: hjælper, grupper, forslag, størrelsespriser, tablet-flow
    4  Hvad påvirker prisen og Godt at vide
    5  Før og efter (tre korte cases)
    6  Spørgsmål og svar
   ========================================================= */

/* =========================================================
   1  Prisoversigt i sidehovedet
   Mørk, hævet flade som bilisten på forsiden. Hver række
   springer ned til pakken på siden.
   ========================================================= */
.price-index { background: var(--c-raised); border-radius: var(--radius-lg); padding: var(--space-2) clamp(1rem, .6rem + 1.4vw, 1.75rem) var(--space-4); }
.price-index__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line-dark); color: var(--c-subtle-dark); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; }
.price-index__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-4); min-height: 60px; padding: .75rem 0; border-bottom: 1px solid var(--c-line-dark); color: var(--c-text-dark); border-radius: 4px; }
.price-index__name { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.price-index__one { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-muted-dark); line-height: 1.4; }
.price-index__price { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-index__price .from { margin-right: .25rem; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--c-muted-dark); }
.price-index__row .icon { width: 16px; height: 16px; color: var(--c-subtle-dark); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.price-index__row:hover .icon { transform: translateY(2px); color: var(--c-text-dark); }
.price-index__row:hover .price-index__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (max-width: 640px) {
  .price-index__one { display: none; }
  .price-index__row { min-height: 52px; }
}

/* Sidehovedet: teksten står midt for prisoversigten i stedet for i bunden */
.page-head__grid--center { align-items: center; }
/* Sidehovedets højre kolonne holder prisoversigten, så den må være lidt bredere end et foto */
.page-head__aside { justify-self: end; width: 100%; max-width: 30rem; }

@media (max-width: 959px) {
  .page-head__aside { justify-self: start; max-width: 36rem; }
}

/* =========================================================
   2  Størrelsesguide (i .columns.columns--4)
   ========================================================= */
.size-guide__note { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--fg-muted); }
.size-guide__note strong { color: var(--fg); font-weight: 650; }
.size-guide__tag { display: inline-flex; margin-bottom: var(--space-4); }
/* Telefon: navn til venstre, biltype og eksempler til højre, så guiden fylder mindre */
@media (max-width: 640px) {
  .size-guide .columns__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-4); }
  .size-guide .size-guide__name { grid-row: span 2; font-size: 1.25rem; line-height: 1.4; }
  .size-guide .size-guide__type { margin-top: 0; }
  .size-guide .size-guide__examples { margin-top: var(--space-2); }
}

/* =========================================================
   3  Pakker
   ========================================================= */
/* "Ved du ikke, hvad du skal vælge?": spørgsmål til venstre, svar som chips til højre */
.pkg-helper { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-4) var(--space-6); align-items: start; margin-bottom: var(--space-7); padding-block: var(--space-5); border-block: 1px solid var(--c-line-strong); }
.pkg-helper__title { display: flex; align-items: center; gap: .6rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--fg); }
.pkg-helper__title .icon { color: var(--link); }
.pkg-helper__text { margin-top: .35rem; padding-left: calc(20px + .6rem); font-size: var(--fs-small); color: var(--fg-muted); }
.pkg-helper__answer { display: grid; gap: var(--space-3); }
.pkg-helper__result { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--space-4); min-height: 44px; font-size: var(--fs-small); color: var(--fg-muted); }
.pkg-helper__result strong { color: var(--fg); font-weight: 650; }
.pkg-helper__result .link { min-height: 44px; }

/* Foreslået pakke: blå ramme og en lille mærkat på kortets overkant (intet layoutskift) */
.pkg { position: relative; }
.pkg.is-suggested { box-shadow: inset 0 0 0 2px var(--c-accent), var(--shadow-card); }
.pkg__suggest { position: absolute; top: 0; left: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); transform: translateY(-50%); display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-white); font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.pkg__suggest .icon { width: 13px; height: 13px; stroke-width: 2.4; }

/* Stille linje under prisen ("Samme pris for alle størrelser") */
.pkg__note { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
/* Størrelsespriser som hårstregsrækker i kortet (dl.facts) */
.pkg__size-list { margin-top: var(--space-4); }
.pkg__size-list .facts__row { padding: .55rem 0; }
.pkg__size-list dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pkg__size-list .from { margin-right: .25rem; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted); }
.pkg__meta { margin-top: var(--space-4); }

/* Knapperne står på linje øverst i sidste række, også når et kort har et ekstra link */
@media (min-width: 1081px) {
  .pkg__cta { align-self: start; }
}
/* Touch-mål: knappen der folder indholdet ud er mindst 44 px høj */
.pkg__toggle { min-height: 44px; }
.pkg__cta-row .link { min-height: 44px; margin-top: 0; }
.pkg__extra .ph-note { margin-top: 0; }

.packages__foot--note { justify-content: flex-start; }

/* Grupper (CMS-feltet Gruppe): en stille etiket med hårstreg over hver gruppe */
.pkg-group__label { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.pkg-groups__row { margin-top: var(--space-7); }
.pkg-groups__row .pkg-group + .pkg-group { margin-top: var(--space-7); }

/* Desktop: Polering og lak (to kort) og Klargøring til salg (ét kort) deler én række
   med tre kolonner, så alle seks kort står tre og tre og flugter på tværs */
@media (min-width: 1081px) {
  .pkg-groups__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(5, auto); column-gap: var(--space-5); }
  .pkg-groups__row .pkg-group, .pkg-groups__row .packages__grid { display: contents; }
  .pkg-group--paint .pkg-group__label { grid-column: 1 / span 2; grid-row: 1; }
  .pkg-group--sale .pkg-group__label { grid-column: 3; grid-row: 1; }
  .pkg-groups__row .pkg { grid-row: 2 / span 5; }
}
/* Tablet: to kort pr. række inden for hver gruppe */
@media (min-width: 641px) and (max-width: 1080px) {
  .pkg-group .packages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: var(--space-5); }
}
@media (max-width: 1080px) {
  .packages__grid { row-gap: var(--space-6); }
}
@media (max-width: 959px) {
  .pkg-helper { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pkg-helper__text { padding-left: 0; }
  .packages__grid { max-width: none; }
}

/* =========================================================
   4  Hvad påvirker prisen og Godt at vide (i .incl)
   ========================================================= */
.incl__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-5); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--link); }
.incl__icon .icon { width: 20px; height: 20px; }
.incl .incl__note { max-width: 32rem; }
/* Linjen "Står det, du skal bruge, ikke på listen?" under en hårstreg */
.incl__more { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); max-width: 32rem; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--fg-muted); }
.incl__more .link { min-height: 44px; }
/* Godt at vide: etiket til venstre, tekst til højre (dl.facts med venstrestillet tekst) */
.know-list { margin-top: var(--space-5); max-width: 34rem; }
.know-list .facts__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); }
.know-list dt { white-space: normal; }
.know-list dd { text-align: left; font-weight: 500; }
.know-list__link { min-height: 44px; margin-top: var(--space-3); }
@media (max-width: 400px) {
  .know-list .facts__row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* =========================================================
   5  Før og efter: tre korte cases på række
   ========================================================= */
@media (min-width: 960px) {
  .cases--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
}
.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; }

/* =========================================================
   6  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); }