/*
 * Pagina cocktail: i tre pezzi che il resto del sito non ha.
 *
 *   1. i bicchieri sospesi in testata,
 *   2. le schede dei drink,
 *   3. le domande frequenti.
 *
 * Nient'altro. Titoli, testi, colori e spaziature della pagina arrivano dalle
 * impostazioni dei widget Elementor, esattamente come nelle altre pagine del
 * sito: qui dentro non si stila nessun h1, h2, h3 o p, altrimenti la pagina
 * finirebbe per avere una tipografia sua e stonare con il resto.
 *
 * I colori qui sotto sono quelli del sito, ripresi tali e quali dalle altre
 * pagine, cosi' i tre componenti non sembrano incollati da un'altra parte.
 *
 * Il rilievo e' fatto solo con transform e opacity: niente librerie, niente
 * canvas. Sono le due proprieta' che il browser anima sulla scheda grafica
 * senza rifare il calcolo del layout, quindi la pagina resta leggera.
 *
 * Caricato solo dove serve, vedi blu_cafe_page_assets in functions.php.
 */

.blu-cocktail-page {
  --ck-accento: #219bff;
  --ck-titolo: #eef4fa;
  --ck-testo: #c3cfda;
  --ck-bordo: rgba(33, 155, 255, 0.26);
  --ck-pannello: rgba(7, 17, 34, 0.55);
  --ck-serif: Georgia, "Times New Roman", serif;
  --ck-mono: "Courier New", Courier, monospace;
}

/* ------------------------------------------------- 1. Bicchieri sospesi */

.ck-scena {
  position: relative;
  width: 100%;
  min-height: clamp(300px, 42vh, 460px);
}

/* L'alone dietro i bicchieri: da' profondita' senza aggiungere un'immagine. */
.ck-alone {
  position: absolute;
  inset: 12% 6%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(33, 155, 255, 0.18), rgba(33, 155, 255, 0) 68%);
  pointer-events: none;
}

.ck-vetro {
  position: absolute;
  width: clamp(150px, 26vw, 260px);
  height: auto;
  border-radius: 14px;
  /* Le variabili le scrive il JavaScript a ogni movimento del puntatore, cosi'
     il galleggiamento e la parallasse convivono senza sovrascriversi. */
  --ck-px: 0px;
  --ck-py: 0px;
  transform: translate3d(var(--ck-px), var(--ck-py), 0);
  filter: drop-shadow(0 26px 42px rgba(2, 8, 20, 0.62));
  will-change: transform;
}

.ck-vetro--1 {
  top: 4%;
  left: 2%;
  z-index: 3;
  animation: ck-galleggia 7.5s ease-in-out infinite;
}

.ck-vetro--2 {
  top: 34%;
  right: 0;
  z-index: 4;
  width: clamp(170px, 30vw, 300px);
  animation: ck-galleggia 9s ease-in-out infinite -2.4s;
}

.ck-vetro--3 {
  bottom: 0;
  left: 18%;
  z-index: 2;
  width: clamp(130px, 22vw, 215px);
  animation: ck-galleggia 8.2s ease-in-out infinite -4.8s;
}

@keyframes ck-galleggia {
  0%, 100% { transform: translate3d(var(--ck-px), var(--ck-py), 0); }
  50%      { transform: translate3d(var(--ck-px), calc(var(--ck-py) - 16px), 0); }
}

/* ------------------------------------------------- 2. Schede dei cocktail */

.ck-schede {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* La prospettiva sta sulla griglia: le schede ruotano dentro uno spazio
     comune, altrimenti ognuna avrebbe il suo punto di fuga e l'effetto
     sembrerebbe sbagliato. */
  perspective: 1400px;
}

.ck-scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 22px;
  border: 1px solid var(--ck-bordo);
  border-radius: 18px;
  background: var(--ck-pannello);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 12px 30px rgba(2, 8, 20, 0.35);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}

/* Il sollevamento vale solo dove c'e' un puntatore vero: su un telefono
   resterebbe appiccicato dopo il tocco. */
@media (hover: hover) and (pointer: fine) {
  .ck-scheda:hover {
    transform: translate3d(0, -10px, 0) rotateX(5deg) rotateY(-5deg);
    border-color: rgba(33, 155, 255, 0.6);
    box-shadow: 0 30px 60px rgba(2, 8, 20, 0.6);
  }

  .ck-scheda:hover .ck-scheda-img { transform: scale(1.06); }
  .ck-scheda:hover .ck-scheda-quadro::after { opacity: 1; }
}

/* La scheda si illumina anche quando ci si arriva da tastiera. */
.ck-scheda:focus-within {
  border-color: rgba(33, 155, 255, 0.6);
  box-shadow: 0 30px 60px rgba(2, 8, 20, 0.6);
}

.ck-scheda-quadro {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: rgba(3, 10, 22, 0.6);
}

