/* ==========================================================================
   layout.css - containrar, sektionsrytm och grid.
   Bär ingen färg utöver sektionsytor, och ingen komponentlogik.
   ========================================================================== */

/* --- Containrar ---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Smal kolumn för längre löptext. Handovern: smalare textkolumner där
   längre text förekommer.                                                  */
.container--content { max-width: var(--content-max); }

/* Full bredd, används för hero och genomgående bildytor. */
.container--wide { max-width: none; padding-inline: 0; }

/* --- Sektioner -----------------------------------------------------------
   All vertikal rytm går genom dessa två klasser. Sätt aldrig margin-top på
   en sektion i pages.css - då spricker rytmen.                             */

.section { padding-block: var(--section-y); }
.section--large { padding-block: var(--section-y-large); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--surface { background: var(--bg-surface); }

/* Hårfin avgränsare mellan två sektioner med samma bakgrund. */
.section--divided { border-top: var(--border-w) solid var(--line); }

/* --- Sektionshuvud -------------------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}

.section-head__title { font-size: var(--text-2); }

/* Raden under rubriken i stället för till höger om den (butiken och merch). */
.section-head--stacked { display: block; }
.section-head--stacked .section-head__note { margin-top: var(--space-2); }

/* --- Stack: vertikala avstånd mellan syskon ------------------------------- */

.stack > * + * { margin-top: var(--space-4); }
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--loose > * + * { margin-top: var(--space-6); }

/* --- Grid ----------------------------------------------------------------
   Handovern kräver 3 -> 2 -> 1 kolumn utan hopp. auto-fit med minmax gör
   det utan brytpunkter, men minimivärdet styr när det viker sig.           */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Tre jämnstora kolumner från 768px, en kolumn under. Till skillnad från
   .grid--3 viker den sig inte till två kolumner på platta - auto-fit med
   minmax(280px) ger bara plats för två vid den bredden. */
.knives-row {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .knives-row { grid-template-columns: repeat(3, 1fr); }
}

/* Delad yta: bild vänster, text höger. Viker till en kolumn under 900px. */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--wide-media { grid-template-columns: 3fr 2fr; }
  .split--wide-text  { grid-template-columns: 2fr 3fr; }
  .split--reverse > :first-child { order: 2; }
}

/* --- Flow: horisontell rad som viker sig ---------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}
.cluster--between { justify-content: space-between; }