/**
 * formatiq-catalog v0.8.0 — Frontend
 *
 * Zwei Ebenen-Modell. Auf L1 (Kategorie-Ansicht) Finder-Layout mit
 * Produkt-Sidebar und optional einer zusätzlichen Unterkategorien-
 * Spalte rechts daneben.
 *
 * v0.8-Fix: Bild-Fade ist jetzt ein aktiver linear-gradient zur
 * konfigurierbaren --fq-fade-color (default weiß) statt mask-image.
 * Wirkt damit auch auf dunklem Page-Background sauber als Weiß-Fade.
 *
 * @package Formatiq\Catalog
 */

/* ============================================================
   Core-Variablen + Wrapper
   ============================================================ */

.formatiq-catalog {
  /* Override-bar via Divi-Modul; Defaults = Screendesign */
  --fq-catalog-height: 100vh;
  --fq-anim-ms: 480ms;
  --fq-anim-easing: cubic-bezier(0.65, 0, 0.35, 1);

  --fq-band-sep: 2px;                 /* orange Trennlinien */
  --fq-fade-color: #ffffff;           /* Default-Fade-Ziel (Fallback wenn nicht im VB überschrieben) */
  --fq-header-fade-color: #ffffff;    /* Default-Fade-Ziel Header */
  --fq-l0-bg: var(--fq-fade-color);   /* Hintergrund hinter L0 — vom VB konstruiert (solid/gradient/image) */
  --fq-header-bg: var(--fq-header-fade-color); /* Header-Hintergrund — vom VB konstruiert */
  --fq-l0-fade: linear-gradient(to bottom, transparent 25%, var(--fq-fade-color) 58%);
  --fq-header-fade: linear-gradient(to bottom, transparent 25%, var(--fq-header-fade-color) 96%);

  --fq-img-grayscale: 100%;
  --fq-img-brightness: 104%;
  --fq-img-contrast: 96%;

  --fq-label-color: var(--fq-accent);
  --fq-label-size: clamp(20px, 2.4vw, 34px);
  --fq-label-weight: 800;
  --fq-label-tracking: 0.06em;

  /* L0 Innenabstand für Labels (Abstand zu den orangen Borders) */
  --fq-l0-pad-x: clamp(20px, 1.8vw, 36px);
  --fq-l0-pad-y: clamp(28px, 5vh, 80px);

  /* L0 Ghost-Titel (transparente Doppelung) */
  --fq-l0-ghost-color: rgba(0, 0, 0, 0.06);
  --fq-l0-ghost-size: clamp(40px, 7vw, 110px);

  --fq-header-height: 34vh;
  --fq-sidebar-width: clamp(220px, 22vw, 320px);
  --fq-subcat-width: clamp(200px, 18vw, 280px);

  /* aktiver Sidebar-Eintrag: transparenter orange-Schein */
  --fq-sidebar-active-bg: rgba(249, 136, 1, 0.10);

  /* Sidebar-Typografie (override-bar via Divi-Modul) */
  --fq-sidebar-font: var(--fq-font-head);
  --fq-sidebar-font-size: 17px;
  --fq-sidebar-font-weight: 600;
  --fq-sidebar-text-color: var(--fq-text-soft);
  --fq-sidebar-text-hover: var(--fq-text-bright);
  --fq-sidebar-text-active: var(--fq-text-bright);
  --fq-sidebar-tracking: 0.04em;
  --fq-sidebar-active-italic: italic;
  --fq-sidebar-uppercase: uppercase;
  --fq-sidebar-item-padding: 20px;

  position: relative;
  width: 100%;
  max-width: 100%;
  /* v0.10.10: Höhe adaptiert sich an L1-Content. Auf L0 (Bänder)
     bleibt 100vh fix (sieht jedes Band sauber als Fullscreen-Band).
     Auf L1 wird die Höhe vom Iframe-Content gesteuert — kein
     internes Scrolling mehr, Page selbst scrollt mit. */
  min-height: var(--fq-catalog-height, 100vh);
  background: var(--fq-l0-bg);
  color: var(--fq-text);
  font-family: var(--fq-font-body);
  font-size: var(--fq-fs-body);
  line-height: var(--fq-lh-body);
  outline: none;
}

