/* =========================================================================
   ITALFOOD WIDGETS — Registro Catalogo
   Blocco estratto invariato da italfood-skill.css (righe 293-374, sezione
   "REGISTRO MONUMENTALE"). Presuppone --verde, --terra, --pietra, --hair,
   --hair-strong, --ink-muted, --ink-faint già definite dal tema/sito.
   Nessuna nuova animazione: motion limitato a transform/opacity già esistenti.
   ========================================================================= */

.register { border-top: 1px solid var(--verde); }

.reg-row { border-bottom: 1px solid var(--hair); }
.reg-row:last-child { border-bottom: 1px solid var(--verde); }

.reg-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num meta";
  column-gap: clamp(14px, 3vw, 40px);
  row-gap: 6px;
  align-items: baseline;
  padding: clamp(22px, 4vw, 44px) 0;
  position: relative;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), padding-left .28s cubic-bezier(.2,.7,.2,1);
}
.reg-num {
  grid-area: num;
  font-family: "JetBrains Mono", monospace; font-weight: 500;
  font-size: clamp(12px, 1.6vw, 15px);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding-top: 0.55em;
  min-width: 2.2ch;
}
.reg-name {
  grid-area: name;
  font-family: "Cormorant", Georgia, serif; font-weight: 600;
  font-size: clamp(40px, 11.5vw, 116px); line-height: 0.92;
  letter-spacing: -0.02em;
}
.reg-meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.reg-origin {
  font-size: 13px; color: var(--ink-muted); max-width: 48ch;
}
.reg-count {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--ink-muted); letter-spacing: 0.04em;
}
.reg-open {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--verde); opacity: 0; transform: translateX(-6px);
  transition: opacity .28s, transform .28s;
}
@media (min-width: 768px) {
  .reg-link {
    grid-template-columns: 3.2ch 1fr auto;
    grid-template-areas: "num name count";
    align-items: baseline;
  }
  .reg-meta { display: none; }
  .reg-name-sub {
    display: block; font-family: "DM Sans", sans-serif; font-weight: 400;
    font-size: 13px; letter-spacing: 0; color: var(--ink-muted);
    margin-top: 12px; max-width: 52ch;
  }
  .reg-count-d {
    grid-area: count; align-self: baseline;
    font-family: "JetBrains Mono", monospace; font-size: 13px;
    color: var(--ink-muted); letter-spacing: 0.04em; white-space: nowrap;
    padding-top: 0.6em;
  }
}
@media (max-width: 767px){ .reg-name-sub, .reg-count-d { display: none; } }

/* hover: la riga avanza, il numero entra nel margine, compare apri */
@media (hover: hover) and (min-width: 768px) {
  .reg-row:hover .reg-link { padding-left: clamp(12px, 2vw, 28px); }
  .reg-row:hover .reg-open { opacity: 1; transform: translateX(0); }
}
.reg-row--soon .reg-link { cursor: default; }
.reg-row--soon .reg-name { color: var(--ink-faint); }
.reg-soon {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--hair-strong); padding: 4px 8px; white-space: nowrap;
}

/* =========================================================================
   COMPLETAMENTO PLUGIN — posizionamento di .reg-open
   .reg-open esiste nel CSS di riferimento (sopra) ma non è mai stato
   collegato a un'area della grid: nel markup originale del sito non
   compariva mai dentro .reg-link, quindi senza grid-area sarebbe stato
   posizionato dall'auto-placement della grid, sovrapponendosi o spostando
   .reg-count-d. Qui il widget lo renderizza come elemento FRATELLO di
   .reg-meta (non al suo interno: .reg-meta è display:none da 768px in su,
   e l'hover "apri il catalogo" è un'eccezione di motion riservata al
   desktop, quindi non avrebbe mai potuto comparire se annidato lì dentro).
   Su mobile (<768px) non esiste alcuna area utile per .reg-open (l'hover
   non si applica, niente "hover: hover" sotto 768px) quindi resta nascosto.
   Su desktop si aggiunge una quarta colonna/area "open" dopo "count":
   .reg-count-d resta sull'area "count" originale, invariata e non spostata.
   ========================================================================= */
.reg-open { display: none; }

@media (min-width: 768px) {
  .reg-link {
    grid-template-columns: 3.2ch 1fr auto auto;
    grid-template-areas: "num name count open";
  }
  .reg-open {
    display: inline-flex;
    align-items: baseline;
    grid-area: open;
    align-self: baseline;
    padding-top: 0.6em;
    margin-left: clamp(8px, 1.6vw, 20px);
    white-space: nowrap;
  }
}

/* ============================================================
   ANTEPRIMA AL PASSAGGIO

   Il livello e' nascosto ma non staccato dal flusso di rete: le
   immagini si scaricano al caricamento della pagina, non al primo
   passaggio del mouse. Con `display: none` alcuni browser rimandano
   la richiesta, e la prima riga sfiorata mostrerebbe un rettangolo
   vuoto per il tempo del download.

   Tutte le immagini stanno impilate nello stesso livello e si
   accendono a turno. Cambiare `src` a un'unica immagine darebbe uno
   sfarfallio a ogni riga.
   ============================================================ */

.reg-peek{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;

  /* Non deve mai intercettare il puntatore: se lo facesse, entrando
     sotto al cursore uscirebbe dalla riga, si spegnerebbe, la riga
     tornerebbe sotto al cursore e si riaccenderebbe. Un lampeggio
     senza fine. */
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  will-change: transform;
}

.reg-peek.is-visibile{
  opacity: 1;
  visibility: visible;
}

.reg-peek__slot{
  position: relative;
  width: var(--reg-peek-w, 280px);
  aspect-ratio: var(--reg-peek-ar, 4 / 3);
  overflow: hidden;
}

.reg-peek__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;

  opacity: 0;
  transform: scale(1.04);
  transition: opacity .28s ease, transform .45s ease;
}

.reg-peek__img.is-attiva{
  opacity: 1;
  transform: scale(1);
}

/* Sotto i 768px e su schermi a tocco l'anteprima non esiste: il JS
   non parte nemmeno, ma il livello resta nel DOM e va tenuto muto. */
@media (max-width: 767px), (hover: none), (pointer: coarse){
  .reg-peek{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .reg-peek,
  .reg-peek__img{ transition: none; }
  .reg-peek__img{ transform: none; }
}