/* assets/css/components/sidebar.css
 * @layer components — Standardized sidebar slot container + wrapper layout
 * ════════════════════════════════════════════════════════════════════
 * Two surfaces:
 *   .vimta-article-layout — the 2-col grid wrapper (article + sidebar)
 *                           rendered by article-with-sidebar.php
 *   .vimta-sidebar        — the sidebar column itself with sticky/scroll slots
 *
 * Slot model:
 *   .vimta-sidebar__sticky → reference content (nav, TOC, accordions).
 *                            Pinned on desktop with sufficient viewport,
 *                            flows on mobile or short screens.
 *   .vimta-sidebar__scroll → widget content (event promo, CTA, share).
 *                            Always flows with the article on desktop,
 *                            becomes horizontal CSS scroll rail on mobile.
 *
 * Sticky breakpoint guard: stickiness only kicks in at
 *   (min-width: 60em) AND (min-height: 48em)
 * Below either threshold, the sticky slot flows normally — no overlap risk
 * on short laptops, dev tools open, or mobile devices.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     ARTICLE LAYOUT — the 2-col wrapper rendered by article-with-sidebar.php
     ════════════════════════════════════════════════════════════════════ */

  .vimta-article-layout {
    display: grid;
    gap: var(--container-gap);
  }

  .vimta-article-layout--with-sidebar {
    grid-template-columns: 1fr;
  }

  /* Desktop: 2-col grid with sidebar on the right.
     22rem gives the CTA/event-detail cards enough room without squeezing the article. */
  @media (min-width: 60em) {
    .vimta-article-layout--with-sidebar {
      grid-template-columns: 1fr 22rem;
      align-items: start;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     SIDEBAR COLUMN — sticky + scroll slots
     ════════════════════════════════════════════════════════════════════ */

  .vimta-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    isolation: isolate;
    min-inline-size: 0;
    align-self: start; /* required for position:sticky to work on children */
  }

  /* Slot containers — both vertical stacks by default */
  .vimta-sidebar__sticky,
  .vimta-sidebar__scroll {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
  }

  /* Block reset — blocks own their own surface, container is layout-only */
  .vimta-sidebar__sticky > *,
  .vimta-sidebar__scroll > * {
    margin: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     STICKY BEHAVIOUR — guarded by viewport-height + width thresholds
     ─────────────────────────────────────────────────────────────────────
     Sticky only kicks in when there's genuinely room for it:
       (min-width: 60em)  → big enough to have a sidebar at all
       (min-height: 48em) → tall enough that sticky won't overlap
     Below either threshold, the sticky slot flows normally with the article.
     ════════════════════════════════════════════════════════════════════ */

  @media (min-width: 60em) and (min-height: 48em) {
    .vimta-sidebar__sticky {
      position: sticky;
      inset-block-start: calc(var(--header-height, 4rem) + var(--container-gap));
    }

    /* Viewport-overflow guard — ONLY engage when content exceeds the
       available viewport. Otherwise the panel stays uncapped so the last
       block is never clipped silently. Toggled by JS measurement (see
       measureSidebarOverflow in navigation.js). CSS-only fallback: the
       panel extends past the fold, page scroll reveals the rest. */
    .vimta-sidebar__sticky.is-overflow {
      max-block-size: calc(100vh - var(--header-height, 4rem) - var(--container-gap) * 2);
      overflow-y: auto;
      overscroll-behavior-block: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--border-muted) transparent;
      mask-image: linear-gradient(
        to bottom,
        black 0,
        black calc(100% - var(--space-l)),
        transparent 100%
      );
    }

    .vimta-sidebar__sticky.is-overflow::-webkit-scrollbar {
      inline-size: 6px;
    }

    .vimta-sidebar__sticky.is-overflow::-webkit-scrollbar-thumb {
      background-color: var(--border-muted);
      border-radius: var(--radius-s);
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     MOBILE — sidebar collapses below the article, scroll slot becomes
     a horizontal CSS scroll rail with snap-points and edge-bleed
     ─────────────────────────────────────────────────────────────────────
     Sticky slot stays as a vertical stack (it's reference content; on
     mobile it just flows above the scroll rail).
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 60em) {
    .vimta-sidebar {
      gap: var(--container-gap);
    }

    .vimta-sidebar__scroll {
      flex-direction: row;
      gap: var(--card-gap);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;

      /* Edge-bleed: rail starts at viewport edge, content insets via padding */
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
      padding-block: var(--space-2xs) var(--space-s);

      /* Hide scrollbars — affordance is the visible peek of the next card */
      scrollbar-width: none;
    }

    .vimta-sidebar__scroll::-webkit-scrollbar {
      display: none;
    }

    .vimta-sidebar__scroll > * {
      flex: 0 0 min(85%, 22rem);
      scroll-snap-align: start;
      align-self: stretch;
      min-block-size: 0;
    }
  }

}