/*
  AJW Popups – Lightbox-look & feel
  Ziel: identische "Sprache" wie AJW Media Lightbox (Blur + Fade, Close oben rechts)
*/

body.ajw-popup-open { overflow: hidden; }

/* Trigger: Cursor als "klickbar" anzeigen – auch wenn der Trigger ein Container (Row/Gruppe/Spalte) ist.
   Wichtig: Cursor wird pro Element unter der Maus berechnet, daher auch für Kinder setzen. */
body:not(.block-editor-page) [data-ajw-popup-trigger] { cursor: pointer; }
body:not(.block-editor-page) [data-ajw-popup-trigger] * { cursor: pointer; }

/* Optional: falls du innerhalb eines Triggers echte Form-Inputs nutzt, fühlt sich Text-Cursor besser an */
body:not(.block-editor-page) [data-ajw-popup-trigger] input,
body:not(.block-editor-page) [data-ajw-popup-trigger] textarea { cursor: text; }

/* Popup-Quell-Container im Frontend verstecken (aber im Editor sichtbar lassen).
   Wichtig: sobald gemountet, NICHT verstecken (sonst leerer Popup-Inhalt). */
body:not(.block-editor-page) .ajw-popup-source[data-ajw-popup-content]:not([data-ajw-popup-mounted="1"]) {
  display: none !important;
}

:root{
  /*
    Safe-Side ist der "Luft"-Abstand, der in Berechnungen (Dialogbreite, wide-size Fallback)
    verwendet wird. Wichtig: Nicht zu groß wählen – sonst wirkt der Popup-Inhalt
    (gerade bei 2-Spalten-Layouts) unnötig "verschmälert".
  */
  --ajw-popup-safe-side: clamp(24px, 4vw, 72px);
}

/* Overlay – bewusst sehr nah an der AJW Lightbox */
.ajw-popup-overlay{
  position: fixed; inset: 0; z-index: 999999;
  display: block; padding: 24px;
  color: #fff;

  opacity: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition:
    opacity 260ms ease,
    background 260ms ease,
    backdrop-filter 260ms ease,
    -webkit-backdrop-filter 260ms ease;
}
.ajw-popup-overlay.is-open{
  opacity: 1;
  background: rgba(0,0,0,0.50);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ajw-popup-overlay.is-closing{
  opacity: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.ajw-popup-center{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 1;
}

.ajw-popup-dialog{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: min(100%, calc(100vw - var(--ajw-popup-safe-side)));
  max-width: 100%; max-height: 100%;
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 1;
}
.ajw-popup-overlay.is-open .ajw-popup-dialog{ opacity: 1; }
.ajw-popup-overlay.is-closing .ajw-popup-dialog{ opacity: 0; }

.ajw-popup-stage{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}

/*
  Standardbreite im Popup:
  Der als Popup-Inhalt markierte Block (.ajw-popup-source) darf im Overlay nicht "shrink-to-fit"
  werden, sondern soll mindestens die globale Wide-Breite annehmen (so wie im normalen Layout).

  - alignfull bleibt unbegrenzt.
  - alle anderen Inhalte werden auf Wide-Size begrenzt und zentriert.
*/
.ajw-popup-content-wrap > .ajw-popup-source{
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ajw-popup-content-wrap > .ajw-popup-source:not(.alignfull):not([data-align="full"]) {
  max-width: var(--ajw-popup-wide-size);
}

.ajw-popup-content-wrap > .ajw-popup-source:where(.alignfull, [data-align="full"]) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Content Wrap: keine eigene Hintergrundfarbe – der Block/Gruppe bringt sein Styling selbst mit */
.ajw-popup-content-wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 96px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* WP Global Sizes – damit alignwide/alignfull im Popup konsistent funktionieren.
     Fallbacks greifen, wenn Theme/Classic Theme keine Variablen setzt. */
  --ajw-popup-content-size: var(--wp--style--global--content-size, 720px);
  --ajw-popup-wide-size: var(--wp--style--global--wide-size, min(1200px, calc(100vw - var(--ajw-popup-safe-side))));
}

/* Alignments im Popup (Theme-unabhängig):
   Viele Themes setzen alignwide/alignfull nur für .entry-content > .alignwide.
   Im Popup fehlt dieser Kontext – daher hier minimal nachrüsten, ohne Default-Blocks zu verändern. */
.ajw-popup-content-wrap :where(.alignwide, [data-align="wide"]) {
  width: 100%;
  max-width: var(--ajw-popup-wide-size);
  margin-left: auto;
  margin-right: auto;
}

.ajw-popup-content-wrap :where(.alignfull, [data-align="full"]) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Falls ein Block explizit "content"-breit sein soll (meist Default): */


/* Mobile Portrait (Handy Hochkant):
   - weniger Seitenrand, damit der Inhalt breiter wirken kann
   - mehr Abstand nach oben nur für den Popup-Inhalt (Close-Link bleibt fixiert) */
@media (max-width: 600px) and (orientation: portrait) {
  :root{ --ajw-popup-safe-side: 36px; }

  .ajw-popup-overlay{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 68px;   /* oben verdoppelt (Standard: 24px) */
    padding-bottom: 24px;
  }

  .ajw-popup-content-wrap{
    max-height: calc(100vh - 120px);
  }
}
/* Close: oben rechts, wie Lightbox */
.ajw-popup-close-link{
  z-index: 2147483647 !important;
  pointer-events: auto;

  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
}

/* Editor: Popup-Quelle/Trigger kenntlich machen */
.block-editor-page .ajw-popup-source[data-ajw-popup-content] {
  outline: 2px dashed rgba(30, 144, 255, 0.6);
  outline-offset: 4px;
}

.block-editor-page .ajw-popup-trigger[data-ajw-popup-trigger] {
  outline: 2px dashed rgba(255, 165, 0, 0.6);
  outline-offset: 3px;
}