/* ==========================================================================
   pages.css - header, footer och sidspecifika avvikelser.
   Regel: hamnar samma sak här två gånger hör den hemma i components.css.
   ========================================================================== */

/* --- Header --------------------------------------------------------------
   Sticky, låg höjd, ingen hide-on-scroll. Bakgrunden är sidans egen, med en
   hårfin linje under, så att headern inte läser som ett fält.            */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-page);
  border-bottom: var(--border-w) solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}
@media (min-width: 900px) {
  .site-header__inner { min-height: var(--header-h-lg); }
}

.site-header__brand { display: flex; align-items: center; text-decoration: none; }
.site-header__brand img {
  height: 26px;
  width: auto;
}
@media (min-width: 900px) {
  .site-header__brand img { height: 30px; }
}

/* --- Navigation ----------------------------------------------------------- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
.site-nav__list li { margin: 0; }

.site-nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-default);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--fg-strong); border-bottom-color: var(--line-strong); }

/* Aktivt menyval. Sätts med class="is-current" på länken. */
.site-nav a.is-current {
  color: var(--fg-strong);
  border-bottom-color: var(--fg-strong);
}

/* --- Språkväljare --------------------------------------------------------
   Längst till höger i sidhuvudet, EN och SV som text. Flaggor vore fel: de
   står för länder, inte språk. Det aktuella språket är fetare och understruket
   på samma sätt som aktivt menyval, det andra är en dämpad länk.

   På desktop sitter den efter menyn, på mobil bredvid hamburgaren och inte
   inne i den öppna menyn, så att en besökare som inte läser språket i menyn
   ändå hittar den.                                                          */

.site-nav { margin-left: auto; }

.lang-switch {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: 1;
}

.lang-switch__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.lang-switch__item:hover { color: var(--fg-strong); border-bottom-color: var(--line-strong); }
.lang-switch__item.is-current {
  color: var(--fg-strong);
  border-bottom-color: var(--fg-strong);
}

/* Avdelare mellan de två, ritad som kant så att den inte läses upp. */
.lang-switch__item + .lang-switch__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  border-left: var(--border-w) solid var(--line-strong);
}

/* --- Hamburger -----------------------------------------------------------
   Tre streck ritade med border, inga extra element. Blir kryss när menyn
   är öppen.                                                              */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-2) * -1);
  border: 0;
  background: none;
  position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--fg-default);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before { content: ""; left: 0; top: -7px; }
.nav-toggle__bars::after  { content: ""; left: 0; top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: block; order: 3; }

  /* Bredvid hamburgaren, med en tryckyta på minst 44 px. Menyn är fixerad och
     ur flödet, så bara namnet, väljaren och hamburgaren tar plats i raden. */
  .lang-switch { order: 2; margin-left: auto; margin-right: var(--space-2); }
  .lang-switch__item { min-height: 44px; padding-inline: var(--space-3); }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: var(--z-menu);
    background: var(--bg-page);
    border-bottom: var(--border-w) solid var(--line);
    display: none;
  }
  .site-nav.is-open { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-5);
  }
  .site-nav__list li + li { border-top: var(--border-w) solid var(--line); }
  .site-nav a {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--text-1);
    border-bottom: 0;
  }
}

/* --- Hero ----------------------------------------------------------------
   Delad layout från 960px, text vänster och bild höger. Under brytpunkten
   en kolumn med bilden först. Höjden styrs av innehållet - öppningen låses
   aldrig till skärmhöjden.                                               */

.hero { padding-block: var(--space-6) var(--section-y); }

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

/* Bilden först i DOM, så att mobilordningen blir bild, text, knappar utan
   att någon ordning behöver kastas om. */
.hero__media .ph { max-height: 320px; }

