/* ==========================================================================
   Layout Utilities - Sagra del Borgo Antico di Montefiore
   Section wrappers, CSS Grid, Flexbox helpers, and gap utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section
   Vertical padding for page sections. Variants for different backgrounds.
   -------------------------------------------------------------------------- */
.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Dark section - charcoal background with light text */
.section--dark {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-warm-white);
}

/* Cream section - soft warm background */
.section--cream {
  background-color: var(--color-cream);
}

/* Accent section - warm overlay tint */
.section--accent {
  background-color: var(--color-warm-white);
  background-image: linear-gradient(var(--overlay-warm), var(--overlay-warm));
}

/* Section title & subtitle */
.section__title {
  margin-bottom: var(--space-sm);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-stone);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
}

.section--dark .section__subtitle {
  color: var(--color-cream);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Grid
   CSS Grid system with column variants. Mobile-first: single column by
   default, expanding at tablet/desktop breakpoints (see responsive.css).
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-xl);
}

/* 2-column grid */
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3-column grid */
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4-column grid */
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   Flexbox utilities
   -------------------------------------------------------------------------- */
.flex {
  display: flex;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  justify-content: space-between;
  align-items: center;
}

.flex--column {
  flex-direction: column;
}

.flex--gap {
  gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Gap utilities
   Reusable gap sizes for grid and flex layouts.
   -------------------------------------------------------------------------- */
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }