/**
 * Atlas Vertical – Video hero component
 * Portrait 9:16 hero at top of post.
 *
 * Server-renders a feature image fallback inside .post-hero__media--fallback.
 * JS may move a qualifying first block into .post-hero and hide the fallback;
 * see video-hero.js for the enhancement logic.
 */

.post-hero {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-md);
  box-sizing: border-box;
}

/* Shared base for both fallback and moved media — premium editorial frame */
.post-hero__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 20px;
  background-color: #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .post-hero__media {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-hero__media {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}

.post-hero__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Placeholder inside hero reserves the same portrait space */
.post-hero__media .card__media-placeholder {
  aspect-ratio: 9 / 16;
}

/* When no feature image is set, keep the container but avoid empty gap */
.post-hero__media--fallback:empty {
  display: none;
}

/* Hide the hero entirely on posts that have no feature image and are not
   video-first. JS will reveal it by adding page-post--video-first when
   a qualifying embed is found, preventing the grey placeholder FOUC.
   Also collapse the header back to a single column so the meta centers. */
.page-post.no-image:not(.page-post--video-first) .post-hero {
  display: none;
}

.page-post.no-image:not(.page-post--video-first) .post-header {
  display: block;
}

/* Collapse the hero container when native video is promoted in place */
.post-hero.is-collapsed {
  display: none;
}

/* ---------------------------------------------------------------
   Moved media (JS-enhanced)
   After video-hero.js moves a qualifying first block into the hero,
   it wraps it in .post-hero__media--moved and hides the fallback.
   data-hero-source identifies the embed type for styling.
   --------------------------------------------------------------- */

/* Catch-all: any iframe that ends up inside the hero fills the container.
   More specific rules below override where needed (e.g. fluid wrappers). */
.post-hero iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.post-hero__media--moved figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.post-hero__media--moved iframe,
.post-hero__media--moved video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
  background: #000;
}

/* Ghost native video card: strip internal padding */
.post-hero__media--moved .kg-video-card {
  padding: 0;
  background: transparent;
}

.post-hero__media--moved .kg-video-card video {
  border-radius: 0;
}

/* Ghost wraps some embeds in a fluid wrapper */
.post-hero__media--moved .fluid-width-video-wrapper {
  position: relative;
  padding-top: 177.78%; /* 16/9 inverted for portrait */
}

.post-hero__media--moved .fluid-width-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
}

/* Portrait embed sources (TikTok, Instagram Reels)
   These embeds include their own UI chrome (header, interaction buttons)
   which makes them taller than a pure 9:16 frame. Let the embed control
   its own height instead of forcing the 9:16 aspect-ratio. */
[data-hero-source="tiktok"],
[data-hero-source="instagram"] {
  aspect-ratio: auto;
}

[data-hero-source="tiktok"] .kg-embed-card,
[data-hero-source="instagram"] .kg-embed-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-hero-source="tiktok"] blockquote,
[data-hero-source="instagram"] blockquote {
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

[data-hero-source="tiktok"] iframe,
[data-hero-source="instagram"] iframe {
  width: 100%;
  min-height: 580px;
  border: 0;
}

/* YouTube / Vimeo: landscape embeds in portrait container */
[data-hero-source="youtube"] .kg-embed-card,
[data-hero-source="vimeo"] .kg-embed-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Custom HTML block for hosted video */
.post-hero__media--moved .atlas-video-hero {
  width: 100%;
  height: 100%;
}

.post-hero__media--moved .atlas-video-hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* Hidden fallback after JS moves the first block */
.post-hero__media--fallback.is-hidden {
  display: none;
}

/* ---------------------------------------------------------------
   Body cleanup after first block is moved
   When JS moves the first child out of .page-post__body, remove
   any leftover top margin/padding so the remaining content sits
   flush against post-meta above it.
   --------------------------------------------------------------- */

.page-post--hero-active .page-post__body > :first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   Ghost native video card — moved into .post-hero container
   The card is relocated via JS into .post-hero__media--moved.
   These overrides reset Ghost's default card layout so the video
   fills the portrait hero frame correctly.
   --------------------------------------------------------------- */

.kg-video-card--hero-promoted {
  /* Reset Ghost card defaults */
  margin: 0 !important;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* Remove Ghost's outer shadow — the .post-hero__media wrapper provides it */
  box-shadow: none !important;
}

/* The Ghost video container and video element must fill the hero frame */
.kg-video-card--hero-promoted .kg-video-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.kg-video-card--hero-promoted video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* Hide the figcaption in hero context */
.kg-video-card--hero-promoted figcaption {
  display: none;
}

/* Ghost's overlay buttons still work — keep them visible */
.kg-video-card--hero-promoted .kg-video-overlay,
.kg-video-card--hero-promoted .kg-video-player-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ---------------------------------------------------------------
   Video duration badge (populated by JS from video metadata)
   --------------------------------------------------------------- */

.video-duration {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.video-duration.is-visible {
  display: block;
}

/* ---------------------------------------------------------------
   HTML5 video progress indicator (subtle bar at bottom)
   Populated by post-enhancements.js; hidden for embeds.
   --------------------------------------------------------------- */

.video-progress {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.video-progress.is-visible {
  display: block;
}

.video-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------
   Responsive hero sizing
   --------------------------------------------------------------- */

/* Mobile performance: lighter shadows reduce compositing cost */
@media (max-width: 767px) {
  .post-hero__media,
  .kg-video-card--hero-promoted {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  [data-theme="dark"] .post-hero__media,
  [data-theme="dark"] .kg-video-card--hero-promoted {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

@media (min-width: 640px) {
  .post-hero {
    padding: 0;
  }
}