/* =============================================================
   barrio_npm_prototype — embedded_video detail page
   /node/N (node + bundle=embedded_video, canonical route)

   Two-column layout at desktop: main (2fr) = 16:9 iframe + body prose;
   rail (1fr) = downloads + related links + "Browse more" CTA.
   Full-width related-videos row (same-category, 6 tiles) below.

   Loaded via the `embedded-video-detail` library, attached per-page
   in preprocess_node's embedded_video branch — kept out of
   global-styling so other pages don't pay the byte cost.

   Cluster hue: --cluster-hue = #2b6cb0 (Ngā Rauemi blue) cascades from
   .np-hero.np-landing-group--nga-rauemi in css/landing-submenu-groups.css.
   The wrapper doesn't own the token; it inherits it. Three surfaces
   accent with it (rail-head underline, iframe frame, browse-more arrow)
   so the page reads as belonging to the video library at a glance
   (per feedback_stacked_cluster_hue_wins).

   Modal chrome for #np-link-modal / #np-attachment-modal / #np-video-modal
   lives in their own per-modal CSS files (attachment-modal.css,
   video-modal.css) — this file only styles the DETAIL PAGE itself.
   ============================================================= */

/* ---------- Wrapper + Layout ---------- */

.np-video-detail {
  /* Fallback hue used when the cluster-hue cascade fails to reach us
     (rare — LandingContextResolver returns /knowledge-portal for the
     bundle, which sets the .np-landing-group--nga-rauemi class on
     .np-hero, which sets --cluster-hue on the page). */
  --np-vd-hue: var(--cluster-hue, #2b6cb0);
  margin-bottom: 60px;
}

/* Desktop: main (2fr) + rail (1fr). Mobile stacks (rail below main).
   Grid default `align-items: stretch` is left in place so the rail
   fills the full grid-cell height (= main column height). The rail
   is a flex-column with the related-videos scroll area as flex:1 —
   stretch lets that scroll area occupy the full right-column space,
   not just one viewport. See
   documentation/embedded-video-detail-related-rail-plan.md §3.1 D-R1
   (updated 2026-10-15 — the original plan used align-items:start +
   max-height cap; iteration dropped the cap after user feedback that
   the rail should extend to meet the footer rather than stopping at
   viewport height). */
.np-video-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

/* ---------- Main column ---------- */

.np-video-detail__main {
  min-width: 0;  /* prevent grid blowout on long titles / URLs */
}

/* Iframe frame: 16:9 aspect, cluster-hue accent so the video reads as
   part of the video-library family. Top border + a subtle hue-tinted
   outer glow combine for a stronger "framed" feel than the plain
   border alone. Rounded corners + layered shadow so the video floats
   slightly off the page. */
.np-video-detail__iframe-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e0e0e;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--np-vd-hue) 25%, transparent),
    0 8px 24px -12px rgba(0, 0, 0, .35);
  border-top: 4px solid var(--np-vd-hue);
}
.np-video-detail__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Body prose. 17px font + 1.65 line-height for a slightly more
   editorial feel than the 16px/1.6 base. No max-width cap — the body
   fills the full main column so the layout stays balanced with the
   full-height rail. (The classic 45-75ch readability guideline is
   partly honoured anyway by the main-column being 2fr of a bounded
   container; cap-free avoids a jagged right edge next to the rail.) */
.np-video-detail__body {
  font-size: 17px;
  line-height: 1.65;
  color: #2a2a2a;
  /* Guard against long URLs / unbreakable tokens blowing out the
     column — wrap mid-token when no natural break opportunity fits. */
  overflow-wrap: anywhere;
}
.np-video-detail__body > * + * { margin-top: 1em; }
.np-video-detail__body p { margin: 0; }
.np-video-detail__body a {
  color: var(--np-vd-hue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.np-video-detail__body a:hover { text-decoration-thickness: 2px; }

/* ---------- Rail ---------- */

.np-video-detail__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Subtle top accent to match the iframe's cluster-hue top-border —
     signals "the rail belongs with the video above". */
  padding-top: 12px;
  /* Height floor only — the rail stretches to the grid-cell height
     (= main column height) by default. On short-body pages where main
     is shorter than 500px, the floor keeps the scroll area usable.
     On long-body pages the rail extends down with main, filling the
     right column visually right to the article's bottom edge rather
     than stopping at one viewport height.
     (The max-height + position:sticky ceiling from the initial ship
     was dropped 2026-10-15 after user feedback that the rail should
     extend to meet the footer.) */
  min-height: 500px;
}

/* Rail section headings — smaller than a main <h2> because they label
   compact rail content, not full page sections. Cluster-hue underline
   ties them to the video-library identity. */
.np-video-detail__rail-head {
  font-size: 13px !important;   /* !important defeats typography.css h2
                                     hairline weight override (see
                                     project_theme_hook_invocation_gotcha
                                     memory — same pattern applies here) */
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4a4a4a;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--np-vd-hue);
}

