/* ============================================================
   Broadside Ghost Theme — additions on top of design system
   Loaded after tokens.css + article.css + shell.css
   Handles Ghost-specific concerns:
   - {{content}} HTML cards (Ghost wraps in .gh-content)
   - .riks-article pipeline-HTML normalization
   - status pills, error page, author card
   - notis stream, mobile nav, page-head meta
   ============================================================ */

/* ============================================================
   ARTICLE TITLE — ephemeral content (notis + artikel) gets the
   smaller "notis" sizing; fördjupning + tema keep the large display.
   Override placed here so article.css stays canonical.
   ============================================================ */
.article__title {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: var(--leading-tight);
}
[data-brand="ledger"] .article__title {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}

/* ============================================================
   GHOST CONTENT (HTML cards from Ghost editor / pipeline)
   ============================================================ */

.gh-content {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--brand-ink);
  /* Artefaktgridens behållare (.art-grid, article.css): spannen kollapsar på DEN HÄR bredden. */
  container: artifact / inline-size;
}
[data-brand="vector"] .gh-content { font-family: var(--font-body); }

.gh-content > * { margin-block: 0 var(--space-4); }
.gh-content > h2 { margin-block: var(--space-7) var(--space-4); }
.gh-content > h3 { margin-block: var(--space-6) var(--space-3); }

/* V4 pipeline artifacts are self-contained .article fragments.
   Remove internal max-width caps so content fills the grid column. */
.gh-content .article {
  max-width: none;
  padding: 0;
}
.gh-content .article__head,
.gh-content .article__body {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Cap h1 size for ANY headline the producer generates */
.gh-content h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

/* V3 legacy: suppress duplicate header inside .riks-article
   (theme used to render its own header; pipeline had one too). */
.gh-content .riks-article > .article__head,
.gh-content .riks-article > .article__header {
  display: none;
}
.has-feature-image .gh-content .riks-article > .article__hero {
  display: none;
}
.gh-content .riks-article > .article__body { padding: 0; }
.gh-content .riks-article > hr.rule--brand { display: none; }
.gh-content .riks-article > .riks-meta { display: none; }

/* Ghost figures + images */
.gh-content figure { margin: var(--space-6) 0; }
.gh-content figure img { width: 100%; display: block; }
.gh-content figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--brand-muted);
  padding: var(--space-2) 0 0;
  text-transform: uppercase;
}

.gh-content .kg-callout-card {
  background: var(--brand-tint, var(--brand-surface));
  border-left: 3px solid var(--brand-primary);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

/* NO text-transform HERE. --brand-display-case is a HEADLINE property: it is safe on three
   to eight words and nowhere else. A blockquote holds whatever the source said — a 74-word
   quotation set in capitals is a wall the reader cannot enter, and it arrived here because
   an artifact overrode the size below and inherited the case, which it never declared.
   Case belongs on elements whose length the designer controls. This is not one of them. */
.gh-content blockquote {
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--space-4);
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  letter-spacing: var(--brand-display-tracking);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  margin: var(--space-6) 0;
  text-wrap: pretty;
}
[data-brand="ledger"] .gh-content blockquote {
  font-style: italic;
}

/* ============================================================
   BADGES — content-type system
   Priority cascade: breaking > notis > fordjupning > tema > reportage
   ============================================================ */

.badge {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.badge--breaking {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.badge--breaking::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-on-primary);
  animation: tick-pulse 1.6s infinite;
}
.badge--notis     { background: var(--brand-ink); color: var(--brand-paper); }
.badge--fordjupning { background: var(--brand-accent); color: var(--brand-ink); }
.badge--tema      {
  background: var(--brand-paper);
  color: var(--brand-ink);
  border: 2px solid var(--brand-ink);
  padding: 2px 10px;
}
.badge--premium   { background: var(--brand-ink); color: var(--brand-accent); }
.badge--reportage { background: var(--brand-paper); color: var(--brand-primary); border: 1px solid var(--brand-primary); padding: 2px 10px; }

/* ============================================================
   STATUS PILLS — for tema page (parent heat)
   ============================================================ */
.status-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--brand-line);
}
.status-pill--active   { color: var(--brand-primary); border-color: var(--brand-primary); }
.status-pill--waiting  { color: var(--brand-muted); }
.status-pill--archived { color: var(--brand-muted); border-style: dashed; }

/* ============================================================
   PAGE-HEAD additions (for tag/author archives)
   ============================================================ */
.page-head__meta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-head__meta strong { color: var(--brand-ink); font-weight: 700; }
.page-head__meta a { color: var(--brand-primary); text-decoration: none; }

/* ============================================================
   AUTHOR CARD (author.hbs)
   ============================================================ */
.page-head--author { padding-top: var(--space-7); }
.author-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.author-card__avatar {
  width: 120px; height: 120px;
  background: var(--brand-ink);
  color: var(--brand-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  font-size: var(--text-3xl);
  line-height: 1;
  object-fit: cover;
  border-radius: 0;
}
.author-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
.page-head__title--author { font-size: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 640px) {
  .author-card { grid-template-columns: 80px 1fr; gap: var(--space-4); }
  .author-card__avatar { width: 80px; height: 80px; font-size: var(--text-2xl); }
}

/* ============================================================
   ERROR PAGE
   ============================================================ */
.error-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--gutter);
  text-align: left;
}
.error-page__code {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  font-size: clamp(8rem, 22vw, 16rem);
  line-height: 0.85;
  color: var(--brand-primary);
  margin: 0;
}
.error-page__title {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  letter-spacing: var(--brand-display-tracking);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  margin: 0 0 var(--space-4);
}
.error-page__lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--brand-ink);
  max-width: 50ch;
  margin: 0 0 var(--space-5);
}
.error-page__home {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--brand-primary);
  padding-bottom: 2px;
}
.error-page__home:hover { color: var(--brand-primary); }
.error-page__notiser { margin-top: var(--space-7); }

