/* ============================================================
   VITTORIA FORNARI — Pagina Tema (template × 5)
   tema.css
   Solo stili esclusivi di tradizione.html.
   Il colore tematico viene iniettato via JS su:
     body.tema--yoga / .tema--tao / .tema--tibet / .tema--cabala / .tema--celtica
   Componenti condivisi → components.css
   ============================================================ */


/* ════════════════════════════════════════
   CSS CUSTOM PROPERTY TEMATICA
   Ogni classe body ridefinisce --tema-color.
   Tutti gli elementi tematici usano questa variabile
   invece dei colori hardcoded — un solo punto di controllo.
════════════════════════════════════════ */
body.tema--yoga   { --tema-color: var(--color-yoga);   --tema-color-dark: #2E4566; }
body.tema--cabala { --tema-color: var(--color-cabala); --tema-color-dark: #6A5422; }
body.tema--celtica { --tema-color: var(--color-celtica); --tema-color-dark: #2A4C3C; }
body.tema--tibet  { --tema-color: var(--color-tibet);  --tema-color-dark: #5E2222; }
body.tema--tao    { --tema-color: var(--color-tao);    --tema-color-dark: #80362A; }
body.tema--olis   { --tema-color: var(--color-olis);   --tema-color-dark: #7A3E1A; }


/* ════════════════════════════════════════
   HERO TEMA
   Sfondo colorato (da JS via style inline),
   testo a sinistra, foto a destra.
════════════════════════════════════════ */
.tema-hero {
  padding: var(--space-xl) var(--space-sm);
  position: relative;
  overflow: hidden;
  /* Il colore arriva da --tema-color (classe body.tema--X messa da JS);
     fallback greige per il caso no-JS / tema non valido */
  background: var(--tema-color, var(--color-greige));
}
@media (min-width: 768px) {
  .tema-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-2xl);
    min-height: 420px;
  }
}
@media (min-width: 1024px) {
  .tema-hero {
    grid-template-columns: 1.1fr 0.9fr;
    padding: var(--space-2xl) var(--space-2xl);
  }
}

/* Yantra nell'hero PROVATO e BOCCIATO da Davide (giro 1, 21/07/2026):
   si sovrapponeva a troppe cose (icona, script, titolo, foto).
   Lo yantra resta solo nella fascia Risorse (.tema-shop__yantra). */

/* Cerchi decorativi negli hero RIMOSSI da tutte le pagine
   (giro 3, 21/07/2026: "elementi grafici che non ci stanno a dire
   niente" — Davide, foto-16). */

/* Icona emoji grande — sopra lo script */
.tema-hero__icona {
  font-size: 44px;
  display: block;
  margin-bottom: var(--space-xs);
  line-height: 1;
  position: relative;
  z-index: 1;
  color: #ffffff;
}
@media (min-width: 768px) { .tema-hero__icona { font-size: 52px; } }

.tema-hero__script {
  font-family: var(--font-script);
  font-size: clamp(28px, 5vw, 42px);
  /* 18/08/2026: da .35 a .65 — sotto il 60% il corsivo su fondo scuro
     non si legge (soglia validata il 10/08 sulle CTA) */
  color: rgba(255,255,255,.65);
  display: block;
  line-height: 1.1;
  margin-bottom: -4px;
  position: relative;
  z-index: 1;
}

.tema-hero__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(36px, 7vw, 64px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.tema-hero__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.8);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.tema-hero__cta {
  position: relative;
  z-index: 1;
}

/* Foto destra hero — trattamento standard: radius 12 (come home/chi-sono),
   ombra morbida, img assoluta che riempie sempre il riquadro, shine ambient */
.tema-hero__photo {
  border-radius: 12px;
  overflow: hidden;
  min-height: 260px;
  max-height: 480px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  /* nascosta su mobile — il colore del bg basta */
  display: none;
}
@media (min-width: 768px) {
  .tema-hero__photo {
    display: block;
    min-height: 320px;
  }
}
@media (min-width: 1024px) {
  .tema-hero__photo { min-height: 380px; }
}
.tema-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inquadratura sui volti: mai tagliare le teste (giro 1, foto ritratto
     croppata dal cover). 30% di default, override per-tema sotto —
     stessi valori validati su chi-sono per le stesse foto. */
  object-position: center 30%;
}
body.tema--yoga  .tema-hero__photo img { object-position: center 28%; }
/* 20/09: Tibet e Tao = foto VF in studio davanti al thangka (4:3, volto a metà altezza) */
body.tema--tibet .tema-hero__photo img { object-position: center 40%; }
body.tema--tao   .tema-hero__photo img { object-position: center 40%; }
/* 20/09: cerchio delle pietre (foto VF, 4:3) — il cerchio sta al centro del fotogramma */
body.tema--celtica .tema-hero__photo img { object-position: center 55%; }

/* Placeholder senza foto (es. Olis): yantra doppio e più visibile del
   default globale — nel riquadro grande dell'hero i 140px al 18% quasi
   non si vedevano (giro 3, foto-17) */
.tema-hero__photo:not(:has(img))::before {
  background-size: min(90%, 280px);
  opacity: .32;
}

/* Shine ambient — stessi keyframes vf-shine-sweep di vf-patch.css.
   inset 0: qui la foto riempie tutto il riquadro, niente cornicetta,
   quindi la luce non può uscire dalla foto. */
.tema-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  opacity: 0;
  /* 9s (non i 5 di home): "lo shine è troppo veloce" — giro 1, 21/07/2026 */
  animation: vf-shine-sweep 9s ease-in-out infinite;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .tema-hero__photo::after { animation: none; display: none; }
}


/* Breadcrumb: rimosso da tradizione.html il 23/07; gli stili (rivisti)
   vivono ora in articolo.css, unica pagina che lo usa */


/* ════════════════════════════════════════
   SEZIONE INTRO — approccio di Vittoria
════════════════════════════════════════ */
.tema-intro {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-sm);
}
@media (min-width: 768px) {
  .tema-intro {
    padding: var(--space-2xl) var(--space-md);
  }
}
@media (min-width: 1024px) {
  .tema-intro { padding: var(--space-2xl) var(--space-lg); }
}

.tema-intro__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .tema-intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.tema-intro__eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  /* Il colore dell'eyebrow segue il tema */
  color: var(--tema-color, var(--color-gold));
  display: block;
  margin-bottom: var(--space-xs);
}