/* L0 weiterhin auf fixer Viewport-Höhe — Bänder sollen Fullscreen sein */
.formatiq-catalog[data-active-layer="0"] {
  height: var(--fq-catalog-height, 100vh);
  overflow: hidden;
}
/* L1: Höhe auto, kein clipping → Iframe diktiert die Höhe */
.formatiq-catalog[data-active-layer="1"] {
  height: auto;
  overflow: visible;
}

.formatiq-catalog *,
.formatiq-catalog *::before,
.formatiq-catalog *::after { box-sizing: border-box; }

/* ============================================================
   Layer-Stack — L0 + L1
   ============================================================ */

/* v0.10.10: L0 absolute (Fullscreen-Bänder), L1 static (wächst mit Content) */
.fq-layer {
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fq-anim-ms) var(--fq-anim-easing);
}

/* L0 ist absolut positioniert auf 100vh — Bänder-Fullscreen */
.fq-layer--l0 {
  position: absolute;
  inset: 0;
}

/* L1 ist im normalen Flow — Höhe wird vom Content (Iframe) bestimmt */
.fq-layer--l1 {
  position: relative;
  width: 100%;
  display: none;  /* nur sichtbar wenn active */
}

.formatiq-catalog[data-active-layer="0"] .fq-layer--l0 {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.formatiq-catalog[data-active-layer="1"] .fq-layer--l1 {
  display: grid;  /* override display:none */
  opacity: 1;
  pointer-events: auto;
}
.formatiq-catalog[data-active-layer="1"] .fq-layer--l0 {
  display: none;  /* L0 raus damit es keine Lücke darüber gibt */
}

/* ============================================================
   L0 — Vertikale Bänder (Startseite)
   ============================================================ */

.fq-bands {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: var(--fq-l0-bg);
}

.fq-band {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  background: var(--fq-l0-bg);
  border: 0;
  padding: 0;
  /* orange Trennlinie rechts; letztes Band ohne */
  border-right: var(--fq-band-sep) solid var(--fq-accent);
  transition: flex-grow var(--fq-anim-ms) var(--fq-anim-easing);
}
.fq-band:last-child { border-right: 0; }

/* B&W-Bild oben — UNTEN per linear-gradient zur fade-color verblenden
   (statt mask-image, damit dunkle Page-Backgrounds nicht durchscheinen) */
.fq-band__img {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  filter:
    grayscale(var(--fq-img-grayscale))
    brightness(var(--fq-img-brightness))
    contrast(var(--fq-img-contrast));
}

/* Aktiver Fade-Overlay über dem Bild — der konkrete Gradient kommt
   vom VB-Modul (Richtung, Stops, Farbe einstellbar). Bei "Fade aus"
   liefert das Modul `transparent` → kein sichtbarer Fade. */
.fq-band__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fq-l0-fade);
  pointer-events: none;
}

