/* ==========================================================================
   SuperEasyWeb — pagine/blog.css
   Elenco (/supereasyweb/blog/): hero cielo corto, filtri a chip, griglia a mattonelle di card con oggetto,
   tile "Manca un argomento?". Articolo (/supereasyweb/blog/<slug>/): hero colorato, testo in .misura,
   colonna sticky con indice e condivisione, citazione, box autore, fascia CTA, correlati.
   Solo composizione di pagina: classi e API del sistema restano quelle di components/oggetti.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero dell'elenco: cielo, corto, H1 in blu (≤ 96 px), nessuna CTA
   -------------------------------------------------------------------------- */
.hero-interna { min-height: clamp(380px, 52vh, 520px); }
.hero-interna .t-hero { font-size: clamp(48px, 7vw, 96px); max-width: 14ch; }
@media (min-width: 768px) {
  .hero-interna .linguetta--bd { max-width: min(46ch, 48%); }
}
@media (max-width: 767px) { .hero-interna { min-height: 0; } .hero-interna .t-hero { margin-bottom: 40px; } }

/* --------------------------------------------------------------------------
   2. Filtri a chip
   -------------------------------------------------------------------------- */
.filtri { display: grid; gap: 14px; margin-top: 8px; }
.filtri__titolo { font-size: 20px; }

/* --------------------------------------------------------------------------
   3. Card dell'articolo: tile bianca, dentro una tile colorata con l'oggetto e la categoria
      in linguetta (come le card "News" della reference, ma senza foto). Tutta cliccabile.
   -------------------------------------------------------------------------- */
.card-articolo {
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: visible;
  transition: scale var(--speed-normal) var(--ease-hover);
}
.card-articolo[hidden] { display: none; }
.card-articolo:hover { scale: 1.02; }
.card-articolo:focus-within { outline: 3px solid var(--blu); outline-offset: 3px; }
.card-articolo:has(.card-articolo__link:focus-visible) .card-articolo__link { outline: none; }
/* la rivelazione del sistema imposta transition su transform/opacity: aggiungo la scala del hover */
html.js .card-articolo.anim-fade-y.is-inview,
html.js .g-anim.is-inview .card-articolo.anim-fade-y {
  transition: transform var(--speed-slow) var(--ease-out) var(--d, 0s), opacity var(--speed-slow) var(--ease-out) var(--d, 0s), scale var(--speed-normal) var(--ease-hover);
}
.card-articolo__tile {
  position: relative;
  flex: 0 0 auto;
  padding: 22px;
  border-radius: var(--r-in);
  aspect-ratio: 4 / 3;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.card-articolo__cat {
  --lp: 10px;
  z-index: 5;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px calc(16px + var(--r)) calc(8px + var(--r)) 14px;
}
.card-articolo__cat::before { border-radius: 0 0 var(--r-in) 0; }
.card-articolo__testo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 12px 10px; }
.card-articolo__data { font-weight: 600; }
.card-articolo__titolo { text-wrap: pretty; }
.card-articolo__titolo a { color: inherit; }
.card-articolo__link::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.card-articolo__sommario { color: var(--testo-2); font-size: 16px; line-height: 1.45; }
.card-articolo__leggi { margin-top: auto; padding-top: 18px; }
.card-articolo:hover .card-articolo__leggi svg { transform: translateX(4px); }

/* card larga (8 / 7 colonne): tile a sinistra, testo a destra */
@media (min-width: 768px) {
  .card-articolo--larga { display: grid; grid-template-columns: 1.08fr 1fr; gap: 6px; }
  .card-articolo--larga .card-articolo__tile { aspect-ratio: auto; min-height: 380px; height: 100%; }
  .card-articolo--larga .card-articolo__testo { padding: 26px 22px 22px 20px; justify-content: center; }
  .card-articolo--larga .card-articolo__leggi { margin-top: 28px; padding-top: 0; }
  .card-articolo--larga .card-articolo__titolo { font-size: clamp(24px, 2.2vw, 32px); }
}
/* griglia dell'elenco: con un filtro attivo le card superstiti stanno su due colonne */
.griglia-blog.is-filtrata .card-articolo { grid-column: span 6; }
.griglia-blog.is-filtrata .argomento { grid-column: span 6; }
.griglia-blog__vuoto { font-weight: 600; }
@media (max-width: 1023px) {
  .card-articolo--larga .card-articolo__tile { min-height: 300px; }
  .griglia-blog.is-filtrata .card-articolo, .griglia-blog.is-filtrata .argomento { grid-column: span 12; }
}
@media (max-width: 767px) {
  .card-articolo__tile { min-height: 0; aspect-ratio: 4 / 3.2; }
  .card-articolo__testo { padding: 18px 8px 8px; }
}

/* --------------------------------------------------------------------------
   4. Gli oggetti nelle card (DOM + CSS + SVG; decorativi)
   -------------------------------------------------------------------------- */