.tema-intro__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 3.5vw, var(--fs-xl));
  line-height: 1.3;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}

.tema-intro__testo {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-mid);
}

/* L'intro può avere più paragrafi (Olis, 24/08): blog.js li accoda */
.tema-intro__testo + .tema-intro__testo {
  margin-top: var(--space-sm);
}

/* Foto Vittoria nel contesto — lato sinistro/destro.
   Senza foto: fondo del colore tema + yantra tenue (regola globale
   .photo-placeholder:not(:has(img)) in base.css) */
.tema-intro__photo {
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
  max-height: 480px;
  position: relative;
  background: var(--tema-color, var(--color-greige));
}
@media (min-width: 768px) {
  .tema-intro__photo { min-height: 360px; }
}
.tema-intro__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inquadratura sul volto, mai tagliare le teste (giro 1) */
  object-position: center 30%;
}

/* Ombra e shine solo quando c'è la foto vera; il placeholder yantra
   resta piatto e tenue (regola §5) */
.tema-intro__photo:has(img) { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.tema-intro__photo:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  opacity: 0;
  /* 9s come l'hero (shine rallentato, giro 1) */
  animation: vf-shine-sweep 9s ease-in-out infinite;
  animation-delay: 4.5s;   /* sfasato di mezzo ciclo rispetto all'hero */
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .tema-intro__photo:has(img)::after { animation: none; display: none; }
}

/* Placeholder intro senza foto: yantra doppio e più visibile, come
   nell'hero di Olis (23/07 — i 140px al 18% del default globale
   sparivano nel riquadro da 280–480px) */
.tema-intro__photo:not(:has(img))::before {
  background-size: min(90%, 280px);
  opacity: .32;
}

