/* ============================================================================
   BYTEWORKS REBUILD — responsive.css
   Merparten av systemet är flytande via clamp() och auto-fit.
   Här bor riktade justeringar per brytpunkt + overflow-skydd.
   ========================================================================== */

/* ── Overflow-skydd ───────────────────────────────────────────────────── */
.hero, .sidtopp, .kontaktfinal, .fot { max-width: 100vw; }
img, video, iframe, svg { max-width: 100%; }

/* ── Tablet och nedåt ─────────────────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .hero { min-height: min(88svh, 44rem); padding-top: clamp(7.5rem, 14vh, 9.5rem); }
  .kontaktfinal__rubrik, .hero__rubrik, .sidtopp__rubrik { max-width: none; }
}

/* ── Top-level heroscener på smal skärm ───────────────────────────────────
   Copyn täcker nästan hela ytan, så den riktade scrimen byts mot en jämn
   slöja. Opaciteten är satt per motiv efter uppmätt luminans; stadens
   ljuspunkter lyser fortfarande igenom. Höjden är innehållsstyrd.        */
@media (max-width: 63.99rem) {
  .sidtopp--scen { min-height: min(72svh, 34rem); }
  .sidtopp__scrim {
    opacity: .86;
    background: linear-gradient(180deg, transparent 2%, var(--yta-sida) 16%, var(--yta-sida) 100%);
  }
  .sida-marknadsforing .sidtopp--scen,
  .sida-support .sidtopp--scen,
  .sida-hemsidor .sidtopp--scen,
  .sida-cases .sidtopp--scen,
  .sida-om .sidtopp--scen { min-height: min(72svh, 34rem); }

  .sida-marknadsforing .sidtopp__scrim,
  .sida-om .sidtopp__scrim { opacity: .88; }
  .sida-hemsidor .sidtopp__scrim { opacity: .82; }

  .sida-marknadsforing .sidtopp__scen img { object-position: 70% 46%; }
  .sida-support .sidtopp__scen img        { object-position: 58% 40%; }
  .sida-hemsidor .sidtopp__scen img       { object-position: 74% 44%; }
  .sida-cases .sidtopp__scen img          { object-position: 60% 44%; }
  .sida-om .sidtopp__scen img             { object-position: 58% 50%; }

  .sida-kontakt .kontaktfinal { background-position: 62% 50%; }
  .sida-kontakt .kontaktfinal::before {
    background: linear-gradient(180deg, transparent 2%, var(--yta-sida) 18%, var(--yta-sida) 100%);
    opacity: .82;
  }
  .sida-kontakt .kontaktfinal::after { opacity: .18; }
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 45rem) {
  :root { --kant: 1.25rem; }

  .hero .knappar .knapp { width: 100%; justify-content: center; }
  .hero__meta { gap: .5rem 1.2rem; }

  .varld { padding: 1.4rem 1.15rem; border-radius: var(--r-card); }
  .band { padding: 1.4rem 1.2rem; }
  .band .knapp { justify-self: start; }

  .steg { --steg-n: 1; }

  .formkort { padding: 1.5rem 1.25rem; }

  .live__list { padding: .85rem 1rem; }
  .live__projekt { font-size: var(--text-ui); }

  .fot__botten { flex-direction: column; align-items: flex-start; }

}

/* ── Smal mobil ───────────────────────────────────────────────────────── */
@media (max-width: 24rem) {
  .mark { font-size: var(--text-kort); }
  .drawer { padding-inline: 1.1rem; }
}

/* ── Stor desktop: ge kompositionen mer att andas i ───────────────────── */
@media (min-width: 100rem) {
  .hero { min-height: min(88vh, 72rem); }
}

/* ── Pekare utan hover: visa kortens pilar/CTA direkt ─────────────────── */
@media (hover: none) {
  .kort::after { display: none; }
}