.fq-band__img--empty {
  background: linear-gradient(180deg, #e8e8e4 0%, var(--fq-fade-color) 60%);
  filter: none;
}
.fq-band__img--empty::after { display: none; }

/* leichter Hover */
.fq-band:hover .fq-band__img {
  filter:
    grayscale(var(--fq-img-grayscale))
    brightness(calc(var(--fq-img-brightness) - 6%))
    contrast(var(--fq-img-contrast));
}

/* Padding-Container für Label + Ghost — schafft Innenabstand zu den
   orangen Borders ohne das Bild zu beschneiden */
.fq-band__inner {
  position: absolute;
  inset: 0;
  padding: var(--fq-l0-pad-y) var(--fq-l0-pad-x);
  pointer-events: none;
  z-index: 3;
}

/* Größere transparente Ghost-Kopie pro Band */
.fq-band__ghost {
  position: absolute;
  left: var(--fq-l0-pad-x);
  bottom: calc(var(--fq-l0-pad-y) + 0.3em);
  transform-origin: left bottom;
  transform: rotate(-90deg);
  font-family: var(--fq-font-head);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fq-l0-ghost-size);
  letter-spacing: 0.02em;
  color: var(--fq-l0-ghost-color);
  white-space: nowrap;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.formatiq-catalog[data-fq-l0-ghost="0"] .fq-band__ghost { display: none; }

/* Solides Label unten links, hochkant gedreht */
.fq-band__label {
  position: absolute;
  left: var(--fq-l0-pad-x);
  bottom: var(--fq-l0-pad-y);
  transform-origin: left bottom;
  transform: rotate(-90deg);
  font-family: var(--fq-font-head);
  font-weight: var(--fq-label-weight);
  font-style: italic;
  font-size: var(--fq-label-size);
  letter-spacing: var(--fq-label-tracking);
  text-transform: uppercase;
  color: var(--fq-label-color);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  z-index: 4;
}

.formatiq-catalog[data-fq-l0-labels="0"] .fq-band__label { display: none; }

/* "Blätter"-Animation beim Eintritt */
.fq-band[data-leaving="before"] { transform: translateX(-104%); opacity: 0; }
.fq-band[data-leaving="after"]  { transform: translateX(104%);  opacity: 0; }
.fq-band[data-leaving] {
  transition:
    transform var(--fq-anim-ms) var(--fq-anim-easing),
    opacity var(--fq-anim-ms) var(--fq-anim-easing);
}

/* ============================================================
   L1 — Finder-Layout (Header + Sidebars + Content)
   ============================================================ */

.fq-layer--l1 {
  display: grid;
  grid-template-rows: var(--fq-header-height) 1fr;
  grid-template-columns: var(--fq-sidebar-width) 1fr;
  grid-template-areas:
    "header header"
    "sidebar content";
  background: var(--fq-fade-color);
}

/* 3-Spalten-Variante: wenn ein Produkt Unterkategorien hat (Modifier
   wird vom JS am .formatiq-catalog gesetzt: data-fq-has-subcats="1") */
.formatiq-catalog[data-fq-has-subcats="1"] .fq-layer--l1 {
  grid-template-columns: var(--fq-sidebar-width) var(--fq-subcat-width) 1fr;
  grid-template-areas:
    "header header header"
    "sidebar subcats content";
}

/* ---------- Header-Banner ---------- */

.fq-cat-header {
  grid-area: header;
  position: relative;
  overflow: hidden;
  background: var(--fq-header-bg);
  border-bottom: var(--fq-band-sep) solid var(--fq-accent);
}

/* verblasstes Kategorie-Bild — gleiches Prinzip wie L0-Bänder */
.fq-cat-header__img {
  position: absolute;
  inset: 0;
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
  filter:
    grayscale(var(--fq-img-grayscale))
    brightness(calc(var(--fq-img-brightness) + 6%))
    contrast(var(--fq-img-contrast));
}
.fq-cat-header__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fq-header-fade);
  pointer-events: none;
}
.fq-cat-header__img--empty { background: transparent; filter: none; }
.fq-cat-header__img--empty::after { display: none; }

/* größere, transparente Ghost-Kopie des Titels */
.fq-cat-header__ghost {
  position: absolute;
  left: clamp(40px, 6vw, 130px);
  top: 50%;
  transform: translateY(-58%);
  font-family: var(--fq-font-head);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(56px, 11vw, 150px);
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* solider Kategorie-Titel + Pfeile */
.fq-cat-header__bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  padding: 0 clamp(20px, 4vw, 64px);
  z-index: 3;
}

.fq-cat-header__title {
  margin: 0;
  font-family: var(--fq-font-head);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 60px);
  letter-spacing: 0.01em;
  color: var(--fq-accent);
  line-height: 1;
}

