/* Rifiniture dei componenti ricorrenti.
   Qui sta SOLO ciò che i block supports non esprimono: icone SVG in cerchio,
   marcatori con pseudo-elemento, divisori tra colonne con media query.
   Tutto il resto (card, bottoni, colori, spaziature) è in theme.json. */

/* Icona line-art dentro un cerchio, applicata a un core/spacer: il disegno è
   un background (vedi la nota in ornament.css sul perché non usiamo blocchi
   HTML) e cerchio, bordo e misura non sono esprimibili con i block supports
   dello spaziatore. */
.vb-icon-circle {
  flex: none;
  width: 64px;
  min-width: 64px;
  margin-inline: auto;
  border: 1px solid var(--wp--preset--color--accent-1);
  border-radius: 50%;
  background-color: var(--wp--preset--color--base);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236B7D67' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M16 27 C 16 20, 16 13, 16 8'/%3E%3Cpath d='M16 24 C 8 24, 4 18, 4 10 C 12 10, 16 15, 16 22'/%3E%3Cpath d='M16 18 C 16 12, 20 6, 28 6 C 28 13, 24 18, 17 18'/%3E%3C/svg%3E");
}

/* Varianti dell'icona: una per area di lavoro. Il disegno cambia solo il
   background-image, tutto il resto è ereditato. */
.vb-icon-circle--play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236B7D67' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M13 11.5 L 21 16 L 13 20.5 Z'/%3E%3C/svg%3E");
}

/* Ipnosi — testa con spirale */
.vb-icon-circle--mente {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236B7D67' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 27 v-3 C 8 22.5, 5 18.5, 5 14 a 9.5 9.5 0 0 1 19 -1 c 0 .4 0 .8 -.05 1.2 L 27 18 h-3 v4 a 2 2 0 0 1 -2 2 h-3 v3'/%3E%3Cpath d='M12 13 a 4 4 0 0 1 8 0 c 0 2.5 -2 3.5 -4 3.5 s -4 1 -4 3'/%3E%3C/svg%3E");
}

/* Corsi e ritiri — montagne */
.vb-icon-circle--natura {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236B7D67' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 25 L 11 11 L 16 19 L 20 13 L 29 25 Z'/%3E%3Cpath d='M13.5 15.5 L 16 19'/%3E%3Ccircle cx='23' cy='8' r='2.4'/%3E%3C/svg%3E");
}

/* Podcast — microfono */
.vb-icon-circle--voce {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236B7D67' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='4' width='8' height='14' rx='4'/%3E%3Cpath d='M7 14 a 9 9 0 0 0 18 0'/%3E%3Cpath d='M16 23 v 5'/%3E%3Cpath d='M11 28 h 10'/%3E%3C/svg%3E");
}

/* Voce con spunta della sezione "Sostieni": il segno di spunta è uno
   pseudo-elemento, non esprimibile come attributo di blocco. */
.vb-check {
  position: relative;
  padding-left: 2.25rem;
}

.vb-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.75;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 6.5'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}

/* Percorso a step: divisori verticali tra le colonne solo da tablet in su
   (su mobile le colonne si impilano e una riga verticale non avrebbe senso).
   Il border-left per-colonna non è impostabile con una media query dagli
   attributi del blocco. */
@media (min-width: 782px) {
  .vb-steps .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--wp--preset--color--accent-7);
    padding-left: var(--wp--preset--spacing--60);
  }
}

/* Titoli di sezione molto lunghi: su schermi stretti il tracking ampio
   spezzerebbe le parole (es. "CONSAPEVOLEZZA"). Il letter-spacing
   responsive è l'unica cosa che theme.json non esprime. */
@media (max-width: 520px) {
  h2.wp-block-heading {
    letter-spacing: 0.06em;
  }
}

/* ===== Aree di lavoro (home) ===== */

/* Link "Scopri di più": il bordo inferiore va sull'<a>, che i block supports
   del paragrafo non raggiungono. Tipografia e colore restano dal blocco. */
.vb-area-link a {
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--accent-1);
  padding-bottom: 2px;
}

.vb-area-link a:hover {
  color: var(--wp--preset--color--accent-2);
  border-bottom-color: var(--wp--preset--color--accent-2);
}

/* Divisori verticali tra le aree, solo da desktop (sotto si impilano) */
@media (min-width: 1024px) {
  .vb-areas .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--wp--preset--color--accent-7);
  }
}

/* ===== Hero interna delle pagine ===== */

/* Il cover ha min-height:430px di default: con l'aspect-ratio 21/9 quella
   misura fisserebbe la LARGHEZZA (430 × 21/9 ≈ 1003px) causando overflow sotto
   i 1000px. Azzerandola, l'altezza si calcola dalla larghezza dell'alignfull.
   Non aggiungere width:100%: con i margini negativi lascia un vuoto a destra. */
