/* ================================================================
   STORY Magazine G2 — Editorial Article Composer Blocks
   Phase 6 — Editorial Article Composer
   Implements: 02-ARTICLE.md, 07-TYPOGRAPHY.md, 08-SPACING-GRID.md
   ================================================================= */

/* ----------------------------------------------------------------
   Shared Media Components
   ---------------------------------------------------------------- */
.story-block-media-caption {
  display: block;
  margin-top: 8px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
}

.story-block-media-credit {
  display: block;
  margin-top: 4px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
  font-style: italic;
}

/* ----------------------------------------------------------------
   story/reading — Canonical Editorial Prose
   ---------------------------------------------------------------- */
.story-block-reading {
  padding-top: 0;
  padding-bottom: 0;
}

.story-block-reading p {
  margin: 0 0 40px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-block-reading > p:first-child {
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-block-reading h2 {
  max-width: var(--story-reading);
  margin: 2.2em auto 0.7em;
  font: var(--font-weight-light) 24px/26px var(--story-font);
}

.story-block-reading h3 {
  max-width: var(--story-reading);
  margin: 2em auto 0.6em;
  font: var(--font-weight-light) 20px/24px var(--story-font);
}

.story-block-reading ul,
.story-block-reading ol {
  max-width: var(--story-reading);
  margin: 0 auto 40px;
  padding-left: 24px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-block-reading li {
  margin-bottom: 12px;
}

.story-block-reading a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   story/lead — Standfirst / Lead Treatment
   ---------------------------------------------------------------- */
.story-block-lead {
  max-width: var(--story-reading);
  margin: 0 auto 40px;
  padding: 0 20px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
  text-align: center;
}

@media (min-width: 768px) {
  .story-block-lead {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-lead {
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/qa — Q&A Interview Format
   ---------------------------------------------------------------- */
.story-block-qa {
  max-width: var(--story-reading);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .story-block-qa {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-qa {
    padding: 0;
  }
}

.story-block-qa-item {
  margin-bottom: 40px;
}

.story-block-qa-question {
  margin: 0 0 16px;
  font: var(--font-weight-medium) 19px/30px var(--story-font);
}

.story-block-qa-answer {
  margin: 0;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

/* ----------------------------------------------------------------
   story/pullquote — Centered / Wide / Attributed
   ---------------------------------------------------------------- */
.story-block-pullquote {
  max-width: 740px;
  margin: 96px auto;
  padding: 0 20px;
  border: 0;
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
}

.story-block-pullquote--wide {
  max-width: 1114px;
}

.story-block-pullquote p {
  margin: 0 0 24px;
}

.story-block-pullquote cite {
  display: block;
  font: var(--font-weight-normal) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-style: normal;
}

/* ----------------------------------------------------------------
   story/media — Single Media Block
   ---------------------------------------------------------------- */
.story-block-media {
  margin: 40px auto;
}

.story-block-media--standard {
  max-width: var(--story-reading);
}

.story-block-media--wide {
  max-width: var(--story-wide);
}

.story-block-media--full {
  max-width: 100%;
}

.story-block-media-asset {
  display: block;
  width: 100%;
  height: auto;
}

.story-block-media figcaption {
  padding: 0 20px;
}

@media (min-width: 768px) {
  .story-block-media figcaption {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-media figcaption {
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/split-media — Two Media Side by Side
   ---------------------------------------------------------------- */
.story-block-split-media {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-split-media-item {
  margin: 0;
}

.story-block-split-media-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-split-media figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .story-block-split-media {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------------
   story/split-content — Text + Media Split
   ---------------------------------------------------------------- */
.story-block-split-content {
  display: grid;
  gap: 40px;
  max-width: var(--story-wide);
  margin: 40px auto;
  padding: 0 20px;
}

.story-block-split-content-text {
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-block-split-content-text p {
  margin: 0 0 24px;
}

.story-block-split-content-media {
  margin: 0;
}

.story-block-split-content-asset {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .story-block-split-content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 0 40px;
  }

  .story-block-split-content--image-text .story-block-split-content-media {
    order: 2;
  }

  .story-block-split-content--image-text .story-block-split-content-text {
    order: 1;
  }

  .story-block-split-content--video-text .story-block-split-content-media {
    order: 2;
  }

  .story-block-split-content--video-text .story-block-split-content-text {
    order: 1;
  }
}

@media (min-width: 1280px) {
  .story-block-split-content {
    gap: 64px;
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/pair — Two-Media Editorial Pair
   ---------------------------------------------------------------- */
.story-block-pair {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-pair-item {
  margin: 0;
}

.story-block-pair-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 121;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-pair figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .story-block-pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------------
   story/triptych — Three-Media Composition
   ---------------------------------------------------------------- */
.story-block-triptych {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-triptych-item {
  margin: 0;
}

.story-block-triptych-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-triptych figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 768px) {
  .story-block-triptych {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------------
   story/four-up — Four-Media Row
   ---------------------------------------------------------------- */
.story-block-four-up {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-four-up-item {
  margin: 0;
}

.story-block-four-up-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-four-up figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .story-block-four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .story-block-four-up {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------------
   story/gallery-2x2 — Deterministic 2×2 Gallery
   ---------------------------------------------------------------- */
.story-block-gallery-2x2 {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-gallery-2x2-item {
  margin: 0;
}

.story-block-gallery-2x2-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-gallery-2x2 figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .story-block-gallery-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------------------------------
   story/gallery-2x4 — Eight-Item Editorial Gallery
   ---------------------------------------------------------------- */
.story-block-gallery-2x4 {
  display: grid;
  gap: 0;
  margin: 40px auto;
}

.story-block-gallery-2x4-item {
  margin: 0;
}

.story-block-gallery-2x4-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-gallery-2x4 figcaption {
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .story-block-gallery-2x4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .story-block-gallery-2x4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------------
   story/mosaic — Mosaic / Contact Sheet
   ---------------------------------------------------------------- */
.story-block-mosaic {
  display: grid;
  gap: 4px;
  margin: 40px auto;
  padding: 0 20px;
}

.story-block-mosaic-item {
  margin: 0;
}

.story-block-mosaic-asset {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-block-mosaic figcaption {
  display: none;
}

@media (min-width: 640px) {
  .story-block-mosaic {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-mosaic {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/sequence — Sequential Gallery
   ---------------------------------------------------------------- */
.story-block-sequence {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--story-wide);
  margin: 40px auto;
  padding: 0 20px;
}

.story-block-sequence-item {
  margin: 0;
}

.story-block-sequence-asset {
  display: block;
  width: 100%;
  height: auto;
}

.story-block-sequence figcaption {
  padding-top: 8px;
}

@media (min-width: 768px) {
  .story-block-sequence {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-sequence {
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/black-feature — Dark Editorial Interruption
   ---------------------------------------------------------------- */
.story-block-black-feature {
  margin: 96px 0;
  padding: 96px 20px;
  background: var(--color-black);
  color: var(--color-text-inverted);
}

.story-block-black-feature-inner {
  max-width: var(--story-reading);
  margin: 0 auto;
}

.story-block-black-feature-inner p {
  margin: 0 0 24px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-block-black-feature-inner h2 {
  margin: 0 0 24px;
  font: var(--font-weight-light) 32px/36px var(--story-font);
}

.story-block-black-feature-inner blockquote {
  margin: 0;
  padding: 0;
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
}

.story-block-black-feature-inner figure {
  margin: 40px 0;
}

.story-block-black-feature-inner img,
.story-block-black-feature-inner video {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .story-block-black-feature {
    padding: 120px 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-black-feature {
    padding: 144px 0;
  }
}

/* ----------------------------------------------------------------
   story/chapter-break — Editorial Transition
   ---------------------------------------------------------------- */
.story-block-chapter-break {
  max-width: var(--story-reading);
  margin: 96px auto;
  padding: 0 20px;
  text-align: center;
}

.story-block-chapter-break-label {
  margin: 0 0 16px;
  font: var(--font-weight-medium) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.story-block-chapter-break-title {
  margin: 0;
  font: var(--font-weight-light) 32px/36px var(--story-font);
}

@media (min-width: 768px) {
  .story-block-chapter-break {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .story-block-chapter-break {
    padding: 0;
  }
}

/* ----------------------------------------------------------------
   story/credits — Flexible Role/Value Credits
   ---------------------------------------------------------------- */
.story-block-credits {
  padding-top: 48px;
  padding-bottom: 0;
}

.story-block-credit {
  margin: 0 0 8px;
  font: var(--font-weight-normal) 14px/20px var(--story-font);
}

.story-block-credit-role {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.story-block-credit-name {
  margin-left: 8px;
}

/* ----------------------------------------------------------------
   Editor Styles
   ---------------------------------------------------------------- */
.editor-styles-wrapper .story-block-reading p,
.editor-styles-wrapper .story-block-qa-answer,
.editor-styles-wrapper .story-block-split-content-text {
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.editor-styles-wrapper .story-block-pullquote {
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
}

.editor-styles-wrapper .story-block-black-feature {
  background: var(--color-black);
  color: var(--color-text-inverted);
}