/* Downloads section — inherits .np-file-list styles from components /
   rail.css; nothing to add here. */
.np-video-detail__downloads .np-file-list {
  margin: 0;
  padding: 0;
}

/* Related-links section — inherits .np-link-list styles from
   project-detail.css:241-277 (per modal-handling.md §5.5 note). */
.np-video-detail__links .np-link-list {
  margin: 0;
  padding: 0;
}

/* Full-width "see all / browse" CTA at the bottom of the rail
   (2026-10-15 — replaces the retired `.np-video-detail__browse-more`
   fallback card + the inline see-all link next to the h2). Sits as a
   flex sibling AFTER the related-videos scroll area so it's always
   visible at the bottom of the rail regardless of scroll state —
   catches users at the end of their scan where the inline link at
   the top was being missed. */
.np-video-detail__browse-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border: 2px solid var(--np-vd-hue);
  border-radius: 8px;
  background: var(--np-vd-hue);
  color: #fff;
  font-size: 14px;
  font-weight: 700 !important;   /* defeats typography.css */
  line-height: 1.3;
  text-decoration: none;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}
.np-video-detail__browse-cta:hover,
.np-video-detail__browse-cta:focus-visible {
  /* Darker hue on hover — color-mix with 20% black for a tangible
     press-down effect against the solid-hue default. */
  background: color-mix(in srgb, var(--np-vd-hue), black 20%);
  border-color: color-mix(in srgb, var(--np-vd-hue), black 20%);
  color: #fff;
  text-decoration: none;
}
.np-video-detail__browse-cta span {
  font-size: 18px;
  line-height: 1;
}

/* ---------- Related videos — rail-embedded scroll area ---------- */
/* Moved into the rail 2026-10-15 (previously a full-width row below the
   grid). See embedded-video-detail-related-rail-plan.md.
   The section is a flex child of .np-video-detail__rail — it claims the
   remaining rail height (flex:1) and internally scrolls its content. */

.np-video-detail__related.np-video-detail__rail-scroll {
  /* Fill remaining rail height after downloads/links sections take
     their natural space. min-height:0 is required for flex children
     with overflow:auto to actually scroll (default min-height is auto
     = content size, which defeats scrolling). */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Head row + "See all" inline link retired 2026-10-15 — users were
   missing the top-of-column link. The CTA moved to a full-width
   button below the scroll area (.np-video-detail__browse-cta). */

/* Inner scroll wrapper — thin scrollbar + bottom fade mask hint at
   off-screen content (D-R2 S-3 hybrid affordance). The fade covers
   the bottom 3rem so the last visible row stays mostly readable
   (an earlier 1.75rem cut titles mid-word); scroll-padding-bottom
   gives programmatic scroll targets some breathing room. */
.np-video-detail__related-scroll-inner {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf transparent;
  padding-right: 4px;   /* small gutter so scrollbar doesn't overlap content */
  scroll-padding-bottom: 1rem;
  -webkit-mask-image: linear-gradient(
    to bottom, black 0, black calc(100% - 3rem), transparent 100%
  );
          mask-image: linear-gradient(
    to bottom, black 0, black calc(100% - 3rem), transparent 100%
  );
}
.np-video-detail__related-scroll-inner::-webkit-scrollbar {
  width: 6px;
}
.np-video-detail__related-scroll-inner::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 3px;
}

/* .np-videos-grid + .np-video-card styles come from css/video-grid.css,
   with the .np-videos-grid--rail modifier handling the compact vertical-
   list layout for the rail context. */

/* ---------- Responsive ---------- */

/* Tablet + mobile: rail stacks BELOW main (video first, then metadata).
   Matches the project canonical's breakpoint (880px) so the two detail
   pages behave the same way.
   The desktop min-height floor retires here so the rail doesn't take
   up 500px even when its content is less. Related-videos switches to
   the horizontal scroll strip via the .np-videos-grid--rail @media
   rules in css/video-grid.css. */
@media (max-width: 880px) {
  .np-video-detail-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .np-video-detail__rail {
    padding-top: 0;
    min-height: 0;
  }
  .np-video-detail__related.np-video-detail__rail-scroll {
    flex: 0 0 auto;
  }
  .np-video-detail__related-scroll-inner {
    overflow-y: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-right: 0;
  }
}