/* =====================================================================
   Matte Direkt – main.css
   Source: PREWORK/Drafts/w1/version3/style.css
   Adapted for SilverStripe theme: themes/mattedirekt
   ===================================================================== */

/* ── Tokens ── */
:root {
  --red: #D42027;
  --red-soft: rgba(212, 32, 39, .08);
  --red-glow: rgba(212, 32, 39, .35);
  --amber: #F2B705;
  --amber-soft: rgba(242, 183, 5, .10);
  --sky: #6CB4DC;
  --sky-soft: rgba(108, 180, 220, .10);
  --green: #54B862;
  --green-soft: rgba(84, 184, 98, .10); 

  --bg: #F7F8FC;
  --surface: #FFFFFF;
  --text: #1A1D23;
  --muted: #6B7280;
  --border: #E2E5EB;

  --hero-from: #4DA4D8;
  --hero-to: #2B7CB5;

  --r-sm: .5rem;
  --r-md: .875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.5rem;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12);
  --shadow-lift: 0 20px 50px rgba(0,0,0,.14);

  --ease: cubic-bezier(.22,1,.36,1);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Listor i rich text (CMS-innehåll) ── 
   Globala resetten stänger av list-style på alla ul. Återställ
   bullets och numrering för innehåll som wrappas i .typography. */
.typography ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: .75rem 0;
}
.typography ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: .75rem 0;
}
.typography li {
  margin-bottom: .3rem;
  line-height: 1.65;
}
.typography ul ul { list-style: circle; margin: .25rem 0; }
.typography ul ul ul { list-style: square; }

/* ── Paragrafer och rubriker i rich text ──
   Globala resetten nollställer margin på alla <p>. Återställ
   radavstånd och mellanrum för CMS-innehåll i .typography. */
.typography p {
  margin-bottom: 1rem;
  line-height: 1.75;
}
.typography p:last-child { margin-bottom: 0; }
.typography h2 { font-size: 1.5rem;  font-weight: 800; margin: 1.75rem 0 .6rem; line-height: 1.2; }
.typography h3 { font-size: 1.2rem;  font-weight: 700; margin: 1.4rem 0 .4rem;  line-height: 1.25; }
.typography h4 { font-size: 1rem;    font-weight: 700; margin: 1.2rem 0 .35rem; line-height: 1.3; }
.typography h2:first-child,
.typography h3:first-child,
.typography h4:first-child { margin-top: 0; }

/* ── Bilder i rich text (CMS-innehåll) ──
   mix-blend-mode: multiply gör att vita bildpixlar smälter in i --bg (#F7F8FC).
   border-radius + shadow matchar designsystemets övriga bildstilar.
   Opt-out: lägg till class="photo" i TinyMCE → Insert/Edit Image → Advanced → Extra CSS class */
.typography img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin: 1.25rem 0;
  mix-blend-mode: multiply;
}
.typography img.photo {
  mix-blend-mode: normal;
  background: var(--surface);
}

/* SilverStripe TinyMCE caption-wrapper */
.typography .captionImage {
  margin: 1.5rem 0;
}
.typography .captionImage img {
  margin: 0 0 .4rem;
}
.typography .captionImage .caption {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* Float-positionering (vänster/höger/centrerad i TinyMCE) */
.typography .leftAlone,
.typography .captionImage.left {
  float: left;
  margin: .25rem 1.5rem 1rem 0;
  max-width: 45%;
}
.typography .rightAlone,
.typography .captionImage.right {
  float: right;
  margin: .25rem 0 1rem 1.5rem;
  max-width: 45%;
}
.typography .center,
.typography .captionImage.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
  text-align: center;
}

/* ── Inbäddad video (YouTube m.fl. via [embed]) ────────────────────────
   SS sätter klassen "leftAlone" på iframen, som annars fångas av bild-
   floatregeln ovan och får efterföljande text att lägga sig ovanpå videon.
   Rendera istället på egen rad i responsiv 16:9. */
.typography iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.typography iframe.leftAlone,
.typography iframe.rightAlone,
.typography iframe.center {
  float: none;
  clear: both;
  max-width: 100%;
}

/* Clearfix – förhindrar att text flödar förbi floatade bilder */
.typography::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Länkar i innehåll – rich text wrappas i .typography ──
   Komponenter (nav, knappar, kort) sätter egen länkfärg via klasser och
   påverkas inte. Endast länkar inom .typography får brandfärg. */
.typography a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(212, 32, 39, .35);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.typography a:hover {
  color: #a1141a;
  text-decoration-color: rgba(212, 32, 39, .7);
}

/* Mörk bakgrund (t.ex. CTA-banner) – ljus länkfärg för kontrast */
.cta-banner .typography a { color: #fff; }
.cta-banner .typography a:hover { color: rgba(255, 255, 255, .8); }

/* ── Layout ── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5.5rem 0; }

.section__head { text-align: center; max-width: 600px; margin: 0 auto 3.2rem; }
.section__label {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  margin-bottom: .5rem;
}
.section__head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800;
  margin-bottom: .55rem; letter-spacing: -.01em;
}
.section__head p { color: var(--muted); font-size: 1.05rem; }

/* ══════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--border);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled {
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav__brand { display: flex; align-items: center; }
.nav__logo { height: 32px; width: auto; }
.nav__links { display: flex; gap: .35rem; align-items: center; }
.nav__links a {
  font-size: .88rem; font-weight: 500; color: var(--muted);
  padding: .4rem .85rem; border-radius: var(--r-sm);
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: rgba(0,0,0,.04); }
.nav__cta {
  background: var(--red) !important; color: #fff !important;
  font-weight: 600 !important; padding: .45rem 1.15rem !important;
  border-radius: var(--r-sm) !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--red-glow); }
.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .4rem;
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px; transition: .25s var(--ease);
}

/* ══════════════════════════════════════════════
   EXTRAMENY – desktop hamburger dropdown
   ══════════════════════════════════════════════ */

/* Wrapper – positionerat för dropdown */
.nav__extra {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: .75rem;
}

/* Knappen: bara tre streck, kvadratisk */
.nav__extra-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  color: var(--muted);
  transition: background .18s, border-color .18s, color .18s;
}
.nav__extra-toggle:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.2);
  color: var(--text);
}
.nav__extra-toggle[aria-expanded="true"] {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

/* Tre streck */
.nav__extra-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
  flex-shrink: 0;
}
.nav__extra-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: width .2s var(--ease);
}
/* Animera strecken lite när öppen */
.nav__extra-toggle[aria-expanded="true"] .nav__extra-bars span:nth-child(1) { width: 100%; }
.nav__extra-toggle[aria-expanded="true"] .nav__extra-bars span:nth-child(2) { width: 60%; }
.nav__extra-toggle[aria-expanded="true"] .nav__extra-bars span:nth-child(3) { width: 80%; }

/* Dropdown-drawer – högerjusterad */
.nav__extra-drawer {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
  z-index: 300;

  /* Stängd */
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transform-origin: top right;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav__extra-drawer.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Länkarna i drawern */
.nav__extra-drawer ul { list-style: none; }
.nav__extra-drawer a {
  display: block;
  padding: .5rem .85rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav__extra-drawer a:hover {
  color: var(--red);
  background: var(--red-soft);
}

/* ── Mobil: desktop-knappen döljs, posterna syns i nav__links ── */
.nav__extra-divider { display: none; }
.nav__extra-mobile-item { display: none; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.hero {
  position: relative; min-height: max(680px, 100vh); display: flex; align-items: center;
  background:
    radial-gradient(ellipse 65% 55% at 8% 42%, rgba(242, 183, 5, .35) 0%, transparent 50%),
    radial-gradient(ellipse 55% 48% at 92% 28%, rgba(255, 255, 255, .2) 0%, transparent 48%),
    radial-gradient(ellipse 50% 52% at 70% 88%, rgba(84, 184, 98, .28) 0%, transparent 45%),
    linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  padding-top: 64px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("../images/MD9_patternOnly.svg");
  background-repeat: repeat;
  background-size: 800px auto;
  opacity: 1;
  pointer-events: none;
  /* animation: <namn> <längd> <timing-funktion> <fill-mode>
     hero-pattern-fade = keyframes nedan | 5s = speltid | ease = mjuk in/ut | forwards = stannar på sluttillståndet (0.5) */
  animation: hero-pattern-fade 8s ease forwards;
}
@keyframes hero-pattern-fade {
  from { opacity: 1; }
  to   { opacity: .3; }
}
.hero--compact { min-height: auto; }
.hero--compact .hero__layout { padding: 4rem 0 9rem; }
.hero--compact .hero__showcase { align-items: center; }
.hero--compact .hero__book { bottom: 30%; }
/* Dra in stapeln åt vänster och krymp de tre främre böckerna något */
.hero--compact .hero__book-stack { transform: translateX(-70px); }
.hero--compact .hero__book--b7 { width: 132px; }
.hero--compact .hero__book--b8 { width: 150px; }
.hero--compact .hero__book--b9 { width: 168px; }
.hero__wave {
  position: absolute; bottom: -2px; left: 0; right: 0; height: 120px;
  background: var(--bg);
  clip-path: ellipse(60% 100% at 50% 100%);
  z-index: 3;
}
.hero__layout {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  padding: 5rem 0 7rem;
}
.hero__copy { color: #fff; }
.hero__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  padding: .35rem 1rem; border-radius: 2rem;
  font-size: .82rem; font-weight: 600; margin-bottom: 1.5rem;
}
.hero__chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  animation: dot-pulse 2s ease infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.5); }
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800;
  line-height: 1.08; margin-bottom: 1.3rem; letter-spacing: -.02em;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--amber), #FFD766);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__desc a { color: var(--amber); text-decoration-color: var(--amber); }
