/*
 * Section Layout System
 * Defines padding, background variants, and structural patterns
 * shared across all page sections.
 * Tekvera Initiative Theme
 */

/* ── Base section ────────────────────────────────────────────────────────── */
.tv-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--tv-section-pad-y);
}

.tv-section--sm  { padding-block: var(--tv-section-pad-y-sm); }
.tv-section--lg  { padding-block: var(--tv-section-pad-y-lg); }
.tv-section--flush { padding-block: 0; }

/* ── Background variants ─────────────────────────────────────────────────── */
.tv-section--cream   { background-color: var(--tv-cream); }
.tv-section--white   { background-color: var(--tv-white); }
.tv-section--dark    { background-color: var(--tv-green-900); }
.tv-section--darkest { background-color: var(--tv-green-950); }
.tv-section--green   { background-color: var(--tv-green-800); }
.tv-section--amber   { background-color: var(--tv-amber-50); border-top: 1px solid var(--tv-amber-100); }
.tv-section--subtle  { background-color: var(--tv-green-50); }

/* Subtle dot grid pattern for dark sections */
.tv-section--grid-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

.tv-section--grid-pattern > * { position: relative; z-index: 1; }

/* Border top / bottom */
.tv-section--border-top    { border-top: 1px solid var(--tv-border); }
.tv-section--border-bottom { border-bottom: 1px solid var(--tv-border); }

/* ── Section header pattern ──────────────────────────────────────────────── */
.tv-section-hd {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.tv-section-hd--center {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.tv-section-hd h2 {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* When eyebrow + h2 + description */
.tv-section-hd p {
  margin-top: 0.85rem;
  font-size: var(--tv-text-base);
  color: var(--tv-text-tertiary);
  line-height: var(--tv-leading-relaxed);
  max-width: 560px;
}

.tv-section-hd--center p { margin-inline: auto; }

/* Inline section header (title left + CTA right) */
.tv-section-hd--inline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ── Split sections (two-pane, no gap, full bleed) ───────────────────────── */
.tv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tv-split__pane {
  padding: var(--tv-section-pad-y) var(--tv-gutter-lg);
}

.tv-split__pane--border-right {
  border-right: 1px solid var(--tv-border);
}

.tv-split__pane--border-left {
  border-left: 1px solid var(--tv-border);
}

@media (max-width: 768px) {
  .tv-split {
    grid-template-columns: 1fr;
  }

  .tv-split__pane--border-right,
  .tv-split__pane--border-left {
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--tv-border);
  }

  .tv-split__pane:last-child {
    border-bottom: none;
  }

  .tv-split__pane {
    padding: var(--tv-section-pad-y-sm) var(--tv-gutter);
  }
}

/* ── Decorative patterns ──────────────────────────────────────────────────── */
/* Geometric grid lines on hero backgrounds */
.tv-hero-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}