/* ==========================================================
   _containers.css — Divi 5 Framework Core v0.7
   Autor: Robert-Alexander Sonnenberger / Zweimeter.online
   Zweck: Aktivierung & Steuerung von Container Queries
   ========================================================== */


/* ----------------------------------------------------------
   1. Container Queries aktivieren
   - Rows, Columns & Grid Rows sollen "inline-size" Container sein.
   - Damit können @container Queries in Komponenten greifen.
---------------------------------------------------------- */
:where(.et_pb_row, .et_pb_row_grid, .et_pb_column) {
  container-type: inline-size;
  container-name: divi-scope;
}


/* ----------------------------------------------------------
   2. Standard Container-Utility Klassen
   - Für Feature Sections, Cards, Grids usw.
---------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@container divi-scope (min-width: 600px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@container divi-scope (min-width: 900px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ----------------------------------------------------------
   3. Card Wrapper / Feature Items
   - Jede Card/Feature bleibt innerhalb ihres Containers skalierbar.
---------------------------------------------------------- */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}


/* ----------------------------------------------------------
   4. Responsive Handling (optional)
   - Wenn Feature-Grid in Flex-Rows genutzt wird.
---------------------------------------------------------- */
.et_pb_row.flex-context .feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.et_pb_row.flex-context .feature-card {
  flex: 1 1 calc(50% - var(--sp-4));
}

@media (min-width: 980px) {
  .et_pb_row.flex-context .feature-card {
    flex: 1 1 calc(33.333% - var(--sp-4));
  }
}
/* _containers.css — Zweimeter Framework v0.8 */
:root {
  /* (optional) globale Fallbacks, falls Tokens fehlen */
  --bg: #FFFFFF;
  --body: #2B2B2B;
  --primary_600: #0C71C3;
  --primary_700: #061F5C;
}

/* Container-Scopes für Divi */
:is(.et_pb_row, .et_pb_row_grid, .et_pb_column){
  container-type: inline-size;
  container-name: zmt-scope;
}

/* Feature-Grid Breakpoints auf Container-Basis (matching deiner Doku) */
@container zmt-scope (min-width: 600px){
  .zmt-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container zmt-scope (min-width: 900px){
  .zmt-feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Baseline-Grid */
.zmt-feature-grid{
  display:grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
}