.hero__desc a:hover { color: #FFD766; }
.hero__desc {
  font-size: 1.1rem; color: rgba(255,255,255,.72); line-height: 1.75;
  max-width: 460px; margin-bottom: 2rem;
}
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .85rem 1.6rem; border-radius: var(--r-sm);
  font-weight: 650; font-size: .95rem; cursor: pointer; border: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { box-shadow: 0 8px 24px var(--red-glow); }
.btn--ghost {
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.28); }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* Hero books – 9-book stack */
.hero__showcase { display: flex; justify-content: center; align-items: flex-end; }
.hero__book-stack {
  position: relative;
  width: 560px;
  height: 330px;
  flex-shrink: 0;
  perspective: 1200px;
  overflow: visible;
}

/* Vänsterställning av bokstapeln: skjut lika långt som vänstraste bokens left-värde */
.hero__book-stack--from-b3 { transform: translateX(-76px); }
.hero__book-stack--from-b4 { transform: translateX(-122px); }
.hero__book-stack--from-b5 { transform: translateX(-174px); }
.hero__book-stack--from-b6 { transform: translateX(-234px); }
.hero__book-stack--from-f7 { transform: translateX(-306px); }
.hero__book-stack--from-f8 { transform: translateX(-362px); }
.hero__book-stack--from-f9 { transform: translateX(-392px); }

.hero__book {
  position: absolute;
  bottom: 0;
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  object-fit: cover;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .3s;
}
.hero__book:hover {
  transform: translateY(-10px) scale(1.06) rotateY(0deg) !important;
  z-index: 20 !important;
  opacity: 1 !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.35);
}

/* Startläge för deal-animation – alla böcker staplade */
.hero__book.book-pre-anim {
  opacity: 0 !important;
  transform: translateX(130px) translateY(10px) rotateY(-18deg) scale(0.74) !important;
  transition: none !important;
}

/* ── Bakgrundsböcker 1–6 (show-off, tonar bakåt åt vänster) ── */
.hero__book--bg { filter: brightness(.88); pointer-events: none; cursor: default; }

.hero__book--b1 { width: 62px;  left: 0px;   z-index: 1; opacity: .16; transform: rotateY(20deg); }
.hero__book--b2 { width: 68px;  left: 36px;  z-index: 2; opacity: .22; transform: rotateY(17deg); }
.hero__book--b3 { width: 76px;  left: 76px;  z-index: 3; opacity: .30; transform: rotateY(14deg); }
.hero__book--b4 { width: 86px;  left: 122px; z-index: 4; opacity: .38; transform: rotateY(11deg); }
.hero__book--b5 { width: 96px;  left: 174px; z-index: 5; opacity: .48; transform: rotateY(8deg);  }
.hero__book--b6 { width: 110px; left: 234px; z-index: 6; opacity: .62; transform: rotateY(6deg);  }

/* ── Fokusböcker 7–9 ── */
.hero__book--f7 { width: 148px; left: 306px; z-index: 7; opacity: .84; transform: translateY(-6px)  rotateY(5deg); }
.hero__book--f8 { width: 170px; left: 362px; z-index: 8; opacity: .93; transform: translateY(-14px) rotateY(-2deg); }
.hero__book--f9 { width: 192px; left: 392px; z-index: 9; opacity: 1;   transform: translateY(-22px) rotateY(-6deg); }

/* ── Bakgrundsböcker 7–9 (samma positioner som fokusböckerna) ── */
.hero__book--b7 { width: 148px; left: 306px; z-index: 7; opacity: .84; transform: translateY(-6px)  rotateY(5deg); }
.hero__book--b8 { width: 170px; left: 362px; z-index: 8; opacity: .93; transform: translateY(-14px) rotateY(-2deg); }
.hero__book--b9 { width: 192px; left: 392px; z-index: 9; opacity: 1;   transform: translateY(-22px) rotateY(-6deg); }

/* ── Fristående framhävd bok – slot till höger om f9 i stacken ──         */
/* f9 slutar vid left 392 + width 192 = 584px → featured vid 610px     */
.hero__book--featured {
  width: 180px;          /* lite under f9:s 192px – ska inte dominera */
  left: 610px;
  z-index: 10;
  /* Startläge: osynlig, skalad ner. book-pre-anim slås på av JS men
     featuren är undantagen via !important-animationen nedan. */
  opacity: 0;
  transform: translateY(-22px) scale(0.35) rotateY(-4deg);
  transform-origin: bottom center;
  box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.14);
  /* Zoom-in med delay – both = gömmer under delay + behåller slutläget efter */
  animation: hero-featured-zoom .75s cubic-bezier(.34,1.56,.64,1) 1.1s both;
  transition: box-shadow .3s var(--ease);
}
.hero__book--featured img {
  width: 100%;
  border-radius: var(--r-md);
  display: block;
}
/* Hover: overridar animation-slutläget under hover, återgår när musen lämnar */
.hero__book--featured:hover {
  transform: translateY(-30px) scale(1.07) rotateY(0deg) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,.38) !important;
}
@keyframes hero-featured-zoom {
  to {
    opacity: 1;
    transform: translateY(-22px) scale(1) rotateY(-4deg);
  }
}

/* Sätts av JS (animationend) – byter animation mot transition så hover fungerar */
.hero__book--featured.featured-done {
  animation: none;
  opacity: 1;
  transform: translateY(-22px) scale(1) rotateY(-4deg);
  transition: transform .4s var(--ease), box-shadow .3s var(--ease);
}
.hero__book--featured.featured-done:hover {
  transform: translateY(-30px) scale(1.07) rotateY(0deg) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,.38) !important;
}

/* ── Undanta featured från book-pre-anim-rådet (JS skapar det på alla .hero__book) ── */
.hero__book--featured.book-pre-anim {
  opacity: 0 !important;
  transform: translateY(-22px) scale(0.35) rotateY(-4deg) !important;
  transition: none !important;
  animation: hero-featured-zoom .75s cubic-bezier(.34,1.56,.64,1) 1.1s forwards !important;
}


/* ══════════════════════════════════════════════
   STATS RIBBON
   ══════════════════════════════════════════════ */
