/* =========================================================
   Cars & Care · bil-citroen-c3.css
   Kun til bilsiden (skabelonen for alle biler). Linkes efter site.css.
   Bruger kun tokens og temavariabler fra site.css.
   Klassenavne med præfikset bil-.
   ========================================================= */

/* ---------- Sidehoved: status og navn ---------- */
.bil-head { padding-bottom: var(--space-7); }
.bil-head .breadcrumb { margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.bil-head__status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-bottom: var(--space-4); }
.bil-head__from { font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); }
/* Pladsholdere i store overskrifter: som inline-block, så klammernes flade ikke dækker linjen over.
   Til ejer: forsvinder, når årgangen kommer fra CMS. */
.bil-head .page-head__title .ph, .bil-enquiry__intro .h2 .ph { display: inline-block; line-height: 1.1; }

/* Til ejer: kun til gennemgangen (vis skabelonen med en anden status). Fjernes før lancering. */
.bil-review { flex-wrap: wrap; align-items: center; justify-self: end; margin-top: 0; max-width: 30rem; }
.bil-review__text { flex: 1 1 12rem; }
.bil-review__chips { flex: 1 1 100%; }

/* ---------- Galleri og prisboks ----------
   Den mørke ramme fortsætter et stykke ned bag galleriet og prisboksen,
   så sidehoved og indhold hænger sammen. */
.bil-main { --bil-strip: clamp(5rem, 2rem + 9vw, 11rem); position: relative; padding-top: 0; }
.bil-main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--bil-strip); background: var(--c-anthracite); }
.bil-main > .container { position: relative; }

.bil-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "gallery box" "details box";
  column-gap: var(--space-8); align-items: start;
}
.bil-layout__gallery { grid-area: gallery; }
.bil-layout__gallery .car-gallery__bar { margin-top: var(--space-5); }
.bil-layout__details { grid-area: details; }
/* Miniaturernes navn må ikke gøre en kolonne bredere end de andre (fx "Bagagerum" i 8 smalle kolonner) */
.bil-layout__gallery .car-gallery__thumb { min-width: 0; }
.bil-thumb__label { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Prisboksen klæber, mens man ser galleri, specifikationer og udstyr (fra 960 px) */
.bil-box {
  grid-area: box; position: sticky; top: calc(var(--header-h) + var(--space-5));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}
.bil-box__rented { margin-bottom: var(--space-5); }
.bil-box__price { margin-top: var(--space-3); font-size: var(--fs-price); font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--fg); }
.bil-box__price .per { margin-left: .35em; font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); white-space: nowrap; }
.bil-box__price .from { margin-right: .3em; font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--fg-muted); }
.bil-box__vat { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--fg-muted); }
.bil-box__total { margin-top: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.bil-box__fee { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--fg-muted); }
.bil-box__note { margin-top: var(--space-3); }
.bil-box__list { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.bil-box__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Om bilen, specifikationer og udstyr ---------- */
.bil-about { margin-top: var(--space-8); }
.bil-about .lead { margin-top: var(--space-4); max-width: 34rem; }
.bil-block { margin-top: var(--space-7); }
.bil-block__title { margin-bottom: var(--space-4); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
/* Ulige antal rækker: den sidste række går over begge kolonner */
.bil-spec .spec__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bil-equip { padding-top: var(--space-5); border-top: 1px solid var(--line); }

/* ---------- Fælles blokke ---------- */
.bil-incl .eyebrow { margin-bottom: var(--space-3); }
.bil-incl__foot { margin-top: var(--space-7); }
.bil-incl__note { margin-top: var(--space-5); }
.bil-krav { align-items: stretch; }
.bil-krav__rki { margin-top: var(--space-6); max-width: 30rem; }
.bil-krav__list { align-self: end; }
/* Pladsholder under et krav: mindre og lettere end selve kravet */
.bil-reqs__sub { display: block; margin-top: .3rem; font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; color: var(--fg-muted); }

/* ---------- Sådan får du bilen (mørk) ---------- */
.bil-steps__note { max-width: 46rem; font-size: var(--fs-small); }
.bil-steps__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Forespørgsel ---------- */
.bil-enquiry__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.bil-enquiry__lead { margin-top: var(--space-5); max-width: 28rem; }
.bil-enquiry__call { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); max-width: 28rem; color: var(--fg-muted); }
.bil-enquiry__asap { margin-top: var(--space-2); }
.bil-enquiry__alt { margin-top: var(--space-3); }
.bil-enquiry__declare .field__error { margin-top: 0; }
.bil-enquiry__form .ph-note { margin-top: 0; }
.bil-enquiry__form .bil-enquiry__alt + .ph-note { margin-top: var(--space-4); }
.bil-enquiry__slug { max-width: none; }
.form-success .summary__label { margin-top: var(--space-2); }

/* ---------- Andre ledige biler: introen tager den første af tre kolonner ---------- */
.bil-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.bil-others__intro { padding-right: var(--space-5); }
.bil-others__text { margin-top: var(--space-4); color: var(--fg-muted); max-width: 22rem; }
.bil-others__btn { margin-top: var(--space-6); }
.bil-others .car-card { height: 100%; }

@media (max-width: 1080px) {
  .bil-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bil-others__intro { grid-column: 1 / -1; padding-right: 0; margin-bottom: var(--space-4); }
}
@media (max-width: 959px) {
  .bil-review { justify-self: start; }
  .bil-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "box" "details"; row-gap: var(--space-6); }
  .bil-box { position: static; max-width: 36rem; }
  .bil-about { margin-top: var(--space-4); }
  .bil-krav__list { align-self: start; }
  .bil-enquiry__intro { position: static; }
}
/* Tablet: de tre trin bliver stående på én række */
@media (min-width: 641px) and (max-width: 959px) {
  .bil-steps.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Galleriet er højst 36rem bredt: alle otte miniaturer på én række, så pladsholderne fylder mindre */
  .bil-layout__gallery .car-gallery__thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bil-others { grid-template-columns: minmax(0, 1fr); }
  .bil-steps__actions .btn { flex: 1 1 100%; }
}