/* backend/src/main/resources/static/modules_styles/starter_standard/components/section.css */

/* gabion-export: Starter section system — layout variants for module consumers */

/* ==============================================
   SECTION COMPONENT — starter-standard

   Flat design, contract variables only.
   ============================================== */

/* ==============================================
   BASE SECTION
   ============================================== */

.section {
  position: relative;
  margin: var(--gb-section-gap) 0;
  padding: 0 var(--gb-spacing-md);
  /* clip, not hidden: hidden turns the section into a scroll container
     (overflow-y computes to auto), and a target that is itself a
     scroll container swallows scroll-into-view positioning — fragment
     jumps landed underneath the fixed header, ignoring scroll-margin.
     clip clips the same overflow without creating a scroll container.
     The header offset itself lives on the root as scroll-padding-top
     (gabion-reset.css); a scroll-margin here would add to it. */
  overflow-x: clip;
}

.section--spaced {
  margin-top: calc(var(--gb-section-gap) * 1.5);
}

.section--spaced-bottom {
  margin-bottom: calc(var(--gb-section-gap) * 1.5);
}

.section--centered {
  text-align: center;
}

/* ==============================================
   SECTION HEADER
   ============================================== */

.section-header {
  text-align: center;
  margin-bottom: var(--gb-spacing-2xl);
}

.section-title {
  font-size: var(--gb-type-heading-2-size);
  font-weight: var(--gb-font-heading-weight);
  margin-bottom: var(--gb-spacing-md);
  color: var(--gb-text-heading);
  line-height: var(--gb-type-heading-2-leading);
  letter-spacing: var(--gb-type-heading-2-tracking);
}

.section-subtitle {
  font-size: var(--gb-type-lead-size);
  color: var(--gb-text-secondary);
  line-height: var(--gb-type-lead-leading);
  max-width: var(--gb-measure);
  margin: 0 auto;
}

/* ==============================================
   SECTION CONTENT
   ============================================== */

.section-content {
  position: relative;
  max-width: var(--gb-content-max-width);
  margin: 0 auto;
}

.section-content--centered {
  text-align: center;
}

.section-content--narrow {
  max-width: var(--gb-content-narrow);
}

/* Reading column: a section whose content is running text takes the
   measure, not a layout width. The starter never makes this the
   default — a section of code panels or cards needs the full width,
   and a narrow default would silently squeeze it (the /showcase panels
   became scroll areas once). The module chooses per section, in
   markup. */
.section-content--reading {
  max-width: var(--gb-measure);
}

.section-content--wide {
  max-width: var(--gb-content-wide);
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media screen and (max-width: 767px) {
  .section-header {
    margin-bottom: var(--gb-spacing-xl);
  }
}