.ribbon {
  position: relative; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2.2rem 0;
  box-shadow: var(--shadow-xs);
}
.ribbon__inner { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; }
.ribbon__stat { text-align: center; }
.ribbon__stat strong {
  display: block; font-size: 2.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ribbon__stat span { font-size: .85rem; color: var(--muted); font-weight: 500; }

/* ══════════════════════════════════════════════
   USP CARDS
   ══════════════════════════════════════════════ */
.usp { background: var(--bg); }
.usp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.usp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.usp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.usp-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.usp-card__icon svg { width: 22px; height: 22px; }
.usp-card__icon--amber { background: var(--amber-soft); color: #C99400; }
.usp-card__icon--blue  { background: var(--sky-soft);   color: #3A85B0; }
.usp-card__icon--red   { background: var(--red-soft);   color: var(--red); }
.usp-card__icon--green { background: var(--green-soft); color: #2E8B3E; }
.usp-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.usp-card p  { font-size: .9rem; color: var(--muted); line-height: 1.65; }

/* ══════════════════════════════════════════════
   SERIES CARDS
   ══════════════════════════════════════════════ */
.serier { background: var(--surface); }
.serier__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.serie {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.serie:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.serie__bar { height: 5px; }
.serie__body { padding: 2rem; text-align: center; }
.serie__tag {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.serie__body h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .55rem; }
.serie__body p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.2rem; }
.serie__cover {
  width: 130px; margin: 0 auto 1.1rem; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); transition: transform .3s var(--ease);
}
.serie:hover .serie__cover { transform: scale(1.06) rotate(-1deg); }
.serie__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 600; font-size: .88rem;
  transition: gap .25s var(--ease);
}
.serie__link:hover { gap: .6rem; }
.serie__link svg { transition: transform .2s var(--ease); }
.serie__link:hover svg { transform: translateX(3px); }

.serie--green .serie__bar { background: var(--green); }
.serie--green .serie__tag,
.serie--green .serie__link { color: #2E8B3E; }

.serie--blue .serie__bar { background: var(--sky); }
.serie--blue .serie__tag,
.serie--blue .serie__link { color: #3A85B0; }

.serie--red { border: 2px solid var(--red); }
.serie--red .serie__bar { background: var(--red); }
.serie--red .serie__tag,
.serie--red .serie__link { color: var(--red); }

.serie__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,32,39,.05), transparent 60%);
}

/* ══════════════════════════════════════════════
   QUOTE
   ══════════════════════════════════════════════ */
.quote { background: var(--bg); }
.quote__card {
  position: relative; max-width: 700px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 3rem 2.5rem;
  box-shadow: var(--shadow-sm);
}
.quote__mark { width: 44px; height: 44px; margin: 0 auto .8rem; color: var(--sky); opacity: .2; }
.quote__card blockquote {
  font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; line-height: 1.5;
  margin-bottom: 1.5rem; color: var(--text);
}
.quote__author { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff;
}
.quote__author strong { display: block; font-size: .9rem; }
.quote__author span { font-size: .8rem; color: var(--muted); }

/* ══════════════════════════════════════════════
   RESOURCES
   ══════════════════════════════════════════════ */
.resurser { background: var(--surface); }
.resurser__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

.res-card {
  display: block; color: inherit; text-decoration: none;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.8rem; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.res-card__icon {
  width: 48px; height: 48px; margin: 0 auto .9rem;
  border-radius: var(--r-md); background: var(--red-soft);
  display: flex; align-items: center; justify-content: center; color: var(--red);
}
.res-card__icon svg { width: 22px; height: 22px; }
.res-card h4 { font-weight: 700; margin-bottom: .2rem; }
.res-card p { font-size: .85rem; color: var(--muted); }

/* ══════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════ */
.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--hero-from), var(--hero-to));
  padding: 5rem 0; text-align: center; color: #fff;
}
.cta-banner h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: .7rem; }
.cta-banner p { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 480px; margin: 0 auto 2rem; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer { background: #111827; color: rgba(255,255,255,.5); padding: 3.5rem 0 1.5rem; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.footer__brand { max-width: 280px; }
.footer__logo { height: 26px; width: auto; margin-bottom: .8rem; filter: brightness(0) invert(1); }
.footer__brand p { font-size: .85rem; line-height: 1.65; }
.footer__col h4 {
  color: rgba(255,255,255,.8); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem;
}
.footer__col li { margin-bottom: .4rem; }
.footer__col a { font-size: .85rem; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.2rem;
  display: flex; justify-content: space-between; font-size: .78rem;
}

/* ══════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════ */
.rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.rv.visible { opacity: 1; transform: translateY(0); }

/* ── Typografi-utility: förhindrar radbrytning i t.ex. årsklassintervall (7–9) ── */
.nobr { white-space: nowrap; }

/* Undermeny i navigationen – endast synlig i mobilmenyn (se @media 640) */
.nav__submenu { display: none; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
    /* Extra luft under stapeln så böckerna får plats ovanför vågen */
    padding: 2.5rem 0 7rem;
  }
  .hero__desc { max-width: 540px; margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__showcase {
    margin-top: 1.5rem;
    /* Skala ner hela showcase inkl. featured så det passar iPad */
    transform: scale(0.82);
    transform-origin: top center;
    /* Ingen negativ marginal – den drog tidigare ner böckerna i vågen och
       kapade nederkanten. Scale med origin top center lyfter redan stapeln. */
    margin-bottom: 0;
  }
  /* Lägre våg vid den här bredden så den inte skär av bokstapeln */
  .hero__wave { height: 88px; }
}

@media (max-width: 1024px) {
  .usp__grid { grid-template-columns: 1fr 1fr; }
  .serier__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .resurser__grid { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 999px) {
  .nav__links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start; text-align: left; padding: 1.2rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .nav__links.open { display: flex; }
  .nav__burger { display: flex; }

  /* ── Extrameny på mobil: knappen döljs, posterna visas i nav__links ── */
  .nav__extra { display: none; }          /* göm desktop-knappen */
  .nav__extra-divider { display: block; } /* visa linjen */
  .nav__extra-mobile-item { display: list-item; } /* visa posterna */
  .nav__extra-mobile-item a {
    font-size: .88rem; font-weight: 500; color: var(--muted);
    padding: .4rem .85rem; border-radius: var(--r-sm);
    display: block; width: 100%;
    transition: color .2s, background .2s;
  }
  .nav__extra-mobile-item a:hover { color: var(--text); background: rgba(0,0,0,.04); }

  /* ── Undermeny (Varför-rutor) i mobilmenyn ── */
  .nav__submenu {
    display: block; list-style: none;
    margin: .15rem 0 .35rem; padding-left: 1rem;
    border-left: 2px solid var(--border);
  }
  .nav__submenu a {
    display: block; font-size: .85rem; color: var(--muted);
    padding: .3rem .85rem; border-radius: var(--r-sm);
    transition: color .2s, background .2s;
  }
  .nav__submenu a:hover { color: var(--text); background: rgba(0,0,0,.04); }

  .hero h1 { font-size: 2.1rem; }
  .hero__showcase { display: none; }
  .hero__desc { padding-inline: 1rem; }
  .usp__grid, .resurser__grid { grid-template-columns: 1fr; }
  .section__head h2 { font-size: 1.65rem; }
  .quote__card blockquote { font-size: 1.1rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: .4rem; text-align: center; }
  .ribbon__inner { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════
   404 ERROR PAGE
   ══════════════════════════════════════════════ */
.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(108,180,220,.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 80% 70%, rgba(212,32,39,.06) 0%, transparent 50%),
    var(--bg);
}

.error-page__inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ── Floating math symbols ── */
.error-page__symbols {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.error-page__sym {
  position: absolute;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 700;
  opacity: 0;
  animation: sym-float 12s ease-in-out infinite;
  color: var(--muted);
}

.error-page__sym--1  { left: 5%;  top: 15%; animation-delay: 0s;    color: var(--red);   }
.error-page__sym--2  { left: 88%; top: 20%; animation-delay: 1.1s;  color: var(--sky);   }
.error-page__sym--3  { left: 15%; top: 70%; animation-delay: 2.3s;  color: var(--amber); }
.error-page__sym--4  { left: 82%; top: 65%; animation-delay: 3.5s;  color: var(--green); }
.error-page__sym--5  { left: 45%; top: 8%;  animation-delay: 4.2s;  color: var(--red);   }
.error-page__sym--6  { left: 70%; top: 82%; animation-delay: 5.4s;  color: var(--sky);   }
.error-page__sym--7  { left: 25%; top: 88%; animation-delay: 6.6s;  color: var(--amber); }
.error-page__sym--8  { left: 60%; top: 12%; animation-delay: 7.8s;  color: var(--green); }
.error-page__sym--9  { left: 8%;  top: 42%; animation-delay: 8.5s;  color: var(--sky);   }
.error-page__sym--10 { left: 92%; top: 45%; animation-delay: 9.7s;  color: var(--red);   }

@keyframes sym-float {
  0%   { opacity: 0;   transform: translateY(30px) rotate(0deg)   scale(.7); }
  15%  { opacity: .18; }
  50%  { opacity: .25; transform: translateY(-20px) rotate(180deg) scale(1);  }
  85%  { opacity: .18; }
  100% { opacity: 0;   transform: translateY(30px) rotate(360deg) scale(.7); }
}

/* ── 404 number ── */
.error-page__hero {
  margin-bottom: 1.8rem;
}

.error-page__code {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  user-select: none;
}

.error-page__digit {
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 60%, var(--red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  animation: digit-breathe 3s ease-in-out infinite;
}

.error-page__digit--zero {
  position: relative;
}

.error-page__zero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid var(--red);
  opacity: 0;
  animation: ring-pulse 2.5s ease-out infinite;
}

@keyframes digit-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@keyframes ring-pulse {
  0%   { opacity: .5; width: 30%; height: 30%; }
  100% { opacity: 0;  width: 90%; height: 90%; }
}

/* ── Math equation ── */
.error-page__equation {
  margin-bottom: 2rem;
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  line-height: 2;
  color: var(--muted);
}

.error-page__equation code {
  font-family: 'Courier New', Courier, monospace;
  background: rgba(0,0,0,.04);
  padding: .15em .5em;
  border-radius: var(--r-sm);
  font-size: .95em;
}

.error-page__answer {
  color: var(--red) !important;
  font-weight: 600;
}

.error-page__answer em {
  font-style: italic;
}

/* ── Text ── */
.error-page__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}

.error-page__desc {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}

/* ── Actions ── */
.error-page__actions {
  margin-bottom: 3rem;
}

.error-page__btn svg {
  flex-shrink: 0;
}

/* ── Fun fact card ── */
.error-page__funfact {
  display: inline-block;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.8rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.error-page__funfact:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.error-page__funfact-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  margin-bottom: .4rem;
}

.error-page__funfact-text {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.6;
  font-weight: 500;
}

/* ── Generisk felsida: 2-kolumnslayout ── */
.error-page--generic { padding: 110px 0 3rem; min-height: auto; }

.error-page__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
  max-width: 860px;
}

.error-page__visual { display: flex; justify-content: center; }
.error-page__body   { min-width: 0; }

/* Kolumnläge: kod + rubrik tätare ihop */
.error-page__body .error-page__hero  { margin-bottom: .4rem; }
.error-page__body .error-page__desc  { margin: 0 0 1.4rem; max-width: none; }
.error-page__body .error-page__quiz  { margin: 0 0 1.6rem; }
.error-page__body .error-page__actions { margin-bottom: 0; }
.error-page__body .error-page__digit {
  font-size: clamp(4rem, 10vw, 7rem);
  animation: none;
}

/* En kolumn på smala skärmar */
@media (max-width: 720px) {
  .error-page__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.2rem;
    justify-items: center;
  }
  .error-page__body .error-page__desc { margin-inline: auto; }
}

/* ── Böcker som ramlar ner i en hög ── */
.book-pile {
  position: relative;
  width: min(280px, 70vw);
  height: 180px;
  margin: 0 auto;
  z-index: 1;
}

.book-pile__book {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(70px, 22vw, 96px);
  height: auto;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  /* Slutläge i högen: staplad med lite slumpvis lutning/förskjutning */
  transform:
    translate(calc(-50% + var(--dx, 0px)), calc(var(--i, 1) * -22px))
    rotate(var(--rot, 0deg));
  opacity: 0;
  animation: book-chaos 1.25s cubic-bezier(.5, .05, .3, 1) both;
  animation-delay: var(--delay, 0s);
}

/* Crazy kaos: böckerna flyger in snett, tumlar med full snurr,
   överskjuter under högen, studsar upp och wobblar till ro. */
@keyframes book-chaos {
  0% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--startx, 0px)), -340px)
      rotate(calc(var(--rot, 0deg) + var(--spin, 360deg)))
      scale(1.15);
  }
  8%  { opacity: 1; }
  55% {
    /* Slår i botten – överskjuter under vilopositionen + sidokast */
    transform:
      translate(calc(-50% + var(--dx, 0px) + var(--swing, 0px)), calc(var(--i, 1) * -22px + 34px))
      rotate(calc(var(--rot, 0deg) - 14deg))
      scale(1.06, .9);
  }
  70% {
    /* Studsar upp igen, lite mindre */
    transform:
      translate(calc(-50% + var(--dx, 0px) - (var(--swing, 0px) * .4)), calc(var(--i, 1) * -22px - 24px))
      rotate(calc(var(--rot, 0deg) + 10deg))
      scale(.98, 1.04);
  }
  84% {
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(var(--i, 1) * -22px + 8px))
      rotate(calc(var(--rot, 0deg) - 4deg))
      scale(1.02, .98);
  }
  92% {
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(var(--i, 1) * -22px))
      rotate(calc(var(--rot, 0deg) + 2deg));
  }
  100% {
    opacity: 1;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(var(--i, 1) * -22px))
      rotate(var(--rot, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-pile__book { animation-duration: .01ms; animation-delay: 0s; }
}

/* ── Slumpvis matteuppgift ── */
.error-page__quiz {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  max-width: 420px;
  margin: 0 auto 2.4rem;
  padding: 1.3rem 1.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.error-page__quiz-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sky);
}

