/* ============================================
   LAYOUT - Google / Material Inspired
   Clean containers, generous spacing,
   no flanking lines
   ============================================ */

/* === CONTAINER === */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* === SECTION === */

.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

@media (min-width: 1024px) {
  .section {
    padding-top: 5rem;    /* 80px — premium breathing room */
    padding-bottom: 5rem;
  }
}

.section--lg {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Alternate background for visual rhythm */
.section--alt {
  background: var(--color-bg-secondary);
}

/* === SECTION HEADER === */
/* Google Business: Tight headers, bold */

.section-header {
  margin-bottom: var(--space-lg);
}

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

/* Lined header — Google doesn't use flanking lines,
   but keep for layout compat, make them very subtle */
.section-header--lined {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-header--lined::before,
.section-header--lined::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}

.section-header--lined h2 {
  white-space: nowrap;
  flex-shrink: 0;
}

/* === GRID SYSTEM === */

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

.grid--expertise {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

/* === SPLIT LAYOUT === */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

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

.split--reverse {
  direction: ltr;
}

@media (min-width: 768px) {
  .split--reverse {
    direction: rtl;
  }

  .split--reverse > * {
    direction: ltr;
  }
}

/* === CENTERED CTA LINK === */
/* Google: Pill-shaped outline buttons */

.section-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.section-cta .btn--outline {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  transition: all var(--duration-base);
  cursor: pointer;
}

.section-cta .btn--outline:hover {
  background: var(--color-bg-blue);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* === FULL-WIDTH BANDS === */
/* Google: Blue tint or dark sections */

.band--red,
.band--blue {
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-3xl) 0;
}

.band--red h2,
.band--red h3,
.band--red p,
.band--blue h2,
.band--blue h3,
.band--blue p {
  color: var(--color-white);
}

.band--dark {
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding: var(--space-3xl) 0;
}

.band--dark h2,
.band--dark h3,
.band--dark p {
  color: var(--color-white);
}

/* Legacy tokens from previous styles */
.green-band,
.teal-band {
  background: var(--color-accent);
  color: var(--color-white);
}