/**
 * Stylevorlagen für Pagebuilder V2 (WYSIWYG).
 * Wird im TinyMCE-Editor (content_css) und im Frontend (layout) geladen.
 */

/* Rahmen */
.fhz-frame-solid {
  border: 2px solid #d1d5db;
}
.fhz-frame-double {
  border: 4px double #d1d5db;
}
.fhz-frame-shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  border: 1px solid #e5e7eb;
}

/* Karten */
.fhz-shadow-card {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
}
.fhz-shadow-card-strong {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* Abstände */
.fhz-padding-sm {
  padding: 0.5rem;
}
.fhz-padding-md {
  padding: 1rem;
}
.fhz-padding-lg {
  padding: 1.5rem;
}

/* Hintergrund */
.fhz-bg-highlight {
  background-color: #fef3c7;
}
.fhz-bg-muted {
  background-color: #f3f4f6;
}

/* Callout / Hinweis-Boxen */
.fhz-callout-info {
  background-color: #dbeafe;
  border-left: 4px solid #2563eb;
  padding: 0.75rem 1rem;
  border-radius: 0 0.25rem 0.25rem 0;
}
.fhz-callout-warn {
  background-color: #fef3c7;
  border-left: 4px solid #d97706;
  padding: 0.75rem 1rem;
  border-radius: 0 0.25rem 0.25rem 0;
}

/* Bilder */
.fhz-img-rounded {
  border-radius: 0.5rem;
  overflow: hidden;
}
.fhz-img-rounded img {
  border-radius: 0.5rem;
}
.fhz-img-polaroid {
  padding: 0.5rem;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  border: 1px solid #e5e7eb;
}
.fhz-img-polaroid img {
  display: block;
}

/* Tabellen */
.fhz-table-zebra tbody tr:nth-child(even) {
  background-color: #f9fafb;
}
.fhz-table-compact td,
.fhz-table-compact th {
  padding: 0.25rem 0.5rem;
}

/* Responsive-Sichtbarkeit (Puck Responsive-Overrides, SSR-sicher, kein JS).
   Breakpoints passend zu den Editor-Viewports (Mobil < 768, Tablet 768–1023, Desktop ≥ 1024). */
@media (max-width: 767px) {
  .fhz-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fhz-hide-tablet {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .fhz-hide-desktop {
    display: none !important;
  }
}

/* Spalten-Block (Columns) — responsives Grid mit per-Breakpoint-Spaltenzahl.
   Verhältnis/Abstand + optionale Tablet-/Mobil-Templates kommen als
   Inline-Custom-Properties. Tablet erbt standardmäßig das Desktop-Template,
   Mobil stapelt auf 1 — beide via Auswahl überschreibbar. */
.fhz-columns {
  display: grid;
  grid-template-columns: var(--cols-template, repeat(2, minmax(0, 1fr)));
  gap: var(--cols-gap, 1.5rem);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fhz-columns {
    grid-template-columns: var(--cols-tablet, var(--cols-template, repeat(2, minmax(0, 1fr))));
  }
}
@media (max-width: 767px) {
  .fhz-columns {
    grid-template-columns: var(--cols-mobile, 1fr);
  }
}

/* Galerie-Block — responsives Raster mit per-Breakpoint-Spaltenzahl oder
   horizontaler Slider (Scroll-Snap, kein JS). Spaltenzahlen via --gallery-cols*. */
.fhz-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: 1rem;
}
.fhz-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.375rem;
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fhz-gallery {
    grid-template-columns: repeat(var(--gallery-cols-tablet, 2), minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .fhz-gallery {
    grid-template-columns: repeat(var(--gallery-cols-mobile, 1), minmax(0, 1fr));
  }
}
/* Slider-Variante: horizontale Scroll-Snap-Reihe. */
.fhz-gallery--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.fhz-gallery--slider .fhz-gallery__img {
  flex: 0 0 calc((100% - (var(--gallery-cols, 3) - 1) * 1rem) / var(--gallery-cols, 3));
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .fhz-gallery--slider .fhz-gallery__img {
    flex-basis: 80%;
  }
}