.oggetto { position: relative; width: 100%; height: 100%; min-height: inherit; }

/* a) la prova da fare stasera: tre schede bianche ruotate (anim-card) */
.oggetto-prova { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 0 8px; }
.prova__card {
  --rot: 0deg;
  display: flex; align-items: center; gap: 14px;
  width: min(280px, 72%);
  padding: 12px 18px 12px 14px;
  border-radius: var(--r-in);
  background: var(--carta);
  color: var(--ink);
  box-shadow: var(--ombra-card);
  rotate: var(--rot);
}
.prova__card:nth-child(2) { align-self: center; }
.prova__card:nth-child(3) { align-self: flex-end; }
.prova__card b { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--blu-testo); }
.prova__card span { font-size: 14px; font-weight: 600; line-height: 1.25; }

/* b) WhatsApp: pagina di un sito in miniatura (scheda bianca a blocchi) con il tasto verde fisso nell'angolo */
.oggetto-wa { display: flex; align-items: center; justify-content: center; }
.oggetto-wa__pagina {
  --rot: 0deg;
  position: relative;
  display: grid; gap: 10px; align-content: start;
  width: min(300px, 78%);
  padding: 14px 16px 22px;
  border-radius: var(--r-in);
  background: var(--carta);
  box-shadow: var(--ombra-card);
  rotate: var(--rot);
}
.oggetto-wa__barra { display: flex; gap: 6px; margin-bottom: 4px; }
.oggetto-wa__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.oggetto-wa__riga { display: block; height: 10px; border-radius: 999px; background: var(--sfondo); }
.oggetto-wa__riga--titolo { height: 16px; width: 70%; background: var(--cielo); }
.oggetto-wa__riga--corta { width: 55%; }
.oggetto-wa__blocchi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.oggetto-wa__blocchi i { height: 52px; border-radius: 10px; background: var(--sfondo); }
.oggetto-wa__tasto {
  position: absolute; right: -18px; bottom: -18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #25d366; color: var(--carta);
  box-shadow: 0 16px 40px rgba(13, 43, 48, .22);
}

