/**
 * sidebar-components.css — MVSD sidebar content components.
 *
 * Two things live here:
 *   1. The RIGHT-HAND RAIL layout for `page`, `site_article` and
 *      `mvsd_article` (see MVSD-SIDEBAR-RAIL in mvsd_core.theme).
 *   2. The six narrow-column `sidebar_*` paragraph components.
 *
 * Everything is built for a ~300px column. The rail is the constraint, not an
 * afterthought: buttons stretch and centre, the TOC wraps instead of scrolling,
 * media is capped at 100% width, and the contacts block reuses the department
 * sidebar's own classes so it reads identically at that width.
 *
 * Loaded globally from mvsd_core.libraries.yml AFTER css/layout.css, but every
 * rule that has to beat layout.css also carries a second class for specificity,
 * so aggregation order can never silently undo it.
 *
 * NOT in panels.css by design — that file has had heavy recent edits.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. RAIL LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sb-rail-width: 300px;
  --sb-rail-gap: 2.5rem;
}

/* ── Basic pages (node.html.twig) ──────────────────────────────────────────
   Source order is main-then-rail, which is both the reading order for AT and
   the stacking order on phones. No grid-column pinning needed. */
.page-layout--rail-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sb-rail-width);
  gap: var(--sb-rail-gap);
  align-items: start;
}
.page-layout--rail-right > .page-main {
  min-width: 0;
}

/* ── Articles ──────────────────────────────────────────────────────────────
   layout.css pins .article-aside to grid column 1 (the historic left feed
   rail). When the node carries sidebar content the rail moves to the RIGHT.
   Doubled class = specificity 0,3,0, which beats layout.css's 0,2,0 whatever
   order the aggregator picks. */
.article-layout.article-layout--rail-right > .article-aside {
  grid-column: 2;
  grid-row: 1;
}
.article-layout.article-layout--rail-right > .article-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.article-layout.article-layout--rail-right {
  grid-template-columns: minmax(0, 1fr) var(--sb-rail-width);
}

/* Feed hidden AND no sidebar content → no rail at all, so don't reserve a
   column for it. */
.article-layout.article-layout--single {
  grid-template-columns: minmax(0, 1fr);
}
.article-layout.article-layout--single > .article-main {
  grid-column: 1;
}

/* ── The rail itself ──────────────────────────────────────────────────────── */
.node-rail {
  display: flex;
  flex-direction: column;
  /* Enough air that a wrapped caption never crowds the next component's
     underlined heading. */
  gap: var(--sb-rail-gap-block, 1.5rem);
  min-width: 0;
}

/* The paragraph field renders all of its items inside a single unclassed
   wrapper div, and each item gets a wrapper of its own, so .node-rail has exactly ONE flex child and the gap above
   falls between that wrapper and nothing. The blocks themselves ended up
   0-11px apart, which read as no spacing at all. Give the wrapper the same
   column layout so the gap lands between the components, where it belongs.
   Matched by what it contains rather than by position, so an extra child in
   the rail later cannot silently pick up flex layout it was not meant to. */
.node-rail > div:has(.sb),
.node-rail > div:has(.para--button-group) {
  display: flex;
  flex-direction: column;
  gap: var(--sb-rail-gap-block, 1.5rem);
  min-width: 0;
}
/* Inside an article the rail sits above the news feed; separate them. */
.article-aside > .node-rail:not(:last-child) {
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, #e6ece9);
}

/* Nothing in the rail may push the page sideways. */
.node-rail,
.node-rail * {
  max-width: 100%;
}
.node-rail img {
  height: auto;
}