.error-page__quiz-problem {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
}

.error-page__quiz-problem code {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
}

.error-page__quiz-eq {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.error-page__quiz-input {
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  width: 3.5em;
  text-align: center;
  padding: .2em .3em;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  /* Dölj spinner-pilarna */
  -moz-appearance: textfield;
  appearance: textfield;
}
.error-page__quiz-input::-webkit-outer-spin-button,
.error-page__quiz-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.error-page__quiz-input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(108,180,220,.25);
}

.error-page__quiz-check {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: .45em 1.1em;
  border-radius: var(--r-sm);
  border: 1px solid var(--sky);
  background: var(--sky);
  color: #fff;
  transition: filter .2s var(--ease);
}
.error-page__quiz-check:hover { filter: brightness(.94); }

/* Feedback-rad */
.error-page__quiz-feedback {
  min-height: 1.3em;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
}
.error-page__quiz-feedback:empty { min-height: 0; }
.error-page__quiz-feedback.is-correct { color: var(--green); }
.error-page__quiz-feedback.is-wrong   { color: var(--red); }
.error-page__quiz-feedback.is-hint    { color: var(--muted); font-weight: 500; }

/* Rätt/fel-läge på hela kortet */
.error-page__quiz.is-correct .error-page__quiz-input {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(58,167,109,.2);
}
.error-page__quiz.is-wrong .error-page__quiz-input {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(212,32,39,.18);
  animation: quiz-shake .35s var(--ease);
}

@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .error-page__quiz.is-wrong .error-page__quiz-input { animation: none; }
}

/* ── 404 responsive ── */
@media (max-width: 640px) {
  .error-page { padding-top: 90px; }
  .error-page--generic { padding-top: 110px; }
  .error-page__equation code { font-size: .8rem; }
  .error-page__sym { font-size: 1.2rem; }
  .error-page__funfact { padding: 1.1rem 1.3rem; }
  .book-pile { height: 180px; }
}

/* ══════════════════════════════════════════════
   SERIE PAGE – Hero
   ══════════════════════════════════════════════ */
.serie-hero {
  position: relative; min-height: 50vh; display: flex; align-items: center;
  padding: 120px 0 5rem; overflow: hidden;
}
.serie-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(108,180,220,.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 45% at 85% 60%, rgba(212,32,39,.08) 0%, transparent 50%),
    linear-gradient(170deg, var(--bg) 0%, #e8edf5 100%);
}
.serie-hero__layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
}
.serie-hero__tag {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--red);
  margin-bottom: .6rem;
}
.serie-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  line-height: 1.1; margin-bottom: .8rem; letter-spacing: -.02em;
}
.serie-hero__tagline {
  font-size: 1.15rem; color: var(--muted); margin-bottom: .6rem;
}
.serie-hero__desc {
  font-size: 1rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.8rem;
  max-width: 560px;
}
.serie-hero__desc p { margin-bottom: .5rem; }
.serie-hero__desc a,
.main-content a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(212, 32, 39, .35);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.serie-hero__desc a:hover,
.main-content a:hover {
  color: #a1141a;
  text-decoration-color: rgba(212, 32, 39, .7);
}

.serie-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.serie-hero__img {
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  max-width: 300px; transition: transform .4s var(--ease);
}
.serie-hero__cover:hover .serie-hero__img { transform: scale(1.04) rotate(-1deg); }

.btn--dark {
  background: rgba(0,0,0,.06); color: var(--text);
  border: 1px solid var(--border);
}
.btn--dark:hover { background: rgba(0,0,0,.1); }

/* ══════════════════════════════════════════════
   SERIE PAGE – Böcker grid
   ══════════════════════════════════════════════ */
.bocker__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); gap: 1.5rem;
  justify-content: center;
}
.bok-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bok-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bok-card__cover { aspect-ratio: 3/4; overflow: hidden; background: var(--bg); }
.bok-card__cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sky-soft), var(--bg));
}
.bok-card__placeholder-text {
  font-weight: 700; font-size: .9rem; color: var(--muted); text-align: center; padding: 1rem;
}
.bok-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.bok-card:hover .bok-card__img { transform: scale(1.05); }
.bok-card__body { padding: 1.2rem; }
.bok-card__tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--red); margin-bottom: .3rem;
}
.bok-card__body h3 { font-size: 1rem; font-weight: 700; }
.bocker__empty { text-align: center; color: var(--muted); font-style: italic; }


/* ── Highlighted card med syskonbok-stack ── */
.bocker__grid--highlighted {
  overflow: visible; /* Tillåt syskonböcker att sticka ut ur grid-cellen */
}

/* ── Secondary grid: kompakt med fler kolumner ── */
.bocker__grid--secondary {
  grid-template-columns: repeat(auto-fill, minmax(130px, 160px));
  gap: .85rem;
  /* align-items: stretch (default) – korten växer till radehöjden */
}