@media (min-width: 960px) {
  .hero { padding-bottom: var(--section-y-large); }

  .hero__inner {
    /* Taket håller ihop tre krav samtidigt: 40/60, 44px mellanrum och en
       bild som aldrig blir högre än 440px. Taket räknas inklusive
       sidopaddingen: 1240 - 2*48 - 44 = 1100, och 60 % av det är 660,
       vilket i 3:2 ger exakt 440. Utan taket växer kolumnen förbi bilden
       och mellanrummet blir i praktiken 68-92px. */
    max-width: 1240px;
    grid-template-columns: 40fr 60fr;
    gap: 44px;
    align-items: center;          /* textgruppen centreras mot bilden */
  }
  /* Explicit placering i stället för order: håller tabbordningen intakt. */
  .hero__text  { grid-column: 1; grid-row: 1; }
  .hero__media { grid-column: 2; grid-row: 1; }

  /* Bilden fyller sin kolumn. Taket ovan gör att den aldrig blir bredare
     än 660px, alltså aldrig högre än 440. */
  .hero__media .ph { max-height: none; }
}

.hero__title {
  font-size: var(--text-5);
  letter-spacing: var(--tracking-tight);
}

.hero__lede {
  margin-top: var(--space-3);
  font-size: var(--text-2);
  line-height: var(--leading-snug);
  color: var(--fg-default);
  max-width: 24ch;
}

.hero__actions { margin-top: var(--space-6); }

/* --- Löptext som lyfter lite ---------------------------------------------- */

.lede {
  font-size: var(--text-1);
  line-height: var(--leading-normal);
  max-width: 52ch;
}

.facts {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* --- Craft ---------------------------------------------------------------- */

.tick-list {
  list-style: none;
  padding: 0;
  margin-block: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}
.tick-list li {
  padding-left: var(--space-5);
  position: relative;
  color: var(--fg-default);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: var(--border-w);
  background: var(--fg-muted);
}

/* --- Classes på startsidan ------------------------------------------------ */

/* Alternativ B, "Context + Details" (Peter 2026-10-07, handover från ChatGPT).
   Ett verkstadsfoto som bär sektionen och två detaljer som stöder det. Storleken ska betyda
   något: läsordningen är människor och plats, handling, resultat.

   Skrivbord (>= 1200 px), 12 kolumner, glapp 24 px (32 px från 1600 px):
     text         kolumn 1-4    ligger på golvet (align-self: end)
     andningsrum  kolumn 5      tom med flit, fyll den aldrig
     verkstad     kolumn 6-9    3:4 utan beskärning, sätter gruppens höjd
     detaljer     kolumn 10-12  två lika höga ramar staplade, fyller exakt verkstadens höjd
   Överkant och underkant delas av verkstad och stapel, underkanten också av textblocket.
   Höjden kommer ur verkstadsbildens bildförhållande, inga marginaljusteringar.

   Platta (768-1199 px): text överst (8 av 12 kolumner), bilderna under, verkstad ca 59 % och
   detaljer ca 41 %. Mobil (< 768 px): en kolumn, text, verkstad, process, kniv.

   BILDERNA FÅR ALDRIG FÅ CSS-filter, overlay eller blend mode: färggraderingen sitter i filerna.
   Beskärning görs bara med object-position per bild. Mått och prov: README.md, session 2026-10-07. */

.classes-home { --classes-gap: 24px; }
@media (min-width: 1600px) { .classes-home { --classes-gap: 32px; } }

.classes-home__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--classes-gap);
}

.classes-home__head .lede { margin-top: var(--space-4); max-width: 32ch; }
.classes-home__head .facts { margin-top: var(--space-4); }
/* 24px från faktaraden till knappen. */
.classes-home__cta { margin-top: 24px; }

