/* ============================================================
   VITTORIA FORNARI — Home Page  (mobile-first)
   home.css
   Solo stili esclusivi della Home.
   Componenti condivisi (blog-card, testimonial, ecc.) → components.css
   ============================================================ */

/* ════════════════════════════════════════
   HERO — mobile: impilato, desktop: 3 colonne
════════════════════════════════════════ */
.hero {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    min-height: 520px;
  }
}

.hero__photo {
  display: none;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px)  { .hero__photo { display: block; min-height: 300px; } }
@media (min-width: 1024px) { .hero__photo { min-height: unset; } }
.hero__photo img { width:100%; height:100%; object-fit:cover; transition: transform var(--transition-slow); }
.hero__photo:hover img { transform: scale(1.03); }
/* Giro 5 (18/07/2026): colonne uniformi — anche la destra in greige caldo
   (era sage: le due cornici di colore diverso stonavano, foto-07) */
.hero__photo--left  { background: var(--color-greige-warm); }
.hero__photo--right { background: var(--color-greige-warm); }

.hero__center {
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  min-height: 60vw;
}
@media (min-width: 640px)  { .hero__center { min-height: 420px; padding: var(--space-2xl) var(--space-xl); } }
@media (min-width: 1024px) { .hero__center { min-height: unset; } }

.hero__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: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.35;
  color: var(--color-text-dark);
  margin-bottom: var(--space-xs);
}
.hero__title em { font-style:italic; color: var(--color-gold); }
.hero__script {
  font-family: var(--font-script);
  font-size: clamp(34px, 7vw, 48px);
  color: var(--color-greige-md);
  display: block;
  margin-bottom: var(--space-lg);
  line-height: 1;
}

/* ════════════════════════════════════════
   INTRO centrata
════════════════════════════════════════ */
.intro {
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  background: var(--color-white);
}
@media (min-width: 640px) { .intro { padding: var(--space-2xl) var(--space-md); } }
.intro__inner { max-width: var(--max-width-narrow); margin: 0 auto; }
.intro__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-mid);
  margin-top: var(--space-md);
}

/* ════════════════════════════════════════
   ABOUT PREVIEW
════════════════════════════════════════ */
.about-preview {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .about-preview { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
}
.about-preview__photo {
  /* background: #C0B0A0; */
  background: var(--color-cream);
  border: 1px solid var(--color-gold);
  min-height: 280px;
  overflow: hidden;
}
@media (min-width: 768px) { .about-preview__photo { min-height: unset; } }
.about-preview__photo img { width:100%; height:100%; object-fit:cover; transition: transform var(--transition-slow); }
.about-preview__text {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) { .about-preview__text { padding: var(--space-2xl); } }
.about-preview__script {
  font-family: var(--font-script);
  font-size: clamp(36px, 6vw, 52px);
  color: var(--color-greige-md);
  display: block;
  margin-bottom: var(--space-xs);
  line-height: 1;
}
.about-preview__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(18px, 3vw, var(--fs-xl));
  line-height: 1.3;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}
.about-preview__body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-mid);
  margin-bottom: var(--space-lg);
}

/* ════════════════════════════════════════
   6 AREE TEMATICHE
════════════════════════════════════════ */
.themes-intro {
  background: var(--color-white);
  padding: var(--space-xl) var(--space-sm) var(--space-md);
  text-align: center;
}
/* ── Le regole .themes-grid/.theme-card sono migrate in components.css
   (21/07/2026, condivise con tradizione.html "Esplora le altre tradizioni") ── */

/* ── SHOP: le regole .shop-preview/.shop-card sono migrate in components.css
   (19/07/2026, condivise con chi-sono.html) ── */

/* ════════════════════════════════════════
   BLOG PREVIEW (wrapper)
════════════════════════════════════════ */
.blog-preview {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-sm);
}
/* Home: 4 articoli in fila dai 1024px (la pagina blog resta a 3).
   Deciso 18/07/2026 — se in anteprima non stanno bene si torna a 3
   (PREVIEW_COUNT in blog.js + questa regola). */
@media (min-width: 1024px) {
  .blog-preview .blog-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px)  { .blog-preview { padding: var(--space-2xl) var(--space-md); } }
@media (min-width: 1024px) { .blog-preview { padding: var(--space-2xl) var(--space-lg); } }
.blog-preview__header { text-align:center; margin-bottom:var(--space-xl); }
.blog-preview__grid { max-width:var(--max-width); margin:0 auto var(--space-xl); }
.blog-preview__cta { text-align:center; }

/* ════════════════════════════════════════
   NEWSLETTER
════════════════════════════════════════ */
.newsletter { display:flex; flex-direction:column; }
@media (min-width: 768px) { .newsletter { display:grid; grid-template-columns:1.1fr 0.9fr; min-height:320px; } }
/* Giro 5: sfondo cella = greige-lt come la colonna testi (era #B8A888:
   la cornice attorno alla foto sembrava una toppa, foto-03) */
.newsletter__photo { background:var(--color-greige-lt); min-height:220px; overflow:hidden; }
@media (min-width: 768px) { .newsletter__photo { min-height:unset; } }
.newsletter__photo img { width:100%; height:100%; object-fit:cover; }
.newsletter__content { background:var(--color-greige-lt); padding:var(--space-xl) var(--space-md); display:flex; flex-direction:column; justify-content:center; }
@media (min-width: 1024px) { .newsletter__content { padding:var(--space-2xl) var(--space-xl); } }
.newsletter__title { font-family:var(--font-serif); font-weight:var(--fw-light); font-size:clamp(18px,3vw,var(--fs-xl)); line-height:1.3; color:var(--color-text-dark); margin-bottom:var(--space-sm); }
.newsletter__body { font-family:var(--font-sans); font-weight:var(--fw-light); font-size:var(--fs-sm); line-height:1.8; color:var(--color-text-mid); margin-bottom:var(--space-lg); }
.newsletter__form { display:flex; flex-direction:column; gap:var(--space-xs); }
@media (min-width: 480px) { .newsletter__form { flex-direction:row; } }
.newsletter__input { flex:1; border-radius:var(--radius); padding:13px var(--space-sm); font-family:var(--font-sans); font-weight:var(--fw-light); font-size:var(--fs-sm); color:var(--color-text-dark); outline:none; transition:border-color var(--transition-fast); width:100%; background:var(--color-white); border:var(--border); }
.newsletter__input::placeholder { color:var(--color-text-light); font-size:var(--fs-xs); letter-spacing:var(--ls-base); text-transform:uppercase; }
.newsletter__input:focus { border-color:var(--color-gold); }

/* ── Newsletter: riga consenso + esito invio (06/08) ───────── */
.newsletter__consenso {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .75rem; font-size: .85rem; line-height: 1.45;
}
.newsletter__consenso input { margin-top: .2rem; flex-shrink: 0; }
.newsletter__consenso a { color: var(--color-gold); }
.newsletter__esito { margin-top: .75rem; font-size: .9rem; min-height: 1.3em; }