/* ============================================================
   NOTIS PAGE — extra structure
   ============================================================ */
.notis-page__kickline {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.notis-page__byline-row {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.notis-page__rule--strong {
  border-top: 3px solid var(--brand-ink);
}
.notis-page__rule:first-of-type { margin-top: var(--space-4); }
.notis-stream { margin-top: var(--space-7); padding: 0 var(--gutter); max-width: 720px; margin-left: auto; margin-right: auto; }

.notis-list__item.is-current {
  background: var(--brand-tint, color-mix(in oklch, var(--brand-primary) 8%, var(--brand-paper)));
  margin: 0 calc(-1 * var(--space-2));
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.notis-list__item.is-current .notis-list__time { color: var(--brand-primary); }
.notis-list__item.is-current .notis-list__kicker { color: var(--brand-primary); font-weight: 700; }

.prevnext--inline { margin-top: 0; }

/* ============================================================
   FÖRDJUPNING — feature image, head, body
   ============================================================ */
.fordjupning__hero {
  margin: 0;
  aspect-ratio: 21 / 9;
  background: var(--brand-ink);
  position: relative;
  overflow: hidden;
}
.fordjupning__hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fordjupning__hero figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-4) var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-paper);
  background: linear-gradient(transparent, rgba(0,0,0,0.6));   /* mood-fixed: skrim över ett foto — ska vara svart oavsett grund */
}
.fordjupning__head {
  max-width: var(--col-text);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-6);
}
.fordjupning__kickline {
  display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap;
}
.fordjupning__title {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  letter-spacing: var(--brand-display-tracking);
  line-height: var(--leading-tight);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.fordjupning__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}
.fordjupning__byline-row {
  display: flex; gap: var(--space-3); align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--brand-line);
}
.fordjupning__body {
  max-width: 75ch;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.65;
}
[data-brand="vector"] .fordjupning__body { font-family: var(--font-body); }

/* ============================================================
   TEMA — dashboard layout
   ============================================================ */
.page--tema {
  max-width: var(--col-bleed);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}
.tema__head {
  border-top: 3px solid var(--brand-ink);
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.tema__status {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tema__title {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  letter-spacing: var(--brand-display-tracking);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: var(--leading-none);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.tema__lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  max-width: 60ch;
  margin: 0 0 var(--space-4);
}
.tema__body { padding: 0 var(--gutter); }

/* ============================================================
   TOPIC — front-page feature variant
   ============================================================ */
.topic--feature { padding: var(--space-5); align-items: stretch; }
.topic--feature .topic__heat { width: 8px; }
.topic__feature-title {
  font-family: var(--brand-display-font);
  font-weight: var(--brand-display-weight);
  text-transform: var(--brand-display-case);
  letter-spacing: var(--brand-display-tracking);
  font-size: var(--text-2xl);
  line-height: 1;
  margin: 0;
}
.topic__feature-lede {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--brand-muted);
  line-height: 1.45;
}
[data-brand="vector"] .topic__feature-lede { font-family: var(--font-body); }

/* ============================================================
   FILTER BAR (.is-active state managed by JS)
   ============================================================ */
.filter-bar__chip[aria-pressed="true"] { background: var(--brand-ink); color: var(--brand-paper); border-color: var(--brand-ink); }

/* ============================================================
   RELATED grid (used by post.hbs partial)
   ============================================================ */
.related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) {
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE MENU OVERLAY (toggled by masthead__menu button)
   ============================================================ */
@media (max-width: 1023px) {
  .masthead__nav { display: none; }
}
@media (min-width: 1024px) {
  .masthead__menu { visibility: hidden !important; }
  .masthead__nav ul { justify-content: center; }
}

.mobile-menu-open .masthead__nav {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  inset: 56px 0 0 0;
  background: var(--brand-paper);
  z-index: 100;
  padding: var(--space-5) var(--gutter);
  gap: var(--space-3);
  align-items: stretch;
  border-top: 3px solid var(--brand-ink);
}
/* Listan star lodrat i panelen (grundregeln .masthead__nav ul ar en rad), och menyknappen ligger
   over panelen sa samma knapp stanger den — i den ofasta mastheaden (position: static) lade sig
   panelen (fixed, z-index 100) annars over knappen (2026-09-06). */
.mobile-menu-open .masthead__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.mobile-menu-open .masthead__nav a {
  display: block;
  font-size: var(--text-lg);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--brand-line);
}
.mobile-menu-open .masthead__menu { position: relative; z-index: 101; }
.mobile-menu-open { overflow: hidden; }

/* ============================================================
   ICON BUTTON (article actions)
   ============================================================ */
.iconbtn {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  cursor: pointer;
  text-decoration: none;
}
.iconbtn:hover { border-color: var(--brand-ink); }
.iconbtn--primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
}
.iconbtn--primary:hover { filter: brightness(0.95); }

/* ============================================================
   ENSURE Ghost form-portal injection points have spacing
   ============================================================ */
[data-portal] { cursor: pointer; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .masthead, .ticker, .footer, .reading-progress, .article__actions, .prevnext, .related, .article-sidebar, .filter-bar { display: none !important; }
  body { background: white; }
  .article-shell { grid-template-columns: 1fr !important; }
  .article-shell__main .article__body, .article-shell__main .article__head { max-width: none !important; }
}