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

/* ---------- Sidehoved: pladsholder for værkstedsfotoet, et lille rigtigt foto ovenpå ----------
   Samme greb som kortet i forsidens hero: et mindre element, der overlapper rammen nederst til venstre.
   Til ejer: når fotoet af værkstedet med det bagbelyste logo findes, erstattes .ph-img af
   <span class="photo ..."><img ...></span> med et udsnit, der passer i 4:3. */
.about-media { position: relative; max-width: 440px; padding-bottom: var(--space-7); }
.about-media__main { align-content: start; padding-top: 18%; }
.page-head__media .about-media__inset {
  position: absolute; left: clamp(-3rem, -3.4vw, -1.25rem); bottom: 0;
  width: 46%; max-width: 210px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--c-line-dark);
}

/* Ejerens egne fotos fylder rammen (4:3) */
.photo--cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-media__photo { aspect-ratio: 4 / 3; }
.story__media.photo { aspect-ratio: 4 / 3; width: 100%; }
.story__link { margin-top: var(--space-5); }

/* ---------- Biludlejning: foto til venstre, ejerens tekst til højre ---------- */
.about-rental__media { aspect-ratio: 1284 / 293; } /* bredt foto af hele flåden */
.about-rental__text { margin-top: var(--space-4); max-width: var(--measure); color: var(--fg-muted); }
.about-rental__link { margin-top: var(--space-5); }

/* ---------- Vores historie ----------
   Overskrift og foto til venstre, udsagnet til højre. På mobil: overskrift, tekst, foto. */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "title text" "media text"; grid-template-rows: auto 1fr; column-gap: var(--space-8); }
.story__title { grid-area: title; }
.story__text { grid-area: text; }
.story__media { grid-area: media; align-self: start; margin-top: var(--space-7); max-width: 26rem; }
/* Udsagnet står stort og let, med samme blå streg over sig som trinene på forsiden */
.story__statement {
  position: relative; padding-top: var(--space-5); border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); font-weight: 300; line-height: 1.3; letter-spacing: -.024em;
  color: var(--fg); max-width: 22em; text-wrap: pretty;
}
.story__statement::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--link); }
.story__body { margin-top: var(--space-6); max-width: var(--measure); color: var(--fg-muted); }

/* ---------- Sådan arbejder vi ----------
   Tre linjer (Grundigt, Ærligt, Lokalt) stablet til højre med hårstreger imellem, faktarækken under. */
.work__link { margin-top: var(--space-5); }
.work__media { margin-top: var(--space-7); }
.columns.work__grid { align-self: start; grid-template-columns: minmax(0, 1fr); }
.work__grid .ph-note { margin-top: var(--space-3); }
.work__facts + .ph-note { margin-top: 0; }

/* ---------- Folkene bag ---------- */
.people__intro .intro__text { margin-top: var(--space-4); }
.people__intro .ph-note { margin-top: var(--space-5); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.person__photo { margin-bottom: var(--space-4); }
.person__name { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--fg); }
.person__role { margin-top: .3rem; font-size: var(--fs-small); color: var(--fg-muted); }

/* ---------- Find os: kort til venstre, overskrift og fakta til højre ----------
   Til ejer: samme blok som på Kontakt (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); }
.findos__photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.findos__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Virksomhedsoplysninger: én stille række med hårstreger ---------- */
.org__title { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-5); }
.org__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.org__item { padding-top: var(--space-4); border-top: 1px solid var(--line); min-width: 0; }
.org__item dt { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); }
.org__item dd { margin-top: .3rem; font-weight: 650; color: var(--fg); overflow-wrap: break-word; }
.org__item a { border-radius: 4px; text-decoration: underline; text-decoration-color: var(--control); text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color var(--dur) var(--ease); }
.org__item a:hover { text-decoration-color: currentColor; }

/* ---------- 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, .work__link, .facts dd a, .org__item a { position: relative; }
.findos .link::after, .work__link::after, .facts dd a::after, .org__item a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }

@media (max-width: 1080px) {
  .org__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-5); }
}
@media (max-width: 959px) {
  .about-media { max-width: 420px; }
  .page-head__media .about-media__inset { left: var(--space-4); }
  .story { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "media"; grid-template-rows: auto; }
  .story__text { margin-top: var(--space-6); }
  .story__media { margin-top: var(--space-6); }
  .work__media { margin-top: var(--space-6); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .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) {
  .about-media { padding-bottom: var(--space-6); }
  .page-head__media .about-media__inset { width: 44%; }
  /* Folkene som rækker: lille portræt til venstre, navn og opgave til højre */
  .people { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .person { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
  .person__photo { grid-row: span 2; margin-bottom: 0; }
  .person__photo .ph-img__label { display: none; }
  .person__name { align-self: end; }
  .person__role { align-self: start; }
  /* 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; }
  .org__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org__item--wide { grid-column: 1 / -1; }
}