/* ==========================================================================
   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; }
  }

  /* ---- 13 · Light-Theme-Kompensation der Dark-Utilities (CA3, Judge-Befund) --------
     Der Artikel-Markup nutzt bg-dark/text-white/text-light-Utilities (bewusster
     D10/E5-Rest). Im Light-Theme kippen wir sie SCOPED auf den Artikelcontainer
     zu Token-Farben — Dark bleibt unberührt. bg-dark und seine Labels flippen
     gemeinsam, sonst entstünde dunkel-auf-dunkel. Die Layerordnung (components
     > bootstrap) schlägt die Utilities ohne !important. */
  html[data-theme="light"] .rss-content-view-container .bg-dark,
  html[data-bs-theme="light"] .rss-content-view-container .bg-dark {
    background-color: var(--color-surface-card, #ffffff);
  }
  html[data-theme="light"] .rss-content-view-container .text-white,
  html[data-bs-theme="light"] .rss-content-view-container .text-white {
    color: var(--color-text-heading, #0f172a);
  }
  html[data-theme="light"] .rss-content-view-container .text-light,
  html[data-bs-theme="light"] .rss-content-view-container .text-light {
    color: var(--color-text-body, #1e293b);
  }
  html[data-theme="light"] .rss-content-view-container .btn-outline-light,
  html[data-bs-theme="light"] .rss-content-view-container .btn-outline-light {
    color: var(--color-text-secondary, #334155);
    border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.5);
  }
  html[data-theme="light"] .rss-content-view-container .btn-dark,
  html[data-bs-theme="light"] .rss-content-view-container .btn-dark {
    background-color: var(--color-surface-hover, #e2e8f0);
    color: var(--color-text-heading, #0f172a);
    border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.5);
  }
  /* Dossier: Inline-Gradient ist dark-indigo — im Light-Theme helles Pendant,
     damit die text-white-Labels nach dem Flip lesbar bleiben. */
  html[data-theme="light"] .rss-content-view-container .cve-intelligence-dossier,
  html[data-bs-theme="light"] .rss-content-view-container .cve-intelligence-dossier {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.92) 0%, rgba(var(--color-surface-rgb, 255, 255, 255), 0.92) 100%);
  }
}

/* ==========================================================================
   CA3 (04.09., Judge-Befund): UNSCHICHTETE Light-Theme-Flips — bewusst
   außerhalb von @layer!
   Grund: Bootstrap 5.3 generiert .text-white/.bg-dark/.btn-dark MIT
   !important (Layer `bootstrap`, erster Layer). Für !important-Declarations
   INVERTIERT die Kaskade die Layerordnung — der früheste Layer gewinnt, d. h.
   JEDES !important in foundation/components/overrides verliert gegen die
   Bootstrap-Utilities (deshalb war auch der LT2-Fix in default.css:375ff ein
   stiller Verlierer; Browser-Probe 04.09.: h1 blieb rgb(255,255,255)).
   Ungeschichtete !important-Regeln schlagen alle geschichteten — hier nur
   auf den Artikelcontainer gescoped, Light-Theme only.
   ========================================================================== */
html[data-theme="light"] .rss-content-view-container .bg-dark,
html[data-bs-theme="light"] .rss-content-view-container .bg-dark {
  background-color: var(--color-surface-card, #ffffff) !important;
}
html[data-theme="light"] .rss-content-view-container .text-white,
html[data-bs-theme="light"] .rss-content-view-container .text-white {
  color: var(--color-text-heading, #0f172a) !important;
}
html[data-theme="light"] .rss-content-view-container .text-light,
html[data-bs-theme="light"] .rss-content-view-container .text-light {
  color: var(--color-text-body, #1e293b) !important;
}
html[data-theme="light"] .rss-content-view-container .btn-outline-light,
html[data-bs-theme="light"] .rss-content-view-container .btn-outline-light {
  color: var(--color-text-secondary, #334155) !important;
  border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.5) !important;
}
html[data-theme="light"] .rss-content-view-container .btn-dark,
html[data-bs-theme="light"] .rss-content-view-container .btn-dark {
  background-color: var(--color-surface-hover, #e2e8f0) !important;
  color: var(--color-text-heading, #0f172a) !important;
  border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.5) !important;
}