/* ==========================================================================
   LAYOUT.CSS — Sagra San Giuseppe
   Section styling, grid system, flex utilities, and section dividers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sections
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  overflow: hidden;
}

/* Petal background variant */
.section--petal {
  background-color: var(--color-petal);
}

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

/* Soil / dark background variant */
.section--soil {
  background-color: var(--color-soil);
  color: var(--color-cream);
}

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

.section--soil p {
  color: var(--color-secondary-pale);
}

/* Botanical pattern background variant */
.section--botanical {
  background-color: var(--color-warm-white);
}

/* Applied via floral.css pseudo-element — this class triggers the pattern */

/* White variant */
.section--white {
  background-color: var(--color-white);
}

/* Secondary pale variant */
.section--sage {
  background-color: var(--color-secondary-pale);
}

/* --------------------------------------------------------------------------
   2. Section title & subtitle
   -------------------------------------------------------------------------- */
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-soil);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-tight);
}

.section--soil .section__title {
  color: var(--color-warm-white);
}

.section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-bark);
  max-width: 60ch;
  margin-bottom: var(--space-2xl);
  opacity: 0.8;
}

/* Centered variant for dark backgrounds and special sections */
.text-center .section__title,
.text-center .section__subtitle {
  text-align: center;
}

.text-center .section__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.section--soil .section__subtitle {
  color: var(--color-secondary-pale);
}

/* Section label — small uppercase above the title */
.section__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section--soil .section__label {
  color: var(--color-accent-light);
}

/* --------------------------------------------------------------------------
   3. Grid system
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

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

/* Auto-fill variants for responsive behavior without media queries */
.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Alignment */
.grid--center {
  align-items: center;
}

.grid--start {
  align-items: start;
}

.grid--stretch {
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   4. Flex utilities
   -------------------------------------------------------------------------- */
.flex {
  display: flex;
}

.flex--inline {
  display: inline-flex;
}

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

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

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

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

.flex--start {
  align-items: flex-start;
}

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

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

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

/* --------------------------------------------------------------------------
   5. Gap utilities
   -------------------------------------------------------------------------- */
.gap-xs  { gap: var(--space-xs);  }
.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); }

/* --------------------------------------------------------------------------
   6. Section dividers — decorative SVG waves between sections
   -------------------------------------------------------------------------- */
.section-divider {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: var(--z-above);
  pointer-events: none;
}

.section-divider--top {
  top: -1px;
}

.section-divider--bottom {
  bottom: -1px;
}

.section-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Wave divider — gentle organic wave */
.section-divider--wave svg {
  height: clamp(40px, 5vw, 80px);
}

/* Petal-up divider — subtle petal arch pointing up */
.section-divider--petal-up svg {
  height: clamp(30px, 4vw, 60px);
}

/* Petal-down divider — subtle petal arch pointing down */
.section-divider--petal-down svg {
  height: clamp(30px, 4vw, 60px);
}

/* Fill color helpers for SVG paths within dividers */
.section-divider .fill-warm-white { fill: var(--color-warm-white); }
.section-divider .fill-petal      { fill: var(--color-petal); }
.section-divider .fill-cream      { fill: var(--color-cream); }
.section-divider .fill-soil       { fill: var(--color-soil); }
.section-divider .fill-white      { fill: var(--color-white); }
.section-divider .fill-sage       { fill: var(--color-secondary-pale); }

/* --------------------------------------------------------------------------
   7. Spacing utilities
   -------------------------------------------------------------------------- */
.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* --------------------------------------------------------------------------
   8. Scroll progress bar
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: calc(var(--z-header) + 1);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Section header wrapper
   -------------------------------------------------------------------------- */
.section__header {
  margin-bottom: var(--space-2xl);
}

.section__header .section__title {
  margin-bottom: var(--space-sm);
}

.section__header .section__subtitle {
  margin-bottom: 0;
}

/* Light variants for dark backgrounds */
.section__title--light {
  color: var(--color-warm-white);
}

.section__subtitle--light {
  color: var(--color-secondary-pale);
}

/* --------------------------------------------------------------------------
   10. Map container
   -------------------------------------------------------------------------- */
.map-container {
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Map tabs */
.map-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.map-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-md) var(--space-2xl);
  border: 2px solid var(--color-primary-pale);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-bark);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.map-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.map-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(3, 81, 88, 0.35);
}

/* Map panel info */
.map-panel__info {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-bark);
  margin-bottom: var(--space-md);
}

/* Map legend */
.map-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-bark);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.map-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.map-legend__dot--venue {
  background-color: #035158;
}

.map-legend__dot--food {
  background-color: #D4A030;
}

.map-legend__dot--parking {
  background-color: #34726B;
}

/* Leaflet custom marker */
.map-marker {
  background: none !important;
  border: none !important;
}

.map-marker__pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-marker__pin span {
  transform: rotate(45deg);
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. Food grid (alias for auto-fit grid)
   -------------------------------------------------------------------------- */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   12. Schedule panel header
   -------------------------------------------------------------------------- */
.schedule-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-primary-pale);
}

.schedule-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-soil);
}

.schedule-panel__opening {
  font-size: var(--text-sm);
  color: var(--color-bark);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   13. Schedule tab inner spans
   -------------------------------------------------------------------------- */
.schedule-tab__short {
  display: none;
}

.schedule-tab__full {
  display: inline;
}

@media (max-width: 575px) {
  .schedule-tab__short {
    display: inline;
  }
  .schedule-tab__full {
    display: none;
  }
}