/* ============================================================
 * LIGHTBOX — visualizador fullscreen com zoom e navegação.
 * Escopado sob .lb-. Herda tokens da marca. Progressive
 * enhancement: sem JS, as imagens são só thumbnails normais.
 * ============================================================ */
@layer components {
  .lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 300; /* acima de tudo: header 100, wa/assistant 92, menu 102 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, #000 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--ease-out), visibility 0ms linear 260ms;
    touch-action: none;
    padding: max(1rem, env(safe-area-inset-top)) 1rem
             max(1rem, env(safe-area-inset-bottom));
  }
  .lb-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms var(--ease-out), visibility 0ms linear 0ms;
  }

  /* Palco: onde a imagem vive e recebe o zoom/pan */
  .lb-stage {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .lb-img {
    max-inline-size: 100%;
    max-block-size: 100%;
    /* IMAGEM INTEIRA, sem corte, proporção preservada */
    object-fit: contain;
    inline-size: auto;
    block-size: auto;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    transform-origin: center center;
    transition: transform 220ms var(--ease-out);
    will-change: transform;
    cursor: zoom-in;
    border-radius: var(--r-sm);
    box-shadow: 0 24px 80px -20px rgba(0,0,0,0.8);
  }
  .lb-img.is-zoomed { cursor: grab; }
  .lb-img.is-panning { cursor: grabbing; transition: none; }
  /* Entrada sutil da imagem ao trocar */
  .lb-img.is-entering {
    animation: lb-img-in 300ms var(--ease-out) both;
  }
  @keyframes lb-img-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Legenda (nome + Antes/Depois) */
  .lb-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    text-align: center;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    padding-inline: 4rem;
  }
  .lb-caption b { color: var(--brand-hot); font-weight: 700; }

  /* Botões (fechar / prev / next / zoom) */
  .lb-btn {
    position: absolute;
    z-index: 2;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
    border-radius: 50%;
    background: color-mix(in oklab, #000 55%, transparent);
    color: var(--fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
  }
  .lb-btn:hover {
    background: color-mix(in oklab, var(--brand) 40%, #000);
    border-color: var(--brand);
    transform: scale(1.06);
  }
  .lb-btn:active { transform: scale(0.96); }
  .lb-btn:focus-visible { outline: 2px solid var(--brand-hot); outline-offset: 3px; }
  .lb-btn svg { inline-size: 22px; block-size: 22px; }
  .lb-btn[hidden] { display: none; }

  .lb-close { inset-block-start: max(1rem, env(safe-area-inset-top)); inset-inline-end: 1rem; }
  .lb-prev  { inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
  .lb-next  { inset-inline-end: 1rem;  inset-block-start: 50%; transform: translateY(-50%); }
  .lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
  .lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.96); }

  /* Contador (1 / 6) */
  .lb-counter {
    position: absolute;
    inset-block-start: max(1rem, env(safe-area-inset-top));
    inset-inline-start: 1rem;
    z-index: 2;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    background: color-mix(in oklab, #000 55%, transparent);
    color: var(--fg);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Dica de zoom (some após 1ª interação) */
  .lb-hint {
    position: absolute;
    inset-block-start: max(1rem, env(safe-area-inset-top));
    inset-inline: 0;
    text-align: center;
    color: color-mix(in oklab, var(--fg) 60%, transparent);
    font-size: var(--fs-xs);
    pointer-events: none;
    transition: opacity 300ms ease;
  }
  .lb-hint[hidden] { display: none; }

  /* Miniaturas clicáveis no card ganham cursor/hover de "abrir" */
  [data-lightbox] {
    cursor: zoom-in;
    transition: filter 200ms ease;
  }
  .aluno__media > div:hover [data-lightbox] { filter: brightness(1.05); }

  /* Botão de zoom no mobile (desktop usa scroll/click) */
  .lb-zoom {
    inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 3.5rem);
    inset-inline-end: 1rem;
  }

  @media (max-width: 640px) {
    .lb-btn { inline-size: 44px; block-size: 44px; }
    .lb-prev { inset-inline-start: 0.5rem; }
    .lb-next { inset-inline-end: 0.5rem; }
    .lb-caption { padding-inline: 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lb-overlay, .lb-img, .lb-btn { transition: opacity 120ms linear; }
    .lb-img.is-entering { animation: none; }
  }
}

/* Trava o scroll do body enquanto o lightbox está aberto */
body.lb-lock { overflow: hidden; touch-action: none; }