.classes-fig { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.classes-fig__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--classes-pos, 50% 50%);
  border-radius: 0;
  background: var(--bg-fill);           /* syns bara medan bilden laddas */
}
.classes-fig__cap {
  margin-top: 10px;
  font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.classes-fig--workshop { --classes-pos: 50% 50%; }   /* ingen beskärning på skrivbord och platta */
.classes-fig--process  { --classes-pos: 50% 36%; }   /* hand, verktyg och kontaktpunkt, lite gnistor */
.classes-fig--knife    { --classes-pos: 50% 48%; }   /* de tre knivarna med arbetsyta omkring */

@media (min-width: 1200px) {
  .classes-home__head { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .classes-fig--workshop { grid-column: 6 / span 4; grid-row: 1; }
  .classes-home__details {
    grid-column: 10 / span 3;
    grid-row: 1;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    row-gap: var(--classes-gap);
  }
  .classes-fig--workshop .classes-fig__img { aspect-ratio: 3 / 4; }
  /* Detaljramarna får sin höjd av stapeln, inte av bildens egen proportion. */
  .classes-home__details .classes-fig__img { flex: 1 1 0; height: 0; min-height: 0; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .classes-home__grid { column-gap: 18px; }
  .classes-home__head { grid-column: 1 / span 8; grid-row: 1; margin-bottom: 56px; }
  .classes-fig--workshop { grid-column: 1 / span 7; grid-row: 2; }
  .classes-home__details {
    grid-column: 8 / span 5;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
  .classes-fig--workshop .classes-fig__img { aspect-ratio: 3 / 4; }
  .classes-home__details .classes-fig__img { flex: 1 1 0; height: 0; min-height: 0; }
}

@media (max-width: 767px) {
  .classes-home { padding-block: 80px; }
  .classes-home__grid { grid-template-columns: minmax(0, 1fr); }
  .classes-home__head { margin-bottom: 44px; }
  .classes-home__details { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
  .classes-fig__cap { margin-top: 9px; }
  .classes-fig--workshop .classes-fig__img { aspect-ratio: 4 / 5; --classes-pos: 50% 40%; }
  .classes-fig--process  .classes-fig__img { aspect-ratio: 4 / 3; --classes-pos: 50% 33%; }
  .classes-fig--knife    .classes-fig__img { aspect-ratio: 5 / 4; --classes-pos: 50% 47%; }
}

/* --- Hantverket på startsidan --------------------------------------------- *
   Handover från ChatGPT (Peter 2026-10-07). Ett stående foto av Fredrik (4:5) och texten i en
   mörk, lugn sektion mellan två ljusa. Beviset på att han gör knivarna, inte en andra collage.

   Skrivbord (>= 1200 px): 5fr / 6fr, glapp 64 px, texten centrerad mot bilden (inte golvjusterad
   som i kurssektionen), textblocket högst 560 px. Platta (900-1199 px): samma två kolumner men
   44-46 % bild, glapp 44 px, 96 px sektionspadding. Under 900 px: en kolumn, bilden först
   (DOM-ordningen är densamma överallt, ingen order-omkastning). 900 px är sajtens egen
   brytpunkt för .split och bilden hinner inte bli för smal.

   BILDEN FÅR ALDRIG FÅ CSS-filter, overlay, toning eller blend mode: färgen sitter i filen.
   Delade .split ändras inte, den används på andra sidor. */

.craft__grid { display: grid; gap: 32px; align-items: center; }
.craft__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  background: var(--bg-fill);          /* syns bara medan bilden laddas */
}
.craft__text { max-width: 560px; }
.craft__text .eyebrow { margin-bottom: 18px; }
.craft__text h2 { margin-bottom: 20px; }
.craft__text p { max-width: 32ch; }   /* ca 44 tecken per rad: 1ch är 11,7 px här men ett medeltecken 8,4 px */
.craft__text .tick-list { margin-block: 28px 36px; }
.craft__text .tick-list li + li { margin-top: 14px; }
/* Bindestreck i stället för det ritade 12 px-strecket i Hantverket (Peter 2026-10-07). */
.craft__text .tick-list li::before {
  content: "-";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--fg-muted);
}

@media (min-width: 900px) {
  .craft__grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 14fr);   /* ca 44 % bild, 56 % text */
    column-gap: 44px;
  }
  .craft { padding-block: 96px; }
}
@media (min-width: 1200px) {
  .craft__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
  }
  .craft { padding-block: var(--section-y-large); }                /* 128 px */
}

/* Mobil: lite kortare ram så bilden inte gör sektionen onödigt lång. 50% 100% skyddar
   hammaren, handen och det glödande stålet längst ned. */
@media (max-width: 899px) {
  .craft__img { aspect-ratio: 5 / 6; object-position: 50% 100%; }
  /* En kolumn: på en bred telefon eller en smal platta skulle bilden annars bli över 800 px hög. */
  .craft__media, .craft__text { max-width: 560px; }
}

/* --- Custom på startsidan ------------------------------------------------- */

.custom-home { max-width: var(--content-max); }
.custom-home .lede { margin-top: var(--space-4); }

