/* ptb-bildraster.css — Pack-Kopie des Kit-Blocks cb28-bildraster (relaunch/4-componentsystem/src/components/cb28-bildraster/cb28-bildraster.css).
   Quelle der Wahrheit ist das Kit; bei Änderungen dort diese Datei 1:1 nachziehen (kein Build-Schritt, Block steht auf keiner eingefrorenen Seite).
   Tokens (--s-oben, --surface-muted, …) kommen aus ptb-theme.css, die Datei lädt danach. */
/* ===========================================================================
   Schicht 5 — cb28-bildraster
   Bild-Text-Raster über die volle Fensterbreite (Vorbild: Eröffnungs-Section von
   gebruederfritz.com/berlin-konferenzraum-mieten, Chris 12.10.2026): drei Spalten, zwei Reihen,
   fünf Bilder und eine Textkarte unten in der Mitte. Kein Container — das Raster läuft bis an den
   Rand, nur die Lücke (--bildraster-luecke) steht als Rahmen.
   Variable Textlänge: Überschrift und Text skalieren mit dem Fenster, die
   Reihe wächst mit dem Text, die Bilder füllen ihre Zelle über object-fit. Bilderzahl 3–5: die
   Karte rückt bei weniger Bildern über die freie Zelle (:has, nur Darstellung).
   Mobil/Tablet (< 1100 px): zwei Spalten — erstes Bild über die ganze Breite, Textkarte, dann
   die übrigen Bilder paarweise. Die Karte steht damit direkt unter dem Aufmacher-Bild.
   =========================================================================== */
.ptb-bildraster {
  --bildraster-luecke: 20px;
  background: var(--surface-page);
  padding: var(--s-oben) var(--bildraster-luecke) var(--s-unten);
}
.ptb-bildraster__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bildraster-luecke);
  grid-auto-rows: auto; width: 100%;
}
.ptb-bildraster__bilder { display: contents; }

.ptb-bildraster__bild {
  position: relative; margin: 0; overflow: hidden; background: var(--border-subtle);
  aspect-ratio: 1.07 / 1; min-height: 0;
  width: 100%; align-self: stretch;   /* Breite fest, sonst leitet aspect-ratio sie aus der gestreckten Höhe ab; mit aspect-ratio sonst nur „start“: in Reihe 2 füllt das Bild die vom Text gewachsene Zeile */
}
.ptb-bildraster .ptb-bildraster__bild img {   /* (0,2,1): schlägt `.elementor img { height: auto }` in WordPress */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.ptb-bildraster .ptb-bildraster__bild:hover img { transform: scale(1.025); }
/* Bild 6 und folgende gibt es im Raster nicht — mehr Bilder in der Liste werden ausgeblendet */
.ptb-bildraster__bild:nth-child(n+6) { display: none; }

/* Textkarte: Zeile 2, Spalte 2; die Bilder füllen die übrigen Zellen in Reihenfolge */
.ptb-bildraster__text {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: var(--surface-muted); color: var(--text-body);
  padding: clamp(24px, 3.4vw, 56px);
  min-width: 0;
}
.ptb-bildraster__kicker { margin: 0 0 4px; font-size: clamp(15px, 1.35vw, 21px); }
.ptb-bildraster__kicker:empty { display: none; }
.ptb-bildraster__titel {
  margin: 0; max-width: 100%; text-align: left; text-wrap: balance;
  font-size: clamp(28px, 3.2vw, 52px); line-height: .98;
  overflow-wrap: break-word; hyphens: manual;   /* Display-Schrift: keine automatische Trennung („Eventlocati-ons“), nur Notumbruch */
}
.ptb-bildraster__titel .ptb-h2__script { font-size: clamp(26px, 2.9vw, 48px); margin-top: .12em; }
.ptb-bildraster__titel .ptb-h2__script:empty { display: none; }
.ptb-bildraster__rt {
  margin-top: clamp(16px, 1.6vw, 28px); max-width: 52ch;
  color: var(--text-body); font-family: var(--font-body); font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
  overflow-wrap: break-word; hyphens: manual;
}
.ptb-bildraster__rt > * { margin: 0; }
.ptb-bildraster__rt > * + * { margin-top: 1em; }
.ptb-bildraster__rt:empty { display: none; }
.ptb-bildraster__rt a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ptb-bildraster__aktionen {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  margin-top: clamp(20px, 2.2vw, 36px);
}
.ptb-bildraster__aktionen:not(:has(a[href])) { display: none; }
.ptb-bildraster__btn[href=""], .ptb-bildraster__btn:not([href]) { display: none; }

/* Fließtext trennt nur dort automatisch, wo die Spalte schmal wird (Dreispaltig 1100–1299 px, Mobil) */
@media (min-width: 1100px) and (max-width: 1299px), (max-width: 520px) {
  .ptb-bildraster__rt { hyphens: auto; -webkit-hyphens: auto; }
}

/* Weniger Bilder: Karte nutzt die freie Zelle bzw. die ganze Reihe */
.ptb-bildraster__grid:has(.ptb-bildraster__bild:nth-child(4):last-child) .ptb-bildraster__text { grid-column: 2 / span 2; }
.ptb-bildraster__grid:has(.ptb-bildraster__bild:nth-child(3):last-child) .ptb-bildraster__text,
.ptb-bildraster__grid:has(.ptb-bildraster__bild:nth-child(2):last-child) .ptb-bildraster__text,
.ptb-bildraster__grid:has(.ptb-bildraster__bild:nth-child(1):last-child) .ptb-bildraster__text { grid-column: 1 / -1; }

/* Tablet und Mobil: zwei Spalten */
@media (max-width: 1099px) {
  .ptb-bildraster { --bildraster-luecke: 12px; }
  .ptb-bildraster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptb-bildraster__bild { aspect-ratio: 1 / 1; }
  .ptb-bildraster__bild:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: 1; }
  .ptb-bildraster__text,
  .ptb-bildraster__grid:has(.ptb-bildraster__bild:nth-child(4):last-child) .ptb-bildraster__text { grid-column: 1 / -1; grid-row: auto; order: 2; padding: clamp(28px, 6vw, 56px); }
  .ptb-bildraster__bild:nth-child(n+2) { order: 3; }
  .ptb-bildraster__titel { font-size: clamp(32px, 7vw, 52px); }
  .ptb-bildraster__titel .ptb-h2__script { font-size: clamp(28px, 6.2vw, 46px); }
  .ptb-bildraster__rt { font-size: clamp(15px, 2.2vw, 18px); max-width: 60ch; }
}
@media (max-width: 767px) {
  .ptb-bildraster { --bildraster-luecke: 8px; padding-inline: var(--bildraster-luecke); }
  .ptb-bildraster__text { padding: 28px 22px 30px; }
  .ptb-bildraster__titel { font-size: clamp(28px, 9.2vw, 40px); }   /* Kartenbreite 330 px: „Eventlocations“ bleibt ein Wort */
  .ptb-bildraster__titel .ptb-h2__script { font-size: clamp(24px, 7.8vw, 34px); margin-top: .12em; }
  .ptb-bildraster__rt { font-size: 15px; margin-top: var(--t-nach); }
  .ptb-bildraster__aktionen { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptb-bildraster .ptb-bildraster__bild img { transition: none; }
  .ptb-bildraster .ptb-bildraster__bild:hover img { transform: none; }
}