/* ============================================================
   polyDesign — comp/  (Compositions: Cards aus Modulen)
   Baut auf tokens.css + elem.css + mod.css auf.
   Gemeinsames Muster: umrahmte Card (1px polyDarkBlue_line,
   Padding padding-big), die Module aufnimmt.
   ============================================================ */

/* ---------- comp/head+body ----------------------------------
   Figma 2042:1702 — Card um mod/headline+body.
------------------------------------------------------------- */
.comp-head-body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:var(--pad-big);
  border:var(--linewidth) solid var(--poly-line);
}

/* ---------- comp/info-card ----------------------------------
   Figma 2039:1205 — Nummer (mono button) + mod/headline+body
   + Zusatz-Zeile (mono tag). Abstände über pb/pt der Blöcke.
------------------------------------------------------------- */
.comp-info-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:var(--pad-big);
  border:var(--linewidth) solid var(--poly-line);
  overflow:hidden;
}
.comp-info-card__number{
  width:100%; padding-bottom:var(--pad-medium);
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--button-size); line-height:var(--button-lh);
  color:var(--ink);
}
.comp-info-card__zusatz{
  width:100%; padding-top:var(--pad-medium);
  margin-top:auto;                 /* unten am Rahmen verankern */
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--tag-size); line-height:var(--tag-lh);
  color:var(--ink);
}

/* ---------- comp/testimonial-card ---------------------------
   Figma 2049:2821 — mod/testimonial + mod/person-pic-name,
   gap=padding-big.
------------------------------------------------------------- */
.comp-testimonial-card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--pad-big);
  padding:var(--pad-big);
  border:var(--linewidth) solid var(--poly-line);
}
/* letztes Element (mod/person-pic-name) unten am Rahmen verankern —
   in einer Zeile gleich hoher Cards sitzt es dann bündig unten */
.comp-testimonial-card > :last-child{ margin-top:auto; }

/* Mobile: Padding dieser Boxen auf padding-big-mobile (30) statt big (40). */
@media (max-width:480px){
  .comp-head-body,
  .comp-info-card,
  .comp-testimonial-card,
  .comp-bento__cell{ padding:var(--pad-big-mobile); }
}

/* ---------- comp/content-info -------------------------------
   Figma 2112:6901 — Card (Padding padding-medium) mit
   mod/datum-headline-body + mod/tags-horizontal. Tags unten
   am Rahmen verankert.
------------------------------------------------------------- */
.comp-content-info{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--pad-small);
  padding:var(--pad-medium);
  border:var(--linewidth) solid var(--poly-line);
  overflow:hidden;
}
.comp-content-info > *{ width:100%; }
.comp-content-info > .mod-tags-horizontal{ margin-top:auto; }   /* Tags unten */

/* ---------- comp/video-card (vertikal) ----------------------
   Figma 2039:232 — comp/video über comp/content-info.
------------------------------------------------------------- */
/* Linien: Rahmen aus den Zellen (video + content-info), die sich um 1px
   vertikal überlappen; Container ohne eigenen Rahmen. */
.comp-video-card, .comp-image-card{
  display:flex; flex-direction:column; align-items:stretch;
}
.comp-video-card > *, .comp-image-card > *{ width:100%; }
.comp-video-card > * + *, .comp-image-card > * + *{ margin-top:calc(-1 * var(--linewidth)); }
/* content-info füllt die Karten-Resthöhe (unter dem Medium), damit die unten
   verankerten Tags an der Kartenkante sitzen — auch in gleich hohen Grid-Zellen. */
.comp-video-card > .comp-content-info, .comp-image-card > .comp-content-info{ flex:1 1 auto; }

/* ---------- comp/video-feature (horizontal) -----------------
   Figma 2049:967 — comp/video (1fr) neben comp/content-info
   (0.5fr). Video füllt die Content-Höhe; Tags unten bündig.
   Mobile: gestapelt.
------------------------------------------------------------- */
/* Linien: video (2fr) + content-info (1fr) überlappen sich um 1px;
   Container ohne eigenen Rahmen. Mobile: gestapelt, Überlappung vertikal. */
.comp-video-feature{
  display:flex; align-items:stretch;
}
/* Video: das gewählte Format (col-video--<ratio>) gibt die natürliche Höhe vor,
   die damit auch die Reihenhöhe bestimmen kann. align-self:stretch lässt das
   Video zusätzlich mitwachsen, wenn die content-info höher ist — dann füllt es
   die volle Höhe (Inhalt via object-fit:cover beschnitten) statt eine Lücke zu
   lassen. Ist das Video höher, bleibt es bei seinem Format. */
.comp-video-feature > .col-video{ flex:2 1 0; min-width:0; align-self:stretch; }
.comp-video-feature > .comp-content-info{ flex:1 1 0; min-width:0; }
.comp-video-feature > * + *{ margin-left:calc(-1 * var(--linewidth)); }
@media (max-width:480px){
  .comp-video-feature{ flex-direction:column; }
  /* Spalte: natürliche Höhe statt Basis 0 (sonst kollabiert das Video). */
  .comp-video-feature > .col-video, .comp-video-feature > .comp-content-info{ flex:0 0 auto; }
  .comp-video-feature > * + *{ margin-left:0; margin-top:calc(-1 * var(--linewidth)); }
}

/* ---------- comp/bento-grid ---------------------------------
   Figma 2112:6900 — flexibles Zeilen-Grid. Pro Zeile eine
   variable Spaltenzahl über --cols (z.B. 3-1, 3-3-3, 4-2-5).
   Zellen-Default: mod/headline+body. Beliebiger Inhalt möglich.
   1px-Rasterlinien via Gap + Hintergrundfarbe (keine doppelten
   Rahmen). Mobile: einspaltig.
------------------------------------------------------------- */
.comp-bento{
  display:flex; flex-direction:column; gap:var(--linewidth);
  background:var(--poly-line);
  border:var(--linewidth) solid var(--poly-line);
}
.comp-bento__row{
  display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr));
  gap:var(--linewidth); background:var(--poly-line);
  flex:1 1 0;   /* teilt eine vorgegebene Frame-Höhe in gleiche Zeilen */
}
.comp-bento__cell{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:var(--pad-big);
  background:var(--surface);
}
.comp-bento__cell > *{ width:100%; }
/* Mobile: Umbruch breitenabhängig statt hart einspaltig. Kacheln
   bleiben nebeneinander, solange jede >= --min breit sein kann;
   sonst brechen sie um. Pro Zeile via --min steuerbar (schmaler
   Inhalt = kleinerer Wert → bleibt nebeneinander). min(…,100%)
   verhindert Überlauf auf sehr schmalen Screens. */
@media (max-width:480px){
  .comp-bento__row{
    grid-template-columns:repeat(auto-fit, minmax(min(var(--min,200px), 100%), 1fr));
  }
}