/* =============================================================
   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). */
.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, subtle cluster-hue accent border at top so
   the video reads as part of the video-library family. Rounded corners
   + subtle 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 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 — reuse the site's body-cap typographic conventions.
   Cap width so lines stay readable inside the wider main column. */
.np-video-detail__body {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
}
.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: 28px;
  /* Subtle top accent to match the iframe's cluster-hue top-border —
     signals "the rail belongs with the video above". */
  padding-top: 12px;
}

/* 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;
}

/* Browse-more CTA — bordered pill card that reads as a distinct call
   to action, not just a link. Cluster-hue on the arrow ties to the
   iframe + rail-head. */
.np-video-detail__browse {
  margin-top: 8px;
}
.np-video-detail__browse-more {
  display: block;
  padding: 14px 18px;
  border: 2px solid var(--np-vd-hue);
  border-radius: 8px;
  background: transparent;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700 !important;   /* same !important reasoning as rail-head */
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.np-video-detail__browse-more:hover,
.np-video-detail__browse-more:focus-visible {
  background: var(--np-vd-hue);
  color: #fff;
  text-decoration: none;
}
.np-video-detail__browse-more span { margin-left: 6px; }

/* ---------- Related videos row (full width) ---------- */

.np-video-detail__related {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #e0e0e0;
}
.np-video-detail__related-head {
  font-size: 22px !important;
  font-weight: 700 !important;   /* defeats typography.css h2 override */
  color: #1a1a1a;
  margin: 0 0 20px 0;
}

/* .np-videos-grid + .np-video-card styles come from css/video-grid.css —
   no per-detail-page overrides needed; the shared component handles
   thumbnail sizing + play button + hover states consistently across
   the site. */

/* ---------- 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. */
@media (max-width: 880px) {
  .np-video-detail-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .np-video-detail__rail {
    padding-top: 0;
  }
  .np-video-detail__body {
    max-width: none;
  }
}