/* ══════════════════════════════════════════════════════════════════════════
   pulse-content.css — utseendet för innehållssidorna: guider, kategori, artikel.
   Vyerna bor i app/Views/pages/content/ och är temaoberoende: de innehåller
   ingen CSS, inget skal och ingen SQL. Byts temat räcker det att byta den här
   filen.

   FORRE_DARK-motsvarigheterna körde tw-*-klasser, Font Awesome och tokens som
   --surface-1 / --border-light / --text-secondary. Inget av det finns i pulse.
   Här används enbart pulse-tokens, så ljust och mörkt följer med gratis.

   Typografin följer designbibelns mall "Guide / artikellista": rubriker i
   Roboto (inte Condensed), kondenserat bara till kroms och etiketter.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ RUBRIKRAD ══ */
.cnt-hd{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.cnt-hd h1{font:800 20px/1.2 'Roboto',system-ui,sans-serif;color:var(--ink);margin:0}
.cnt-hd-ic{width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--accent-wash,var(--inset));
  color:var(--accent-ink);font-size:13px}
.cnt-hd-n{margin-left:auto;color:var(--faint);
  font:700 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}

/* ══ KORTRUTNÄT ══ Delas av guider och kategori. */
.cnt-rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cnt-kort{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .12s ease-out}
.cnt-kort:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cnt-kort-bild{display:block;aspect-ratio:16/9;background:var(--inset);overflow:hidden}
.cnt-kort-bild img{display:block;width:100%;height:100%;object-fit:cover}
/* Bild som inte laddar blir en tyst platta, inte en trasig ikon. */
.cnt-kort-bild.cnt-fel img{display:none}
.cnt-kort-bild.cnt-fel{display:grid;place-items:center}
.cnt-kort-bild.cnt-fel::after{content:'Ingen bild';color:var(--faint);
  font:700 9px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:1px;text-transform:uppercase}
.cnt-kort-tx{display:block;padding:10px 12px 12px}
.cnt-kort-tx strong{display:block;color:var(--ink);
  font:700 13.5px/1.35 'Roboto',system-ui,sans-serif}
.cnt-kort-tx p{margin:5px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Nivåmärket ramas in, fylls aldrig — designbibelns regel 10. */
.cnt-niva{display:inline-block;margin-top:8px;padding:2px 7px;
  border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--dim);
  font:800 9px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}

/* ══ GUIDER: filter + lista ══ */
.cnt-guider{display:grid;grid-template-columns:214px minmax(0,1fr);gap:16px;align-items:start}
.cnt-filter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:9px;display:grid;gap:3px}
.cnt-filter-hd{padding:2px 6px 7px;color:var(--faint);
  font:700 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}
.cnt-filter a{display:block;padding:7px 9px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink2);font-size:12.5px;font-weight:600}
.cnt-filter a:hover{background:var(--inset);color:var(--ink)}
/* Aktivt läge tonar HELA ytan — ingen lodrät färgad list. */
.cnt-filter a.ar-aktiv{background:var(--accent-wash,var(--inset));color:var(--accent-ink);font-weight:700}

/* ══ TOMTILLSTÅND ══ */
.cnt-tom{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 20px;display:grid;place-items:center;gap:8px;
  color:var(--dim);font-size:13px;text-align:center}
.cnt-tom i{font-size:20px;color:var(--faint)}

@media(max-width:960px){ .cnt-guider{grid-template-columns:1fr} }

/* ══ ARTIKEL / GUIDE (app/Views/pages/content/show.php) ═══════════════════
   Hjälte → brödtext + sidospalt. Läsbredd på prosan, inte på hela sidan. */
.cnt-art{display:grid;gap:16px}

.cnt-art-hero{display:grid;grid-template-columns:minmax(0,1.25fr) 300px;gap:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.cnt-art-typ{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);
  font:800 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:1px;text-transform:uppercase}
.cnt-art-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Chip ramas in, fylls aldrig. */
.cnt-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;
  border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--dim);
  text-decoration:none;font:800 9.5px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}
a.cnt-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
/* Roboto, inte Condensed — designbibeln §8, artikelrubriker. */
.cnt-art-hero h1{margin:11px 0 9px;color:var(--ink);
  font:800 clamp(24px,3.4vw,34px)/1.12 'Roboto',system-ui,sans-serif;letter-spacing:-.02em}
.cnt-art-ingress{margin:0 0 12px;color:var(--ink2);font-size:15px;line-height:1.65;max-width:70ch}
.cnt-art-meta{display:flex;flex-wrap:wrap;gap:7px 14px;color:var(--faint);font-size:11.5px}
.cnt-art-meta span{display:inline-flex;align-items:center;gap:5px}
.cnt-art-omslag{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--inset);overflow:hidden;aspect-ratio:16/10}
.cnt-art-omslag img{display:block;width:100%;height:100%;object-fit:cover}
.cnt-art-omslag.cnt-fel img{display:none}

.cnt-art-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}

/* ── Brödtexten. Prosans typografi, inte datans. ── */
.cnt-art-brod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;color:var(--ink2);
  font:400 15px/1.75 'Roboto',system-ui,sans-serif}
.cnt-art-brod > *:first-child{margin-top:0}
.cnt-art-brod h2,.cnt-art-brod h3{color:var(--ink);margin:26px 0 10px;line-height:1.25;
  font-family:'Roboto',system-ui,sans-serif;font-weight:800}
.cnt-art-brod h2{font-size:20px} .cnt-art-brod h3{font-size:16.5px}
.cnt-art-brod p,.cnt-art-brod ul,.cnt-art-brod ol,.cnt-art-brod pre,
.cnt-art-brod blockquote,.cnt-art-brod table,.cnt-art-brod figure{margin:0 0 15px}
.cnt-art-brod a{color:var(--accent-ink)}
.cnt-art-brod img{display:block;max-width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-sm)}
/* Citat: HELA ytan tonas. Ingen lodrät färgad list (§0.5). */
.cnt-art-brod blockquote{padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--inset);color:var(--ink)}
.cnt-art-brod pre{overflow:auto;padding:13px;background:var(--inset);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;line-height:1.6}
.cnt-art-brod code{background:var(--inset);border-radius:3px;padding:1px 4px;font-size:13px}
.cnt-art-brod pre code{background:none;padding:0}
.cnt-art-brod table{width:100%;border-collapse:collapse;font-size:13.5px}
.cnt-art-brod th,.cnt-art-brod td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.cnt-art-brod th{background:var(--inset);color:var(--ink);font-weight:700}

/* ── Sidospalten ── */
.cnt-art-sido{display:grid;gap:12px;align-self:start}
.cnt-sidobox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:9px;display:grid;gap:2px}
.cnt-sidobox-hd{padding:2px 6px 7px;color:var(--faint);
  font:700 10px/1 'Roboto Condensed','Roboto',system-ui,sans-serif;
  letter-spacing:.9px;text-transform:uppercase}
.cnt-toc,.cnt-rel{display:grid;gap:2px;padding:7px 9px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink2);font-size:12.5px;line-height:1.4}
.cnt-toc:hover,.cnt-rel:hover{background:var(--inset);color:var(--ink)}
.cnt-toc.niva-h3{padding-left:20px;color:var(--dim)}
.cnt-rel small{color:var(--faint);font-size:10.5px}

@media(max-width:960px){
  .cnt-art-hero,.cnt-art-layout{grid-template-columns:1fr}
  .cnt-art-omslag{aspect-ratio:16/9}
}