.custom-home__wait {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line-strong);
}
.custom-home__wait-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.custom-home__wait-value {
  font-family: var(--font-display);
  font-size: var(--text-2);
  color: var(--fg-strong);
}

/* --- Footer --------------------------------------------------------------- */

/* Sidfotens höjd minskad ca 15 % (Peter 2026-09-30): toppavståndet är tre
   fjärdedelar av sektionsavståndet, och luften mellan blocken har gått ned ett
   steg. Innehållet är orört. */
.site-footer {
  padding-block: calc(var(--section-y) * 0.75) var(--space-6);
  border-top: var(--border-w) solid var(--line);
}

.site-footer__top {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); }
}

.site-footer__brand img { height: 28px; width: auto; }

.site-footer__address {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-normal);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
}
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.site-footer__nav li { margin-bottom: 0.6rem; }
.site-footer__nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__nav a:hover { color: var(--fg-strong); }

.site-footer__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

/* Kontaktformulärets fält har ingen egen färg längre: alla fält på sajten delar --field-bg
   (Peter 2026-10-02, regeln står i tokens.css). */

/* --- Sidhuvud på undersidor ----------------------------------------------- */

.page-head {
  padding-block: var(--section-y) var(--space-6);
}
.page-head h1 { font-size: var(--text-4); }
.page-head .lede { margin-top: var(--space-4); color: var(--fg-muted); }

.section-head__note {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin: 0;
  max-width: 40ch;
}

/* --- Load more -----------------------------------------------------------
   Korten ligger i HTML från start. JavaScript döljer överskottet och visar
   knappen. Utan JavaScript syns allt, vilket är rätt ordning.           */

.load-more { margin-top: var(--space-7); display: flex; justify-content: center; }
.card.is-hidden { display: none; }

/* --- Tillbakalänk --------------------------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-decoration: none;
}
.back-link::before { content: "\2190"; }
.back-link:hover { color: var(--fg-strong); }

/* --- Knivsidan ------------------------------------------------------------ */

.knife { padding-block: var(--space-6) var(--section-y); }

.knife__top { align-items: start; }

.knife__title { font-size: var(--text-3); }

.knife__summary {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
}

.knife__status { margin-top: var(--space-5); margin-bottom: var(--space-1); }

.knife__price {
  font-family: var(--font-display);
  font-size: var(--text-2);
  color: var(--fg-strong);
  margin-bottom: var(--space-5);
}

.knife__notice { margin-top: var(--space-4); }

/* Knivens text i faktakolumnen, före köpknappen (2026-10-06). */
.knife__body {
  margin-bottom: var(--space-5);
  max-width: 60ch;
}
.knife__body p + p { margin-top: var(--space-3); }

.spec__heading {
  font-size: var(--text-2);
  margin-bottom: var(--space-5);
}

/* --- Callout --------------------------------------------------------------
   Används på kontaktsidan för att leda custom till rätt väg.            */

.callout {
  padding: var(--space-5);
  background: var(--bg-surface);
  border-left: 2px solid var(--fg-strong);
  border-radius: var(--radius);
}
.callout p { margin-bottom: var(--space-3); }

/* --- Formulär -------------------------------------------------------------- */

.form { max-width: none; }
.form__row { gap: var(--space-5); }
.ref-uploads { gap: var(--space-3); }
.ref-uploads .ph { cursor: not-allowed; }

.tick-list--roomy li { margin-bottom: var(--space-3); }

/* --- Steg, numrerad lista utan listmarkör ---------------------------------- */

.steps {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  max-width: none;
}
.steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  font-family: var(--font-display);
  font-size: var(--text-1);
  margin: 0;
}
.steps li:last-child { border-bottom: var(--border-w) solid var(--line); }
.steps__num {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

/* --- Kurstillfälle ---------------------------------------------------------
   Ingen bokningsmotor. Raden är en ingång till en förfrågan.           */

/* Rubrik, pris och bokning ligger i linje upptill, så att priset står på
   samma höjd som kursens namn även när raden växer med platser och text. */
.class-date {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--border-w) solid var(--line-strong);
}
.class-date:last-of-type { border-bottom: var(--border-w) solid var(--line-strong); }
.class-date__main { flex: 1 1 14rem; }
.class-date__title { font-size: var(--text-1); }
.class-date__when {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.class-date__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-1);
  color: var(--fg-strong);
}

