/* ============================================================
   LAYOUT — Container, grid, section wrappers, page structure
   ============================================================ */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }}

@media (min-width: 1280px) {
  .container { padding-inline: var(--space-8); }}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--xl  { max-width: var(--container-xl); }
.container--full { max-width: 100%; padding-inline: 0; }

/* ── Grid systems ── */
.grid {
  display: grid;
  gap: var(--space-4);
}

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

/* Responsive auto-fit grids */
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }}

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

/* ── Flex utilities ── */
.flex       { display: flex; }
.flex--row  { flex-direction: row; }
.flex--col  { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--gap-2  { gap: var(--space-2); }
.flex--gap-3  { gap: var(--space-3); }
.flex--gap-4  { gap: var(--space-4); }

/* ── Section structure ── */
.section {
  position: relative;
  width: 100%;
}

.section--padded {
  padding-block: var(--space-10);
}

@media (min-width: 768px) {
  .section--padded { padding-block: var(--space-15); }}

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}

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

.section--hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* ── Section header ── */
.section-header {
  margin-bottom: var(--space-8);
  max-width: 720px;
}

.section-header--center {
  margin-inline: auto;
}
@media (min-width: 768px) {
  .section-header--center { text-align: center; }}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.section-header__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}

.section-header__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.section-header__subtitle {
  font-size: var(--text-subtitle);
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
}

/* ── Page wrapper (accounts for sticky header) ── */
.page-content {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 1200px) {
  .page-content { padding-top: var(--header-height-desktop); }}

/* ── Breadcrumbs ── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__item:not(:last-child)::after {
  content: '/';
  color: var(--border-default);
}

.breadcrumb__link {
  color: var(--text-muted);
  transition: color var(--duration-fast);
}@media (hover: hover){

.breadcrumb__link:hover { color: var(--text-primary); }}

.breadcrumb__current {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* ── Two-column editorial ── */
.editorial {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

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

  .editorial--60-40 {
    grid-template-columns: 3fr 2fr;
  }

  .editorial--reversed > :first-child {
    order: 2;
  }}