/**
 * STORY Editorial Media V1.4
 * ---------------------------------------------------------------
 * Opt-in and isolated. Loaded only when Editorial Media is enabled.
 * Every rule requires .story-editorial-v1 plus an explicit
 * .story-editorial-media component. Legacy article media is untouched.
 */

.story-editorial-v1 .story-editorial-media {
  --story-em-gap: clamp(10px, 1.15vw, 20px);
  --story-em-canvas: 1600px;
  width: 100%;
  max-width: var(--story-reading);
  margin: clamp(36px, 4vw, 52px) auto;
}

.story-editorial-v1 .story-editorial-media figure {
  margin: 0;
  min-width: 0;
}

.story-editorial-v1 .story-editorial-media img,
.story-editorial-v1 .story-editorial-media video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.story-editorial-v1 .story-editorial-media figcaption,
.story-editorial-v1 .story-editorial-media > figcaption {
  margin-top: 8px;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* Wide single image: editorial scale without becoming edge-to-edge. */
.story-editorial-v1 .story-editorial-media--wide {
  width: min(calc(100vw - 32px), var(--story-em-canvas));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Full canvas remains a deliberate, separate choice. */
.story-editorial-v1 .story-editorial-media--full {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.story-editorial-v1 .story-editorial-media--full figcaption {
  padding-left: 20px;
  padding-right: 20px;
}

/* Single portrait: natural ratio, centred and intentionally quieter. */
.story-editorial-v1 .story-editorial-media--portrait:not(.story-editorial-media--pair):not(.story-editorial-media--triptych) {
  width: min(100%, 620px);
}

/* Equal editorial grids: always equal columns and equal visible frames. */
.story-editorial-v1 .story-editorial-media--pair,
.story-editorial-v1 .story-editorial-media--triptych {
  width: min(calc(100vw - 32px), var(--story-em-canvas));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: var(--story-em-gap);
  align-items: start;
}

.story-editorial-v1 .story-editorial-media--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-editorial-v1 .story-editorial-media--triptych {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Landscape is the default grid frame and suits event/editorial landscape
 * photography with much less cropping than the old universal 4:5 frame.
 */
.story-editorial-v1 .story-editorial-media--pair figure > img,
.story-editorial-v1 .story-editorial-media--pair figure > video,
.story-editorial-v1 .story-editorial-media--triptych figure > img,
.story-editorial-v1 .story-editorial-media--triptych figure > video,
.story-editorial-v1 .story-editorial-media--landscape figure > img,
.story-editorial-v1 .story-editorial-media--landscape figure > video {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Explicit portrait grid for runway/lookbook/portrait-led compositions. */
.story-editorial-v1 .story-editorial-media--pair.story-editorial-media--portrait figure > img,
.story-editorial-v1 .story-editorial-media--pair.story-editorial-media--portrait figure > video,
.story-editorial-v1 .story-editorial-media--triptych.story-editorial-media--portrait figure > img,
.story-editorial-v1 .story-editorial-media--triptych.story-editorial-media--portrait figure > video {
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .story-editorial-v1 .story-editorial-media--wide,
  .story-editorial-v1 .story-editorial-media--pair,
  .story-editorial-v1 .story-editorial-media--triptych {
    width: min(calc(100vw - 64px), var(--story-em-canvas));
  }

  .story-editorial-v1 .story-editorial-media--full figcaption {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Phones prioritise readable photographs over squeezed multi-column grids. */
@media (max-width: 639px) {
  .story-editorial-v1 .story-editorial-media--pair,
  .story-editorial-v1 .story-editorial-media--triptych {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   V1.3 — editorial reading rhythm
   Applies only to posts explicitly opted into Editorial Media V1.
   Grid geometry from V1.2 is intentionally unchanged.
   ---------------------------------------------------------------- */

/* Give editorial articles a slightly more generous desktop reading measure. */
@media (min-width: 1024px) {
  .story-editorial-v1.story-article-body.story-reading,
  .story-editorial-v1 .story-article-body.story-reading {
    width: min(calc(100% - 80px), 980px);
  }
}

/* Clear, repeatable separation between prose and an editorial media section. */
.story-editorial-v1 .story-article-body > .story-editorial-media + p,
.story-editorial-v1.story-article-body > .story-editorial-media + p {
  margin-top: 0;
}

/* Headings mark a genuine section change without becoming oversized. */
.story-editorial-v1 .story-article-body h2,
.story-editorial-v1.story-article-body h2 {
  margin-top: clamp(56px, 6vw, 76px);
  margin-bottom: 22px;
}

/* When a heading follows an ordinary paragraph, preserve a clear section break. */
.story-editorial-v1 .story-article-body p + h2,
.story-editorial-v1.story-article-body p + h2 {
  margin-top: clamp(56px, 6vw, 76px);
}

/* When editorial media follows copy or a heading, use the component rhythm
   rather than relying on incidental margin collapse. */
.story-editorial-v1 .story-article-body p + .story-editorial-media,
.story-editorial-v1.story-article-body p + .story-editorial-media,
.story-editorial-v1 .story-article-body h2 + .story-editorial-media,
.story-editorial-v1.story-article-body h2 + .story-editorial-media {
  margin-top: clamp(36px, 4vw, 52px);
}

@media (max-width: 639px) {
  .story-editorial-v1 .story-editorial-media {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .story-editorial-v1 .story-article-body h2,
  .story-editorial-v1.story-article-body h2 {
    margin-top: 48px;
    margin-bottom: 18px;
  }
}


/* ----------------------------------------------------------------
   V1.4 — standard single image
   The only geometry change from V1.3: Standard singles now match the
   approved editorial reading measure instead of the older legacy variable.
   All wide, portrait, pair and triptych geometry remains unchanged.
   ---------------------------------------------------------------- */
.story-editorial-v1 .story-editorial-media--standard {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .story-editorial-v1 .story-editorial-media--standard {
    width: min(calc(100% - 80px), 980px);
    max-width: 980px;
  }
}