/* Il riflesso che scorre sul vetro quando la scheda si solleva. */
.ck-scheda-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ck-scheda-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Il nome del drink: stesso carattere e stesso taglio dei titoli del sito. */
.ck-scheda-nome {
  font-family: var(--ck-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: var(--ck-titolo);
  margin: 20px 22px 6px;
}

/* La base alcolica ha il taglio dell'occhiello usato nelle altre pagine. */
.ck-scheda-base {
  font-family: var(--ck-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--ck-accento);
  margin: 0 22px 16px;
}

.ck-scheda-tasto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 44px);
  margin: auto 22px 0;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--ck-bordo);
  border-radius: 999px;
  background: rgba(3, 10, 22, 0.5);
  color: var(--ck-titolo);
  font-family: var(--ck-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.ck-scheda-tasto:is(:hover, :focus-visible) {
  border-color: var(--ck-accento);
  background-color: rgba(33, 155, 255, 0.12);
}

/* --------------------------------------------------- 3. Domande frequenti */

.ck-faq {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-faq-voce {
  border-top: 1px solid var(--ck-bordo);
}

.ck-faq-voce:last-child { border-bottom: 1px solid var(--ck-bordo); }

.ck-faq-titolo { margin: 0; }

.ck-faq-tasto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 44px;
  padding: 22px 4px;
  border: 0;
  background: none;
  color: var(--ck-titolo);
  font-family: var(--ck-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.6px;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.ck-faq-tasto:is(:hover, :focus-visible) { color: var(--ck-accento); }

/* ----------------------------------------- Apertura dei pannelli, comune */

/*
 * L'apertura e' animata su grid-template-rows: e' l'unico modo di far
 * scorrere un'altezza che non si conosce in anticipo senza misurarla col
 * JavaScript a ogni apertura.
 */
.blu-cocktail-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Il livello che scorre non porta spaziatura: un padding qui non si
 * comprimerebbe insieme alla riga della griglia e lascerebbe il pannello
 * chiuso alto quanto il padding. Lo spazio sta dentro, su .ck-corpo-interno.
 */
.blu-cocktail-corpo > * {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  /* Nascondere davvero il pannello chiuso lo toglie anche dal percorso di
     tabulazione; il ritardo lo lascia visibile finche' l'animazione scorre. */
  visibility: hidden;
  transition: visibility 0s linear 0.42s;
}

.is-aperta > .blu-cocktail-corpo { grid-template-rows: 1fr; }

.is-aperta > .blu-cocktail-corpo > * {
  visibility: visible;
  transition-delay: 0s;
}

/* Il pannello resta nel flusso: hidden lo toglierebbe di colpo, senza
   animazione. Il JavaScript lo usa lo stesso, per i lettori di schermo. */
.blu-cocktail-corpo[hidden] { display: grid; }

/* Il testo dentro i pannelli: stesso corpo dei paragrafi del sito. */
.ck-corpo-interno {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ck-testo);
  padding: 2px 22px 6px;
}

.ck-faq-corpo .ck-corpo-interno {
  padding: 0 4px 26px;
  font-size: 17px;
  max-width: 76ch;
}

.ck-corpo-interno p { margin: 0 0 14px; }

.ck-corpo-interno p:last-child { margin-bottom: 0; }

.ck-corpo-interno a { color: var(--ck-accento); text-underline-offset: 3px; }

.ck-ricetta { margin: 16px 0 0; }

.ck-ricetta > div { margin-bottom: 12px; }

.ck-ricetta > div:last-child { margin-bottom: 0; }

.ck-ricetta dt {
  font-family: var(--ck-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--ck-accento);
  margin-bottom: 3px;
}

.ck-ricetta dd { margin: 0; }

/* Il segno piu' che diventa meno: due tratti, uno dei quali sparisce. */
.ck-segno {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.ck-segno::before,
.ck-segno::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ck-segno::before { transform: translateY(-50%); }
.ck-segno::after  { transform: translateY(-50%) rotate(90deg); }

.is-aperta .ck-segno::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* -------------------------------------------------------- Messa a fuoco */

.blu-cocktail-page :is(.ck-scheda-tasto, .ck-faq-tasto):focus-visible {
  outline: 2px solid var(--ck-accento);
  outline-offset: 3px;
}

/* ========================================================= Schermi stretti

   A 1024px si stringe solo la griglia: tre schede affiancate su un tablet
   diventerebbero colonnine.

   A 767px la pagina va a colonna singola e le schede si centrano. E' lo
   stesso punto in cui Elementor manda in colonna i suoi contenitori, cosi'
   le due cose avvengono insieme.                                          */

@media (max-width: 1024px) {
  .ck-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ck-schede { grid-template-columns: 1fr; }

  .ck-scheda-nome,
  .ck-scheda-base { text-align: center; }

  .ck-scheda-tasto { justify-content: center; }

  .ck-corpo-interno { text-align: center; }

  /* Le domande restano allineate a sinistra: centrate su piu' righe
     diventerebbero un blocco a bandiera doppia, faticoso da leggere. */
  .ck-faq-tasto,
  .ck-faq-corpo .ck-corpo-interno { text-align: left; }

  .ck-faq-tasto { font-size: 20px; }

  .ck-scena { min-height: clamp(260px, 40vh, 380px); }
}

/* -------------------------------------------------------- Meno movimento */

@media (prefers-reduced-motion: reduce) {
  /* Senza animazione non serve tenere i bicchieri su un livello grafico
     dedicato: will-change costa memoria e qui non servirebbe a nulla. */
  .ck-vetro {
    animation: none;
    will-change: auto;
  }

  .ck-scheda,
  .ck-scheda-img,
  .blu-cocktail-corpo,
  .ck-segno::before,
  .ck-segno::after { transition: none; }

  .ck-scheda:hover { transform: none; }
}