/* ============================================================
   MOBILE REFINEMENTS — loaded last, only affects ≤880px
   1. Fixes the mobile menu (backdrop-filter on .nav.scrolled made the
      fixed panel resolve against the nav bar instead of the viewport,
      so the menu collapsed to a 120px strip once you scrolled).
   2. Tightens vertical rhythm, card padding and type for phones.
   ============================================================ */

@media (max-width: 880px) {
  /* --- menu fix: no backdrop-filter on mobile → no new containing block --- */
  .nav.scrolled { background: rgba(10,31,48,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__mobile { padding: 76px 20px calc(28px + env(safe-area-inset-bottom)); gap: 0; }
  .nav__mobile > a { display: flex; align-items: center; min-height: 54px; padding: 12px 4px; font-size: 19px; }
  .nav__mobile-foot { margin-top: 22px; }
  .nav__brand img { height: 26px; }
  .nav__brand .word { font-size: 19px; }
  .lang-switch button { min-height: 44px; padding-inline: 14px; }
}

@media (max-width: 720px) {
  html { overflow-x: clip; }

  /* --- vertical rhythm: 120px bands are desktop-sized --- */
  .band { padding: 74px 0; }
  .pcta { padding: 74px 0 80px; }
  .phero { padding: 118px 0 62px; }
  #platform { padding-top: 44px; }
  .sim-divider { margin-top: 56px; padding-top: 40px; }

  /* --- section heads --- */
  .sect-head h2 { font-size: clamp(28px, 7.6vw, 34px); }
  .sect-head p { margin-top: 15px; font-size: 16.5px; line-height: 1.55; }
  .prose p { font-size: 16.5px; }

  /* --- grids: shorter cards, tighter gaps --- */
  .qgrid, .sustain, .solve-grid, .mods, .caps, .kfeat, .quick__grid, .news { gap: 13px; margin-top: 34px; }
  .shift-grid, .team-grid, .expertise-band { gap: 14px; }

  .qcard { padding: 21px 19px; gap: 10px; }
  .qcard h3 { font-size: 19.5px; }
  .qcard p { font-size: 14.5px; }
  .qcard__q { font-size: 44px; right: 14px; top: 8px; }

  .spoint { padding: 21px 19px; gap: 10px; }
  .spoint__ic { width: 38px; height: 38px; }
  .spoint h3 { font-size: 18px; }

  .solve-card { padding: 19px 18px; gap: 14px; }
  .shift-card { padding: 21px 19px; }

  .mods .mod__panel { padding: 19px 17px 17px; min-height: 0; }
  .mods .mod__chips { padding-top: 15px; }
  .cap, .kfeat__item, .ql, .salescard { padding: 17px 16px; }

  .investeu { padding: 21px 19px; }
  .investeu__logo { padding: 20px; }
  .investeu__h { font-size: 21px; margin-bottom: 12px; }

  .logo { height: 74px; padding: 12px 14px; }
  .tcar { margin-top: 48px; }

  /* --- iOS: 100vh leaves the hero taller than the visible viewport --- */
  .hero { min-height: 100svh; }

  /* --- comfortable tap targets --- */
  .footer__cols a, .footer a { display: inline-block; padding-block: 6px; }
  .news-more, .btn { min-height: 46px; }
}

@media (max-width: 520px) {
  .band { padding: 62px 0; }
  .pcta { padding: 62px 0 70px; }
  .wrap { padding: 0 18px; }
}

/* --- modellsimulator: skjult på desktop, mobilknapp under --- */
.sim__mtoggle { display: none; }

/* --- nyhetskort + simulator på mobil --- */
@media (max-width: 720px) {
  .ncard__media { aspect-ratio: 16 / 9; }
  .ncard__body { padding: 16px 17px 18px; }
  .ncard__title { font-size: 18px; margin-top: 8px; }
  .ncard__excerpt { margin-top: 9px; }
  .ncard__more { margin-top: 14px; padding-top: 13px; }
  .news__foot { margin-top: 26px; }

  /* resultatet først; forutsetningene bak en knapp */
  .sim { display: flex; flex-direction: column; gap: 13px; margin-top: 40px; }
  .sim .simout { order: 1; }
  .sim__mtoggle {
    order: 2; display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: transparent; border: 1px solid var(--hz-hero); border-radius: var(--hz-r-md);
    color: var(--hz-hero); font-family: var(--hz-font-sans); font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: background var(--hz-dur-base) var(--hz-ease-out);
  }
  .sim__mtoggle:active { background: rgba(206,239,67,0.1); }
  .sim__mtoggle .chev { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
  .sim__mtoggle-close { display: none; }
  .sim.sim--open .sim__mtoggle .chev { transform: rotate(180deg); }
  .sim.sim--open .sim__mtoggle-open { display: none; }
  .sim.sim--open .sim__mtoggle-close { display: inline; }
  .sim #simInputs { order: 3; }
  .sim:not(.sim--open) #simInputs { display: none; }
  .sim-disclaimer { margin-top: 18px; }
}

@media (max-width: 720px) {
  /* flytkjeden: la den brytes i stedet for å presse teksten ut av boksene */
  .simflow { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .simflow__node { flex: 0 1 auto; padding: 9px 12px; font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; }
  .simflow__arrow { width: 14px; }

  /* scenariovalg øverst, utenfor panelet */
  .sim > .simscen {
    order: 0; margin: 0; padding: 14px 15px 15px;
    background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
  }
  .sim > .simscen .simscen__label { margin-bottom: 10px; }
  .sim > .simscen .simscen__row { gap: 7px; }
  .sim > .simscen .simscen__chip { min-height: 40px; padding-inline: 13px; }
}

@media (max-width: 720px) {
  /* flytkjeden (Historikk → Planlegging → …) tar plass uten å si noe nytt på
     mobil — scenariovalgene øverst gjør jobben i stedet */
  .simout > .simpanel:has(.simflow) { display: none; }
  .simflow { display: none; }
}

/* FAQ-knappen finnes bare på mobil */
.faq__mtoggle { display: none; }

@media (max-width: 720px) {
  /* kontaktbildet: samme utsnitt som på PC — ansiktet midt i rammen */
  .cta__direct-ph { object-position: center center; }

  /* FAQ bak en knapp */
  .faq__mtoggle {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 50px; margin-top: 34px; padding: 13px 16px;
    background: transparent; border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
    color: var(--hz-fg-on-dark-1); font-family: var(--hz-font-sans); font-size: 15px; font-weight: 600;
    cursor: pointer; transition: border-color var(--hz-dur-base) var(--hz-ease-out);
  }
  .faq__mtoggle .chev { color: var(--hz-hero); transition: transform var(--hz-dur-base) var(--hz-ease-out); }
  .faq__mtoggle.is-open .chev { transform: rotate(180deg); }
  .faq__mtoggle-close { display: none; }
  .faq__mtoggle.is-open .faq__mtoggle-open { display: none; }
  .faq__mtoggle.is-open .faq__mtoggle-close { display: inline; }
  .faq:not(.faq--open) { display: none; }
  .faq { margin-top: 16px; }

  /* nyhetskort: bilde + overskrift, ingen beskrivelse */
  .ncard__excerpt { display: none; }
}

/* sammenleggbare rutenett (mobile.js) — knappen finnes bare på mobil */
.mcollapse__foot { display: none; justify-content: center; margin-top: 16px; }

@media (max-width: 720px) {
  /* lange norske sammensatte ord sprengte overskriftsboksene */
  .phero h1, .sect-head h2, .sect-head h3, .sim-divider h3, .pblock h3, .cta h2, .ahero h1,
  .kfeat__item h3, .cap h3, .qcard h3, .ncard__title { overflow-wrap: break-word; hyphens: auto; }
  .phero h1 { font-size: clamp(30px, 8.4vw, 40px); }

  /* kontaktkanaler: e-post og telefon brøt ut av kolonnen */
  .chan__v, .chan__v a, .kontakt a, .cta__direct-mail { overflow-wrap: anywhere; }

  /* ---- vekstfiguren (Modellen følger fisken) ----
     viewBox 1000x320 med height:auto ga et 106px høyt plott på mobil — de
     sesongmessige toppene forsvant i en strek. preserveAspectRatio="none"
     betyr at figuren er laget for å strekkes, så vi gir den en reell høyde.
     Forklaringen ligger øverst, avviksetiketten nederst, så de ikke kolliderer. */
  .gfig__svg { height: 250px; }
  .gfig__plot { display: flex; flex-direction: column; }
  /* forklaringen lå oppå kurvene — flyttet ut over plottet */
  .gfig__legend { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 3px 14px; margin-bottom: 10px; }
  .gfig__leg { font-size: 12.5px; }
  /* avviksetiketten under plottet, med stiplet peker opp til markøren */
  .gfig__gap { position: relative; order: 1; transform: none; left: auto !important; right: auto; top: auto; bottom: auto; max-width: none; margin-top: 22px; text-align: right; }
  .gfig__gap::before { content: ''; position: absolute; left: var(--gf-gapx, 79%); top: -22px; width: 0; height: 22px; border-left: 2px dashed var(--hz-hero); opacity: 0.55; }
  .gfig__gap-label { display: inline-block; max-width: 94%; white-space: normal; font-size: 12.5px; line-height: 1.35; text-align: right; }
  .gf-gaplead { display: block; }
  .gfig.gap-in .gf-gaplead { opacity: 0.5; }
  .gfig__cap { margin-bottom: 18px; }
  .gfig__cap-s { font-size: 14px; }
  .gfig__axis { font-size: 10.5px; }
  /* flyttet ut av plottet — kolliderte med avviksetiketten */
  .gfig__replay { position: static; display: block; margin: 16px 0 0 auto; }

  /* funksjonsrutenett: 12 kort i én kolonne ble 3 900 px */
  .caps.is-mcollapsed > *:nth-child(n+6) { display: none; }
  .mcollapse__foot { display: flex; }
}

@media (max-width: 720px) {
  /* kontaktseksjonen: kartrammen tvang kolonnen 11 px bredere enn skjermen */
  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .kontakt iframe, .cmap iframe { width: 100%; max-width: 100%; }
  .cblock { padding: 20px 18px; }
}

@media (max-width: 720px) {
  /* Turnstile-widgeten er 300 px fast — gi skjemaet plass til den */
  .kontakt__form { padding: 22px 16px; }
  .cf-turnstile { max-width: 100%; }

  /* personvern: lange URL-er og e-poster presset kolonnen ut */
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__body, .legal__body p, .legal__body li, .legal__body a, .legal td { overflow-wrap: anywhere; }
  .legal__body table { display: block; overflow-x: auto; }
}

/* ============================================================
   Article pages (sak-*.html) on phones
   The hero kept a 32px gutter while the body text ran at 20px, so the
   headline sat 12px narrower than the paragraphs it introduced. The hero
   image also shrank to 175px tall inside that gutter. Align the gutters and
   let the image go edge to edge instead.
   ============================================================ */
@media (max-width: 720px) {
  .ahero { padding: 96px 20px 0; }
  .ahero__title { font-size: clamp(32px, 8.4vw, 40px); }
  .pcrumb { margin-bottom: 20px; font-size: 11.5px; }
  .ahero__meta { gap: 11px; margin-bottom: 15px; }

  /* full-bleed hero image — the inset 16:9 crop was too small to carry a page */
  .ahero__media { max-width: none; margin: 26px -20px 0; transform: none; }
  .ahero__media image-slot, .ahero__media img { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }

  /* the old 80px top padding existed to clear the overlapping image */
  .abody { padding: 34px 20px 28px; }
  .art__p, .art__ul li { font-size: 17px; }
  .art__h { margin: 34px 0 13px; }
  .art__quote { margin: 26px 0; padding: 18px 20px; }
  .art__quote p { font-size: 18px; }
  .art__back { margin-top: 36px; }

  .related { padding: 44px 20px 56px; }
  .related__head { font-size: 21px; margin-bottom: 22px; }
}