/* ── Mobile: rail drops below the main column ─────────────────────────────── */
@media (max-width: 900px) {
  .page-layout--rail-right {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-layout--rail-right > .node-rail {
    order: 2;
    margin-top: var(--space-6, 1.5rem);
    border-top: 2px solid var(--color-border, #e6ece9);
    padding-top: var(--space-6, 1.5rem);
  }
  /* Articles: layout.css already collapses .article-layout to one column and
     gives .article-aside order:2. Clear our column pinning so grid-column:2
     cannot spawn a phantom second track. */
  .article-layout.article-layout--rail-right {
    grid-template-columns: 1fr;
  }
  .article-layout.article-layout--rail-right > .article-aside,
  .article-layout.article-layout--rail-right > .article-main {
    grid-column: 1;
    grid-row: auto;
  }
  /* Sticky is pointless (and can trap the reader) in a stacked column. */
  .node-rail .sb--toc-sticky {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SHARED COMPONENT SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb {
  margin: 0;
  min-width: 0;
}

/* One heading treatment for every component, matching .dept-sidebar__heading
   so a rail reads as part of the same family as a department sidebar. */
.node-rail .sb__heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary, #01491f);
  letter-spacing: var(--ls-loose, 0.05em);
  text-transform: uppercase;
  margin: 0 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid currentColor;
  line-height: 1.3;
  /* Long single words (a URL, a long surname) wrap instead of overflowing. */
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. SIDEBAR: ON THIS PAGE  (sb--toc)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--toc {
  background: var(--color-bg-subtle, #fafafb);
  border-left: 3px solid var(--color-accent, #c8a862);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.1rem 0.9rem;
}
/* The rail card supplies the frame; suppress any full-width page-TOC card
   styling inherited from paragraph-toc.css. */
.node-rail .sb--toc.para--page-toc {
  box-shadow: none;
  max-width: none;
  float: none;
  width: auto;
}
.node-rail .sb-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sbtoc;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.node-rail .sb-toc__list li {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.node-rail .sb-toc__list a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-text, #1a2a20);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary, #01491f) 50%, transparent);
  padding: 0.1rem 0;
  /* Narrow column: wrap mid-word rather than scroll sideways. */
  overflow-wrap: anywhere;
}
.node-rail .sb-toc__list a:hover,
.node-rail .sb-toc__list a:focus-visible {
  color: var(--color-primary, #01491f);
  border-bottom-style: solid;
}
.node-rail .sb-toc__list a.is-current {
  font-weight: 700;
  color: var(--color-primary, #01491f);
}
/* Nested H3 entries — indent, but not so far that they run out of room. */
.node-rail .sb-toc__list .para-toc__sublist {
  list-style: none;
  margin: 0.3rem 0 0.2rem 0.65rem;
  padding: 0 0 0 0.5rem;
  border-left: 2px solid var(--color-border, #e6ece9);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.node-rail .sb-toc__list .para-toc__sublist a {
  font-size: 0.8125rem;
  border-bottom: none;
}
.node-rail .sb-toc__noscript {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #5a5a5a);
  margin: 0;
}
.node-rail .sb--toc-sticky {
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR: TEXT  (sb--text)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb-text__body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text, #1a2a20);
  overflow-wrap: anywhere;
}
.node-rail .sb-text__body > *:first-child { margin-top: 0; }
.node-rail .sb-text__body > *:last-child  { margin-bottom: 0; }
.node-rail .sb-text__body p { margin: 0 0 0.7rem; }
.node-rail .sb-text__body ul,
.node-rail .sb-text__body ol {
  margin: 0 0 0.7rem;
  padding-left: 1.15rem;
}
.node-rail .sb-text__body li { margin-bottom: 0.3rem; }
/* Headings inside the body step down — an H2 at page scale would dwarf the
   component heading above it. */
.node-rail .sb-text__body h2,
.node-rail .sb-text__body h3,
.node-rail .sb-text__body h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
  color: var(--color-primary, #01491f);
  line-height: 1.3;
}
/* A pasted table would otherwise blow the column out. */
.node-rail .sb-text__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. SIDEBAR: BUTTONS  (sb--buttons)
   Vertical stack, every button stretched to the rail width, label centred.
   Equalisation is structural — there is no editor setting that can undo it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Structure, sizing and every variant colour come from the house button
   system in css/paragraphs.css (.para--button-group + --btn-layout--stacked,
   which already gives width:100% and a column flow). Only the things that a
   300px column needs differently are set here. */
.node-rail .sb--buttons .para-btn-group__list {
  gap: 0.5rem;
}
.node-rail .sb--buttons .para-btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  /* House medium is 1rem / 0.75em 1.4em — too big for the rail. */
  font-size: 0.875rem;
  padding: 0.6rem 0.85rem;
  min-height: 2.75rem;
  line-height: 1.25;
  /* A long label wraps inside the button instead of widening it. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.node-rail .sb--buttons .para-btn__label {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. SIDEBAR: DIVIDER  (sb--divider)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--divider {
  border: 0;
  margin: 0.25rem 0;
  width: 100%;
}
.node-rail .sb--divider--line {
  border-top: 1px solid var(--color-border, #e6ece9);
}
.node-rail .sb--divider--thick {
  border-top: 3px solid var(--color-accent, #c8a862);
}
.node-rail .sb--divider--spacer {
  height: 0.75rem;
  border: 0;
}
/* Ornamental at rail scale: a short centred rule with a diamond, sized so it
   never reaches the column edges. */
.node-rail .sb--divider--ornamental {
  height: 1rem;
  position: relative;
  border-top: 1px solid var(--color-border, #e6ece9);
  margin: 0.85rem 0;
}
.node-rail .sb--divider--ornamental::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--color-accent, #c8a862);
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SIDEBAR: MEDIA  (sb--media)
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--media {
  margin: 0;
}
.node-rail .sb-media__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.node-rail .sb-media__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.node-rail .sb-media__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.node-rail .sb-media__caption {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted, #5a5a5a);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SIDEBAR: CONTACTS  (sb--contacts)
   The staff cards and info list reuse .dept-staff* / .dept-contact-info from
   css/dept-page.css verbatim — that is what "formatted like the department
   contacts block" means. Only the few things that assume a slightly wider
   column are tuned here.
   ═══════════════════════════════════════════════════════════════════════════ */

.node-rail .sb--contacts .dept-staff {
  gap: 0.5rem;
}
.node-rail .sb--contacts .dept-staff__card {
  /* dept-page.css uses 60px 1fr with 0.875rem gap and 1rem side padding; at a
     300px rail that leaves ~182px of text, which is enough. Trim the padding
     slightly so a long job title has more room. */
  padding: 0.75rem 0.85rem;
  gap: 0.75rem;
}
.node-rail .sb--contacts .dept-staff__title,
.node-rail .sb--contacts .dept-staff__name,
.node-rail .sb--contacts .dept-staff__contact {
  overflow-wrap: anywhere;
}
.node-rail .sb--contacts .dept-contact-info {
  margin-top: 0.75rem;
  padding: 1rem 1rem 0.85rem;
}
.node-rail .sb--contacts .dept-contact-info__row dd {
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PRINT
   The rail is supporting material; the TOC and the button stack are
   navigation and are meaningless on paper. Text, media captions and contacts
   are worth keeping, matching how print.css already treats .dept-contact-info.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .page-layout--rail-right,
  .article-layout.article-layout--rail-right {
    display: block;
  }
  .node-rail {
    margin-top: 1.5rem;
    border-top: 1px solid #999;
    padding-top: 1rem;
  }
  .node-rail .sb--toc,
  .node-rail .sb--buttons {
    display: none;
  }
  .node-rail .sb--media__video {
    display: none;
  }
}