/* ============================================================
   Section Layout Utilities
   Replaces styling previously driven by data-current-styles.
   These classes are applied directly to <section> elements.
   ============================================================ */

/* --- Section base ----------------------------------------- */

.page-section {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* --- Section heights --------------------------------------- */

.section-height--small  { min-height: 25vh; }
.section-height--medium { min-height: 50vh; }
.section-height--large  { min-height: 85vh; }

/* Custom height: falls back to content height by default.
   Per-section overrides below handle non-zero customSectionHeight. */
.section-height--custom { min-height: 0; }

/* --- Vertical alignment (flex on .page-section) ----------- */

.vertical-alignment--top    { justify-content: flex-start; }
.vertical-alignment--middle { justify-content: center; }
.vertical-alignment--bottom { justify-content: flex-end; }

/* --- Horizontal alignment ---------------------------------- */

.horizontal-alignment--left   { text-align: left; }
.horizontal-alignment--center { text-align: center; }
.horizontal-alignment--right  { text-align: right; }

/* --- Content wrapper --------------------------------------- */

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 5vw;
  box-sizing: border-box;
}

/* --- Content widths (constrain .content inside wrapper) ---- */

.content-width--narrow .content { max-width: 560px;  margin-inline: auto; }
.content-width--medium .content { max-width: 860px;  margin-inline: auto; }
.content-width--wide   .content { max-width: 1200px; margin-inline: auto; }

/* --- Section background structure -------------------------- */

.section-border {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.section-background {
  position: absolute;
  inset: 0;
}

.section-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay: opacity is set inline per-section (already in HTML) */
.section-background-overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
}

/* --- Section themes ---------------------------------------- */

.page-section[data-section-theme="black"],
.page-section.black {
  color: #fff;
}

.page-section[data-section-theme="white"],
.page-section.white {
  background-color: #fff;
  color: #000;
}

.page-section[data-section-theme="light"],
.page-section.light {
  background-color: #f5f5f5;
  color: #333;
}