/*
 * DEPLA Theme: Container-Elemente (Gruppe G1, Welle 2)
 * depla_grid (Raster) und depla_section (Abschnitt mit Hintergrund), Controller unter src/Controller/ContentElement/.
 * Masse 1:1 nach pct_autogrid der Live-Seite (docs/analyse/design-tokens.md, Raster): Spalten mit Innenabstand
 * je Seite und negativem Rand, daraus ergibt sich Spaltenabstand = 2 x Innenabstand, Desktop ohne Zeilenabstand
 * (vertikal nur Element-Abstaende wie mb-s), mobil jede Zelle 100 % mit 25 px Abstand. Doku: docs/build/elemente-g1.md
 */

/* ---------------------------------------------------------------------------
 * Raster
 * ------------------------------------------------------------------------ */

.depla-grid {
  --depla-grid-gap: var(--gutter-m);        /* Standard und gutter_s: 2 x 15px */
  --depla-grid-cols: 1;
  --depla-grid-gap-mobile: 25px;            /* Live: margin-bottom 25px je Zelle unter 768px */
  display: grid;
  grid-template-columns: repeat(var(--depla-grid-cols), minmax(0, 1fr));
  column-gap: var(--depla-grid-gap);
  row-gap: 0;
  align-items: start;
}

.depla-grid > * {
  min-width: 0;
}

.depla-grid--gap-l { --depla-grid-gap: calc(2 * var(--gutter-l)); }   /* gutter_l: 2 x 40px */
.depla-grid--gap-none { --depla-grid-gap: 0px; }

/* Gleiche Hoehe: Zellen einer Reihe strecken sich, das Element fuellt die Zelle */
.depla-grid--same-height { align-items: stretch; }

.depla-grid--cols-2,
.depla-grid--50-50 { --depla-grid-cols: 2; }
.depla-grid--cols-3 { --depla-grid-cols: 3; }
.depla-grid--cols-4 { --depla-grid-cols: 4; }

/* 33/66 wie live: Prozentwerte beziehen sich auf die Breite inkl. der Spalten-Innenabstaende */
.depla-grid--33-66 {
  grid-template-columns:
    minmax(0, calc((100% + var(--depla-grid-gap)) / 3 - var(--depla-grid-gap)))
    minmax(0, 1fr);
}

/* Tablet: Vierer-Reihe wird Zweier-Reihe (col_3 col_6_t), alle anderen Vorlagen wie Desktop */
@media (min-width: 768px) and (max-width: 1024px) {
  .depla-grid--cols-4 { --depla-grid-cols: 2; }
}

/*
 * Mobil: eine Spalte. Live hat jede Zelle 25px Abstand unten, die letzte Zelle einer Reihe 0; Abstandsklassen
 * des Elements (mb-*, !important) gewinnen. Spalten der Vorlagen 33-66 und 50-50 behalten die 25px auch unten.
 * :where() haelt die Spezifitaet bei 0, damit jede Element-Klasse Vorrang hat.
 */
@media (max-width: 767px) {
  .depla-grid,
  .depla-grid--33-66 {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.depla-grid) > * {
    margin-bottom: var(--depla-grid-gap-mobile);
  }

  :where(.depla-grid:not(.depla-grid--33-66, .depla-grid--50-50)) > :last-child {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Abschnitt mit Hintergrund
 * Hintergrund volle Breite des Elternelements, Inhalt in der Inhaltsbreite (1160px, Rand 40px, mobil 20px).
 * Farbe, Textfarbe, Innenabstand: Utility-Klassen bg-*, color-white, pt-*, pb-* am Element.
 * ------------------------------------------------------------------------ */

.depla-section {
  position: relative;
  isolation: isolate;
}

.depla-section__inner {
  padding-inline: max(var(--container-pad), (100% - var(--content-max)) / 2);
}

.depla-section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.depla-section__bg picture,
.depla-section__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.depla-section__bg img {
  object-fit: cover;
  object-position: center;
}

.depla-section--bg-top .depla-section__bg img { object-position: center top; }
.depla-section--bg-bottom .depla-section__bg img { object-position: center bottom; }
.depla-section--bg-left .depla-section__bg img { object-position: left center; }
.depla-section--bg-right .depla-section__bg img { object-position: right center; }

@media (max-width: 767px) {
  .depla-section__inner {
    padding-inline: var(--container-pad-mobile);
  }
}

/* ---------------------------------------------------------------------------
 * Artikel mit Hintergrundbild (Patch-Vorschlag G1, docs/build/elemente-g1.md):
 * mod_article bekommt .has-bg-image und als erstes Kind .article-bg mit <picture>.
 * Greift erst, wenn Feld tl_article.deplaBgImage, Schritt 50 und Template-Override umgesetzt sind.
 * ------------------------------------------------------------------------ */

.mod_article.has-bg-image {
  isolation: isolate;
}

.mod_article > .article-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.mod_article > .article-bg picture,
.mod_article > .article-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.mod_article > .article-bg img {
  object-fit: cover;
  object-position: center;
}