/* ============================================================
   LAYOUT.CSS — Container · Grid · Spacing · Breakpoints
   everspice.de · 2026
   ============================================================ */

/* ── Container ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1520px;
}

/* ── 12-Column Grid ─────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}

/* Span-Helfer */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 1023px) {
  .col-md-6  { grid-column: span 6; }
  .col-md-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .col-sm-12 { grid-column: span 12; }

  .grid {
    grid-template-columns: 1fr;
    gap: clamp(12px, 4vw, 20px);
  }

  [class*="col-"] {
    grid-column: span 1;
  }
}

/* ── Flex 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-col    { display: flex; flex-direction: column; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.gap-lg      { gap: var(--space-lg); }
.gap-xl      { gap: var(--space-xl); }

/* ── Section Spacing ────────────────────────────────────── */
.section {
  padding-block: var(--space-3xl) var(--space-2xl);
}

.section--xl {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.section--sm {
  padding-block: var(--space-xl) var(--space-xl);
}

@media (max-width: 767px) {
  .section       { padding-block: var(--space-2xl) var(--space-xl); }
  .section--xl   { padding-block: var(--space-3xl) var(--space-2xl); }
  .section--sm   { padding-block: var(--space-xl); }
}

/* ── Section Headline Block ─────────────────────────────── */
.section-head {
  margin-bottom: var(--space-xl);
}

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (max-width: 767px) {
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Divider ────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-xl);
}

/* ── Overflow helpers ───────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.relative        { position: relative; }

/* ── Aspect Ratios ──────────────────────────────────────── */
.ratio-16-9  { aspect-ratio: 16 / 9; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-1-1   { aspect-ratio: 1 / 1; }
.ratio-3-4   { aspect-ratio: 3 / 4; }
.ratio-2-3   { aspect-ratio: 2 / 3; }

/* Bild füllt Container immer aus */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Z-Index Ebenen ─────────────────────────────────────── */
/* nav:       100  */
/* modal:     200  */
/* overlay:   300  */
/* cursor:    400  */