/* =========================================================================
   RESPONSIVE — mobile first i intensjon, men skrevet som nedtrapping fra
   desktop fordi basisreglene i styles.css definerer det romslige oppsettet.
   Brytepunkter:
     1200px  liten desktop
     1024px  landskap-nettbrett
      860px  nettbrett / stor mobil  ← hovedskiftet
      560px  mobil
   ========================================================================= */

/* ---------------------------- ≤ 1200px ---------------------------- */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-col--nav2 { display: none; }
  .hero-card { left: 0; }
  .nav__link, .nav__toggle { padding-inline: var(--s-3); }
}

/* ---------------------------- ≤ 1100px ----------------------------
   Mellom 861 og 1100px er det for trangt til logo + full meny + telefon
   + knapp. Telefonnummeret i headeren vikes først — det finnes fortsatt
   i footeren, i mobil-bunnlinjen og på kontaktsiden.
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .header-phone { display: none; }
  .nav__link, .nav__toggle { padding-inline: var(--s-2); font-size: 0.9rem; }
  .nav__link::after { left: var(--s-2); right: var(--s-2); }
}

/* ---------------------------- ≤ 1024px ---------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .hero-copy { max-width: 40rem; }
  .hero-visual { max-width: 34rem; }
  .hero-card { position: static; width: 100%; margin-top: var(--s-5); box-shadow: none; }

  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: var(--s-8); }
  .split--reverse-mobile > *:first-child { order: 2; }
  .split--reverse-mobile > *:last-child { order: 1; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .tx-cards { grid-template-columns: repeat(2, 1fr); }
  .iconrow__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar__item { border-left: 0; border-top: var(--bw) solid var(--c-line-soft);
                    padding: var(--s-6) 0; }
  .trustbar__item:nth-child(-n+2) { border-top: 0; }
  .trustbar__item:nth-child(even) { padding-left: var(--s-6);
                                    border-left: var(--bw) solid var(--c-line-soft); }

  .booking__body { grid-template-columns: 1fr; }
  .booking__pane + .booking__pane { border-left: 0; border-top: var(--bw) solid var(--c-line); }

  .toc { display: none; }
  .has-toc { grid-template-columns: 1fr !important; }
}

/* ----------------------------- ≤ 860px -----------------------------
   Hovedskiftet: navigasjonen går over til skuff, mobil bunnlinje slås på.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .nav, .header-phone { display: none; }
  .burger { display: flex; }
  .header-actions .btn--header { display: none; }
  .mobilebar { display: flex; }

  /* Plass til bunnlinjen slik at den aldri dekker innhold */
  body { padding-bottom: 74px; }
  .site-footer { margin-bottom: 0; }

  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .tx-cards { grid-template-columns: 1fr; }

  .tx-more { flex-direction: column; align-items: flex-start; text-align: left; }
  .tx-more__cta { width: 100%; justify-content: center; }

  .tx-row {
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
      'num name arrow'
      '.   desc desc';
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-5);
    align-items: center;
  }
  .tx-row__num  { grid-area: num; }
  .tx-row__name { grid-area: name; }
  .tx-row__desc { grid-area: desc; margin-top: var(--s-1); }
  .tx-row__arrow { grid-area: arrow; }
  .tx-row:hover { padding-left: var(--s-3); }

  .info-grid { grid-template-columns: 1fr; }
  .info-cell { border-left: 0; border-top: var(--bw) solid var(--c-line); }
  .info-cell:first-child { border-top: 0; }

  .urgent { grid-template-columns: 1fr; text-align: left; gap: var(--s-4); }
  .urgent .btn { justify-self: start; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .collage { grid-template-columns: repeat(2, 1fr); }
  .collage > * { grid-column: span 1 !important; }

  .step { grid-template-columns: 2.5rem 1fr; gap: var(--s-4); }
  .faq__a p { padding-right: var(--s-4); }

  .section-head { margin-bottom: var(--s-7); }
}

/* ----------------------------- ≤ 560px ----------------------------- */
@media (max-width: 560px) {
  .btn { width: 100%; padding-inline: var(--s-5); white-space: normal; text-align: center; }

  /* Ikonstripen beholder to kolonner helt ned — seks korte etiketter
     under hverandre ville blitt en unødvendig lang kolonne. */
  .iconrow__grid { grid-template-columns: repeat(2, 1fr); }

  /* To kolonner blir for trangt under 560px — trustbar går til én. */
  .trustbar__grid { grid-template-columns: 1fr; }
  .trustbar__item, .trustbar__item:nth-child(even) {
    padding: var(--s-5) 0;
    border-left: 0;
    border-top: var(--bw) solid var(--c-line-soft);
  }
  .trustbar__item:first-child { border-top: 0; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .mobilebar .btn { width: auto; }
  .cta-band .btn-row { align-items: stretch; }

  .hero { padding-top: var(--s-6); }
  .hero-copy .display-1 { font-size: clamp(2.35rem, 1.4rem + 4.4vw, 3rem); }

  .footer-grid { grid-template-columns: 1fr; }
  .collage { grid-template-columns: 1fr; }

  .booking__pane, .card, .info-cell, .review-placeholder { padding: var(--s-5); }
  .booking__head { padding: var(--s-5); }
  .demo-banner { flex-direction: column; gap: var(--s-3); }

  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .day { min-width: 66px; }

  .faq__q { font-size: var(--t-body); padding-inline: 0; }
  .faq__a p { padding-inline: 0 var(--s-2); }

  .tx-row { padding-inline: 0; }
  .tx-row:hover { padding-left: var(--s-2); }
}

/* -------------------- Store skjermer: mer luft ---------------------- */
@media (min-width: 1600px) {
  .hero { padding-top: var(--s-10); }
}

/* ---- Brukere som foretrekker mer kontrast (Windows høykontrast m.m.) --- */
@media (prefers-contrast: more) {
  :root {
    --c-muted: #3C5763;
    --c-line: #9FBAC4;
    --c-teal: var(--c-teal-600);
  }
  .btn { border-width: 2px; }
  .ph { border-style: solid; }
}

/* Mørk modus er bevisst IKKE implementert i denne prototypen.
   Årsak: en klinikkside med ett besøk per pasient tjener lite på det,
   og en halvgjort mørk modus svekker kontrast og tillit. Dokumentert
   som mulig utvidelse i docs/DESIGN-SYSTEM.md. Vi låser fargeskjemaet
   slik at nettleseren ikke auto-inverterer. */
:root { color-scheme: light; }

/* Godkjenningskort */
@media (max-width: 1024px) { .cred-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px)  { .cred-grid { grid-template-columns: 1fr; } }