/* =========================================================
   Cars & Care · index.css
   Kun til index.html (forsiden). Bruger kun tokens og temavariabler fra site.css.
   ========================================================= */

/* ---------- Tre veje: tre åbne kolonner med hårstreger (D2 "To veje" med tre døre) ---------- */
.path__vat { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--fg-muted); }
/* "Pris efter aftale" er tekst, ikke et tal: mindre grad, men på samme grundlinje som priserne */
.path__price--text { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }

@media (min-width: 960px) {
  /* Fire fælles rækker (etiket, pris, linje, knapper), så linjerne står på linje på tværs */
  .paths__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .paths__grid--three .path { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .paths__grid--three .path + .path:not(:last-child) { padding-right: var(--col-pad); }
  .paths__grid--three .path__price--text { line-height: 1; padding-top: calc((var(--fs-price) - var(--fs-h3)) * .72); }
  /* Tre smallere kolonner: tekstlinket står under knappen i alle tre døre */
  .paths__grid--three .path__actions { align-self: end; flex-direction: column; align-items: flex-start; }
}
@media (min-width: 960px) and (max-width: 1180px) {
  .paths__grid--three .path:first-child { padding-right: var(--space-6); }
  .paths__grid--three .path + .path { padding-left: var(--space-6); }
  .paths__grid--three .path + .path:not(:last-child) { padding-right: var(--space-6); }
}

/* Partnerlinjen under de tre døre: én rolig linje på en hårstreg */
.paths__more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3) var(--space-6); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.paths__more p { max-width: 46rem; color: var(--fg-muted); font-size: var(--fs-body); }
.paths__more strong { color: var(--fg); font-weight: 650; }

@media (max-width: 959px) {
  .paths__more { margin-top: var(--space-6); }
}

/* ---------- Resultater fra værkstedet: hele fotos i 3:2, så bilen ikke beskæres ---------- */
.tile--photo { aspect-ratio: 3 / 2; }
.tile--photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }

/* ---------- Det siger kunderne ---------- */
.reviews__source { margin-top: var(--space-6); max-width: 46rem; }

/* ---------- Biludlejning: momslinje under prisen ---------- */
.included__vat { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--fg-muted); }
.sub__cars .ph-note { margin-top: var(--space-4); }

/* ---------- Erhverv: logorække med hårstreger, partnerlinje og knapper ---------- */
.logo-wall--six { border-block: 1px solid var(--line); }
@media (min-width: 960px) {
  .logo-wall--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.b2b-band__note { margin-top: var(--space-3); }
.b2b-band__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5) var(--space-7); margin-top: var(--space-7); }
.b2b-band__text { max-width: 40rem; color: var(--fg-muted); font-size: var(--fs-lead); line-height: 1.6; }
.b2b-band__foot .b2b__actions { margin-top: 0; }

/* ---------- Spørgsmål ---------- */
.home-faq .faq-group { padding-bottom: 0; }
.home-faq .faq-group__head .link { margin-top: var(--space-5); }

/* ---------- Find os ---------- */
.home-findos__info .h2 { margin-bottom: var(--space-6); }
.home-findos__info .facts dd { max-width: 62%; }
/* To fotos under fakta, som på Om os og Kontakt */
.home-findos__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.home-findos__photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pakker: med "fra" pr. størrelse ombrydes rækken, så prikkerne udgår (som site.css gør på smalle skærme) ---------- */
.pkg__sizes { column-gap: 1.1rem; }
.pkg__sizes div + div::before { display: none; }

/* ---------- Biludlejning: overskriften på én linje, hvor der er plads ---------- */
.intro--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  /* Plads til adressen, kortnoten og Find vej uden overlap (som på Kontakt) */
  .home-findos .map { aspect-ratio: 1 / 1; }
}

/* ---------- Toppen med baggrundsvideo fra værkstedet ---------- */
.hero--video { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(4.5rem, 2rem + 8vw, 9rem); }
.hero__video { position: absolute; inset: 0; z-index: -2; background: var(--c-anthracite); }
.hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Antracit tone over videoen: mørkest bag teksten til venstre og i bunden, så kontrasten holder */
.hero--video::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30, 35, 41, .94) 0%, rgba(30, 35, 41, .8) 42%, rgba(30, 35, 41, .45) 100%),
    linear-gradient(0deg, rgba(30, 35, 41, .95) 0%, rgba(30, 35, 41, 0) 40%);
}
.hero--video .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--video .hero__copy { max-width: 40rem; }
.hero--video .trust { margin-top: clamp(3rem, 1rem + 6vw, 6rem); }
@media (max-width: 767px) {
  .hero--video::before { background: linear-gradient(180deg, rgba(30, 35, 41, .72) 0%, rgba(30, 35, 41, .82) 60%, rgba(30, 35, 41, .96) 100%); }
  .hero__video video { object-position: 65% 50%; }
}
/* Blød overgang, når baggrundsvideoen starter forfra (script nederst i index.html) */
.hero__video video { transition: opacity .6s ease; }
.hero__video video.is-fading { opacity: 0; }

/* Kort tekst under Find os: hvad vi laver i Slagelse */
.home-findos__tekst { margin: 12px 0 20px; max-width: 52ch; }