/* ============================================
   Layout — Container, Grid, Section
   ============================================ */

/* === Container === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

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

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

/* === Section === */
.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--alt {
  background-color: var(--color-bg-section-alt);
}

.section--warm {
  background-color: var(--color-bg-warm);
}

.section--pink {
  background-color: var(--color-bg-warm);
}

.section--dark {
  background-color: var(--color-text-primary);
  color: var(--color-text-light);
}

[data-theme="dark"] .section--dark {
  background-color: #0F0F20;
}

.section--gold-accent {
  background: var(--color-bg-section-alt);
}

/* === Grid System === */
.grid {
  display: grid;
  gap: var(--space-xl);
}

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

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

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

.grid--services {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.grid--education {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.grid--blog {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.grid--features {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.grid--testimonials {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.grid--contact {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

.grid--instagram {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
}

/* === Flexbox Utilities === */
.flex {
  display: flex;
}

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

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

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

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

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

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

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

/* === Split Layout (Image + Text) === */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

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

/* === Page Header (Inner Pages) === */
.page-header {
  padding-top: calc(var(--header-height) + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  background-color: var(--color-bg-section-alt);
  text-align: center;
}

[data-theme="dark"] .page-header {
  background-color: var(--color-bg-secondary);
}

/* === Breadcrumb === */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-champagne-gold);
}

.breadcrumb__separator {
  color: var(--color-border-light);
  font-size: 0.7em;
}

.breadcrumb__current {
  color: var(--color-pudra-pink-dark);
  font-weight: var(--fw-medium);
}

/* === Main Content Area === */
main {
  min-height: calc(100vh - var(--header-height));
}

/* === Full Width Band === */
.full-band {
  width: 100%;
  padding: var(--space-3xl) 0;
}

.full-band--gold {
  background: linear-gradient(135deg, var(--color-champagne-gold) 0%, var(--color-champagne-gold-light) 100%);
  color: var(--color-text-primary);
}

.full-band--pink {
  background: linear-gradient(135deg, var(--color-pudra-pink) 0%, var(--color-pudra-pink-light) 100%);
  color: var(--color-text-light);
}

.full-band--dark {
  background: linear-gradient(135deg, #2D2D2D 0%, #1A1A2E 100%);
  color: var(--color-text-light);
}

[data-theme="dark"] .full-band--dark {
  background: linear-gradient(135deg, #0F0F1E 0%, #1A1A2E 50%, #16213E 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}