.fq-cat-arrow {
  flex: 0 0 auto;
  width: clamp(32px, 3vw, 46px);
  height: clamp(32px, 3vw, 46px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fq-accent);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--fq-anim-ms), opacity var(--fq-anim-ms);
}
.fq-cat-arrow:hover { transform: scale(1.18); }
.fq-cat-arrow:disabled { opacity: 0.25; cursor: default; transform: none; }
.fq-cat-arrow--next { margin-left: auto; }

.formatiq-catalog[data-fq-cat-arrows="0"] .fq-cat-arrow { display: none; }

/* ---------- Sidebars (Produkte + optional Unterkategorien) ---------- */

.fq-sidebar,
.fq-subcats {
  display: flex;
  flex-direction: column;
  /* v0.10.10: kein internal-scroll mehr — Sidebar wächst mit Content,
     Page scrollt extern. */
  background: var(--fq-fade-color);
  border-right: var(--fq-band-sep) solid var(--fq-accent);
}
.fq-sidebar { grid-area: sidebar; }
.fq-subcats { grid-area: subcats; }

/* Subcats-Spalte ist standardmäßig versteckt; wird per Modifier sichtbar */
.fq-subcats { display: none; }
.formatiq-catalog[data-fq-has-subcats="1"] .fq-subcats { display: flex; }

.fq-sidebar__item,
.fq-subcats__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--fq-sidebar-item-padding) var(--fq-sidebar-item-padding);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fq-accent);
  color: var(--fq-sidebar-text-color);
  font-family: var(--fq-sidebar-font);
  font-weight: var(--fq-sidebar-font-weight);
  font-size: var(--fq-sidebar-font-size);
  text-transform: var(--fq-sidebar-uppercase);
  letter-spacing: var(--fq-sidebar-tracking);
  cursor: pointer;
  transition: background var(--fq-anim-ms), color var(--fq-anim-ms);
}
.fq-sidebar__item:last-child,
.fq-subcats__item:last-child { border-bottom: 0; }

.fq-sidebar__item:hover,
.fq-subcats__item:hover {
  background: var(--fq-sidebar-active-bg);
  color: var(--fq-sidebar-text-hover);
}

/* aktiver Eintrag — Typografie aus VB-Settings */
.fq-sidebar__item--active,
.fq-subcats__item--active {
  font-weight: 800;
  font-style: var(--fq-sidebar-active-italic);
  color: var(--fq-sidebar-text-active);
  background: var(--fq-sidebar-active-bg);
}

.fq-sidebar__empty,
.fq-subcats__empty {
  padding: 24px;
  color: var(--fq-text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Content-Panel ---------- */

.fq-content {
  grid-area: content;
  /* v0.10.10: kein internal scroll — Iframe diktiert die Höhe,
     Page-Scroll übernimmt. */
  overflow: visible;
  background: var(--fq-fade-color);
  position: relative;
}

.fq-content__inner { min-height: 100%; }

.fq-content__inner > .et-l,
.fq-content__inner > .et_builder_inner_content { width: 100%; }

/* v0.10.4: Iframe-Mode für Produkt-Content — nutzt die echte
   Single-Permalink-URL des Items mit ?formatiq_embed=1 damit alle
   Divi-Assets sauber geladen werden.
   v0.10.10: min-height auf 300px reduziert (Initial-Load-Visual);
   Höhe wird per postMessage vom Iframe selbst gesetzt. */
.fq-content__iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

.fq-content__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px;
  text-align: center;
  color: var(--fq-text-muted);
}
.fq-content__placeholder-title {
  font-family: var(--fq-font-head);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 18px;
  color: var(--fq-accent);
  margin-bottom: 10px;
}

.fq-content.is-loading .fq-content__inner { opacity: 0.35; transition: opacity 160ms; }

.fq-content__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid var(--fq-accent-soft);
  border-top-color: var(--fq-accent);
  border-radius: 50%;
  animation: fq-spin 720ms linear infinite;
  display: none;
  z-index: 5;
}
.fq-content.is-loading .fq-content__spinner { display: block; }

