/* ============================================================================
   BYTEWORKS REBUILD — layout.css
   Skal, sektionsrytm, grids och återkommande kompositioner.
   Grid är ett verktyg, inte ett fängelse: breakouts och asymmetri är del
   av systemet.
   ========================================================================== */

.skal {
  width: min(var(--wrap), 100% - var(--kant) * 2);
  margin-inline: auto;
}
.skal--vid  { width: min(var(--wrap-vid), 100% - var(--kant) * 2); }

.sektion       { padding-block: var(--sekt-y); position: relative; }
.sektion--tat  { padding-block: var(--sekt-y-tat); }
.sektion--topp { padding-top: calc(var(--sekt-y) + 4.5rem); } /* under fast header */

/* Sektionshuvud: etikett + rubrik + ev. ingress, med luft under */
.sekthuvud { margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.sekthuvud > * + * { margin-top: 1.1rem; }
.sekthuvud .lead { margin-top: 1.35rem; }

/* Tvåspalt: rubrik vänster, bröd höger (redaktionellt uppslag) */
.uppslag {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
}
@media (min-width: 60rem) {
  .uppslag { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .uppslag--jamn { grid-template-columns: 1fr 1fr; }
}

/* Split: media + text, växlande riktning */
.split {
  display: grid;
  gap: clamp(2.25rem, 4vw, 5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--vand .split__media { order: 2; }
  .split--bred { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.split__text > * + * { margin-top: 1.15rem; }
.split__text .etikett { margin-bottom: .35rem; }
.split__text .knappar, .split__text .lank-mer { margin-top: 1.9rem; }

/* Kortgrids */
.rutnat {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
.rutnat--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rutnat--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
@media (min-width: 60rem) {
  .rutnat--3-fast { grid-template-columns: repeat(3, 1fr); }
}

.knappar {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  align-items: center;
}

/* ── Sömmar: mjuka övergångar mellan mörka kapitel ────────────────────── */
.som-upp::before,
.som-ned::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
}
.som-upp::before { top: 0;    background: linear-gradient(180deg, var(--yta-djup), transparent); }
.som-ned::after  { bottom: 0; background: linear-gradient(0deg,  var(--yta-djup), transparent); }

.sektion > .skal, .sektion > .skal--vid { position: relative; z-index: var(--z-inne); }

/* Horisontlinje som strukturmarkör */
.linje {
  border: 0;
  height: 1px;
  background: var(--linje-1);
  margin-block: clamp(2.5rem, 4vw, 4rem);
}
.yta-ljus .linje, .yta-moln .linje { background: var(--linje-ljus-1); }

/* Hjälpklasser */
.mt-s { margin-top: var(--s-2); }
.mt-m { margin-top: var(--s-3); }
.mt-l { margin-top: var(--s-4); }
.mt-xl { margin-top: var(--s-5); }
.center { text-align: center; }
.center p, .center .etikett { margin-inline: auto; }

/* Case-rutnät: bredare minsta kolumn så skärmbilderna får luft. */
/* Casekorten: åtta jämbördiga kort i två kolumner på desktop. Två kolumner
   i stället för auto-fit ger hero-bilderna verklig vikt (~660 px på 1440)
   och en jämn rytm utan halvtomma rader. Ett kort i taget under 60rem. */
.rutnat--case {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.4rem);
}
@media (min-width: 60rem) {
  .rutnat--case { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vertikal stapel av rader. */
.stapel { display: grid; gap: .9rem; }

/* Centrerat sektionshuvud. */
.sekthuvud--center { text-align: center; }
.sekthuvud--center .lead { margin-inline: auto; }