/* "per place" under beloppet. Egen rad och dämpad, så beloppet fortfarande är
   det man ser först och upplysningen inte konkurrerar med det. */
.class-date__per {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Kursvalen, helstål och damask (Peter 2026-10-04). Ett block per val: beloppet,
   valets namn och "per plats" staplade till vänster, antalet till höger. En tunn
   linje skiljer valen åt så att namnet hör till sitt eget pris. Rubriken "Places"
   står på samma höjd som anteckningsrutans etikett, så rullistan och rutan börjar
   i samma linje. */
.seat-options { display: flex; flex-direction: column; min-width: 0; }
/* Två klasser, så att regeln `.class-date__book .field__label { margin: 0 }` inte tar
   bort avståndet: rubriken och anteckningsrutans etikett ska ha samma avstånd ned till
   sitt fält (rutans .seat-block har gap: var(--space-1)). */
.seat-options .seat-options__head { text-align: right; }
/* Rubriken "Platser" (ett p) och anteckningsrutans etikett (ett label) får exakt samma
   visning, radhöjd och avstånd, annars hamnar rullistan och rutan några pixlar isär. */
.class-date__book .seat-options__head,
.class-date__book .seat-block > .field__label {
  display: block;
  line-height: 1.4;
  /* Inre avstånd, inte marginal: en annan regel nollställde marginalen på rubriken. */
  margin: 0;
  padding: 0 0 var(--space-1);
}
.class-date__book .seat-block { gap: 0; }
.seat-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.seat-option + .seat-option {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-w) solid var(--line);
}
.seat-option__price {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-strong);
}
.seat-option__amount { font-size: var(--text-1); line-height: 1.2; }
/* Presentkort (2026-10-14): beloppsrutan i raden Valfritt belopp. Fältets bakgrund kommer av .input
   (fältregeln, --field-bg), inte härifrån. */
.seat-option__amount-field { display: flex; align-items: center; gap: .4rem; }
.seat-option__amount-field .input { width: 6.5rem; min-height: 0; height: 2.5rem; padding: 0 var(--space-3); font-size: var(--text-0); line-height: normal; }
.seat-option__name { font-size: var(--text-sm); line-height: 1.3; }

/* Besked i kursraden ("Det finns bara 3 platser kvar", "Välj minst en plats", anteckning
   saknas). Klassen kommer från korgen, där tonen är ljus mot den mörka panelen och knappt
   syns här. Tydlig varningsruta i stället (Peter 2026-10-04): text i --state-warn på
   --bg-warn mäter 5,3:1, och en röd kant säger att något måste ändras. Egen rad över
   prisblocken och formuläret. */
.class-date .cart-line__problem {
  flex: 1 0 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warn);
  border-left: 3px solid var(--state-danger);
  color: var(--state-warn);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
}

.classes__facts { margin-top: var(--space-4); }
.classes__cta { text-align: center; }
.classes__cta h2 { margin-bottom: var(--space-5); }

/* --- FAQ -------------------------------------------------------------------
   <details> gör jobbet. Ingen JavaScript behövs, och den fungerar med
   tangentbord och skärmläsare utan att vi bygger något eget.            */

.faq { margin-top: var(--space-5); }

.faq__item { border-top: var(--border-w) solid var(--line); }
.faq__item:last-child { border-bottom: var(--border-w) solid var(--line); }

.faq__q {
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-1);
  color: var(--fg-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-size: var(--text-2);
  color: var(--fg-muted);
  line-height: 1;
}
.faq__item[open] .faq__q::after { content: "\2212"; }

.faq__a { padding-bottom: var(--space-5); }

/* --- Arbetssätt, definitionslista i löptext -------------------------------- */

.how { margin-top: var(--space-5); }
.how dt {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line);
}
.how dd {
  margin: var(--space-2) 0 var(--space-5);
  max-width: var(--measure);
}

/* Adminlänken i sidfoten. Diskret, men inte gömd - den ska gå att hitta
   utan att konkurrera med upphovsrättsraden. */
