/* ==========================================================================
   Reel Single-Post Template (LYC-724 / Upgrade-4 Wave 3)

   Pixel-accurate styles for `/category/the-reel/{slug}/` single pages.
   Mirrors factory-ux-designer.md Surface 1.

   Tokens consumed (all from _tokens.css):
     --color-claret, --color-claret-hover
     --color-page-bg, --color-text, --color-text-muted, --color-surface-warm
     --color-rule, --color-rule-strong, --color-overlay-dark
     --space-1 ... --space-32
     --container-wide, --gutter
     --font-display, --font-body-serif, --font-eyebrow

   Hard rules:
     - Zero raw hex / px / font-family literals (radius corner radii excepted
       where the design system has no token).
     - prefers-reduced-motion disables hover/scale transitions.
     - Focus indicators: 2px Claret + 2px offset (matches site convention).
   ========================================================================== */

/* ---- Container ---- */
.page-reel {
  background: var(--color-page-bg);
  color: var(--color-text);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

.container-reel {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---- Breadcrumb ---- */
.reel-crumbs {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.reel-crumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.reel-crumbs a:hover,
.reel-crumbs a:focus-visible {
  color: var(--color-claret);
  text-decoration: underline;
}

.reel-crumbs .sep {
  color: var(--color-rule-strong);
}

.reel-crumbs .here {
  color: var(--color-text);
  font-weight: 600;
  /* Truncate the title crumb on narrow viewports so the chain stays one line. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

@media (max-width: 640px) {
  .reel-crumbs .here {
    max-width: 50vw;
  }
}

/* ---- Header block ---- */
.reel-header {
  max-width: 62ch;
  margin-bottom: var(--space-10);
}

.reel-eyebrow {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0 0 var(--space-3);
}

.reel-headline {
  /* Use the Opinion-detail display face (Playfair Display) so the Reel
     headline reads as a sibling of /opinion/* without inheriting Opinion's
     full size/weight ramp. Size and letter-spacing stay bespoke. */
  font-family: var(--font-display, serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

.reel-dek {
  font-family: var(--font-body-serif, serif);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  max-width: 62ch;
}

.reel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.reel-date {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* The .share-cluster pattern already styled in _article.css applies here.
   Reel-specific: ensure tap targets are 44px when the share cluster is
   on its own row (mobile). */

/* ---- Article-hero video figure (Opinion-style detail page) ----
   The Reel detail page now mirrors single.php exactly: the iframe lives
   inside <figure class="hero-figure article-hero-image article-hero-video">
   so the existing _article.css `.hero-figure` margins apply unchanged. The
   img-only aspect-ratio rule in _article.css does not target iframes, so
   we add an iframe-specific rule here.
*/
.article-hero-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-overlay-dark, #000);
  overflow: hidden;
}

.article-hero-video iframe,
.article-hero-video .reel-player-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Legacy player block (kept for any pre-existing markup). ---- */
.reel-player-frame {
  max-width: var(--container-wide);
  margin: 0 auto var(--space-10);
}

.reel-player {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--color-overlay-dark, #000);
  border: 1px solid var(--color-rule-strong);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

/* Padding-top fallback for browsers that do not support aspect-ratio.
   modern Safari + Firefox + Chrome ship aspect-ratio; this is belt + braces. */
@supports not (aspect-ratio: 21 / 9) {
  .reel-player {
    aspect-ratio: auto;
    padding-top: calc(9 / 21 * 100%);
    height: 0;
  }
}

.reel-poster {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--color-overlay-dark, #000);
}

.reel-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-play-affordance {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-claret);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 200ms ease-out, background-color 160ms ease-out;
  /* Visual indent for the play triangle so it looks optically centered. */
  padding-left: 4px;
  box-sizing: border-box;
}

.reel-player:hover .reel-play-affordance {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--color-claret-hover);
}

/* Rumble iframe injected by the embed loader fills the wrapper. */
.reel-player-target,
.reel-player-target iframe,
.reel-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

/* When the embed is ready, ensure the iframe sits above the (now hidden)
   poster. The JS adds [hidden] to .reel-poster which removes it from the
   flow; this rule is defense in depth. */
.reel-player--ready .reel-poster {
  display: none;
}

/* Fallback "Watch on Rumble" overlay link.
   - Noscript variant is always visible (no JS at all -> show the link).
   - JS variant starts hidden and is revealed by reel-embed.js when the
     5s grace timeout elapses without an iframe materializing. */
.reel-watch-fallback {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-claret);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.reel-watch-fallback:hover,
.reel-watch-fallback:focus-visible {
  background: var(--color-claret-hover);
  color: var(--color-white);
}

.reel-player--failed .reel-play-affordance {
  display: none;
}

/* ---- Editorial body ---- */
.reel-body {
  max-width: 62ch;
  margin: 0 auto var(--space-12);
}

/* ---- Share row ---- */
.reel-share-row {
  max-width: 62ch;
  margin: 0 auto var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
  display: flex;
  justify-content: flex-start;
}

/* ---- Related Reels (3-up) ---- */
.reel-related {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-rule);
  padding-inline: var(--gutter);
}

.reel-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.reel-related-eyebrow {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0;
}

.reel-related-all {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.reel-related-all:hover,
.reel-related-all:focus-visible {
  color: var(--color-claret);
  text-decoration: underline;
}

.reel-related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.reel-related-card {
  margin: 0;
}

.reel-related-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.reel-related-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface-warm);
}

.reel-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease-out;
}

.reel-related-link:hover .reel-related-thumb img,
.reel-related-link:focus-visible .reel-related-thumb img {
  transform: scale(1.04);
}

.reel-related-duration {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-white);
  font-family: var(--font-eyebrow, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
}

.reel-related-title {
  font-family: var(--font-body-serif, serif);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reel-related-link:hover .reel-related-title,
.reel-related-link:focus-visible .reel-related-title {
  color: var(--color-claret);
}

/* ---- Focus indicators (site convention: 2px Claret + 2px offset) ---- */
.page-reel a:focus-visible,
.page-reel button:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .reel-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .reel-related-grid {
    grid-template-columns: 1fr;
  }
  .reel-headline {
    font-size: clamp(1.625rem, 1.2rem + 2vw, 2rem);
  }
  .reel-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .reel-play-affordance {
    width: 56px;
    height: 56px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reel-play-affordance,
  .reel-related-thumb img,
  .reel-archive-thumb img {
    transition: none;
  }
  .reel-player:hover .reel-play-affordance {
    transform: translate(-50%, -50%);
  }
  .reel-related-link:hover .reel-related-thumb img,
  .reel-related-link:focus-visible .reel-related-thumb img,
  .reel-archive-link:hover .reel-archive-thumb img,
  .reel-archive-link:focus-visible .reel-archive-thumb img {
    transform: none;
  }
}

/* ==========================================================================
   The Reel — Category Archive (LYC-726 / Upgrade-4 Wave 2)

   `/category/the-reel/` landing page. Hero band + 3-up landscape grid +
   pagination. Reuses .reel-related-* card styles defined above for the
   thumb / duration chip / title / hover behavior so cards match the
   related-Reels grid pixel for pixel. Adds:
     - Hero band layout (eyebrow + H1 + dek)
     - .reel-archive-grid (matches .reel-related-grid breakpoints but
       lives at full container width with its own gap rhythm)
     - Pagination wrapper styles consistent with site convention
     - Focus indicators scoped to .page-reel-archive (mirrors .page-reel)

   Tokens consumed: same set as the single-Reel template (see top of file).
   ========================================================================== */

.page-reel-archive {
  background: var(--color-page-bg);
  color: var(--color-text);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* ---- Hero band ---- */
.reel-archive-hero {
  max-width: var(--container-wide);
  margin: 0 auto var(--space-10);
  padding-block: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-rule);
}

.reel-archive-eyebrow {
  font-family: var(--font-eyebrow, sans-serif);
  font-size: var(--text-xs);          /* 12px */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0 0 var(--space-3);
}

.reel-archive-headline {
  font-family: var(--font-body-serif, serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);  /* fluid 32 -> 44px */
  line-height: 1.09;                              /* 44 / 48 at desktop */
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}

.reel-archive-dek {
  font-family: var(--font-body-serif, serif);
  font-size: var(--text-lg);          /* clamps below; targets 19px on desktop */
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); /* 16 -> 19px */
  line-height: 1.58;                  /* ~30 / 19 */
  color: var(--color-shuttle-gray);
  margin: 0;
  max-width: 56ch;
}

/* ---- 3-up landscape grid ----
   Shares the structural rules with .reel-related-grid but lives at the
   page (container-wide) scale and uses a larger 32px desktop gap per
   the ticket spec. Card internals (.reel-archive-thumb, etc.) inherit
   their visual treatment from the .reel-related-* selectors that the
   markup also carries — the .reel-archive-* class names exist so future
   archive-only customization has a hook without breaking the related
   block. */
.reel-archive-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);                /* 32px desktop */
}