.vb-page-hero {
  min-height: 0;
}

/* Sotto i 1024px la proporzione panoramica sarebbe più bassa del contenuto
   (occhiello + titolo + testo + spazio per l'header trasparente) e lo
   taglierebbe: lì la hero cresce in altezza col contenuto. */
@media (max-width: 1023px) {
  .vb-page-hero {
    aspect-ratio: auto !important;
  }
}

/* Sottotitolo della hero: larghezza di lettura mantenendo l'allineamento a
   sinistra. In un cover con layout constrained un blocco con max-width
   verrebbe ri-centrato, quindi il contenuto sta in un gruppo a flusso e la
   misura la diamo qui. */
.vb-hero-lead {
  max-width: 34rem;
}

/* ===== Elenco temi ===== */

/* Marcatore a rombo al posto del pallino: pseudo-elemento, non esprimibile
   con gli attributi della lista. */
.vb-topics ul.wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vb-topics ul.wp-block-list li {
  position: relative;
  padding-left: 1.5rem;
  padding-block: 0.55rem;
}

.vb-topics ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  background: var(--wp--preset--color--accent-1);
  transform: rotate(45deg);
}

/* ===== Pulsanti delle piattaforme del podcast ===== */

/* Il segno della piattaforma sta davanti all'etichetta come pseudo-elemento:
   un core/button non ospita un'icona, e un blocco HTML con l'SVG inline
   sarebbe invisibile nell'editor (vedi la nota in ornament.css). Il colore è
   dentro il data-URI, quindi qui c'è una sola variante: quella chiara, che è
   il colore del testo del pulsante pieno. */
.vb-btn-platform .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.vb-btn-platform .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.vb-btn-platform--youtube .wp-block-button__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FAF8F3' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='26' height='16' rx='5'/%3E%3Cpath d='M13 12 L 22 16 L 13 20 Z' fill='%23FAF8F3' stroke='none'/%3E%3C/svg%3E");
}

.vb-btn-platform--spotify .wp-block-button__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FAF8F3' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='13'/%3E%3Cpath d='M9.5 12 c 6 -1.4 12 -0.4 15.5 2'/%3E%3Cpath d='M10.5 16.4 c 5 -1 9.6 -0.2 12.6 1.8'/%3E%3Cpath d='M11.5 20.6 c 4 -0.8 7.6 -0.2 9.8 1.2'/%3E%3C/svg%3E");
}

.vb-btn-platform--apple .wp-block-button__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FAF8F3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='13'/%3E%3Crect x='13' y='8' width='6' height='11' rx='3'/%3E%3Cpath d='M10 15 a 6 6 0 0 0 12 0'/%3E%3Cpath d='M16 21 v 3'/%3E%3C/svg%3E");
}

/* ===== Nota secondaria ===== */

/* Riga di precisazione sotto una sezione (lingue del libro, note sui percorsi):
   larghezza di lettura più stretta della sezione che la contiene. Il blocco non
   ha un support per il max-width quando il layout è già constrained. */
.vb-note {
  max-width: 48rem;
  margin-inline: auto;
}

/* ===== FAQ (blocco Dettagli) ===== */

/* Il divisore tra le voci (bordo inferiore) è in theme.json
   (styles.blocks.core/details.border) → identico in editor e front-end.
   Qui resta solo ciò che il core non esprime: il carattere del riepilogo e il
   marcatore +/×, che è uno pseudo-elemento. */
.vb-faq-item > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.75rem 1.35rem 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
  font-weight: 500;
  line-height: 1.3;
  color: var(--wp--preset--color--contrast);
}

.vb-faq-item > summary::-webkit-details-marker {
  display: none;
}

/* Croce disegnata con due gradienti: aperta, la barra verticale ruota e resta
   solo quella orizzontale (il "meno"). */
.vb-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--wp--preset--color--accent-1);
  transition: transform var(--wp--custom--transition-duration)
    var(--wp--custom--transition-timing-function);
}

.vb-faq-item[open] > summary::after {
  transform: rotate(90deg);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat;
}

.vb-faq-item p {
  margin: 0 0 1.35rem;
  padding-right: 2.75rem;
}

/* ===== Copertina del libro in prospettiva ===== */

/* Rotazione 3D, ombra interna e taglio delle pagine: effetti che nessun
   block support esprime. L'immagine resta un normale core/image. */
.vb-book-photo {
  perspective: 1100px;
}

.vb-book-photo img {
  display: block;
  border-radius: 2px 6px 6px 2px;
  transform: rotateY(-17deg) rotateZ(-1deg);
  transform-origin: left center;
  box-shadow:
    var(--wp--preset--shadow--md),
    inset 4px 0 6px -4px rgba(46, 46, 46, 0.4);
}