.site-footer__sep { margin-inline: var(--space-2); opacity: 0.5; }
.site-footer__legal a {
  color: var(--fg-muted);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
}
.site-footer__legal a:hover { color: var(--fg-strong); }
.site-footer__legal { display: flex; align-items: center; flex-wrap: wrap; }
.site-footer__signature { margin-right: var(--space-2); width: 20px; height: 20px; opacity: 0.8; }


/* Riktig bild i heron. Samma mått och beteende som platshållaren hade, så
   att layouten inte ändras när fler platshållare byts mot foton. */
.hero__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  max-height: 320px;
}
@media (min-width: 960px) {
  .hero__img { max-height: none; }
}

/* Genomgående bild i brytningen. Samma beteende som platshållaren hade. */
.bleed__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
@media (max-width: 640px) {
  .bleed__img { aspect-ratio: 3 / 2; }
}

/* Riktig bild i ett kort, eller .photo där en 3:2-platshållare ersatts utanför
   ett kort. Samma mått och beteende som platshållaren hade. */
.card__img,
.photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Stående knivbild, 4:5 (Peter 2026-10-06). Fredrik fotograferar stående med
   kniven diagonalt, och 3:2 kapar spets och handtag. Sidan sätter klassen efter
   bildens egna mått (image_is_portrait), så liggande bilder behåller 3:2. */
.card--portrait .card__img,
.photo--portrait {
  aspect-ratio: 4 / 5;
}
/* På knivsidan får en stående bild inte bli högre än skärmen. Bredden följer
   höjden, och bilden står mot vänsterkanten som en liggande gör. */
.knife__media .photo--portrait {
  width: auto;
  max-width: 100%;
  max-height: min(85vh, 860px);
}
/* Fler bilder under knivens huvudbild. auto-fill i stället för grid--4:s auto-fit,
   så att en ensam bild blir en kolumn bred och inte fyller hela raden (i 4:5 blev
   den 1500 px hög, upptäckt 2026-10-06 med Fredriks jaktknivar). */
.knife__more {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Bokningsdelen i en kursrad: antal platser och knappen på samma rad, men
   bryter till egen rad i mobil. */
/* Pris, antal och knapp bildar ett block till höger på raden, på samma
   höjd. Raden ska läsas som en rad, inte som ett formulär. */
/* Kursen läses som en rad: titel, pris, antal, namn, knapp. Namnen är det
   enda som växer på höjden, och de staplas i sin egen kolumn i stället för
   att trycka ner resten av raden. */
.class-date__side {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.class-date__price { margin: 0; }
.class-date__book {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.class-date__book .field__label { margin: 0; }

/* Väljaren är ljusare än sidan, som adminens ytor, så att den läses som
   något man kan ändra. Knappen är den mörka primärknappen. */
.class-date__seats {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--field-bg);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-0);
  color: var(--fg-default);
}
.class-date__book .btn {
  min-height: 0;
  padding: var(--space-3) var(--space-5);
}

/* Bokningen är ett smalt formulär till höger om kursen: ett namnfält, en
   hopfälld anteckningsruta och knappen. Den ska ta ungefär lika mycket höjd
   som kurstexten bredvid, inte dubbelt. */
.class-date__book {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Etiketten och rutan där kunden skriver vilka som kommer, plus allergier
   och övrigt. Namnfälten, ett per plats, utgick 2026-09-24. */
.seat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 0 1 14rem;
  min-width: 11rem;
}

.seat-names__message {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--field-bg);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-default);
  /* Inget dragreglage. Det såg ut som en list i kanten på rutan och gjorde
     raden ojämn så fort någon drog i det. Höjden sätts av rows. Peter
     2026-09-27. */
  resize: none;
}

/* Antalet först, på en rad med etiketten bredvid väljaren i stället för
   ovanför: raden blir en rad i stället för två. */
/* Antalet och knappen sist i raden, i en egen kolumn: antalet överst, knappen
   under. Kolumnen sträcker sig över hela radens höjd, så knappen hamnar i
   nederkant i linje med anteckningsrutan bredvid. Peter 2026-09-27. */
.seat-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--space-3);
}

