/* ==========================================================================
   article.css — CA-Serie (04.09.2026): RSS/News-Artikelansicht
   ==========================================================================
   Migration des früheren Inline-<style>-Blocks aus
   module/rss_content_view/index.php (CA2) in die CSS-Quell-Lage, danach
   mobile-first modernisiert:

   - Basis = Phone (320px): kompakte Type-Skala via clamp(), text-wrap
     balance/pretty, dvh für den TOC, Touch-freundliche TOC-Links.
   - @media (min-width: 768px): Desktop-Paddings/Typo (Inversion der alten
     Desktop-First-Kaskade).
   - @container article: binnenaxe-abhängige Verdichtung — greift auch, wenn
     das Modul in einer schmalen Spalte landet (nicht nur am Viewport).

   Liegt in @layer components (nach theme_3, vor mobile.css — overrides bleibt
   finale Schicht; mobile.css Stufe 16/17 gewinnt weiter mit !important).
   Konsumiert --color-* Tokens; keine eigenen Theme-Overrides (DK2).
   ========================================================================== */
@layer components {

  /* ---- 1 · Artikel-Container: Typo, Guards, Container-Query-Basis ---------- */
  .rss-content-view-container {
    container: article / inline-size;
    line-height: 1.75;
    font-size: 0.98rem;
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
  .rss-content-view-container h1.article-title {
    font-size: clamp(1.35rem, 1.1rem + 2.2vw, 2.1rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .rss-content-view-container img {
    max-width: 100% !important; /* gegen Inline-Breiten aus Feed-HTML */
    height: auto !important;
    border-radius: var(--radius-lg, 12px);
  }
  .rss-content-view-container pre,
  .rss-content-view-container code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
  .rss-content-view-container iframe,
  .rss-content-view-container video {
    max-width: 100% !important;
  }
  /* Artikel-Fließtext (MF-Basis): Lesemaß + Zeilenkomfort */
  .article-body-content.article-reading-body {
    line-height: 1.8;
    font-size: 1.05rem;
    text-wrap: pretty;
  }

  /* ---- 2 · CVE Intelligence Dossier ----------------------------------------- */
  .cve-intelligence-dossier {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.7) 0%, rgba(var(--color-surface-rgb, 15, 23, 42), 0.85) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---- 3 · Hero (CA2: Inline-Styles vom Markup hierher) ---------------------- */
  .article-hero-media {
    max-height: min(440px, 56dvh);
    background: rgba(0, 0, 0, 0.4);
  }
  .article-hero-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: min(440px, 56dvh);
  }

  /* ---- 4 · Breadcrumb: kompakt mobil ------------------------------------------ */
  .senior-breadcrumb-container {
    padding: 0.4rem 0.65rem;
    font-size: var(--font-size-xs, 0.75rem);
  }
  .senior-breadcrumb-item {
    max-width: min(220px, 45vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- 5 · TOC (Inhaltsübersicht) ------------------------------------------------
     Erstmals regelbasiert statt Bootstrap-Utilities; mobil höhenbegrenzt
     (MF13, jetzt mit dvh), Links als ausreichende Touch-Targets. */
  .article-toc-box {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-radius: var(--radius-lg, 12px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.55);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.2);
  }
  .article-toc-box .toc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    font-weight: 700;
    color: var(--color-text-heading, #fff);
  }
  .article-toc-box .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .article-toc-box .toc-link {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.35rem;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-body, #f1f5f9);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .article-toc-box .toc-link:hover {
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.08);
    color: var(--color-accent-cyan, #22d3ee);
  }
  .article-toc-box .toc-subitem .toc-link { padding-left: 1.4rem; }
  .article-toc-box .toc-link[aria-current="true"] {
    color: var(--color-accent-cyan, #22d3ee);
    font-weight: 600;
  }

  /* ---- 6 · Tabellen im Artikelkörper (MF11): Fade-Kante + Momentum ------------- */
  .rss-content-view-container table {
    max-width: 100% !important;
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-shadow: inset -14px 0 12px -12px rgba(0, 0, 0, 0.65);
  }

  /* ---- 7 · Mobile Bottom Actions & Dock-Koordination (MF12/MT5) ------------------
     theme_3 definiert die Bar (display:none; <768px flex, bottom:0) und
     body.has-mobile-bottom-actions{padding-bottom:72px}. Diese Regeln heben
     die Bar über den Floating Dock (--ts-dock-height + Safe-Area) und geben
     dem Body beide Balken — gleiche Werte wie der frühere Inline-Block. */
  @media (max-width: 767.98px) {
    .mobile-bottom-actions {
      display: flex;
      bottom: calc(var(--ts-dock-height, 64px) + 8px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-bottom-actions {
      padding-bottom: calc(var(--ts-dock-height, 64px) + 80px + env(safe-area-inset-bottom, 0px));
    }
    /* MF13: TOC auf dem Phone höhenbegrenzt statt den Artikelanfang zu verdrängen */
    .article-toc-box .toc-list {
      max-height: 34dvh;
      overflow-y: auto;
      overscroll-behavior-y: contain;
    }
  }

  /* ---- 8 · Related/Similar: Scroll-Snap-Reihe mobil (CA2) ------------------------
     Hook-Klassen article-related-row am Cluster- und KI-Empfehlungs-Grid;
     mobil horizontal wischantzig, ab md normales Grid. */
  @media (max-width: 767.98px) {
    .article-related-row {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      margin-inline: -0.25rem;
      padding-bottom: var(--space-2, 0.5rem);
    }
    .article-related-row::-webkit-scrollbar { display: none; }
    .article-related-row > [class*="col-"] {
      flex: 0 0 82%;
      max-width: 82%;
      scroll-snap-align: start;
      display: flex;
    }
    .article-related-row > [class*="col-"] > .intel-card { width: 100%; }
  }

  /* ---- 9 · Container-abhängige Verdichtung (gilt spaltenunabhängig) -------------- */
  @container article (max-width: 480px) {
    .rss-content-view-container { padding-inline: 0.25rem; }
    .cve-intelligence-dossier { padding: var(--space-3, 0.75rem); }
  }

  /* ---- 10 · Desktop-Enhancements ---------------------------------------------------- */
  @media (min-width: 768px) {
    .rss-content-view-container {
      font-size: 1.05rem;
    }
    .senior-breadcrumb-container { padding: 0.5rem 1rem; }
    .senior-breadcrumb-item { max-width: 260px; }
    .article-toc-box .toc-list { max-height: none; overflow: visible; }
    .article-related-row {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
    }
    .article-related-row > [class*="col-"] { flex: 1 0 0%; max-width: none; }
  }

  /* ---- 11 · Motion -------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .article-toc-box .toc-link { transition: none; }
  }

  /* ---- 12 · Print (war Teil des Inline-Blocks, Basis in default.css) ------------------ */
  @media print {
    .article-hero-media { max-height: none; }
    .article-related-row { display: flex; flex-wrap: wrap; }
  }
}