/* ---- Split content section — reusable two-column heading/body layout ----
   Originally the News article page's text-block component (article-*
   naming); renamed to a generic namespace so it can be reused outside
   articles (e.g. the Reviews page) without duplicating this CSS. Heading
   and body are placed directly on the shared .grid's own column lines
   (3/span3 for the heading column, an empty track at column 5, 6/span5 for
   the body) rather than in a nested grid — a nested 8-column grid inside an
   8-column-wide wrapper produces different column widths than the parent
   12-column grid, which is what causes text columns to drift out of
   alignment with gallery rows elsewhere on the article page. Below 1024px
   both stack full-width. */
.split-content-section__heading {
  grid-column: 1 / -1;
}

.split-content-section__body {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
}

/* Same rhythm as .staff-modal__bio p + p (staff-modal.css) — paragraph
   breaks need their own gap since browsers don't space <p> tags apart by
   default beyond their line-height. */
.split-content-section__body p + p {
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .split-content-section__heading {
    grid-column: 3 / span 3;
  }

  .split-content-section__body {
    grid-column: 6 / span 5;
    margin-top: 0;
  }
}

/* Left-column wrapper for heading + rating + author (Reviews page usage).
   Occupies the same column line as a standalone .split-content-section__heading
   above, so it's a drop-in replacement — grid-column has no effect on the
   article page's heading, which isn't nested inside this wrapper and keeps
   its own grid-column rule. Deliberately a plain block (not a nested grid)
   so heading/rating/author stack in normal flow regardless of how tall the
   body column runs alongside them. */
.split-content-section__meta {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .split-content-section__meta {
    grid-column: 3 / span 3;
  }
}

/* Gold — no token in tokens.css covers a star-rating yellow (the palette is
   still PLACEHOLDER pending real brand colors); scoped here rather than
   added as a site-wide token since it's specific to this one glyph. */
.split-content-section__rating {
  margin-top: var(--space-4);
  font-size: var(--font-size-6);
  letter-spacing: var(--tracking-wide);
  color: #d4a017;
}

.split-content-section__author {
  margin-top: var(--space-3);
}

/* Below 1024px, heading and body stack as separate grid rows, so this gap
   would add its own row-gap on top of .split-content-section__body's own
   margin-top — CSS Grid gaps don't collapse with sibling margins the way
   block-flow margins do, so the two would stack to 56px instead of the
   24px every other heading+paragraph pairing on the site uses. Zeroed here
   and only set once heading/body go side-by-side at 1024px, where it's a
   horizontal column-gap instead (same width as .editorial-image-row, so
   text columns visually match the gallery rows' spacing on the same
   page). */
.split-content-section__grid {
  gap: 0;
}

@media (min-width: 1024px) {
  .split-content-section__grid {
    gap: var(--space-16);
    align-items: start;
  }
}

/* Serif face — deliberately different from the sans body copy beside it,
   so the heading reads as a distinct typographic voice rather than just a
   bolder weight of the same font. Sentence case, restrained size (no
   utility heading class needed since the size/family are set directly). */
.split-content-section__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

/* ---- Section spacing — reused for every section (text and gallery rows
   alike) instead of the site-wide .section token, which reads as far too
   much vertical space once several of these sit back to back on one page. */
.split-content-section {
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .split-content-section {
    padding-block: var(--space-12);
  }
}

/* Extra breathing room specifically around the image/gallery rows — more
   than the text rhythm above, so imagery reads as a deliberate pause
   rather than just another paragraph in the sequence. */
.split-content-section--gallery {
  padding-block: var(--space-16);
}

@media (min-width: 1024px) {
  .split-content-section--gallery {
    padding-block: var(--space-24);
  }
}