/**
 * @file
 * Regional Committee session page — page--node--regional-committee-sessions-.
 *
 * Reuses global components (hero, section, news-card, media-card,
 * section-header, see-all). This file adds only the session-specific pieces:
 *   - hero date meta
 *   - overview + key-documents card with download buttons
 *   - the collapsible document library (factsheet-* accordion markup so the
 *     global accordion JS drives it) and the file download list inside it
 *   - media-release link list
 */

/* ── Hero date meta ────────────────────────────────────────── */
.rc-hero-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--who-radius-md);
  color: var(--who-white);
  font-size: 14px;
  font-weight: 600;
}

/* ── Overview + key documents ──────────────────────────────── */
.rc-overview-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--who-gray-800);
}
.rc-overview-body p { margin-bottom: 1rem; }
.rc-overview-body a { color: var(--who-blue); text-decoration: underline; }
.rc-overview-body a:hover { color: var(--who-blue-hover); }

/* ── Session video (overview right column, 5/12) ───────────── */
/* Bare video — no card, no label; just the black 16:9 frame. */
.rc-live-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--who-radius-sm);
  overflow: hidden;
  background: #000;
}
.rc-live-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rc-live-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--who-blue);
  text-decoration: none;
}
.rc-live-link:hover { color: var(--who-blue-hover); text-decoration: underline; }

/* ── Key-document cards (left column of Documents) ─────────── */
.rc-keydocs { position: sticky; top: 90px; }
.rc-docblock-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--who-navy);
  margin: 0 0 14px;
}
.rc-doccard {
  display: flex;
  gap: 14px;
  background: var(--who-white);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 16px;
  transition: border-color var(--who-transition), box-shadow var(--who-transition), transform var(--who-transition);
}
.rc-doccard:last-child { margin-bottom: 0; }
.rc-doccard:hover {
  border-color: var(--who-blue);
  box-shadow: 0 6px 20px rgba(0, 32, 92, .10);
  transform: translateY(-2px);
}
.rc-doccard-cover {
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--who-blue-light);
}
.rc-doccard-cover-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--who-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.rc-doccard-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
  min-width: 0;
}
.rc-doccard-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--who-blue);
  margin-bottom: 5px;
}
.rc-doccard-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--who-navy);
  line-height: 1.35;
}
.rc-doccard-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--who-gray-600);
}
/* Featured (large) card — A4-portrait cover on top, like a report front
   page. */
.rc-doccard-lg { flex-direction: column; gap: 0; }
.rc-doccard-lg .rc-doccard-cover { width: 100%; aspect-ratio: 210 / 297; height: auto; }
.rc-doccard-lg .rc-doccard-cover-blank { font-size: 22px; }
.rc-doccard-lg .rc-doccard-body { padding: 16px 18px 18px; }
.rc-doccard-lg .rc-doccard-title { font-size: 16px; }
/* Secondary (small) card — cover to the side. */
.rc-doccard-sm .rc-doccard-cover { width: 82px; align-self: stretch; min-height: 82px; }

/* ── Agenda block (shown outside the accordion) ────────────── */
.rc-docblock { margin-bottom: 22px; }
.rc-doc-list-boxed {
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  padding: 2px 16px;
  background: var(--who-white);
}

/* ── Document library accordion (factsheet-* markup; JS is global) ── */
.rc-docs .factsheets-accordion {
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  overflow: hidden;
}
.rc-docs .factsheet-item { border-bottom: 1px solid var(--who-gray-200); }
.rc-docs .factsheet-item:last-child { border-bottom: none; }
.rc-docs .factsheet-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--who-white);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--who-navy);
}
.rc-docs .factsheet-toggle:hover { background: var(--who-gray-50); }
.rc-docs .factsheet-item.is-open .factsheet-toggle {
  background: var(--who-blue-light);
  color: var(--who-blue);
}
.rc-docs .factsheet-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rc-doc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--who-gray-100);
  color: var(--who-gray-600);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.rc-docs .factsheet-item.is-open .rc-doc-count {
  background: var(--who-blue);
  color: var(--who-white);
}
.rc-docs .factsheet-chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
}
.rc-docs .factsheet-item.is-open .factsheet-chevron { transform: rotate(180deg); }
.rc-docs .factsheet-body {
  padding: 6px 20px 16px;
  background: var(--who-white);
}

/* ── File download list ────────────────────────────────────── */
.rc-doc-list {
  display: flex;
  flex-direction: column;
}
.rc-doc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--who-gray-100);
  text-decoration: none;
}
.rc-doc-link:last-child { border-bottom: none; }
.rc-doc-link:hover { background: var(--who-gray-50); }
.rc-doc-ext {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--who-blue-light);
  color: var(--who-blue);
  border-radius: var(--who-radius-sm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.rc-doc-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--who-navy);
  line-height: 1.45;
}
.rc-doc-size {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--who-gray-500);
  white-space: nowrap;
}
.rc-doc-dl {
  flex-shrink: 0;
  color: var(--who-gray-400);
}
.rc-doc-link:hover .rc-doc-dl { color: var(--who-blue); }