/* Accento colorato tematico accanto alla foto — sopra img e shine
   (l'img è assoluta e viene dopo nel DOM: senza z-index sparirebbe) */
.tema-intro__accent {
  position: absolute;
  bottom: -1px; left: -1px;
  width: 48px; height: 4px;
  background: var(--tema-color, var(--color-gold));
  border-radius: 0 2px 0 0;
  z-index: 3;
}


/* ════════════════════════════════════════
   SEZIONE ARTICOLI
════════════════════════════════════════ */
.tema-articoli {
  background: var(--color-white);
  padding: var(--space-xl) var(--space-sm) var(--space-2xl);
}
@media (min-width: 640px) {
  .tema-articoli { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}
@media (min-width: 1024px) {
  .tema-articoli { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
}

.tema-articoli__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.tema-articoli__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: var(--border);
  scroll-margin-top: 120px; /* bersaglio di scrollIntoView: non nascosto dalla navbar sticky */
}

.tema-articoli__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 3vw, var(--fs-xl));
  color: var(--color-text-dark);
}

.tema-articoli__link-blog {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--tema-color, var(--color-gold));
  transition: opacity var(--transition-fast);
}
.tema-articoli__link-blog:hover { opacity: .7; }


/* ════════════════════════════════════════
   SHOP CTA SECTION
   Sfondo tematico, link a prodotti correlati
════════════════════════════════════════ */
.tema-shop {
  /* Il colore arriva da --tema-color, come l'hero */
  background: var(--tema-color, var(--color-greige));
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .tema-shop { padding: var(--space-2xl) var(--space-2xl); }
}

/* Yantra luminoso di sfondo — stesso pattern dell'hero tema.
   (La vecchia riga decorativa ::before da 3px è stata sostituita
   dalla wave vera sopra la sezione.) */
.tema-shop__yantra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../img/brand/vf-yantra.png');
  background-repeat: no-repeat;
  /* Centrato dietro a tutto (scelta di Davide, 10/08/2026): la
     leggibilità si è risolta alzando l'opacità dei testi e tenendo
     lo yantra più tenue, non spostandolo. */
  background-position: center;
  background-size: auto min(85%, 480px);
  mix-blend-mode: screen;
  opacity: .22;
  filter: brightness(1.08) saturate(.85);
}
/* Su schermi stretti il testo occupa quasi tutta la larghezza:
   yantra ancora più tenue */
@media (max-width: 767px) {
  .tema-shop__yantra { opacity: .14; }
}

.tema-shop__inner {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.tema-shop__eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.85);   /* era .6: illeggibile sui fondi tema */
  display: block;
  margin-bottom: var(--space-xs);
}

.tema-shop__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 3.5vw, var(--fs-xl));
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.tema-shop__testo {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.9);   /* era .75: poco nitido sui fondi tema */
  line-height: 1.85;
  margin-bottom: 0;
}

/* Disclaimer sotto le card */
.tema-shop__disclaimer {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: 12px;   /* era 8px al 35%: illeggibile */
  letter-spacing: var(--ls-base);
  color: rgba(255,255,255,.8);   /* era .55: illeggibile sui fondi tema */
  text-transform: uppercase;
  margin-top: var(--space-sm);
  display: block;
}

/* ── Variante card libri (10/08/2026): stesso schema .shop-card
   della sezione Shop in home (stili in components.css) ── */
.tema-shop__inner--shop { max-width: 1140px; }

.tema-shop__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 680px;
  margin: var(--space-md) auto 0;
}
/* Stesso guardrail anti grid-blowout della home (components.css) */
.tema-shop__track .shop-card,
.tema-shop__track .shop-card__body { min-width: 0; }

@media (min-width: 1024px) {
  .tema-shop__track--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1140px;
  }
}

/* ── Variante placeholder CTA (Tibet, Tao): specchia la .cs-cta
   di chi-sono, sul colore tema ── */
