/* ==========================================================================
   Sticky two-column TOC layout (Proliance-style)
   Loaded (by the bs24-toc-generator plugin) only on singular views that carry
   the [toc-generator] shortcode → body.bs24-has-toc. The article narrows into a
   left reading column; the .toc-generator becomes a sticky right column.
   Component look (colours, nesting, collapse) lives in the plugin's main.css.
   ========================================================================== */

/* Mobile-first: base stays single-column (no overrides), the grid is added
   from tablet up — so nothing has to be undone on small screens. */

/* wpautop leaves an empty <p> next to the shortcode block — drop it at ALL
   widths so it never adds a stray gap at the top (desktop grid + mobile flow). */
body.bs24-has-toc .wp-block-post-content > p:empty {
  display: none;
}

@media (min-width: 768px) {

  body.bs24-has-toc .wp-block-post-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--toc-w, 300px);
    column-gap: var(--toc-gap, 2.5rem);
    align-items: start;
    /* Cap + centre the band (Proliance container-large = 80rem). Der Seiten-Gutter
       wird NICHT hier gesetzt (die Section-Container im Artikel tragen ihn, da der
       <article> ein negatives Margin = -root-padding hat, das ein Grid-Padding
       neutralisieren würde). Siehe Section-Gutter-Regel in style.css. */
    max-width: 80rem;
    margin-inline: auto;
  }

  /* Neutralise WP constrained-layout child centring → every block fills col1.
     width:100% forces full-bleed/wide GB containers (e.g. the bottom "Anfrage"
     band, card grids) to span the whole reading column instead of shrinking to
     their content's max-content width. */
  body.bs24-has-toc .wp-block-post-content > * {
    grid-column: 1;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  /* The TOC: right column, spanning all rows so position:sticky can travel the
     full article height (grid-row to an explicit large line; implicit empty
     rows collapse to 0). */
  body.bs24-has-toc .wp-block-post-content > .toc-generator {
    grid-column: 2;
    grid-row: 1 / 9999;
    align-self: start;
    position: sticky;
    top: 6rem;
    /* Taller than the viewport (long heading list + share + contact CTA) →
       scroll inside the sticky column instead of cutting off the bottom.
       6rem = sticky top offset, +2rem bottom breathing room. dvh where
       supported (mobile/tablet browser chrome), vh as fallback. */
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  /* Slim scrollbar for browsers without scrollbar-width support (older Safari).
     Chromium ≥121 ignores these when scrollbar-width is set — no double styling. */
  body.bs24-has-toc .wp-block-post-content > .toc-generator::-webkit-scrollbar {
    width: 6px;
  }
  body.bs24-has-toc .wp-block-post-content > .toc-generator::-webkit-scrollbar-track {
    background: transparent;
  }
  body.bs24-has-toc .wp-block-post-content > .toc-generator::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }

  /* Guide articles wrap everything in .fw-article with its own max-width — let
     it fill the reading column instead of staying centred-narrow. */
  body.bs24-has-toc .fw-article {
    max-width: none;
  }
}

/* Tablet 768–991px: keep the TOC (Proliance) but make it narrower with a
   tighter gap, otherwise the reading column gets too cramped. */
@media (min-width: 768px) and (max-width: 991px) {
  body.bs24-has-toc .wp-block-post-content {
    --toc-w: 220px;
    --toc-gap: 1.5rem;
  }
}

/* FAQ accordion: render the 2-column "Mannheim" grid (same as post template 402092)
   on wide screens. Only collapse to a single column while the sticky TOC narrows the
   reading column too much for two readable columns (769–1099px). At ≥1100px the
   post-faq.css default (1fr 1fr) applies, so the FAQ matches the template everywhere. */
@media (min-width: 769px) and (max-width: 1099px) {
  body.bs24-has-toc .section-faq .gb-accordion {
    grid-template-columns: 1fr;
  }
}

/* ≤767px (mobile): base is already single-column → just hide the TOC. */
@media (max-width: 767px) {
  body.bs24-has-toc .toc-generator {
    display: none;
  }
}