/* ============================================================
   PRATOROSSO — custom.css
   Stili per le sezioni create/personalizzate dal pannello admin
   ============================================================ */

/* sezione con sfondo personalizzato */
section.has-custom-bg { background-size: cover; background-position: center; }

/* testi chiari su sfondi scuri */
section.sec-dark .section-title { color: var(--white); }
section.sec-dark .section-desc { color: rgba(255, 255, 255, .82); }
section.sec-dark .section-label { color: var(--gold-light); }
section.sec-dark .custom-text-body { color: rgba(255, 255, 255, .88); }
section.sec-dark .btab:not(.active),
section.sec-dark .tab-btn:not(.active),
section.sec-dark .dtab:not(.active) { background: rgba(255, 255, 255, .9); }

/* ── blocco testo + immagine ── */
.custom-text-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1100px;
}
.custom-text-layout.no-image { grid-template-columns: 1fr; max-width: 760px; }
.custom-text-layout.img-left .custom-text-img { order: -1; }
.custom-text-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-light);
  white-space: pre-line;
  margin-bottom: 1.6rem;
}
.custom-text-img img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
}

/* ── galleria foto ── */
.custom-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.gallery-item {
  position: relative;
  border: none;
  padding: 0;
  cursor: zoom-in;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream-dark);
  box-shadow: var(--shadow);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .6rem .8rem;
  font-size: .8rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
}

@media (max-width: 900px) {
  .custom-text-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .custom-text-layout.img-left .custom-text-img { order: 0; }
  .custom-gallery { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}

/* ============================================================
   MIGLIORAMENTI GRAFICI (sovrascrivono style.css senza modificarlo)
   ============================================================ */

/* 1. su telefono la foto del tab diventa una fascia compatta: prodotti e prezzi subito visibili */
@media (max-width: 768px) {
  .menu-panel-img img { height: 200px; object-fit: cover; }
}

/* 3. locandine degli eventi mostrate intere, senza tagli */
.evento-img {
  aspect-ratio: auto;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: var(--green-dark);
}

/* 4. contrasto: orari nel riquadro scuro e testi del footer */
.orari-card.weekend .orari-time:not(.badge):not(.chiuso) { color: rgba(247, 244, 229, .88); }
.orari-card.weekend .orari-time.chiuso { color: rgba(247, 244, 229, .6); }
.orari-card.weekend .orari-row { border-bottom-color: rgba(247, 244, 229, .1); }
footer { color: rgba(247, 244, 229, .78); }
.footer-col p, .footer-col a { color: rgba(247, 244, 229, .78); }
.footer-bottom { color: rgba(247, 244, 229, .62); }

/* 5. tab scorrevoli su telefono: sfumatura sul bordo quando ci sono altri tab */
@media (max-width: 768px) {
  .tabs-more-end {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .tabs-more-start.tabs-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent);
  }
  .tabs-more-start:not(.tabs-more-end) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
            mask-image: linear-gradient(to right, transparent, #000 12%);
  }
}

/* 6. voce del menu della sezione in cui ti trovi */
.nav-links a { position: relative; }
.nav-links a.active { color: var(--gold-light); }
@media (min-width: 769px) {
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-light);
    transform: scaleX(0);
    transition: transform .25s ease;
  }
  .nav-links a.active::after { transform: scaleX(1); }
}

