/* ============================================================
   MedaCom – Layout: Container, Grid, Sektionen
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */

.mc-dar-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.mc-dar-container--text {
  max-width: var(--container-text);
}

/* ── Sections ───────────────────────────────────────────────── */

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

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

.mc-dar-section--lg {
  padding-block: var(--space-4xl);
}

.mc-dar-section--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.mc-dar-section--light {
  background-color: var(--color-bg-light);
}

.mc-dar-section--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Grid ───────────────────────────────────────────────────── */

.mc-dar-grid {
  display: grid;
  gap: var(--space-lg);
}

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

/* ── Flex Helpers ───────────────────────────────────────────── */

.mc-dar-flex        { display: flex; }
.mc-dar-flex--center { align-items: center; justify-content: center; }
.mc-dar-flex--between { align-items: center; justify-content: space-between; }
.mc-dar-flex--gap-sm { gap: var(--space-sm); }
.mc-dar-flex--gap-md { gap: var(--space-md); }
.mc-dar-flex--gap-lg { gap: var(--space-lg); }

/* ── Responsive Breakpoints ─────────────────────────────────── */

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

@media (max-width: 768px) {
  .mc-dar-container { padding-inline: var(--space-md); }
  .mc-dar-section { padding-block: var(--space-2xl); }
  .mc-dar-section--lg { padding-block: var(--space-2xl); }
  .mc-dar-grid--2,
  .mc-dar-grid--3,
  .mc-dar-grid--4 { grid-template-columns: 1fr; }
}

/* ── Section Patterns ────────────────────────────────────────────
   Wiederverwendbare Sektion-Typen — erkennbar am Screenshot.
   IDs bleiben für Anker/JS. Styles liegen auf diesen Klassen.
   ──────────────────────────────────────────────────────────────── */

/* section-boxed: geboxter Block mit border-radius, Shadow, weißem Rahmen.
   Einsatz: Hero, Kontakt-CTA, jede featured Section mit Hintergrundbild. */
.mc-dar-section-boxed {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-top: var(--space-xl);
}

.mc-dar-section-boxed--spaced { padding-bottom: 80px; }

.mc-dar-section-boxed__box {
  position: relative;
  border-radius: 25px;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background-color: var(--color-dark);
}

.mc-dar-section-boxed__box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 25px;
  box-shadow: inset 0 0 0 4px var(--color-white);
  z-index: 10;
  pointer-events: none;
}

.mc-dar-section-boxed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* section-strip: schmale Full-Width-Leiste (z.B. Logo-Slider, Info-Band) */
.mc-dar-section-strip {
  background-color: var(--color-white);
  padding-block: var(--space-lg);
  overflow: hidden;
}

/* section-glass: zwei Frosted-Glass-Spalten nebeneinander */
.mc-dar-section-glass {
  background-color: var(--color-white);
  padding-block: 30px;
}

/* section-gallery: geboxter Bild-Slider / Bildergalerie */
.mc-dar-section-gallery {
  padding-block: 30px;
}

/* section-split: zwei Spalten — Foto + Content (oder umgekehrt) */
.mc-dar-section-split {
  padding-block: 30px;
}