/* =========================================================
   giorgioratti.com — banner cookie / consenso
   Usa solo i token e i font di style.css.
   Motivo formale: la card con raggio asimmetrico del sito.
   ========================================================= */

/* ---------- contenitore ---------- */
/* In basso a sinistra: non copre la nav sticky (z-index 40) e lascia
   libero l'angolo in basso a destra, dove sta EnviBot. */
.gr-cc{position:fixed;left:var(--pad);bottom:18px;z-index:10000;
  width:min(460px,calc(100vw - var(--pad) * 2));
  background:var(--paper);border:1px solid var(--line);
  border-radius:2px 22px 2px 2px;padding:22px;
  box-shadow:0 8px 22px rgba(14,47,56,.14);
  font-family:var(--body);color:var(--ink);
  animation:gr-cc-in .28s ease}
.gr-cc[hidden]{display:none}
/* L'entrata parte da sola quando si toglie [hidden], senza rAF lato JS.
   Anima solo la traslazione e senza fill-mode: se l'animazione non parte,
   il banner resta comunque visibile e a posto. Mai il contrario. */
@keyframes gr-cc-in{from{transform:translateY(12px)}to{transform:none}}

/* Mentre il banner e' aperto la barra progetti mobile resta abbassata,
   per non sovrapporsi. */
body.gr-cc-open .quick-pager{transform:translateY(100%)}

/* ---------- testo ---------- */
.gr-cc h2{font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}
.gr-cc p{font-size:15px;line-height:1.55;color:var(--dim);margin:0}

/* ---------- azioni ---------- */
/* "Accetta" e "Rifiuta" condividono la stessa classe .pill di style.css,
   senza .solid: peso visivo identico, come richiede il GDPR. */
.gr-cc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.gr-cc-row .pill{flex:1 1 auto;text-align:center;min-width:120px}

.gr-cc-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);background:none;border:0;
  padding:11px 4px;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;flex:none}
.gr-cc-link:hover{color:var(--ink)}

/* ---------- dettaglio categorie ---------- */
.gr-cc-detail{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.gr-cc-detail[hidden]{display:none}

.gr-cc-cat{display:flex;align-items:flex-start;gap:14px;padding:13px 0}
.gr-cc-cat + .gr-cc-cat{border-top:1px solid var(--line)}
.gr-cc-cat .txt{flex:1 1 auto;min-width:0}
.gr-cc-cat h3{font-family:var(--disp);font-weight:600;font-size:15px;
  letter-spacing:-.01em;line-height:1.2;margin:0}
.gr-cc-cat p{font-size:14px;line-height:1.5;margin:5px 0 0}
.gr-cc-cat .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);display:block;margin-top:6px}

/* interruttore */
.gr-cc-sw{position:relative;flex:none;width:38px;height:22px;margin-top:2px;
  padding:0;border:0;border-radius:999px;background:var(--line);
  cursor:pointer;transition:background .2s}
.gr-cc-sw::after{content:"";position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:999px;background:#fff;
  transition:transform .2s}
.gr-cc-sw[aria-checked="true"]{background:var(--aqua)}
.gr-cc-sw[aria-checked="true"]::after{transform:translateX(16px)}
.gr-cc-sw[aria-disabled="true"]{background:var(--mint);
  border:1px solid var(--line);cursor:default}
.gr-cc-sw[aria-disabled="true"]::after{background:var(--aqua);top:2px;left:2px}

.gr-cc-detail .gr-cc-row{margin-top:6px}
.gr-cc-detail .gr-cc-row .pill{flex:0 1 auto}

/* ---------- tablet / telefono ---------- */
@media (max-width:760px){
  .gr-cc{left:0;right:0;bottom:0;width:auto;
    border-left:0;border-right:0;border-bottom:0;border-radius:2px 22px 0 0;
    padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom,0px));
    max-height:82vh;overflow-y:auto}
}
@media (max-width:520px){
  .gr-cc h2{font-size:18px}
  .gr-cc p{font-size:14.5px}
  .gr-cc-row .pill{flex:1 1 100%}
  .gr-cc-link{width:100%;text-align:center;padding:8px 4px}
}

/* ---------- animazioni ridotte ---------- */
@media (prefers-reduced-motion:reduce){
  .gr-cc{animation:none}
  .gr-cc-sw,.gr-cc-sw::after{transition:none}
}