/* Popup content for the griglia-modelli block (SweetAlert2 renders this markup
   into document.body, outside Angular's component style encapsulation, so
   these rules have to live in a global stylesheet). Reuses the weyhoo-official
   design tokens from critical.css (--brand-*, --ink-*, --r-*, --shadow-*) so
   the popup reads as part of the site instead of a generic library dialog. */

/* SweetAlert2 v11 themes its backdrop through this custom property (the
   .swal2-container class itself is forced transparent) — overriding the
   token is the supported way in, rather than fighting !important rules. */
:root { --swal2-backdrop: rgba(24, 18, 14, .72); }

.wy-popup {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  font-family: var(--font-body);
}

/* SweetAlert2's default close button restyled as a circular ghost button,
   matching .btn-ghost's border/hover language instead of the library's
   plain gray "×". Sits on both the white iframe chrome and the dark gallery
   canvas, so it needs its own backdrop rather than inheriting either. */
.wy-popup > .swal2-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.wy-popup > .swal2-close:hover {
  background: var(--brand-050);
  color: var(--brand-600);
  border-color: var(--brand-200);
  transform: scale(1.06);
}
.wy-popup > .swal2-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* SweetAlert2 pads/centers .swal2-html-container by default (--swal2-html-container-padding) —
   zeroed here so the iframe/gallery fill the popup edge-to-edge with no gap. */
.wy-popup .swal2-html-container { margin: 0; padding: 0; }

.wy-popup-iframe { display: block; width: 100%; height: 70vh; border: 0; background: var(--paper); }

.wy-popup-gallery { position: relative; background: var(--ink-950); line-height: 0; }
.wy-popup-gallery-img { display: block; width: 100%; max-height: 80vh; object-fit: contain; }

.wy-popup-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  background: rgba(34, 26, 20, .55);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.wy-popup-gallery-nav:hover { background: var(--brand-600); border-color: var(--brand-600); }
.wy-popup-gallery-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-100); }
.wy-popup-gallery-prev { left: 16px; }
.wy-popup-gallery-next { right: 16px; }

/* Below ~640px (phones) a centered card just shrinks the demo down further —
   the popup takes over the full viewport instead, like a real full-screen
   preview rather than a squeezed-down window. `!important` is needed because
   `width`/`height` land as an inline style from the Swal.fire() call options;
   per spec an author !important rule still wins over a non-!important inline
   style. */
@media (max-width: 640px) {
  .swal2-container { --swal2-container-padding: 0; }

  .wy-popup {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .wy-popup .swal2-html-container { height: 100%; }

  .wy-popup-iframe { height: 100dvh; }

  .wy-popup-gallery {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wy-popup-gallery-img { max-height: 100dvh; }
}