/* ── Interpretation disclaimer — WHO navy block between rows ── */
/* No strip padding: the adjacent sections' 56px paddings frame the block;
   the bottom margin adds extra breathing room before the documents band. */
.rc-disclaimer-strip { padding: 0; }
.rc-disclaimer {
  margin: 0 0 28px;
  padding: 18px 24px;
  background: var(--who-navy);
  border-radius: var(--who-radius-md);
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .85);
}
.rc-disclaimer strong { color: var(--who-white); }

/* ── Videos band — full-black section, featured video bare at 5/12 ── */
/* Follows the .section-navy contrast convention (homepage.css). */
.rc-videos-band { background: #000; }
.rc-videos-band .section-header { border-bottom-color: rgba(255, 255, 255, .2); }
.rc-videos-band .section-header h2 { color: var(--who-white); }
.rc-videos-band .see-all { color: rgba(255, 255, 255, .7); }
/* Thumbs sit on black: differentiate their surfaces slightly. */
.rc-videos-band .media-card { background: #000; }
.rc-videos-band .media-card-thumb { background: #111; }

/* ── Photo-gallery carousel (2/3) + gallery link list (1/3) ── */
.rc-carousel {
  border-radius: var(--who-radius-md);
  overflow: hidden;
  background: var(--who-navy);
}
.rc-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 1040 / 500;
  object-fit: cover;
  display: block;
}
.rc-carousel .carousel-indicators {
  margin-bottom: 6px;
}
/* Small painted dot inside a ≥24px hit area (WCAG 2.5.8 target size). */
.rc-carousel .carousel-indicators button {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  padding: 8px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .55);
  background-clip: content-box;
  opacity: 1;
  transition: background-color var(--who-transition), transform var(--who-transition);
}
.rc-carousel .carousel-indicators button.active {
  background-color: var(--who-white);
  transform: scale(1.2);
}
.rc-carousel .carousel-control-prev,
.rc-carousel .carousel-control-next {
  width: 48px;
  opacity: 0;
  transition: opacity var(--who-transition);
}
.rc-carousel:hover .carousel-control-prev,
.rc-carousel:hover .carousel-control-next,
.rc-carousel .carousel-control-prev:focus-visible,
.rc-carousel .carousel-control-next:focus-visible {
  opacity: 1;
}
/* Touch devices have no hover: keep the arrows visible. */
@media (hover: none) {
  .rc-carousel .carousel-control-prev,
  .rc-carousel .carousel-control-next {
    opacity: .85;
  }
}
.rc-carousel .carousel-control-prev-icon,
.rc-carousel .carousel-control-next-icon {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 32, 92, .55);
  border-radius: 50%;
  background-size: 46%;
}
/* Pause/play toggle (added by who26-rc-carousel.js) — always visible. */
.rc-carousel-toggle {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 32, 92, .55);
  color: var(--who-white);
  cursor: pointer;
  transition: background var(--who-transition);
}
.rc-carousel-toggle:hover,
.rc-carousel-toggle:focus-visible {
  background: rgba(0, 32, 92, .85);
}

.rc-gal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.rc-gal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--who-white);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  text-decoration: none;
  transition: border-color var(--who-transition), box-shadow var(--who-transition);
}
.rc-gal-item:hover {
  border-color: var(--who-blue);
  box-shadow: 0 4px 14px rgba(0, 32, 92, .08);
}
.rc-gal-thumb {
  flex-shrink: 0;
  width: 86px;
  aspect-ratio: 16 / 10;
  border-radius: var(--who-radius-sm);
  background-color: var(--who-blue-light);
  background-size: cover;
  background-position: center;
}
.rc-gal-text { min-width: 0; }
.rc-gal-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--who-navy);
  line-height: 1.35;
}
.rc-gal-date {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--who-gray-600);
}
.rc-gal-item--all { margin-top: auto; background: var(--who-gray-50); }
/* When it is the only entry (no other galleries), keep it at the top instead
   of floating at the bottom of the stretched column. */
.rc-gal-item--all:only-child { margin-top: 0; }
.rc-gal-item--all .rc-gal-date { color: var(--who-blue); font-weight: 700; }

/* ── Media-release links ───────────────────────────────────── */
.rc-release-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.rc-release-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--who-white);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-sm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--who-navy);
}
.rc-release-link:hover {
  border-color: var(--who-blue);
  color: var(--who-blue);
}

/* ── Empty state (upcoming session, documents not yet posted) ── */
.rc-empty {
  font-size: 15px;
  color: var(--who-gray-600);
  background: var(--who-gray-50);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  padding: 22px 24px;
}

/* ── Sessions listing cards — excerpt under the news-card title ── */
.rc-session-card .news-card-body { display: flex; flex-direction: column; }
.rc-session-excerpt {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--who-gray-600);
}

@media (max-width: 991px) {
  .rc-keydocs { position: static; margin-bottom: 28px; }
  .rc-broadcast { margin-top: 24px; }
}