/* 7. schede: leggero sollevamento al passaggio del mouse (solo dispositivi con mouse) */
.birra-card, .panino-card, .cocktail-card {
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
@media (hover: hover) {
  .birra-card:hover, .panino-card:hover, .cocktail-card:hover { box-shadow: var(--shadow-lg); }
  .birra-card:hover { border-left-color: var(--gold); transform: translateX(4px); }
}

/* 8. mappa coerente con le altre schede */
.map-placeholder {
  border-radius: var(--radius);
  border: 4px solid var(--white);
  background: var(--white);
}
.map-placeholder iframe { border-radius: calc(var(--radius) - 4px) !important; }

@media (prefers-reduced-motion: reduce) {
  .birra-card, .panino-card, .cocktail-card, .nav-links a::after { transition: none; }
}

/* ============================================================
   STABILITÀ IMMAGINI E DETTAGLI PREMIUM
   ============================================================ */

/* niente "salto" delle foto di copertina: restano invisibili finché
   render.js non ha applicato quelle scelte nell'admin, poi compaiono in dissolvenza */
img[data-cover] { transition: opacity .35s ease; }
html.js-wait img[data-cover] { opacity: 0; }

/* le foto compaiono in dissolvenza quando sono caricate, su uno sfondo neutro */
.menu-panel-img, .custom-text-img, .item-thumb-wrap, .gallery-item { background-color: var(--cream-dark); }
html.img-fx .menu-panel-img img,
html.img-fx .evento-img,
html.img-fx .custom-text-img img,
html.img-fx .gallery-item img,
html.img-fx .item-thumb { opacity: 0; transition: opacity .45s ease; }
html.img-fx img.is-loaded { opacity: 1 !important; }

/* animazioni più morbide e brevi: comparsa con meno movimento */
.reveal {
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.btab-panel, .tab-panel, .dtab-panel { animation: panelIn .4s cubic-bezier(.22, 1, .36, 1); }
/* dopo la comparsa: transizioni rapide per gli effetti al passaggio del mouse */
.reveal.settled { transition: opacity .2s ease, transform .25s ease, border-color .2s ease, box-shadow .25s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* miniature: niente sfarfallio durante lo zoom al passaggio del mouse */
.item-thumb-wrap { backface-visibility: hidden; transform: translateZ(0); }
.item-thumb-wrap:hover { transform: translateZ(0) scale(1.06); }

/* lightbox: la foto si apre con un leggero ingrandimento */
.lightbox-overlay.open .lightbox-content { animation: lightboxIn .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes lightboxIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* barra di navigazione: ombra più marcata solo dopo lo scorrimento */
nav { transition: box-shadow .3s ease; box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }

/* pulsante Prenota: pulsa tre volte all'apertura e poi resta fermo */
.fab-prenota { animation-iteration-count: 3; }

/* prezzi allineati (cifre a larghezza fissa) */
.birra-prices, .panino-price, .cc-price, .item-price, .item-price-dual, .kit-price, .orari-time, .admin-item-price {
  font-variant-numeric: tabular-nums;
}

/* titoli che vanno a capo in modo equilibrato */
.section-title, .hero-sub, .evento-title, .lightbox-caption { text-wrap: balance; }
.section-desc, .panino-desc, .cc-desc, .birra-desc, .custom-text-body { text-wrap: pretty; }

/* testo selezionato e focus da tastiera nei colori del locale */
::selection { background: var(--gold-light); color: var(--green-dark); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* chi preferisce meno movimento: niente animazioni */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btab-panel, .tab-panel, .dtab-panel, .fab-prenota, .hero-scroll::after,
  .lightbox-overlay.open .lightbox-content { animation: none; }
  html.img-fx .menu-panel-img img, html.img-fx .evento-img, html.img-fx .custom-text-img img,
  html.img-fx .gallery-item img, html.img-fx .item-thumb, img[data-cover] { transition: none; }
}

/* ============================================================
   SEZIONI CON IMMAGINE DI SFONDO: contenuti sempre leggibili
   ============================================================ */
section.has-custom-bg .menu-panel-content {
  background: var(--white);
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-lg);
}
section.has-custom-bg .btab:not(.active),
section.has-custom-bg .tab-btn:not(.active),
section.has-custom-bg .dtab:not(.active) {
  background: rgba(254, 252, 245, .92);
  border-color: transparent;
  color: var(--text);
}
section.has-custom-bg .list-empty-note,
section.has-custom-bg .eventi-empty { background: rgba(254, 252, 245, .92); }
@media (max-width: 768px) {
  section.has-custom-bg .menu-panel-content { padding: 1.1rem 1rem; border-radius: 16px; }
}