/* I disegni delle guide. Nati come file a se in `anteprime/`, qui dentro
   usano i colori del tema invece dei propri. */
.sgrnet-app{--blu:var(--wp--preset--color--primario);--testo:var(--wp--preset--color--testo);
            --tenue:var(--wp--preset--color--testo-secondario);--bordo:var(--wp--preset--color--bordo)}

  .guida{border:1px solid var(--bordo);border-radius:10px;padding:20px;margin-bottom:30px}
  .guida__capo{display:flex;align-items:flex-end;border-bottom:3px solid var(--blu);margin-bottom:16px}
  .guida__nome{padding:.3em .75em;background:var(--blu);color:#fff;border-radius:4px 4px 0 0;
               font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
  .guida__invito{margin:0 0 18px;font-size:15px;color:var(--tenue)}
  .guida__invito strong{color:var(--testo)}

  .passi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  /* sei passi stanno meglio su due righe da tre che in fila indiana */
  .passi--sei{grid-template-columns:repeat(3,1fr);gap:20px}
  @media (max-width:640px){.passi,.passi--sei{grid-template-columns:1fr;gap:22px}}

  .passo{text-align:center}
  .passo__numero{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
                 border-radius:50%;background:var(--blu);color:#fff;font-size:12px;font-weight:700;margin-bottom:8px}
  .passo__dida{margin:10px 0 0;font-size:14px;line-height:1.35}
  .passo__dida b{color:var(--blu)}
  .passo__se{margin:5px 0 0;font-size:12.5px;line-height:1.3;color:var(--tenue)}
  svg.tel{display:block;margin:0 auto;width:118px;height:auto}

  @keyframes tocco{0%,100%{opacity:0;transform:scale(.6)}8%{opacity:.95;transform:scale(1)}
                   22%{opacity:.95;transform:scale(1)}30%{opacity:0;transform:scale(1.5)}}
  .dito{transform-box:fill-box;transform-origin:center;animation:tocco 6s infinite}
  .passo:nth-child(2) .dito{animation-delay:2s}
  .passo:nth-child(3) .dito{animation-delay:4s}
  .passi--sei .dito{animation-duration:12s}
  .passi--sei .passo:nth-child(4) .dito{animation-delay:6s}
  .passi--sei .passo:nth-child(5) .dito{animation-delay:8s}
  .passi--sei .passo:nth-child(6) .dito{animation-delay:10s}

  @keyframes comparsa{0%,8%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.12)}
                      26%,100%{opacity:1;transform:scale(1)}}
  .icona-nuova{transform-box:fill-box;transform-origin:center;animation:comparsa 6s infinite}
  .passi--sei .icona-nuova{animation-duration:12s}

  @media (prefers-reduced-motion:reduce){.dito,.icona-nuova{animation:none;opacity:1}}

/* -------------------------------------------------------------------------
 * La pagina delle guide
 * ---------------------------------------------------------------------- */

.sgrnet-app__intro{margin:0 0 1.4rem;font-size:1.0625rem;color:var(--wp--preset--color--testo-secondario);max-width:40rem}

.sgrnet-app__scelta{display:flex;gap:.5rem;margin:0 0 1.4rem}
.sgrnet-app__scelta[hidden]{display:none}

.sgrnet-app__tasto{
  padding:.55rem 1rem;background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--bordo);border-radius:999px;
  color:var(--wp--preset--color--testo-secondario);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
}
.sgrnet-app__tasto[aria-pressed="true"]{
  background:var(--wp--preset--color--primario);border-color:transparent;color:#fff;
}

.sgrnet-app [data-sgrnet-guida][hidden]{display:none}

/* -------------------------------------------------------------------------
 * L'invito in fondo allo schermo
 *
 * Sta sopra al contenuto ma non lo copre: lascia sempre vedere il testo che si
 * stava leggendo, altrimenti e' una finestra che si piazza davanti e basta.
 * ---------------------------------------------------------------------- */

.sgrnet-invito{
  position:fixed;left:.6rem;right:.6rem;bottom:.6rem;z-index:50;
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .75rem;
  background:#111417;border-radius:10px;color:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  transform:translateY(130%);transition:transform .28s ease-out;
}

.sgrnet-invito.is-dentro{transform:translateY(0)}
.sgrnet-invito[hidden]{display:none}

.sgrnet-invito__segno{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:#fff}
.sgrnet-invito__testo{flex:1 1 auto;margin:0;font-size:.875rem;line-height:1.25;min-width:0}

.sgrnet-invito__vai{
  flex:0 0 auto;padding:.45rem .8rem;background:var(--wp--preset--color--accento);
  border-radius:999px;color:#fff;font-size:.8125rem;font-weight:700;text-decoration:none;white-space:nowrap;
}

.sgrnet-invito__chiudi{
  flex:0 0 auto;width:28px;height:28px;padding:0;background:transparent;border:0;cursor:pointer;
  position:relative;
}
.sgrnet-invito__chiudi::before,.sgrnet-invito__chiudi::after{
  content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;border-radius:1px;background:#9AA7B5;
}
.sgrnet-invito__chiudi::before{transform:rotate(45deg)}
.sgrnet-invito__chiudi::after{transform:rotate(-45deg)}

/* -------------------------------------------------------------------------
 * Il riquadro nella colonna, sotto YouTube
 *
 * Stessa forma del banner YouTube, ma nel blu del giornale: due cartoncini
 * neri uno sull'altro sarebbero stati monotoni, e questo e' roba nostra, non
 * di un servizio altrui.
 * ---------------------------------------------------------------------- */

.sgrnet-app-invito{margin-top:.75rem}

.sgrnet-app-invito__link{
  display:flex;align-items:center;gap:.85rem;
  padding:.95rem 1.05rem;
  background:var(--wp--preset--color--primario);
  border-radius:8px;color:#fff;text-decoration:none;
  transition:background-color .15s, transform .15s;
}

.sgrnet-app-invito__link:hover,
.sgrnet-app-invito__link:focus-visible{
  background:var(--wp--preset--color--primario-scuro);
  transform:translateY(-1px);
}

.sgrnet-app-invito__segno{display:flex;flex:0 0 auto}
.sgrnet-app-invito__testo{display:grid;gap:.1rem;min-width:0}
.sgrnet-app-invito__titolo{font-size:.9375rem;font-weight:700;line-height:1.25}
.sgrnet-app-invito__sotto{font-size:.8125rem;line-height:1.3;color:#B9CFE4}

@media (prefers-reduced-motion:reduce){
  .sgrnet-app-invito__link:hover,
  .sgrnet-app-invito__link:focus-visible{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .sgrnet-invito{transition:none}
}