/* =========================
   Text pages (scoped)
   Opt-in via classes so non-text pages are unaffected.
   ========================= */

/* Article/longform card: extra inner padding for readability.
   Scoped via modifier class so only pages that opt-in are affected. */
.card--article {
  padding: clamp(1.35rem, 3vw, 2.6rem);
}

/* Prose container: clamp line-length for readability.
   58ch tends to land around ~9–11 cm on many desktop setups, depending on font + zoom. */
/* ── Läsregister ──────────────────────────────────────────────────
 * Newsreader, och ENBART här. Det här är sajtens enda ställe med riktig
 * löptext - Nozick-porträttet är över 4 000 ord - och en läseserif är det
 * som säger "nu läser du på riktigt" utan att sajten byter identitet.
 *
 * Rubrikerna behåller Schibsted Grotesk med flit: gränssnittet talar med
 * sin röst, texten med sin. Vill man ha serif hela vägen är det en rad -
 * ta bort font-family-undantaget för rubrikerna nedan. */
.prose {
  max-inline-size: 58ch;
  margin-inline: auto;
  font-family: var(--font-lasa);
  font-size: 1.125rem;
  /* Serifen bär mer luft mellan raderna än en grotesk. */
  line-height: 1.72;
}

.prose h1,
.prose h2,
.prose h3,
.prose .byline {
  font-family: var(--font-ui);
}

.prose em,
.prose i {
  font-style: italic;
}

.prose > * + * {
  margin-block-start: 0.95em;
}

/* Heading hierarchy inside prose */
.prose h1 {
  margin: 0;
  line-height: 1.15;
  font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.4rem);
}

/* Ingressen ärvde font-weight: 600 från .lead i base.css. I en grotesk är
   det en tydlig ingress; i Newsreader kursiv blir det tungt och murrigt.
   Här bär dämpad färg och något större grad rollen i stället. */
.prose .lead {
  margin-block-start: 0.75em;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-matt);
}

/* Är ingressen ENBART ett kursiverat citat - vilket den är på Nozick-sidan,
   men inte på de sidor där .lead är en vanlig ingress - får den samma
   bärnstenstecken som en blockquote. :has() gör att regeln känner igen
   skillnaden själv i stället för att kräva en extra klass i markupen. */
.prose .lead:has(> i:only-child) {
  position: relative;
  padding-inline-start: 2.75rem;
  color: var(--text);
}

.prose .lead:has(> i:only-child)::before {
  content: "\201D";
  position: absolute;
  left: -0.25rem;
  top: -1.4rem;
  font-family: var(--font-lasa);
  font-size: 5rem;
  line-height: 1;
  color: var(--fyr);
  pointer-events: none;
}

.prose h2,
.prose h3 {
  font-size: clamp(1.0rem, 0.55vw + 0.88rem, 1.2rem);
}

.prose h2 {
  font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.45rem);
}

.prose h3 {
  font-size: clamp(1.0rem, 0.55vw + 0.88rem, 1.2rem);
}

.prose p,
.prose li {
  line-height: 1.72;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.2em;
}

/* Ett stort bärnstensfärgat citattecken i stället för bandet längs
   vänsterkanten. Band finns på halva internet, och ett hårstreck är
   dessutom precis det systemet säger nej till. Tecknet är dekoration och
   bär ingen information, vilket är enda anledningen till att bärnsten får
   ligga direkt på ljus botten här (1,99:1). */
.prose blockquote {
  position: relative;
  margin-inline: 0;
  padding-inline-start: 2.75rem;
  font-style: italic;
}

.prose blockquote::before {
  content: "\201D";
  position: absolute;
  left: -0.25rem;
  top: -1.25rem;
  font-family: var(--font-lasa);
  font-size: 5rem;
  line-height: 1;
  color: var(--fyr);
  pointer-events: none;
}

/* Avdelaren är luft plus en liten bärnstensmarkör - inte ett streck. */
.prose hr {
  border: 0;
  margin-block: 2.4em;
  height: 6px;
  background: var(--fyr);
  width: 6px;
  border-radius: 50%;
  margin-inline: auto;
}

/* Future-proof: images/captions */
.prose figure {
  margin: 1.2em 0;
}

/* Bilder är "greppbara", inte tryckta - mjuk radie även om de delar
   variabel med korten. Lätt avmättning drar bilder från olika källor mot
   varandra. */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radie-mjuk);
  filter: saturate(0.82) contrast(1.03);
}

.prose figcaption {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 0.5em;
}

/* Byline + source note (scoped inside prose) */
.prose .byline {
  margin-block-start: 0.4em;
  font-style: italic;
  opacity: 0.85;
}

.prose .source-note {
  font-size: 0.95em;
  opacity: 0.85;
}