/* Kompakt kort för "Mer material"-sektionen */
.bok-card--small {
  display: flex;
  flex-direction: column;
  height: 100%; /* Fyll grid-cellens höjd */
}
.bok-card--small .bok-card__cover--small {
  flex-shrink: 0; /* Omslagsbilden krymper inte */
}
.bok-card--small .bok-card__body {
  flex: 1; /* Brödtexten tar upp resterande plats, titel alltid längst ner */
}
.bok-card__cover--small {
  padding: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  min-height: 120px;
}
.bok-card__cover--small .bok-card__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 140px;
  object-fit: contain; /* Visa hela omslaget utan att croopa */
}
.bok-card--small .bok-card__body {
  padding: .6rem .75rem .75rem;
}
.bok-card--small .bok-card__tag {
  font-size: .6rem;
  margin-bottom: .2rem;
}
.bok-card--small .bok-card__body h3 {
  font-size: .8rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .bocker__grid--secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
  .bok-card__cover--small { min-height: 130px; padding: .75rem; }
  .bok-card__cover--small .bok-card__img { max-height: 130px; }
  .bok-card--small .bok-card__body { padding: .5rem .75rem .75rem; }
  .bok-card--small .bok-card__body h3 { font-size: .82rem; }
}
@media (min-width: 420px) and (max-width: 640px) {
  .bocker__grid--secondary { grid-template-columns: repeat(3, 1fr); }
}


.bok-card-stack {
  position: relative;
  overflow: visible;
}

/* Syskonbok-omslag: storlekssätts till ENBART omslaget (aspect-ratio 3:4),
   inga textkroppar. Roterar från nederkanten som en kortlek. */
.bok-card-stack__sibling {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 4; /* Exakt samma som bok-card__cover */
  overflow: hidden;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  pointer-events: none;
  transition: transform .35s var(--ease);
  transform-origin: 50% 100%; /* Rotera från nederkanten */
}

.bok-card-stack__sibling img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.bok-card-stack__sibling:nth-child(1) {
  transform: rotate(-6deg);
  z-index: 1;
}

.bok-card-stack__sibling:nth-child(2) {
  transform: rotate(-11deg);
  z-index: 0;
}

/* Huvudkortet alltid överst + drop-shadow (fungerar trots overflow:hidden) */
.bok-card-stack > .bok-card {
  position: relative;
  z-index: 2;
  border: none; /* Ingen border i stack-kontext – drop-shadow ger avgränsning mot syskonkorten */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.32));
}

/* Hover: fläkta ut mer – visa mer av syskonböckerna */
.bok-card-stack:hover .bok-card-stack__sibling:nth-child(1) {
  transform: rotate(-11deg);
}
.bok-card-stack:hover .bok-card-stack__sibling:nth-child(2) {
  transform: rotate(-20deg);
}

/* ══════════════════════════════════════════════
   BOK PAGE – Hero
   ══════════════════════════════════════════════ */
.bok-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 3rem;
  background:
    radial-gradient(ellipse 55% 60% at 10% 25%, rgba(108,180,220,.24) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 96% 85%, rgba(242,183,5,.16) 0%, transparent 55%),
    linear-gradient(170deg, #eef3fa 0%, #e6ecf6 100%);
}
.bok-hero__layout {
  display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center;
}
.bok-hero__img {
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  max-width: 260px; transition: transform .4s var(--ease);
}
.bok-hero__cover:hover .bok-hero__img { transform: scale(1.04) rotate(-1deg); }
.bok-hero__breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .9rem; margin-bottom: 1.4rem;
}
.bok-hero__breadcrumb a {
  color: var(--sky); font-weight: 500; transition: color .2s;
}
.bok-hero__breadcrumb a:hover { color: var(--hero-to); }
.bok-hero__breadcrumb span[aria-hidden] { color: var(--border); }
.bok-hero__breadcrumb [aria-current="page"] {
  color: var(--text); font-weight: 700;
}
.bok-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800;
  line-height: 1.1; margin-bottom: .6rem; letter-spacing: -.02em;
}
.bok-hero__tag {
  display: inline-block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--red); margin-bottom: .5rem;
  background: var(--red-soft); padding: .25rem .75rem; border-radius: 2rem;
}
.bok-hero__serie { font-size: .95rem; color: var(--muted); margin-top: .4rem; }
.bok-hero__forlaget-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.bok-hero__resurser-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Knappar i rad med luft emellan */
.bok-hero__forlaget-link,
.bok-hero__resurser-link {
  margin-top: 1.2rem;
  margin-right: .6rem;
}

/* ══════════════════════════════════════════════
   BOK PAGE – Beskrivning (Content)
   ══════════════════════════════════════════════ */
.bok-content { background: var(--surface); }
.bok-content__inner { max-width: 780px; margin: 0 auto; }
.bok-content__body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}
.bok-content__body p  { margin-bottom: 1rem; }
.bok-content__body h2 { font-size: 1.4rem; font-weight: 700; margin: 1.8rem 0 .6rem; }
.bok-content__body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.bok-content__body ul,
.bok-content__body ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.bok-content__body li { margin-bottom: .3rem; }

/* Serie-sidan delar samma forlaget-link-stil */
.serie-hero__forlaget-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}


/* ══════════════════════════════════════════════
   BOK PAGE – Kapitel
   ══════════════════════════════════════════════ */
.kapitel__list { display: flex; flex-direction: column; gap: .8rem; max-width: 700px; margin: 0 auto; }
.kapitel__item {
  display: flex; align-items: flex-start; gap: 1.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1.2rem 1.5rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.kapitel__item:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.kapitel__nr {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.kapitel__info h3 { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.kapitel__info p { font-size: .88rem; color: var(--muted); }

/* ══════════════════════════════════════════════
   BOK PAGE – Nedladdningar
   ══════════════════════════════════════════════ */
.nedladdningar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 55% at 88% 10%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 65%, #1f5c8c 100%);
}
.nedladdningar > .wrap { position: relative; z-index: 1; }
.nedladdningar .section__label { color: var(--amber); }
.nedladdningar .section__head h2 { color: #fff; }
.nedladdningar__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.nedladdning-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #fff; border: 1px solid transparent;
  border-radius: var(--r-md); padding: 1.2rem;
  box-shadow: 0 8px 24px rgba(15,60,95,.18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
}
.nedladdning-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15,60,95,.28);
}
.nedladdning-card__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--sky-soft); color: #3A85B0;
  display: flex; align-items: center; justify-content: center;
}
.nedladdning-card__icon svg { width: 20px; height: 20px; }
.nedladdning-card__info h4 { font-size: .9rem; font-weight: 700; margin-bottom: .15rem; }
.nedladdning-card__tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: rgba(0,0,0,.04);
  padding: .1rem .5rem; border-radius: 2rem; margin-bottom: .3rem;
}
.nedladdning-card__info p { font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ── CMS Content section ── */
.content { background: var(--bg); }
.content .wrap { max-width: 780px; }
.content h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: .8rem; }
.content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; margin-top: 1.5rem; }
.content p { margin-bottom: 1rem; line-height: 1.75; color: var(--text); }
.content ul, .content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.content li { margin-bottom: .3rem; line-height: 1.65; }

/* ══════════════════════════════════════════════
   SERIE + BOK responsive
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .serie-hero__layout { grid-template-columns: 1fr; text-align: center; }
  .serie-hero__desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .serie-hero__actions { justify-content: center; }
  .serie-hero__cover { order: -1; }
  .serie-hero__img { max-width: 220px; margin: 0 auto; }
  .bok-hero__layout { grid-template-columns: 1fr; text-align: center; }
  .bok-hero__cover { order: -1; }
  .bok-hero__img { max-width: 200px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .bocker__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .nedladdningar__grid { grid-template-columns: 1fr; }
  .kapitel__item { padding: 1rem; }
}

/* ══════════════════════════════════════════════
   DOWNLOAD PAGE – Hero
   ══════════════════════════════════════════════ */
.download-hero {
  position: relative;
  padding: 120px 0 4rem;
  overflow: hidden;
}
.download-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 10% 40%, rgba(108,180,220,.13) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 90% 65%, rgba(84,184,98,.08) 0%, transparent 55%),
    linear-gradient(175deg, var(--bg) 0%, #edf0f7 100%);
}
.download-hero__layout { position: relative; z-index: 1; }
.download-hero__copy { max-width: 700px; }
.download-hero__copy h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; margin: .5rem 0 1rem;
}
.download-hero__intro {
  font-size: 1.05rem; color: var(--muted);
  line-height: 1.75; max-width: 600px;
}

/* ══════════════════════════════════════════════
   DOWNLOAD PAGE – Filter panel
   ══════════════════════════════════════════════ */
.download-filter {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.6rem 0;
  position: sticky; top: 64px; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.download-filter__panel { display: flex; flex-direction: column; gap: 1.2rem; }
.download-filter__group { display: flex; flex-direction: column; gap: .4rem; }
.download-filter__label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.download-filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Chips */
.chip {
  display: inline-flex; align-items: center;
  padding: .3rem .9rem; border-radius: 2rem;
  font-size: .82rem; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--sky); color: var(--hero-to); background: var(--sky-soft); }
.chip--active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 8px var(--red-glow); }

/* Dropdowns row */
.download-filter__dropdowns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  gap: 1rem; align-items: end;
}
.download-filter__select {
  width: 100%; padding: .48rem .9rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg);
  font-family: var(--font); font-size: .88rem; color: var(--text); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.2rem;
}
.download-filter__select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(108,180,220,.2); }

