/* ==========================================================================
   Section component
   Vertical content section.
   ========================================================================== */

.section {
  --gap: var(--s-48);
  --pb: var(--s-72);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding-block: var(--pb);
}

/* variants */

/* first section after hero needs some more top spacing */
.hero + .section {
  padding-block-start: calc(var(--pb) * 1.1);
}

/* single section on page needs the same bottom spacing from the footer */
.hero + .section + footer {
  margin-block-start: calc(var(--pb) * 0.33);
}

.section.block-end-0 {
  padding-block-end: 0;
}

/* --- Background --- */

.section.brown {
  background-color: var(--wp--preset--color--warm-brown);
  color: var(--wp--preset--color--off-white);
  --btn-color: var(--wp--preset--color--off-white);
  --focus-ring-color: var(--wp--preset--color--white);
}

.section.lightgray {
  background-color: var(--surface-soft);
}

/* cta-block variant */

.section .cta-block {
  --gap: var(--s-24);
  padding-top: var(--s-8);
}

.section .cta-block button.btn,
.section .cta-block a.btn {
  font-weight: 500;
}

.cta-block.top-border {
  border-block-start: solid 1px var(--border-divider);
  padding-block-start: var(--s-32);
}

.section.brown .cta-block.top-border {
  border-block-start-color: var(--border-divider-light);
}

/* divider */

hr.section-divider {
  margin-inline: auto;
  max-width: var(--mw, var(--mw-text-md));
  border: solid 1px var(--border-divider);
}

/* --- Breakpoints (match tokens.css --breakpoint-*) ---
   sm: 20rem+ (base)
   md: 40rem+
   lg: 64rem+
   xl: 90rem+
*/

@media (min-width: 40rem) {
  .section {
    --gap: var(--s-32);
    --pb: var(--s-60);
  }
}

@media (min-width: 64rem) {
  .section {
    --gap: var(--s-40);
    --pb: var(--s-72);
  }
}

@media (min-width: 90rem) {
  .section {
    --gap: var(--s-48);
    --pb: var(--s-96);
  }
}

/* --- .media-text variant ---
   Two-column media + text section (see migration_section_media_text()).
   The hook lives on the section so per-variant overrides stay scoped
   here and don't pollute generic .section / .grid rules. Base/sm only:
   drop top padding, widen the stacked row gap, and square the media
   corners for a flush-edge mobile look. md+ inherits the defaults. */

@media (max-width: 39.999rem) {
  .section.media-text {
    padding-top: 0;
  }
  .section:not(.lightgray) + .section.media-text {
    margin-top: var(--s-24);
  }
  .section.media-text > .grid {
    --row-gap: var(--s-32);
  }
  .section.media-text > .grid > .card {
    --border-radius-media: 0;
  }
}

/* .reverse: swap media to the right column at md+. Mobile stack keeps
   media-on-top (DOM order) for a consistent vertical rhythm. */
@media (min-width: 40rem) {
  .section.media-text.reverse > .grid > .card {
    order: 2;
  }
}