/**
 * Experience section.
 *
 * Self-contained: owns its own vertical rhythm and inner measure, so it is
 * placed directly in a content template rather than nested inside a Section.
 * The hero runs the full width of its container; the prose is constrained.
 */

.content-section {
  --_ratio: 16 / 7;
  --_ratio-narrow: 4 / 3;
  --_space: var(--space-section);

  display: grid;
  gap: var(--space-l);
  padding-block-end: var(--_space);
  background-color: var(--color-section);
}

/* The first content section on a page sits directly below the navigation,
   which already supplies separation. Halve its top padding rather than
   doubling up. */
.content-section:first-of-type:not(.content-section--has-image) {
  padding-block-start: calc(var(--_space) / 2);
}

/* Without a hero, the section needs its own top padding. */
.content-section:not(.content-section--has-image) {
  padding-block-start: var(--_space);
}

/* ----------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.content-section__media {
  inline-size: 100%;
}

.content-section__image {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--_ratio-narrow);
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 48rem) {
  .content-section__image {
    aspect-ratio: var(--_ratio);
  }
}

.content-section--ratio-cinematic {
  --_ratio: 21 / 9;
  --_ratio-narrow: 3 / 2;
}

.content-section--ratio-wide {
  --_ratio: 16 / 7;
  --_ratio-narrow: 4 / 3;
}

.content-section--ratio-standard {
  --_ratio: 3 / 2;
  --_ratio-narrow: 1 / 1;
}

/* Natural: respect the source ratio. Safest for cropped legacy assets. */
.content-section--ratio-natural .content-section__image,
.content-section--ratio-natural .content-section__image {
  aspect-ratio: auto;
  object-fit: fill;
}

/* ----------------------------------------------------------------------
   Prose
   ---------------------------------------------------------------------- */

.content-section__inner {
  display: grid;
  gap: var(--space-s);
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.content-section__heading {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: var(--weight-bold);
  font-stretch: 95%;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-strong);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule);
}

.content-section__summary {
  max-inline-size: var(--measure);
  margin-inline: auto;
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-style: normal;
  line-height: var(--leading-normal);
  color: var(--color-ink);
  text-align: start;
}

.content-section__summary > * + * {
  margin-block-start: var(--space-s);
}

/* ----------------------------------------------------------------------
   Body
   Editor-authored markup, so bare element selectors are permitted inside
   this one block. Nothing here leaks outside __body.
   ---------------------------------------------------------------------- */

.content-section__body {
  max-inline-size: var(--measure);
  margin-inline: auto;
  text-align: start;
}

.content-section__body > * + * {
  margin-block-start: var(--space-s);
}

.content-section__body h2,
.content-section__body h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #444;
}

.content-section__body ul,
.content-section__body ol {
  padding-inline-start: var(--space-m);
}

.content-section__body li + li {
  margin-block-start: var(--space-2xs);
}

.content-section__body blockquote {
  margin: 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 4px solid var(--color-border);
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-style: italic;
}