/* Search */
.download-filter__search-wrap { position: relative; }
.download-filter__search-icon {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.download-filter__search {
  width: 100%; padding: .48rem .9rem .48rem 2.25rem;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg);
  font-family: var(--font); font-size: .88rem; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.download-filter__search:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(108,180,220,.2); }

/* Footer row */
.download-filter__footer {
  display: flex; align-items: center; justify-content: space-between; padding-top: .4rem;
}
.download-filter__count { font-size: .82rem; color: var(--muted); font-weight: 500; }
.download-filter__clear {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer;
  padding: .3rem .6rem; border-radius: var(--r-sm);
  transition: color .2s, background .2s;
}
.download-filter__clear:hover { color: var(--red); background: var(--red-soft); }

/* ══════════════════════════════════════════════
   DOWNLOAD PAGE – File list (rows)
   ══════════════════════════════════════════════ */
.download-list { background: var(--bg); }
.download-grid--list {
  display: flex; flex-direction: column; gap: .5rem;
}

/* ── Download Table ── */
.download-table-wrapper {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-top: 1.5rem;
}
.download-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: .95rem;
}
.download-table th,
.download-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.download-table th {
  background: var(--bg);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.download-table tr:last-child td {
  border-bottom: none;
}
.download-table tr {
  transition: background-color .2s var(--ease);
}
.download-table tr:hover {
  background-color: rgba(108,180,220,.03);
}
.download-table__info-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.download-table__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-soft);
  color: var(--red);
}
.download-table__icon svg {
  width: 18px;
  height: 18px;
}
.download-table__text {
  display: flex;
  flex-direction: column;
}
.download-table__title {
  font-weight: 700;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.35;
}
.download-table__desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: .15rem;
}
.download-table__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 650;
  color: var(--text);
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.download-table__btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 12px var(--red-glow);
  transform: translateY(-1px);
}
.download-table__btn svg {
  transition: transform .2s var(--ease);
}
.download-table__btn:hover svg {
  transform: translateY(2px);
}

@media (max-width: 640px) {
  .download-table th:nth-child(2),
  .download-table td:nth-child(2) {
    display: none;
  }
}

/* Kategori-innehåll (visas när en kategori är vald i filtret) */
.download-kategori-content { background: var(--bg); }
.kategori-content {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.5rem 1.8rem; margin-top: 1.5rem;
  line-height: 1.6;
}
.kategori-content[hidden] { display: none; }

.dl-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .85rem 1.2rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
/* Filtrering: respektera [hidden] – annars vinner display:flex ovan */
.dl-row[hidden] { display: none; }
.dl-row:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(108,180,220,.3);
}

/* Icon */
.dl-row__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--red-soft); color: var(--red);
}
.dl-row__icon svg { width: 18px; height: 18px; }

/* Body – title + desc */
.dl-row__body { flex: 1; min-width: 0; }
.dl-row__title { font-size: .92rem; font-weight: 700; line-height: 1.35; }
.dl-row__desc { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: .15rem; }

/* Meta badges */
.dl-row__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  flex-shrink: 0;
}
.dl-row__kategori {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: .15rem .6rem; border-radius: 2rem;
  background: var(--sky-soft); color: var(--hero-to);
}
.dl-row__kategori--arbetsblad  { background: rgba(84,184,98,.12);  color: #2E8B3E; }
.dl-row__kategori--fordjupning { background: var(--sky-soft);       color: var(--hero-to); }
.dl-row__kategori--repetition  { background: var(--amber-soft);     color: #9A7400; }
.dl-row__kategori--laratstod   { background: var(--red-soft);       color: var(--red); }
.dl-row__kategori--facit       { background: rgba(108,180,220,.15); color: #2B6CA3; }
.dl-row__kategori--ljudfiler   { background: rgba(138,100,220,.1);  color: #5B21B6; }
.dl-row__kategori--ovrigt      { background: rgba(0,0,0,.05);       color: var(--muted); }
.dl-row__tag {
  font-size: .7rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: .12rem .55rem; border-radius: 2rem; font-weight: 500;
}
.dl-row__ak {
  font-size: .66rem; font-weight: 700;
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff; padding: .12rem .55rem; border-radius: 2rem;
}

/* Download button */
.dl-row__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .8rem; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 650; color: var(--text);
  transition: all .2s var(--ease); white-space: nowrap;
}
.dl-row__btn:hover {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 4px 12px var(--red-glow); transform: translateY(-1px);
}
.dl-row__btn svg { transition: transform .2s var(--ease); }
.dl-row__btn:hover svg { transform: translateY(2px); }

/* Empty state */
.download-empty { text-align: center; padding: 5rem 1rem; color: var(--muted); }
.download-empty[hidden] { display: none; }
.download-empty__icon { width: 72px; height: 72px; margin: 0 auto 1rem; opacity: .25; }
.download-empty__icon svg { width: 100%; height: 100%; }
.download-empty p { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; }

/* ── Download Page Responsive ── */
@media (max-width: 1024px) {
  .download-filter__dropdowns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .download-filter { position: relative; top: auto; }
  .download-filter__dropdowns { grid-template-columns: 1fr; }
  .dl-row { flex-wrap: wrap; gap: .6rem; }
  .dl-row__meta { width: 100%; order: -1; }
  .dl-row__btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════
   GENERIC PAGE – Fallback layout (Layout/Page.ss)
   ══════════════════════════════════════════════ */
.page-hero {
  position: relative; padding: 120px 0 3.5rem; overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 45% at 15% 50%, rgba(108,180,220,.1) 0%, transparent 55%),
    linear-gradient(175deg, var(--bg) 0%, #edf0f7 100%);
}
.page-hero__layout { position: relative; z-index: 1; }
.page-hero__breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--muted); margin-bottom: .8rem;
}
.page-hero__breadcrumb a { color: var(--sky); font-weight: 500; transition: color .2s; }
.page-hero__breadcrumb a:hover { color: var(--hero-to); }
.page-hero__breadcrumb span[aria-hidden] { color: var(--border); }
.page-hero__breadcrumb [aria-current="page"] { color: var(--text); font-weight: 700; }
/* Brödsmula inuti blå hero: nivå 1 (Hem) i gult, aktuell sida vit */
.hero .page-hero__breadcrumb a:first-child { color: var(--amber); }
.hero .page-hero__breadcrumb a:first-child:hover { color: #FFD766; }
.hero .page-hero__breadcrumb [aria-current="page"] { color: #fff; }
.page-hero__layout h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: .5rem;
}
.page-hero__desc { font-size: 1.05rem; color: var(--muted); line-height: 1.7; max-width: 600px; }

.page-content__inner {
  max-width: 760px;
  font-size: 1.05rem; line-height: 1.8; color: var(--text);
}
.page-content__inner h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .6rem; }
.page-content__inner h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .4rem; }
.page-content__inner p  { margin-bottom: 1rem; }
.page-content__inner ul, .page-content__inner ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.page-content__inner li { margin-bottom: .3rem; }
.page-content__inner a  { color: var(--sky); text-decoration: underline; }
.page-content__inner a:hover { color: var(--hero-to); }

/* ══════════════════════════════════════════════
   SERIER OVERVIEW PAGE
   ══════════════════════════════════════════════ */
.serier-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.serie-overview-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  text-decoration: none; color: var(--text);
}
.serie-overview-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(108,180,220,.35);
}

/* Color bar */
.serie-overview-card__bar {
  height: 5px; width: 100%;
  background: var(--sky);
}
.serie-overview-card__bar--1-3     { background: var(--green); }
.serie-overview-card__bar--4-6     { background: var(--sky); }
.serie-overview-card__bar--7-9     { background: var(--red); }
.serie-overview-card__bar--bryggan { background: var(--amber); }

/* Cover */
.serie-overview-card__cover {
  display: flex; justify-content: center; padding: 1.5rem 1.5rem 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, transparent 100%);
}
.serie-overview-card__img {
  max-height: 200px; width: auto; object-fit: contain;
  border-radius: var(--r-sm);
  transition: transform .3s var(--ease);
}
.serie-overview-card:hover .serie-overview-card__img { transform: scale(1.04); }

/* Body */
.serie-overview-card__body { padding: 1.2rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.serie-overview-card__tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: .4rem;
}
.serie-overview-card__title { font-size: 1.2rem; font-weight: 800; line-height: 1.25; margin-bottom: .35rem; }
.serie-overview-card__tagline { font-size: .88rem; color: var(--muted); line-height: 1.5; flex: 1; }
.serie-overview-card__count {
  font-size: .75rem; color: var(--muted); margin-top: .6rem;
  display: flex; align-items: center; gap: .3rem;
}
.serie-overview-card__link {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .8rem; font-size: .85rem; font-weight: 650;
  color: var(--sky); transition: color .2s;
}
.serie-overview-card:hover .serie-overview-card__link { color: var(--hero-to); }
.serie-overview-card__link svg { transition: transform .2s var(--ease); }
.serie-overview-card:hover .serie-overview-card__link svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .serier-overview__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   OM OSS – Author cards
   ══════════════════════════════════════════════ */
