/* =========================================================
   Cars & Care · kontakt.css
   Kun til kontakt.html. Bruger kun tokens og temavariabler fra site.css.
   ========================================================= */

/* ---------- Sidehoved: fire kontaktblokke i hårstregskolonner under titlen ---------- */
.contact-head__blocks { margin-top: clamp(2.75rem, 1.75rem + 3vw, 4.5rem); }
.contact-head__blocks .hours { margin-top: var(--space-4); }
.contact-head__notes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.contact-head__notes .ph-note { margin-top: 0; }
/* Åbningstider i en smal kolonne: ydelse over tid */
.hours--stack { border-top: 0; }
.hours--stack .hours__row { flex-direction: column; align-items: flex-start; gap: .15rem; }
.hours--stack .hours__row:first-child { padding-top: 0; }
.hours--stack .hours__row:last-child { border-bottom: 0; }
.hours--stack dd { text-align: left; font-weight: 500; }

/* ---------- Find os: kort til venstre, overskrift og fakta til højre ----------
   Til ejer: samme blok som på Om os (og planlagt på forsiden). På mobil: overskrift, kort, fakta. */
.findos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "map head" "map info"; grid-template-rows: auto 1fr; column-gap: var(--space-8); }
.findos__head { grid-area: head; margin-bottom: var(--space-6); }
.findos__map { grid-area: map; display: flex; flex-direction: column; }
.findos__info { grid-area: info; }
.findos__map .map { flex: 1 1 auto; aspect-ratio: auto; min-height: 24rem; }
.findos__map .ph-note { margin-top: var(--space-4); }
.findos__info .facts dd { max-width: 60%; }
.findos__info .ph-note { margin-top: var(--space-4); }
/* Én linje om køretiden fra nabobyerne (erstatter "Kunder fra området" på de andre sider) */
.findos__nearby { margin-top: var(--space-5); color: var(--fg-muted); }

/* ---------- Åbningstider for hele ugen: syv celler med hårstreg over, som trinene på forsiden ---------- */
.week { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.week__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); }
.week__note { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-small); color: var(--fg-muted); }
.week__note .icon { color: var(--link); margin-top: .15em; }
.week .ph-note { margin-top: var(--space-5); }
.hours--week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--space-4); border-top: 0; }
.hours--week .hours__row { position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .4rem; padding: var(--space-4) 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.hours--week dt { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.hours--week .hours__row.is-today dt::after { margin-left: 0; }
.hours--week dd { text-align: left; }
.hours--week .hours__row.is-today::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--link); }

/* ---------- Skriv til os ---------- */
.contact-form__intro .intro__text { margin-top: var(--space-4); }
.contact-form__call { margin-top: var(--space-5); color: var(--fg-muted); }
.contact-form__notes { margin-top: var(--space-6); }
.contact-form__notes .ph-note + .ph-note { margin-top: var(--space-3); }

/* ---------- Følg os og firmaoplysninger ---------- */
.contact-meta__title { margin-bottom: var(--space-4); }
.contact-meta .link-list small { overflow-wrap: anywhere; }
.contact-meta .link-list .icon { width: 18px; height: 18px; }

/* ---------- Trykflade ----------
   Selvstændige tekstlinks er kun ca. 24 px høje. En usynlig flade på 44 px gør dem lette
   at ramme på en telefon uden at flytte layoutet. Til ejer: kandidat til site.css. */
.findos .link, .contact-block .link, a.contact-block__value, .facts dd a { position: relative; }
.findos .link::after, .contact-block .link::after, a.contact-block__value::after, .facts dd a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }

@media (max-width: 1080px) {
  .hours--week { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-5); }
}
@media (max-width: 959px) {
  .findos { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "info"; grid-template-rows: auto; }
  .findos__map .map { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .findos__info { margin-top: var(--space-6); }
}
@media (max-width: 640px) {
  /* Kvadratisk, så etiketten i kortet ikke rammer Find vej-knappen */
  .findos__map .map { aspect-ratio: 1 / 1; }
  /* Fakta som stablede rækker på mobil: etiket over værdi */
  .findos__info .facts__row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .findos__info .facts dd { max-width: none; text-align: left; }
  /* Ugen som almindelige rækker: dag til venstre, tid til højre */
  .hours--week { display: block; border-top: 1px solid var(--line); }
  .hours--week .hours__row { flex-direction: row; justify-content: space-between; align-items: baseline; padding: .75rem 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .hours--week .hours__row.is-today::before { display: none; }
  .hours--week dd { text-align: right; }
  .contact-head__notes .ph-note { width: 100%; }
}