.reel-archive-card {
  margin: 0;
}

.reel-archive-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

/* Card thumb is a 16:9 landscape — explicit declaration so the cascade
   wins even if a stronger selector ships later. The double-class on the
   markup (.reel-archive-thumb .reel-related-thumb) means both apply; we
   reassert the aspect-ratio here for clarity. */
.reel-archive-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface-warm);
}

.reel-archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease-out;
}

.reel-archive-link:hover .reel-archive-thumb img,
.reel-archive-link:focus-visible .reel-archive-thumb img {
  transform: scale(1.03);
}

.reel-archive-duration {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: var(--font-eyebrow, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
}

.reel-archive-title {
  font-family: var(--font-body-serif, serif);
  font-size: var(--text-base);        /* 16px desktop body */
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reel-archive-link:hover .reel-archive-title,
.reel-archive-link:focus-visible .reel-archive-title {
  color: var(--color-claret);
}

/* ---- Pagination ----
   Inherits .pagination styles from the site-wide pagination block; add
   archive-specific top breathing room so the divider above pagination
   doesn't get the grid baseline crowded. */
.reel-archive-pagination {
  margin-top: var(--space-12);
}

/* ---- Empty state ---- */
.reel-archive-empty {
  padding: var(--space-12) 0;
  text-align: center;
  font-family: var(--font-body-serif, serif);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ---- Focus indicators (site convention: 2px Claret + 2px offset) ---- */
.page-reel-archive a:focus-visible,
.page-reel-archive button:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 3px;                /* ticket spec: 3px offset */
  border-radius: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .reel-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);              /* 24px tablet */
  }
}

@media (max-width: 640px) {
  .reel-archive-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .reel-archive-hero {
    padding-block: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
  }
}

/* ---- Reduced motion (archive) ---- */
@media (prefers-reduced-motion: reduce) {
  .reel-archive-thumb img {
    transition: none;
  }
  .reel-archive-link:hover .reel-archive-thumb img,
  .reel-archive-link:focus-visible .reel-archive-thumb img {
    transform: none;
  }
}