.forfattare__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  justify-content: center;
}
@media (max-width: 1024px) {
  .forfattare__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .forfattare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .forfattare__grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

.forfattare-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  text-align: center;
}
.forfattare-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.forfattare-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.forfattare-card__photo {
  display: flex; justify-content: center; padding: 1.5rem 1.5rem 0;
}
.forfattare-card__img {
  width: 140px; height: 140px; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--border);
}
.forfattare-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
}
.forfattare-card__photo--placeholder svg {
  width: 80px; height: 80px; color: var(--border);
  background: var(--bg); border-radius: 50%; padding: 16px;
}

.forfattare-card__body { padding: 1rem 1.5rem 1.5rem; }
.forfattare-card__name { font-size: 1.1rem; font-weight: 800; margin-bottom: .3rem; }
.forfattare-card__bio {
  font-size: .88rem; color: var(--muted); line-height: 1.6;
  max-width: 280px; margin: 0 auto;
}
.forfattare-card__books {
  display: inline-block; margin-top: .6rem;
  font-size: .72rem; font-weight: 600; color: var(--sky);
  background: var(--sky-soft); padding: .2rem .7rem; border-radius: 2rem;
}

/* ══════════════════════════════════════════════
   OM OSS – två tydligt olika sektioner
   ══════════════════════════════════════════════ */

/* ── Intro: ljus yta med mönster + centrerad lead ── */
.om-oss-page .page-content {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.om-oss-page .page-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/MD9_patternOnly.svg");
  background-repeat: repeat;
  background-size: 560px auto;
  opacity: .06;
  pointer-events: none;
}
.om-oss-page .page-content__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: var(--text);
}
/* Liten blå-röd-gul-grön accentlinje under introt */
.om-oss-page .page-content__inner::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 1.4rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--sky) 25% 50%, var(--amber) 50% 75%, var(--green) 75% 100%);
}

/* ── Team: blå gradient-sektion ── */
.om-oss-page .forfattare {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 55% at 85% 8%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 65%, #1f5c8c 100%);
}
.om-oss-page .forfattare > .wrap { position: relative; z-index: 1; }
.om-oss-page .forfattare .section__label { color: var(--amber); }
.om-oss-page .forfattare .section__head h2 { color: #fff; }
.om-oss-page .forfattare .section__head p  { color: rgba(255,255,255,.85); }

/* Vita kort som lyfter mot det blå, med färgglad topp-accent */
.om-oss-page .forfattare-card {
  position: relative;
  box-shadow: 0 10px 30px rgba(15,60,95,.22);
  border-color: transparent;
}
.om-oss-page .forfattare-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  z-index: 2;
  background: var(--sky);
}
.om-oss-page .forfattare-card:nth-child(4n+1)::before { background: var(--red); }
.om-oss-page .forfattare-card:nth-child(4n+2)::before { background: var(--sky); }
.om-oss-page .forfattare-card:nth-child(4n+3)::before { background: var(--amber); }
.om-oss-page .forfattare-card:nth-child(4n)::before   { background: var(--green); }
.om-oss-page .forfattare-card:hover {
  box-shadow: 0 16px 40px rgba(15,60,95,.3);
}

/* ══════════════════════════════════════════════
   FAQ – Accordion
   ══════════════════════════════════════════════ */
.faq__list { max-width: 760px; }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: .6rem; overflow: hidden;
  transition: border-color .2s;
}
.faq__item[open] { border-color: var(--sky); }

.faq__question {
  padding: 1rem 1.3rem; font-weight: 700; font-size: .95rem;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .2s;
}
.faq__question:hover { background: var(--bg); }
.faq__question::after {
  content: '+'; font-size: 1.2rem; font-weight: 300; color: var(--muted);
  transition: transform .2s;
}
.faq__item[open] .faq__question::after {
  content: '−'; color: var(--sky);
}

.faq__answer {
  padding: 0 1.3rem 1.2rem; font-size: .9rem; color: var(--muted);
  line-height: 1.7;
}
.faq__answer p { margin-bottom: .6rem; }

@media (max-width: 640px) {
  .forfattare__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .forfattare-card__img { width: 100px; height: 100px; }
}
@media (max-width: 400px) {
  .forfattare__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   PAGE VIDEOS – Inkluderad video-sektion
   ══════════════════════════════════════════════ */
.page-videos {
  padding: 4rem 0;
  background: var(--surface);
}
.page-videos__heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2rem;
}
.page-videos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.page-videos__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-videos__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* 16:9 aspect-ratio embed via padding-trick */
.page-videos__embed-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}
.page-videos__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.page-videos__no-embed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
  padding: 1rem;
  text-align: center;
}
.page-videos__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding: 1rem 1.2rem .3rem;
  margin: 0;
}
.page-videos__description {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  padding: 0 1.2rem 1.2rem;
  margin: 0;
}

@media (max-width: 768px) {
  .page-videos__grid { grid-template-columns: 1fr; }
}

/* Hero-bok länk-wrapper – bevarar position och animation */
.hero__book-link {
  display: contents; /* låter barnet (img) ta över display/position helt */
  cursor: pointer;
}
.hero__book-link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════
   SE ÄVEN – Syskonböcker (bokdetaljsida)
   ══════════════════════════════════════════════ */
.se-aven { background: var(--surface); }

.se-aven__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
  gap: 1.5rem;
}

.se-aven-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.se-aven-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.se-aven-card__cover {
  aspect-ratio: 3/4; overflow: hidden;
  background: var(--bg);
}
.se-aven-card__cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sky-soft), var(--bg));
  font-size: .85rem; color: var(--muted); padding: 1rem; text-align: center;
}
.se-aven-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.se-aven-card:hover .se-aven-card__img { transform: scale(1.05); }

.se-aven-card__body { padding: .9rem 1rem; }
.se-aven-card__tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--red); margin-bottom: .25rem;
}
.se-aven-card__title { font-size: .95rem; font-weight: 700; margin: 0; line-height: 1.3; }

@media (max-width: 640px) {
  .se-aven__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   LINKED BOOKS & SERIES
   ══════════════════════════════════════════════ */
.linked-items { padding: 4rem 0; background: var(--bg); }
.linked-items__block + .linked-items__block { margin-top: 3rem; }
.linked-items__head { margin-bottom: 1.5rem; }
.linked-items__heading { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; color: var(--text); margin: .3rem 0 0; }

/* Serier – bred grid */
.linked-items__grid--series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.linked-serie-card {
  display: flex; align-items: center; gap: 1.2rem;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem 1.2rem;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.linked-serie-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.linked-serie-card__cover { flex-shrink: 0; }
.linked-serie-card__img { width: 60px; height: auto; border-radius: var(--r-sm); }
.linked-serie-card__tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); background: var(--red-soft); padding: .2rem .6rem; border-radius: 2rem; display: inline-block; margin-bottom: .4rem; }
.linked-serie-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.linked-serie-card__tagline { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
.linked-serie-card__link { font-size: .82rem; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: .3rem; }

/* Böcker – tightare grid */
.linked-items__grid--books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.2rem;
}
.linked-bok-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.linked-bok-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.linked-bok-card__cover { background: var(--surface); }
.linked-bok-card__img { width: 100%; height: auto; display: block; }
.linked-bok-card__cover--placeholder {
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  background: var(--red-soft); color: var(--red); font-size: .8rem; font-weight: 600; padding: .5rem; text-align: center;
}
.linked-bok-card__body { padding: .8rem; flex: 1; }
.linked-bok-card__tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--red); background: var(--red-soft); padding: .15rem .5rem; border-radius: 2rem; display: inline-block; margin-bottom: .3rem; }
.linked-bok-card__title { font-size: .88rem; font-weight: 700; margin: 0 0 .2rem; line-height: 1.3; }
.linked-bok-card__serie { font-size: .78rem; color: var(--muted); margin: 0; }

@media (max-width: 640px) {
  .linked-items__grid--series { grid-template-columns: 1fr; }
  .linked-items__grid--books  { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   KONTAKTSIDA
   ══════════════════════════════════════════════ */

/* ── Reset: SilverStripes standard-ramar ── */
.kontakt-form form,
.kontakt-form fieldset,
.kontakt-form .field {
  border: none;
  padding: 0;
  margin: 0;
}

/* ── Content-sektion med mönsterbakgrund ── */
.kontakt-intro {
  position: relative;
  padding: 3.5rem 0;
  background: var(--surface);
  overflow: hidden;
}
.kontakt-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/MD9_patternOnly.svg");
  background-repeat: repeat;
  background-size: 600px auto;
  opacity: 1;
  pointer-events: none;
  animation: kontakt-pattern-fade 6s ease forwards;
}
@keyframes kontakt-pattern-fade {
  from { opacity: .35; }
  to   { opacity: .07; }
}
.kontakt-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}
.kontakt-intro__inner h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  margin-bottom: .6rem;
}
.kontakt-intro__inner p { margin-bottom: .8rem; }

