/* ==========================================================================
   Il Rifugio Sospeso — styles.css  (Bootstrap 5 è già incluso in index.php)
   - Copertine zero-crop (nessun taglio) in contenitore 2:3
   - Flip retro: hover/tastiera SOLO desktop (.is-flipped)
   - Mobile < lg: niente back-cover e niente flip
   - Barra specifiche desktop sotto ogni cover
   - Logo SVG inline (currentColor), accessibilità, micro-animazioni
   ========================================================================== */

:root{
  --brand:        #e7a100;   /* ambra caldo ispirata alla copertina */
  --logo:         #C6B08F;   /* beige caldo per il logo (currentColor) */
  --ink:          #1a1a1a;   /* testo principale */
  --muted:        #6b7280;   /* testo attenuato */
  --amz-yellow:   #ffd814;   /* giallo Amazon */
  --amz-border:   #d6ae00;   /* bordo Amazon */
  --card-border:  #e7e7e7;
  --card-shadow:  0 6px 18px rgba(0,0,0,.06);
  --radius:       .5rem;
}

/* Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ color: var(--ink); font-feature-settings: "liga","kern"; }
.hero-title{ letter-spacing:.2px; }
.text-body-secondary{ color: var(--muted) !important; }

/* Logo (supporta SVG inline: <span class="logo"><svg>… */
.logo{
  width: 36px; height: 36px;
  display: inline-block;
  line-height: 0;
}
.logo svg{
  width: 100%; height: 100%;
  display: block;
  color: var(--logo);              /* stroke/fill = currentColor nello SVG */
}
@media (min-width: 992px){
  .logo{ width: 48px; height: 48px; }
}
.bg-dark .logo svg, .header-dark .logo svg{ color:#ffffff; }

/* Header / Nav */
header .link-dark{ text-decoration:none; }
header .link-dark:hover{ text-decoration:underline; }

/* Pulsante Amazon */
.btn-amz{
  background: var(--amz-yellow);
  border-color: var(--amz-border);
  color:#000;
  font-weight:700;
}
.btn-amz:hover,
.btn-amz:focus{
  filter:brightness(.98);
  color:#000;
  border-color:var(--amz-border);
}
.btn-amz:focus-visible{
  outline: 3px solid rgba(231,161,0,.4);
  outline-offset: 2px;
}

/* Card varianti */
.card-variant{
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-variant:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* =========================
   Copertine: ZERO TAGLIO
   ========================= */
.cover-wrap{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: default;                           /* di base: nessuna interazione */
  outline: none;
  -webkit-tap-highlight-color: transparent;  /* evita flash blu su iOS */
  contain: paint;                            /* micro-ottimizzazione rendering */
}
.cover-wrap.has-back{ cursor: pointer; }     /* se esiste il retro, mostra mano */
.cover-wrap:focus-visible{
  box-shadow: 0 0 0 3px rgba(231,161,0,.35); /* focus ring compatibile */
}
.cover-wrap picture{ display:block; }

.cover-img{
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;       /* contenitore uniforme */
  object-fit: contain;        /* mostra sempre l’immagine intera */
  background:#fff;            /* bande neutre se il rapporto differisce */
  border:1px solid #eee;
  border-radius: var(--radius);
  transition: opacity .22s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
  will-change: opacity;
}

/* Front/Back allineati */
.cover-wrap picture.front img,
.cover-wrap picture.back img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 2 / 3;
}

/* Livello BACK (retro) */
.cover-wrap picture.back{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Stati di flip: attivali SOLO se c'è il retro (.has-back) */
.cover-wrap.has-back:hover picture.back,
.cover-wrap.has-back:focus-within picture.back,
.cover-wrap.has-back.is-flipped picture.back{ opacity: 1; }
.cover-wrap.has-back:hover picture.front img,
.cover-wrap.has-back:focus-within picture.front img,
.cover-wrap.has-back.is-flipped picture.front img{ opacity: 0; }

/* Altezza coerente del riquadro immagine nelle card */
.card-variant .p-2{
  min-height: clamp(300px, 40vw, 360px);
  display: flex; align-items: center; justify-content: center;
}

/* Hero: zero-crop coerente */
section .cover-wrap .cover-img{
  object-fit: contain;
  aspect-ratio: 2 / 3;
  border-color: var(--card-border);
}

/* Tabella comparativa */
.table-variants th, .table-variants td{ vertical-align: middle; }
.table-variants thead th{ background:#fafafa; }
.footer-note{ color: var(--muted); font-size:.95rem; }

/* Link titolo card (niente stretched-link per non coprire la cover) */
.card-variant .text-decoration-none{ color:inherit; }
.card-variant .text-decoration-none:hover{ color:var(--ink); text-decoration:underline; }

/* -------------------------------------------------
   Barra specifiche DESKTOP "attaccata" alla cover
   ------------------------------------------------- */
.specs-desktop .price{ color: var(--ink); }
.specs-desktop .dot{ opacity:.45; }
@media (min-width: 992px){
  .card-variant .p-2{ padding-bottom: .5rem !important; } /* accorcia gap */
  .specs-desktop{ margin-top: .25rem; }
}

/* -------------------------------------------------
   Accessibilità / Preferenze utente: meno animazioni
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .card-variant,
  .cover-img,
  .cover-wrap picture.back{ transition:none !important; }
}

/* -------------------------------------------------
   Mobile (< lg): UI snella, niente back-cover/flip
   ------------------------------------------------- */
@media (max-width: 991.98px){
  .cover-wrap{ cursor: default; }
  .cover-wrap.has-back .back{ display: none !important; } /* nasconde i retro */
  .cover-wrap.has-back:hover picture.front img,
  .cover-wrap.has-back:focus-within picture.front img,
  .cover-wrap.has-back.is-flipped picture.front img{ opacity: 1 !important; } /* neutralizza flip */
  .card-variant .p-2{ min-height: 240px; } /* area immagine più compatta */
}

/* Mini-scheda specifiche (solo mobile, vedi HTML .d-lg-none) */
.mini-specs{ display:grid; grid-template-columns: auto 1fr; gap:.15rem .5rem; }
.mini-specs dt{ margin:0; font-weight:600; color:#4b5563; }
.mini-specs dd{ margin:0; }
.mini-specs > div{ display:contents; } /* mantiene semantica dl/dt/dd in grid */

/* Responsive finezze */
@media (max-width:576px){
  .footer-note{ font-size:.9rem; }
  .card-variant .p-2{ min-height: 320px; } /* per telefoni molto piccoli */
}