/* =========================================================
   Cars & Care · klargoering-til-salg.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: tre dele med foto
    3  Pakker og priser: kort, størrelsesrækker og partnerlinjen
    4  Før og efter: fod
    5  Er du forhandler?
    6  Spørgsmål og svar
   ========================================================= */

/* =========================================================
   1  Sidehoved
   ========================================================= */
.page-head__media .photo { margin-left: auto; }
@media (max-width: 959px) {
  .page-head__media .photo { margin-left: 0; }
}

/* =========================================================
   2  Det gør vi: tre dele, hver med et lille foto over
   ========================================================= */
.work-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.work-step { display: flex; flex-direction: column; }
.work-step .ph-img { margin-bottom: var(--space-5); }
.work-step .step { flex: 1; }
.work-steps__note { margin-top: var(--space-7); }

@media (max-width: 959px) {
  .work-steps { grid-template-columns: minmax(0, 1fr); max-width: 40rem; gap: var(--space-6); }
  .work-step { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .work-step .ph-img { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .work-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .work-step .ph-img { max-width: 20rem; }
}

/* =========================================================
   3  Pakker og priser
   ========================================================= */
.packages__grid--single { grid-template-columns: minmax(0, 1fr); max-width: none; }
.packages__grid--single .pkg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.pkg__cta-row .link { min-height: 44px; margin-top: 0; }
.pkg__cta-row { grid-template-columns: minmax(0, 22rem); }

.size-panel__title { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--fg); margin-bottom: var(--space-4); }
.size-panel__note { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--fg-muted); }
.size-panel .link { min-height: 44px; margin-top: var(--space-2); }
.size-panel .size-rows__row { grid-template-columns: minmax(4.5rem, 1fr) minmax(0, 3fr) auto; gap: var(--space-2) var(--space-4); }

@media (max-width: 1180px) {
  .size-panel .size-rows__row { grid-template-columns: minmax(0, 1fr) auto; }
  .size-panel .size-rows__desc { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .packages__grid--single .pkg__list { grid-template-columns: minmax(0, 1fr); }
  .pkg__cta-row { grid-template-columns: minmax(0, 1fr); }
}
.pkg__toggle { min-height: 44px; }

/* Skal der rettes noget, før bilen sælges? (aside.notice under priserne) */
.fix-box { max-width: 46rem; margin-top: var(--space-7); }
.fix-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  Er du forhandler? (lyst CTA-bånd med ikon)
   ========================================================= */
.dealer__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-5); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--link); }
.dealer__icon .icon { width: 22px; height: 22px; }

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