/* ── Formulär-sektion ── */
.kontakt-form-section__inner {
  max-width: 680px;
}

/* ── Formulärelement ── */
.kontakt-form .field { margin-bottom: 1.1rem; }
.kontakt-form label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  padding: .7rem 1rem;
  font-family: var(--font);
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(108,180,220,.18);
  background: #fff;
}
.kontakt-form textarea { resize: vertical; min-height: 140px; }
.kontakt-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.5rem; }

/* Felmeddelanden */
.kontakt-form .message.required,
.kontakt-form .message.validation {
  font-size: .78rem;
  color: var(--red);
  margin-top: .3rem;
}

/* Honeypot */
.kontakt-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Submit-knapp */
.kontakt-form .Actions { margin-top: 1.6rem; }
.kontakt-form .Actions .btn,
.kontakt-form .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--red);
  color: #fff;
  transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s;
  width: 100%;
}
.kontakt-form .action:hover {
  background: #a1141a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,32,39,.3);
}
.kontakt-form .action:active { transform: translateY(0); }

/* ── Bekräftelse-state ── */
.kontakt-success {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 3.5rem 2.5rem;
  box-shadow: var(--shadow-md);
  max-width: 560px;
}
.kontakt-success__icon {
  width: 72px; height: 72px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
}
.kontakt-success h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: .6rem; }
.kontakt-success p  { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 400px; margin: 0 auto 1.8rem; }
.btn--outline {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.6rem;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  transition: border-color .2s, color .2s;
}
.btn--outline:hover { border-color: var(--sky); color: var(--sky); }


/* ── Tvåkolumns-grid ── */
.kontakt-section__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}

/* ── Vänster: info-kolumn ── */
.kontakt-info__intro {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 2rem;
}
.kontakt-info__intro h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: .6rem;
}

.kontakt-info__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kontakt-info__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s var(--ease), border-color .2s;
}
.kontakt-info__card:hover {
  box-shadow: var(--shadow-sm);
  border-color: rgba(108,180,220,.35);
}

.kontakt-info__card-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--sky-soft);
  color: var(--sky);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.kontakt-info__card-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .2rem;
}
.kontakt-info__card-value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}
a.kontakt-info__card-value {
  color: var(--sky);
  transition: color .2s;
}
a.kontakt-info__card-value:hover { color: var(--hero-to); }

/* Ev. CMS-text ovanför formuläret */
.kontakt-form-wrap__content {
  margin-bottom: 1.8rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

/* ── Formulärelement ── */
.kontakt-form .field { margin-bottom: 1.1rem; }
.kontakt-form label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  padding: .7rem 1rem;
  font-family: var(--font);
  font-size: .95rem;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(108,180,220,.18);
  background: #fff;
}
.kontakt-form textarea { resize: vertical; min-height: 140px; }
.kontakt-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.5rem; }

/* Felmeddelanden från SS-validering */
.kontakt-form .message.required,
.kontakt-form .message.validation {
  font-size: .78rem;
  color: var(--red);
  margin-top: .3rem;
}

/* Honeypot – dolt från riktiga användare */
.kontakt-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Submit-knapp */
.kontakt-form .Actions { margin-top: 1.6rem; }
.kontakt-form .Actions .btn,
.kontakt-form .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--red);
  color: #fff;
  transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s;
  width: 100%;
}
.kontakt-form .action:hover {
  background: #a1141a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,32,39,.3);
}
.kontakt-form .action:active { transform: translateY(0); }

/* ── Bekräftelse-state ── */
.kontakt-success {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 3.5rem 2.5rem;
  box-shadow: var(--shadow-md);
}
.kontakt-success__icon {
  width: 72px; height: 72px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
}
.kontakt-success h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: .6rem;
}
.kontakt-success p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 1.8rem;
}
.btn--outline {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.6rem;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  transition: border-color .2s, color .2s;
}
.btn--outline:hover { border-color: var(--sky); color: var(--sky); }

/* ════════════════════════════════════════════════
   Formulärsektion – blå gradient med vita fält
   ════════════════════════════════════════════════ */
.kontakt-form-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 15% 0%, rgba(255,255,255,.18) 0%, transparent 55%),
    linear-gradient(155deg, var(--hero-from) 0%, var(--hero-to) 60%, #216293 100%);
}

/* Vita etiketter på blå botten */
.kontakt-form-section .kontakt-form label {
  color: #fff;
}

/* Vita inmatningsfält som lyfter mot gradienten */
.kontakt-form-section .kontakt-form input[type="text"],
.kontakt-form-section .kontakt-form input[type="email"],
.kontakt-form-section .kontakt-form input[type="tel"],
.kontakt-form-section .kontakt-form select,
.kontakt-form-section .kontakt-form textarea {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(15,60,95,.18);
}
.kontakt-form-section .kontakt-form input::placeholder,
.kontakt-form-section .kontakt-form textarea::placeholder {
  color: var(--muted);
}

/* Tydlig fokusring mot det blå */
.kontakt-form-section .kontakt-form input:focus,
.kontakt-form-section .kontakt-form select:focus,
.kontakt-form-section .kontakt-form textarea:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 2px 8px rgba(15,60,95,.18);
}

/* Ljusa validerings-/obligatoriskt-meddelanden */
.kontakt-form-section .kontakt-form .message.required,
.kontakt-form-section .kontakt-form .message.validation {
  color: #FFE0E0;
}

/* Vit submit-knapp med blå text – kontrast mot röd inte nödvändig här */
.kontakt-form-section .kontakt-form .action {
  background: #fff;
  color: var(--hero-to);
}
.kontakt-form-section .kontakt-form .action:hover {
  background: #f2f7fb;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ── Responsiv ── */
@media (max-width: 900px) {
  .kontakt-section__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 480px) {
  .kontakt-form-card { padding: 1.5rem 1.2rem; }
}

/* =====================================================================
   Bok Hero - Related Books Row
   ===================================================================== */
.bok-hero__related {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bok-hero__related-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.bok-hero__related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bok-hero__related-item {
  display: block;
  width: 80px;
  aspect-ratio: 3/4;
  position: relative;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.bok-hero__related-item:hover {
  transform: translateY(-4px) scale(1.05);
}

.bok-hero__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.bok-hero__related-placeholder {
  width: 100%;
  height: 100%;
  background: var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

/* Tooltip bubble */
.bok-hero__related-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 112%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #111827;
  color: #fff;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  box-shadow: var(--shadow-md);
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Tooltip arrow */
.bok-hero__related-item::before {
  content: "";
  position: absolute;
  bottom: calc(112% - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 4px 4px 0;
  border-style: solid;
  border-color: #111827 transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  z-index: 50;
}

/* Hover state triggers tooltip */
.bok-hero__related-item:hover::after,
.bok-hero__related-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   Forfattare Detail Page
   ===================================================================== */
.forfattare-hero__img {
  border-radius: 50% !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 260px;
  height: 260px;
  border: 4px solid var(--border);
}

.forfattare-hero__placeholder {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.forfattare-hero__placeholder svg {
  width: 120px;
  height: 120px;
  color: var(--border);
  background: var(--bg);
  border-radius: 50%;
  padding: 24px;
}

.forfattare-hero__bio-text {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 600px;
  margin-top: 1rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   ADMIN-TOOLBAR (endast inloggade CMS-användare)
   ══════════════════════════════════════════════ */
.admin-toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  background: #23282d;
  color: #eee;
  font-family: var(--font);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
/* Skjut ner den fasta navbaren när admin-baren finns */
.admin-toolbar ~ .nav { top: 34px; }

.admin-toolbar__group { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.admin-toolbar__item {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #eee; transition: color .15s;
}
.admin-toolbar__item:hover { color: #72aee6; }
.admin-toolbar__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.admin-toolbar__item--edit { font-weight: 700; }

/* Live/Draft-växling */
.admin-toolbar__stage {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  overflow: hidden;
}
.admin-toolbar__stage a {
  padding: .18em .7em;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  transition: background .15s, color .15s;
}
.admin-toolbar__stage a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-toolbar__stage a.is-active { background: #72aee6; color: #10202e; }

.admin-toolbar__meta {
  display: flex; align-items: center; gap: .9rem;
  padding-left: 1rem; margin-left: .2rem;
  border-left: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}
.admin-toolbar__meta strong { color: #fff; font-weight: 600; }
.admin-toolbar__status { color: #a9d18e; }
.admin-toolbar__user { color: rgba(255,255,255,.7); }
.admin-toolbar__user strong { color: #fff; }

@media (max-width: 999px) {
  .admin-toolbar { display: none; }
  .admin-toolbar ~ .nav { top: 0; }
}