@keyframes fq-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Empty-State
   ============================================================ */

.fq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 60px 24px;
  color: var(--fq-text-muted);
  background: var(--fq-fade-color);
}
.fq-empty__title {
  font-family: var(--fq-font-head);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fq-accent);
  font-size: 16px;
  margin-bottom: 10px;
}

/* ============================================================
   Responsive — Mobile: Bänder gestapelt, L1 einspaltig
   ============================================================ */

@media (max-width: 860px) {
  .formatiq-catalog { --fq-header-height: 26vh; }

  .fq-bands { flex-direction: column; }
  .fq-band {
    border-right: 0;
    border-bottom: var(--fq-band-sep) solid var(--fq-accent);
  }
  .fq-band:last-child { border-bottom: 0; }
  /* Auf Mobile-Stacked die Default-Richtung horizontal anpassen, aber
     nur wenn das Modul keinen eigenen Fade definiert hat. VB-Werte
     gewinnen via Specificity (Modul setzt --fq-l0-fade direkt am
     .formatiq-catalog). */
  .fq-band__img::after {
    background: var(--fq-l0-fade);
  }
  .fq-band__label,
  .fq-band__ghost {
    transform: none;
    left: clamp(16px, 4vw, 32px);
    bottom: auto;
    top: 50%;
    margin-top: -0.5em;
  }
  .fq-band__ghost { color: var(--fq-l0-ghost-color); }

  .fq-layer--l1,
  .formatiq-catalog[data-fq-has-subcats="1"] .fq-layer--l1 {
    grid-template-rows: var(--fq-header-height) auto auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "subcats"
      "content";
  }
  .fq-sidebar,
  .fq-subcats {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: var(--fq-band-sep) solid var(--fq-accent);
  }
  .fq-sidebar__item,
  .fq-subcats__item {
    flex: 0 0 auto;
    border-bottom: 0;
    border-right: 1px solid var(--fq-accent);
    white-space: nowrap;
  }
  .fq-sidebar__item:last-child,
  .fq-subcats__item:last-child { border-right: 0; }
}

/* ============================================================
   Divi-Visual-Builder
   ============================================================ */

.et-fb .formatiq-catalog,
body.et-db .formatiq-catalog { min-height: 560px; }

@media (prefers-reduced-motion: reduce) {
  .fq-layer, .fq-band, .fq-band__img, .fq-cat-arrow { transition: none !important; }
  .fq-content__spinner { animation: none; }
}

/* ============================================================
   Auto-Floating Anfragen-Button (v0.10.20)
   Sticky am unteren Rand des Katalog-Containers. Bleibt beim
   Scrollen mittig am Viewport, beim Herausscrollen am unteren
   Katalog-Rand. Wird vom JS angezeigt wenn der aktuelle
   Iframe-Eintrag KEINEN manuellen Anfrage-Button-Modul enthält.
   ============================================================ */

.formatiq-catalog { position: relative; }

.formatiq-auto-inquiry {
  position: sticky;
  bottom: 50px;
  z-index: 50;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* Belegt keine Vertikalfläche im Layout — overlay only.
     margin-bottom 50px: garantiert „min 50px zum Katalog-Ende"
     wenn die Sticky-Position releast (= Katalog scrollt heraus). */
  margin-top: -64px;
  margin-bottom: 50px;
  padding: 0 16px;
}
.formatiq-auto-inquiry > button {
  pointer-events: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.formatiq-auto-inquiry[hidden] { display: none; }
/* L0 (Cover-Flow) hat keine Produkte zum Anfragen — Button ausblenden. */
.formatiq-catalog[data-active-layer="0"] .formatiq-auto-inquiry { display: none; }

@media (max-width: 640px) {
  .formatiq-auto-inquiry { bottom: 50px; margin-top: -56px; margin-bottom: 50px; padding: 0 12px; }
}