.seat-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  flex: 0 0 auto;
}
.seat-count .field__label { margin: 0; }
/* Ungefär halva bredden till, så siffran och pilen inte trängs. */
.seat-count .class-date__seats {
  padding: var(--space-2) var(--space-3);
  min-width: 4.5rem;
}

/* Kundens egen text under kursraden i korgen, kapad, så hen ser vad som
   följer med utan att gå tillbaka till kurssidan. */
.cart-line__names {
  display: block;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.cart-line__change {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* .photo där en hero-platshållare ersatts. Samma mått som .ph--hero: 21:9,
   men 3:2 på mobil där 21:9 blir ett streck. */
.photo--hero { aspect-ratio: 21 / 9; }
@media (max-width: 640px) {
  .photo--hero { aspect-ratio: 3 / 2; }
}

/* Kursbilderna under "From the workshop". Samma mått som .ph--tall, så en
   uppladdad bild tar exakt platshållarens plats. Kurssidan är undantaget från
   liggande format, Peters beslut 2026-09-26. */
.photo--tall { aspect-ratio: 2 / 3; }

/* --- Villkorssidor ---------------------------------------------------------
   Shipping & Returns, Terms, Privacy och Cookies. Smal textkolumn, tydliga
   avsnitt, och markeringar för det som ännu inte är bekräftat av Fredrik.
   Sidorna är utkast och ska läsas som sådana, se notisen överst på varje.  */

.legal h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--text-1);
  line-height: var(--leading-snug);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-0);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.legal p { max-width: var(--measure); }
.legal ul { max-width: var(--measure); margin: 0 0 var(--space-4); padding-left: 1.2rem; }
.legal li { margin-bottom: var(--space-2); }

