/*
 * viewport-guard.css
 *
 * Lightbox bloquejant per resolució insuficient (<1000 × 1000 px CSS).
 * Disseny inspirat en el lightbox «Enllaç copiat!» de v4 (.programa-link-dialog),
 * però usant les tonalitats del primari v5 (verd teula) definides a tokens.css.
 *
 * Veure js/ui/viewport-guard.js per a la lògica, els tres casos i la casuïstica
 * completa que aquí només s'estila.
 */

.viewport-guard {
  position: fixed;
  inset: 0;
  /* Per sobre de tot (modal: variables, overlay peu i drawers queden per sota).
     Si mai s'afegeix algun overlay de sistema amb z-index superior, pujar aquí. */
  z-index: 10000;
}

.viewport-guard[hidden] {
  display: none !important;
}

body.viewport-guard-open {
  overflow: hidden;
}

.viewport-guard__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(var(--backdrop-rgb), var(--opacity-70));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.viewport-guard__dialog {
  width: min(420px, 100%);
  box-sizing: border-box;
  background: var(--card);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-primary-rgb), var(--opacity-15));
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
  box-shadow:
    0 24px 48px rgba(var(--shadow-rgb), 0.22),
    0 2px 6px rgba(var(--shadow-rgb), 0.08);
  animation: viewportGuardPop 0.32s var(--ease-smooth) both;
}

/* Cas A (device_too_small): mòbils petits (~320–480 px CSS). Dialog més estret
   i art i paddings una mica reduïts per no saturar la pantalla estreta. */
.viewport-guard[data-state="device_too_small"] .viewport-guard__dialog {
  width: min(320px, 100%);
  padding: var(--space-4) var(--space-3) var(--space-3);
}

.viewport-guard[data-state="device_too_small"] .viewport-guard__art {
  width: 96px;
  height: 96px;
}

@keyframes viewportGuardPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cercle decoratiu amb degradat en tonalitats del primari v5 (verd teula).
   Mateix esquema que .programa-link-dialog-badge de v4, adaptat a 120 px. */
.viewport-guard__art {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-primary-rgb));
  background: radial-gradient(
    circle at 30% 28%,
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 22%, #fff) 0%,
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 10%, #fff) 55%,
    color-mix(in srgb, rgb(var(--color-primary-rgb)) 4%, #fff) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(var(--color-primary-rgb), var(--opacity-20)),
    0 8px 22px rgba(var(--color-primary-rgb), 0.18);
  animation: viewportGuardBadgePop 0.5s var(--ease-smooth) 0.05s both;
}

@keyframes viewportGuardBadgePop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.viewport-guard__art svg {
  filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.25));
}

.viewport-guard__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-2xl);
  font-weight: 900;
  color: var(--color-primary-strong);
  letter-spacing: 0.2px;
}

.viewport-guard__text {
  margin: 0 0 var(--space-3);
  font-size: var(--font-md);
  line-height: 1.45;
  color: var(--ink);
}

.viewport-guard__hint {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .viewport-guard__dialog,
  .viewport-guard__art {
    animation: none;
  }
}