/* c) Google Business Profile: pin + scheda con nome, indirizzo e stelle */
.oggetto-gbp { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 24px 0 0 6%; }
.oggetto-gbp__pin { width: clamp(72px, 24%, 110px); height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .35)); }
.oggetto-gbp__scheda {
  display: grid; gap: 4px;
  max-width: min(280px, 88%);
  padding: 12px 16px 14px;
  border-radius: var(--r-in);
  background: var(--carta); color: var(--ink);
  font-size: 14px; line-height: 1.3;
}
.oggetto-gbp__scheda b { font-weight: 700; font-size: 15px; }
.oggetto-gbp__scheda span { color: var(--testo-2); }
.oggetto-gbp__stelle {
  display: block; width: 96px; height: 18px; margin-top: 4px; background: var(--blu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9l-3.2 1.7.6-3.6L.8 4.6l3.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
}

/* d) Quanto costa: numero grande + le cinque voci */
.oggetto-costi { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.oggetto-costi .numero { line-height: .9; }
.oggetto-costi__eti { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.01em; max-width: 14ch; line-height: 1.1; }
.oggetto-costi__voci { margin-top: 18px; gap: 8px; max-width: 420px; }

/* e) Ristorante: mockup piccolo tagliato in basso dalla tile */
.oggetto-mk { min-height: 240px; }
.oggetto-mk__clip { position: absolute; inset: 0; border-radius: inherit; overflow: clip; }
.oggetto-mk__clip [data-mockup] { position: absolute; left: 50%; top: 28px; width: 70%; translate: -50% 0; }
.oggetto-mk__clip .mockup { width: 100%; }
.card-articolo--larga .oggetto-mk__clip [data-mockup] { width: 62%; top: 36px; }

/* --------------------------------------------------------------------------
   5. Tile "Manca un argomento?" e CTA finale
   -------------------------------------------------------------------------- */
.argomento { display: flex; flex-direction: column; justify-content: center; }
.argomento .t-display { max-width: 12ch; }
.cta-finale { padding-top: clamp(40px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   6. Articolo: hero (titolo ≤ 60 px), testo, colonna sticky, citazione, autore
   -------------------------------------------------------------------------- */
.hero-articolo { min-height: clamp(400px, 52vh, 540px); }
.hero-articolo .pillola[href]:hover { background: var(--lime); color: var(--ink); }
.hero-articolo__titolo { font-size: clamp(32px, 4.2vw, 56px); max-width: min(22ch, 60%); line-height: 1.02; }
.hero-articolo__meta { font-weight: 600; font-size: 15px; }
.tile--blu .hero-articolo__meta, .tile--ink .hero-articolo__meta { color: #e3f4f2; }
.tile--cielo .hero-articolo__meta, .tile--lime .hero-articolo__meta { color: var(--ink); }
.tile--cielo .hero-articolo__titolo { color: var(--blu-testo); }
.tile--cielo .linguetta--bd, .tile--lime .linguetta--bd { --lc: var(--carta); }
@media (min-width: 768px) {
  .hero-articolo .linguetta--bd { max-width: min(44ch, 42%); }
}
@media (max-width: 767px) {
  .hero-articolo { min-height: 0; }
  .hero-articolo__titolo { max-width: none; }
  .hero-articolo__meta { margin-bottom: 40px; }
}

/* colonna del testo */
.articolo__testo { margin-inline: 0; }
.articolo__intro > p + p, .articolo__corpo > * + * { margin-top: 18px; }
.articolo__intro > p:first-child { font-size: var(--t-lead); line-height: 1.4; }
.articolo__sezione { margin-top: 44px; scroll-margin-top: calc(var(--nav-h) + 36px); }
.articolo__sezione h2 { margin-bottom: 16px; }
.articolo__corpo .elenco-segni { gap: 12px; }
.articolo__corpo .elenco-segni li { color: var(--ink); }
.articolo__corpo b { font-weight: 700; }

/* la frase in evidenza: tile cielo con virgolette grandi (una sola per articolo) */
.citazione-blog {
  position: relative;
  margin: 28px 0;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(58px, 6.5vw, 88px);
  border-radius: var(--r);
  background: var(--cielo);
  color: var(--ink);
}
.citazione-blog::before {
  content: "\201C";
  position: absolute; left: clamp(18px, 2vw, 28px); top: clamp(14px, 1.6vw, 22px);
  font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1;
  color: var(--blu);
}
.citazione-blog p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

/* segnaposto [DA VERIFICARE]: pillola grigia in linea, visibile ma discreta */
.segnaposto {
  display: inline;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sfondo);
  color: var(--testo-2);
  font-size: .85em;
  font-weight: 600;
  line-height: 1.6;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* cta dentro il testo e box autore */
.articolo__cta { margin-top: 44px; padding: clamp(22px, 2.6vw, 36px); }
.articolo__cta p { font-weight: 600; }
.autore { margin-top: 24px; padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 18px; }
.autore__marchio .logo__sew { font-size: 30px; }
.autore .t-h3 { font-size: 20px; }
@media (min-width: 640px) {
  .autore { grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
  .autore__marchio { padding: 10px 14px; border-radius: var(--r-in); background: rgba(255, 255, 255, .1); }
}

/* colonna laterale: sticky da 1024 px; sotto, l'articolo va a tutta larghezza */
.lato { display: grid; align-content: start; }
@media (min-width: 1024px) {
  .lato__tile { position: sticky; top: calc(var(--nav-h) + 30px); }
}
@media (max-width: 1023px) {
  .articolo, .lato { grid-column: span 12; }
  .lato { order: -1; }
}
.indice { display: grid; gap: 6px; }
.indice a {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 7px 12px 7px 6px;
  border-radius: 18px;
  font-weight: 600; font-size: 15px; line-height: 1.3;
  transition: background var(--speed-normal) var(--ease-hover), color var(--speed-normal) var(--ease-hover);
}
.indice a > span:last-child { padding-top: 5px; }
.indice a:hover { background: var(--carta); color: var(--blu-testo); }
.indice__n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--carta); color: var(--blu-testo);
  font-family: var(--f-display); font-weight: 800; font-size: 15px;
}
.indice a:hover .indice__n { background: var(--blu); color: var(--carta); }
.condividi__stato { min-height: 1.4em; font-weight: 600; color: var(--blu-testo); }
.condividi__stato:empty { display: none; }

/* correlati: tile di testa + tre card (3+3+3+3; 2x2 sotto 1024) */
.correlati__testa { display: flex; flex-direction: column; }
.correlati__testa .t-display { font-size: clamp(30px, 3.4vw, 44px); }
.correlati__testa > p:last-child { margin-top: auto; padding-top: 24px; }
.correlati .card-articolo__tile { min-height: 240px; }
.correlati .card-articolo--larga { display: flex; }
/* nelle card strette (3 colonne) gli oggetti si stringono: numero e pillole più piccoli */
.correlati .oggetto-costi .numero { font-size: 48px; }
.correlati .oggetto-costi__eti { font-size: 20px; }
.correlati .oggetto-costi__voci { margin-top: 12px; gap: 6px; }
.correlati .oggetto-costi__voci .pillola { height: 28px; padding: 0 10px; font-size: 13px; }
.correlati .oggetto-prova { gap: 8px; }
.correlati .prova__card { width: min(240px, 80%); padding: 10px 14px 10px 12px; }
.correlati .prova__card b { font-size: 28px; }
.correlati .oggetto-wa__pagina { width: min(240px, 80%); }
.correlati .oggetto-wa__tasto { width: 52px; height: 52px; right: -12px; bottom: -12px; }
.correlati .oggetto-mk__clip [data-mockup] { width: 78%; top: 24px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .correlati .col-3 { grid-column: span 6; }
}