.photo-gold-frame {
  border: 4px solid rgba(212, 175, 55, 0.72);
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.4);
  box-shadow:
    0 0 16px 2px rgba(212, 175, 55, 0.22),
    0 0 28px 4px rgba(212, 175, 55, 0.12);
  transition:
    transform 300ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.photo-gold-frame-interactive:hover,
.photo-gold-frame-interactive:focus-visible,
.photo-gold-frame-interactive:focus-within,
.photo-gold-frame-interactive:active {
  border-color: #d4af37;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.75),
    0 0 16px 2px rgba(212, 175, 55, 0.62),
    0 0 28px 4px rgba(212, 175, 55, 0.38);
}

/* No fade animations - instant open/close handled by Tailwind hidden/flex classes */

/* ── Gallery sheet: il "foglio" con bordo gold attorno alla gallery ── */
/* Su desktop rimane invariato; su mobile si smonta per risparmiare spazio */
@media (max-width: 767px) {
    .gallery-sheet-outer {
        border: none !important;
        background: transparent !important;
    }

    .gallery-sheet-inner {
        padding: 0 !important;
        border-top: none !important;
    }

    .gallery-sheet-grid {
        background: transparent !important;
        padding: 0 !important;
        gap: 1.5rem !important;
    }

    /* Su mobile i pulsanti Prev/Next spariscono: si naviga solo con lo swipe */
    #gallery-prev,
    #gallery-next {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   REGOLA UNIVERSALE — Copertina hero di ogni pagina modello
   La "gabbia" si adatta sempre all'altezza naturale della foto.
   Funziona automaticamente per qualsiasi pagina presente e futura.
   Nessun aspect-ratio fisso, nessun taglio. Come le card Perla/Dama che
   funzionano nel menu principale.
   ───────────────────────────────────────────────────────────────────────── */
.model-page-hero {
    aspect-ratio: unset !important;  /* annulla qualsiasi aspect-ratio inline o Tailwind */
    height: auto !important;         /* la gabbia segue la foto, non viceversa */
    width: 100%;
    display: block;
    background-color: #000;
    overflow: hidden;
    position: relative;
}

.model-page-hero > img {
    width: 100%;
    height: auto !important;         /* la foto definisce la propria altezza naturale */
    object-fit: contain;
    display: block;
    transition: transform 300ms ease;
}

/* Scalare le hero su schermi grandi: le rende più compatte (max 55% altezza schermo) evitando che sgranino */
@media (min-width: 1024px) {
    .model-page-hero > img {
        max-height: 55vh;
        width: auto;
        margin: 0 auto;
    }
}

/* Hover leggero sulla copertina */
.model-page-hero:hover > img,
.model-page-hero:focus-within > img {
    transform: scale(1.01);
}