.tema-shop__script {
  font-family: var(--font-script);
  font-size: clamp(32px, 5vw, 46px);
  color: rgba(255,255,255,.6);
  display: block;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.tema-shop__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-md);
}
@media (min-width: 480px) {
  .tema-shop__actions { flex-direction: row; }
}


/* ════════════════════════════════════════
   BARRA TEMI (evidenzia il tema attivo)
════════════════════════════════════════ */
.themes-bar__item--active {
  background: rgba(0,0,0,.12);
  font-weight: var(--fw-light);
}


/* ════════════════════════════════════════
   ALTRI TEMI — sezione fondo pagina
════════════════════════════════════════ */
.altri-temi {
  background: var(--color-greige-lt);
  /* Niente padding laterale: la griglia tradizioni va a tutta
     larghezza come in home; titolo e sotto hanno il loro respiro */
  padding: var(--space-xl) 0;
  text-align: center;
}

.altri-temi__titolo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  color: var(--color-text-dark);
  margin-bottom: var(--space-xs);
  padding: 0 var(--space-sm);
}

.altri-temi__sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  padding: 0 var(--space-sm);
}

/* La griglia card usa .themes-grid/.theme-card condivise con la home
   (components.css, 21/07/2026) — qui nessuno stile locale. */


/* ════════════════════════════════════════
   WAVE della pagina tema — standard sito
   (curva alta sx/bassa dx; bg = sezione sopra, fill = sezione sotto;
   ombra verso l'alto con clip, come blog e chi-sono).
   Le due wave "colorate" leggono --tema-color dalla classe body.
════════════════════════════════════════ */
.wave-divider--tema-hero-bottom  { background: var(--tema-color, var(--color-greige)); }
.wave-divider--tema-articoli-top { background: var(--color-cream); }
.wave-divider--tema-shop-top     { background: var(--color-white); }
.wave-divider--tema-altri-top    { background: var(--tema-color, var(--color-greige)); }
.wave-divider--tema-footer-top   { background: var(--color-greige-lt); }

.wave-divider--tema-hero-bottom,
.wave-divider--tema-articoli-top,
.wave-divider--tema-shop-top,
.wave-divider--tema-altri-top,
.wave-divider--tema-footer-top {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;
}
.wave-divider--tema-hero-bottom svg,
.wave-divider--tema-articoli-top svg,
.wave-divider--tema-shop-top svg,
.wave-divider--tema-altri-top svg,
.wave-divider--tema-footer-top svg {
  display: block;
  filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}


/* ════════════════════════════════════════
   Regola respiro (§3): 24px laterali già dai 480px — i 16px di
   --space-sm restano solo sotto i 480 (stesso precedente di blog).
════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {
  .tema-hero,
  .tema-intro,
  .tema-articoli,
  .tema-shop {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  /* La sezione altri-temi ha la griglia a tutta larghezza (come in home):
     il respiro si dà solo a titolo e sottotitolo */
  .altri-temi__titolo,
  .altri-temi__sub {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}


/* ════════════════════════════════════════
   TOOLBAR ARTICOLI — conteggio + campo di ricerca nel tema
   (sostituisce la tendina di ordinamento del blog: qui si cerca,
   deciso da Davide 27/07/2026)
════════════════════════════════════════ */
.tema-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
}

.tema-toolbar__count {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  color: var(--color-text-light);
}
.tema-toolbar__count strong {
  color: var(--color-text-mid);
  font-weight: var(--fw-light);
}

.tema-toolbar__search {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;              /* come il select del blog; 16px su mobile */
  letter-spacing: var(--ls-base);
  color: var(--color-text-mid);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-white);
  padding: 8px 12px 8px 32px;   /* spazio a sinistra per la lente */
  width: min(300px, 100%);
  outline: none;
  transition: border-color var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A9280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
}
.tema-toolbar__search:focus { border-color: var(--color-gold); }
.tema-toolbar__search::placeholder { color: var(--color-text-light); }

/* Mobile: campo a tutta riga e 16px (niente auto-zoom iOS al focus) */
@media (max-width: 767px) {
  .tema-toolbar__search { font-size: 16px; width: 100%; }
}