/* Datumet för senaste ändring av texten, direkt under rubriken (Peter 2026-10-12). */
.legal-updated {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* Notisen överst: sidan är ett arbetsdokument. */
.legal-draft { margin-top: var(--space-4); }

/* Det som kräver Fredriks besked. Avsiktligt synligt: en lucka som syns blir
   åtgärdad, en lucka i en kommentar blir kvar. */
.legal-todo {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border-left: 2px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.legal-table {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}
.legal-table th,
.legal-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: var(--border-w) solid var(--line);
  vertical-align: top;
  /* Långa ord (cookienamn, svenska sammansättningar) får brytas hellre än att
     tabellen växer förbi skärmens kant på 320 px. anywhere räknar med
     brytmöjligheten redan när tabellens minsta bredd beräknas. */
  overflow-wrap: anywhere;
}
.legal-table thead th { border-bottom-color: var(--line-strong); color: var(--fg-muted); font-weight: var(--weight-medium); }

.legal-updated {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.legal-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

/* Kurslistan är bredare än brödtexten, annars får inte raden plats. Den
   följer ändå sidans yttre bredd och blir aldrig bredare än den. */
.container--classes {
  max-width: 900px;
  margin-inline: auto;
}

/* På skärmar där raden får plats bryter den inte alls: kurs, pris, antal,
   namn och knapp står i en linje. Under det bryter den som förut. */
@media (min-width: 900px) {
  .class-date { flex-wrap: nowrap; justify-content: flex-start; }

  /* Fasta bredder, inte utfyllnad: pris, antal och namn ska stå rakt under
     varandra från kurs till kurs. Med space-between flyttade sig kolumnerna
     med textens längd, och då stod två priser aldrig i linje. */
  .class-date__main { flex: 0 0 15rem; }
  /* wrap sedan 2026-10-04: beskeden och "I din beställning" tar en egen rad ovanför
     formuläret, i stället för att tryckas ihop till en smal kolumn bredvid det. */
  .class-date__side { flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  .class-date__side > .seat-in-cart { flex: 1 0 100%; }
  .class-date__price { flex: 0 0 6.5rem; }
  /* Fast bredd så att pris och rullista står rakt under varandra från kurs till kurs. */
  .seat-options { flex: 0 0 12.5rem; }
  /* Knappen står direkt efter namnen, inte uttryckt mot högerkanten:
     raden ska läsas som en följd av steg, och sista steget ska ligga nära
     det man just fyllde i. */
  .class-date__book { flex-wrap: nowrap; flex: 0 1 auto; }
  /* Bredare sedan 2026-09-27. På 10rem fick platshållaren inte plats på sina
     tre rader, och rutan svarade med en rullningslist i kanten. */
  /* Rutan sitter i kolumnen .seat-action sedan 2026-10-04, så bredden sätts med
     width och inte med flex-basis, som i en kolumn betyder höjd. */
  .seat-block { flex: 0 0 auto; width: 16rem; min-width: 0; }
  .class-date__book .btn { white-space: nowrap; }
  /* Antalet till vänster, anteckningsrutan och knappen i kolumnen till höger
     (Peter 2026-10-04). Rutan behåller sin höjd från rows, ingen sträckning. */
  .seat-action { justify-content: flex-start; }
  /* Knappen högerställd under rutan (Peter 2026-10-04). */
  .seat-action .btn { align-self: flex-end; }
}

/* Raden som säger att kursen redan ligger i korgen. Diskret: den är ett
   besked, inte ett fel. */
.seat-in-cart {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* Mobil: kursen är inte en rad som brutits, den är en egen form.

   Den breda vyn läses vågrätt som en följd av steg, och länge fick mobilen
   samma uppställning med radbrytningar inlagda. Det gav pris och
   anteckningsruta bredvid varandra, antalet i ett eget band och knappen
   ensam ute till höger, alltså en uppställning som varken var en rad eller en
   kolumn. Omskrivet 2026-09-27 på Peters begäran.

   Modellen här är enkel: allt ligger i en kolumn, i den ordning man behöver
   det, och allt som går att röra tar hela bredden. Inga halva rader, ingen
   automarginal, ingenting som binder sig vid en kant. */
@media (max-width: 899px) {
  /* stretch, inte flex-start: annars krymper blocken till sitt innehåll och
     bredden på fälten blir godtycklig. */
  .class-date {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .class-date__main { flex: 0 0 auto; }

  .class-date__side {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
  }

  /* Priset är en egen rad ovanför bokningen, inte en spalt bredvid den. */
  .class-date__price { flex: 0 0 auto; }

  .class-date__book {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .seat-block { flex: 0 0 auto; width: auto; min-width: 0; }

  /* Antalet står kvar som etikett plus rullista bredvid varandra: det är två
     korta saker och de tjänar inget på en rad var. */
  .seat-action {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .seat-count { justify-content: flex-start; }

  /* Knappen tar hela bredden. På en telefon är den sista handlingen, och en
     knapp som är lika bred som fältet ovanför är lättare att träffa än en som
     är lika bred som sin text. */
  .class-date__book .btn {
    width: 100%;
    margin-left: 0;
    align-self: stretch;
  }
}

/* ==========================================================================
   Merch, 2026-09-26. Återanvänder knivsidans former; bara variantlistan är ny.
   ========================================================================== */

/* En slutsåld produkt står kvar i rutnätet, dämpad. Att ta bort den vore att
   låtsas att den aldrig funnits. */
.card--muted .card__img { opacity: .55; }

.knife__variants { margin: var(--space-5) 0; }
.knife__variants-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Alla varianter visas, även de som är slut: kunden ska se att storleken finns
   och är tagen, inte undra om den någonsin funnits. */
.variants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.variants__item {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  padding: .3em .7em;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.variants__item.is-empty {
  color: var(--fg-muted);
  border-color: var(--line);
  text-decoration: line-through;
}
.variants__note { font-size: .75rem; text-decoration: none; }

/* Variantväljaren. Radioknapparna göms men behåller sin roll för tangentbord
   och skärmläsare; rutan runt etiketten är det man ser och klickar på. */
.variants__item label { display: inline-flex; align-items: baseline; gap: .4em; cursor: pointer; }
.variants__item.is-empty label { cursor: not-allowed; }
.variants__item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.variants__item:has(input:checked) {
  color: var(--fg-inverse);
  background: var(--bg-inverse);
  border-color: var(--bg-inverse);
}
.variants__item:has(input:focus-visible) { outline: 2px solid var(--fg-strong); outline-offset: 2px; }
.knife__buy { margin: var(--space-5) 0 0; }