/* ============================================================
   VITTORIA FORNARI — Pagina Blog
   blog.css
   Solo stili esclusivi di blog.html.
   Componenti condivisi (blog-card, filter-bar, pagination,
   page-hero, ecc.) → components.css
   ============================================================ */


/* ════════════════════════════════════════
   HERO BLOG
   Sfondo greige con pattern sottile e citazione centrale
════════════════════════════════════════ */
.blog-hero {
  background: var(--color-greige-lt);
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .blog-hero { padding: var(--space-2xl) var(--space-md); }
}

/* Cerchi decorativi rimossi (giro 3 tema, 21/07/2026 — Davide:
   via da tutte le hero, non comunicavano niente) */

/* Yantra luminoso di sfondo (foto-12, 20/07/2026) — stesso pattern
   approvato per la citazione di chi-sono: blend screen, mai tagliato
   (altezza ≤85% dell'hero, tetto 480px) */
.blog-hero__yantra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../img/brand/vf-yantra.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto min(85%, 480px);
  mix-blend-mode: screen;
  opacity: .35;
  filter: brightness(1.08) saturate(.85);
}

.blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.blog-hero__script {
  font-family: var(--font-script);
  font-size: clamp(38px, 6vw, 56px);
  color: var(--color-greige-md);
  display: block;
  line-height: 1.1;
  margin-bottom: -4px;
}

.blog-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(26px, 5vw, var(--fs-2xl));
  color: var(--color-text-dark);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.blog-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: var(--color-text-mid);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto;
}


/* ════════════════════════════════════════
   ARTICOLO IN EVIDENZA (featured)
   Prima card — più grande, occupa tutta la larghezza
════════════════════════════════════════ */
.blog-featured {
  background: var(--color-white);
  /* padding-bottom pieno (prima 0): ora sotto c'è la wave, la card
     non deve toccarla */
  padding: var(--space-xl) var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 640px) {
  .blog-featured { padding: var(--space-xl) var(--space-md); }
}
@media (min-width: 1024px) {
  .blog-featured { padding: var(--space-xl) var(--space-lg); }
}

.blog-featured__label {
  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);
  display: block;
  margin-bottom: var(--space-sm);
}

/* La card featured usa blog-card--featured da components.css,
   qui sovrascriviamo solo le dimensioni dell'immagine */
.blog-featured .blog-card--featured .blog-card__image {
  min-height: 260px;
}
@media (min-width: 768px) {
  .blog-featured .blog-card--featured .blog-card__image {
    min-height: 360px;
  }
}

/* Testo più grande nella card featured */
.blog-featured .blog-card__title {
  font-size: clamp(18px, 3vw, var(--fs-xl));
  line-height: 1.3;
}
.blog-featured .blog-card__excerpt {
  display: block; /* override del --compact che la nasconde */
  font-size: var(--fs-sm);
}
.blog-featured .blog-card__body {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .blog-featured .blog-card__body { padding: var(--space-xl) var(--space-2xl); }
}


/* ════════════════════════════════════════
   TOOLBAR (conta risultati + ordinamento)
════════════════════════════════════════ */
.blog-toolbar {
  display: flex;
  align-items: center;
  /* 27/08: entra il pulsante "Tutti" a inizio riga (variante A) —
     Tutti + contatore a sinistra, ricerca spinta a destra dal margin */
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* respiro anche sotto (foto-17): contatore e ordinamento erano
     attaccati alle card della griglia */
  padding: var(--space-md) 0;
}
.blog-toolbar__search { margin-left: auto; }

.blog-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);
}
.blog-toolbar__count strong {
  color: var(--color-text-mid);
  font-weight: var(--fw-light);
}

/* Campo di ricerca su tutti gli articoli — sostituisce la tendina di
   ordinamento (deciso da Davide 27/07/2026); stesso stile della
   .tema-toolbar__search della pagina tema */
.blog-toolbar__search {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;              /* come il vecchio select; 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;
}
.blog-toolbar__search:focus { border-color: var(--color-gold); }
.blog-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) {
  .blog-toolbar__search { font-size: 16px; width: 100%; }
}


/* ════════════════════════════════════════
   SEZIONE PRINCIPALE BLOG (layout a 2 colonne)
   Sinistra: griglia articoli  |  Destra: sidebar
════════════════════════════════════════ */
.blog-main {
  /* Fascia cream (prima bianca): ritmo di fasce alternate con le wave */
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-sm) var(--space-2xl);
}
@media (min-width: 640px) {
  .blog-main { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}
@media (min-width: 1024px) {
  .blog-main { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
}

.blog-main__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
  .blog-main__inner {
    grid-template-columns: 1fr 280px;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* Colonna articoli */
.blog-main__articles {}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Sticky su desktop */
@media (min-width: 1024px) {
  .blog-sidebar {
    position: sticky;
    /* sotto header compatto + barra progresso (4px) */
    top: calc(var(--header-compact-h) + 24px);
  }
}

/* Widget generico sidebar (.sidebar-widget) e lista articoli
   (.sidebar-recent*) e newsletter (.sidebar-newsletter*):
   → migrati in components.css (23/07/2026, condivisi con articolo.html) */

/* Widget: temi (5 link colorati) */
.sidebar-temi {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sidebar-tema-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: var(--color-text-mid);
  padding: 9px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: 1px solid transparent;
}
.sidebar-tema-link:hover {
  background: var(--color-greige-lt);
}
.sidebar-tema-link.active {
  background: var(--color-greige-lt);
  border-color: var(--border-color);
}

.sidebar-tema-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-tema-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  font-weight: var(--fw-thin);
}


/* ════════════════════════════════════════
   WAVE della pagina blog — standard sito
   (curva alta sx/bassa dx; bg = sezione sopra, fill = sezione sotto;
   ombra verso l'alto con clip, come le --cs-* di chi-sono)
════════════════════════════════════════ */
.wave-divider--blog-hero-bottom { background: var(--color-greige-lt); }
.wave-divider--blog-main-top    { background: var(--color-white); }
.wave-divider--blog-footer-top  { background: var(--color-cream); }

.wave-divider--blog-hero-bottom,
.wave-divider--blog-main-top,
.wave-divider--blog-footer-top {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  margin-top: -10px;
}
.wave-divider--blog-hero-bottom svg,
.wave-divider--blog-main-top svg,
.wave-divider--blog-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 della
   shop card, commit 997eca4). Le regole base passano a 24px solo
   a 640 (featured/main) o 768 (hero): qui copriamo la fascia buca.
════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 639px) {
  .blog-featured,
  .blog-main {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .blog-hero {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}