/* Testata illustrata per le pagine hub (piatti, band, storiche, /sagre, manifesto…) —
   stessa resa delle pagine geo (geo-pages.css), applicabile a qualsiasi testata esistente
   aggiungendo la classe .ill-hero. L'SVG arriva dal server: <!--ART:nome--> → server/geo-art.js.
   Selettori raddoppiati: vincono sugli <style> inline delle pagine senza !important. */

.ill-hero.ill-hero {
  position: relative; overflow: hidden; text-align: left;
  background: #fff; color: #1B2A1E; border-bottom: 1px solid #E7E5DF;
  padding: 1.6rem 1rem 1.6rem; margin: 0;
}
.ill-hero.ill-hero > :not(.geo-art) { position: relative; z-index: 1; }
.ill-hero .geo-art { position: relative; display: block; width: 230%; max-width: none; height: auto; margin: -1.6rem 0 .6rem -130%; z-index: 0; pointer-events: none; }
.ill-hero.ill-hero h1 {
  color: #1B2A1E; font-size: clamp(1.8rem, 4.8vw, 2.7rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 .8rem; max-width: 15em;
}
.ill-hero.ill-hero h1 span, .ill-hero.ill-hero h1 em { color: #C2410C; font-style: normal; }
.ill-hero.ill-hero p { color: #5B6458; font-size: 1.02rem; line-height: 1.6; max-width: 34em; margin: 0; }
.ill-hero.ill-hero p strong { color: #1B2A1E; }
.ill-hero .ill-eyebrow {
  display: inline-block; margin-bottom: .8rem; padding: .25rem .8rem; border-radius: 999px;
  background: #EAF6EF; border: 1px solid #CBE9D7; color: #007A38;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 760px) {
  .ill-hero.ill-hero { padding: 2.2rem max(1.25rem, calc((100% - 1040px) / 2)) 2.8rem; min-height: 290px; }
  .ill-hero .geo-art { position: absolute; right: 0; bottom: 0; margin: 0; width: min(1150px, 112%); }
  .ill-hero.ill-hero > :not(.geo-art) { max-width: 560px; }
}
/* Dentro un contenitore già centrato (es. .seo-page) la testata va a filo dei bordi */
.seo-page > .ill-hero.ill-hero { margin: 0 -1rem 1.6rem; }
@media (min-width: 760px) { .seo-page > .ill-hero.ill-hero { padding-left: 1rem; padding-right: 1rem; } }

/* ── Pagine dettaglio (singolo piatto /tag/:slug, band /band/:slug) ──────────────
   Il JS della pagina alterna #hero-notitle (senza foto) e #hero-img-wrap (con foto)
   con style.display: qui solo CSS, la logica resta quella. Con la foto: card a destra
   al posto dell'illustrazione. */
.seo-hero.ill-hero { padding-top: 1.4rem; }
.ill-hero .seo-hero-notitle { padding: 0; text-align: left; }
.ill-hero .seo-hero-notitle .breadcrumb, .ill-hero .seo-hero-overlay .breadcrumb { justify-content: flex-start !important; color: #5B6458; font-size: .8rem; }
.ill-hero .breadcrumb a { color: #5B6458; text-decoration: none; }
.ill-hero .breadcrumb a:hover { color: #007A38; text-decoration: underline; }
.ill-hero.ill-hero .seo-hero-notitle h1, .ill-hero.ill-hero .seo-hero-overlay h1 { text-shadow: none; color: #1B2A1E; }
.ill-hero #hero-img-wrap:not([style*="none"]) { display: grid !important; grid-template-columns: 1fr; gap: 1rem; }
.ill-hero .seo-hero-overlay { position: static; background: none; padding: 0; grid-row: 1; display: flex; flex-direction: column-reverse; gap: .5rem; }
.ill-hero .seo-hero-img { grid-row: 2; opacity: 1; width: 100%; max-height: 260px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.ill-hero .hero-credit { grid-row: 3; }
.ill-hero:has(#hero-img-wrap:not([style*="none"])) .geo-art { display: none; }
.ill-hero.ill-hero:has(#hero-img-wrap:not([style*="none"])) { padding-bottom: 1.6rem; }
@media (min-width: 760px) {
  .ill-hero.ill-hero:has(#hero-img-wrap:not([style*="none"])) > #hero-img-wrap { max-width: none; }
  .ill-hero #hero-img-wrap:not([style*="none"]) { grid-template-columns: 1fr 44%; align-items: center; gap: 2.5rem; }
  .ill-hero .seo-hero-overlay { grid-column: 1; grid-row: 1; }
  .ill-hero .seo-hero-img { grid-column: 2; grid-row: 1; max-height: 300px; }
  .ill-hero .hero-credit { grid-column: 2; grid-row: 2; }
}

/* ── Sagra storica (/sagre-storiche/:slug): foto di sfondo → card a destra ── */
.ss-hero.ill-hero { min-height: 0; justify-content: flex-start; }
.ss-hero.ill-hero .ss-hero-gradient { display: none; }
.ss-hero.ill-hero .ss-hero-content { padding: 0; margin: 0; max-width: 560px; }
.ss-hero.ill-hero .ss-breadcrumb { color: #5B6458; }
.ss-hero.ill-hero .ss-breadcrumb a { color: #5B6458; text-decoration: none; }
.ss-hero.ill-hero .ss-era-badge { background: #FFF3EA; border-color: #F6D3BC; color: #C2410C; backdrop-filter: none; }
.ss-hero.ill-hero .ss-hero-title { color: #1B2A1E; text-shadow: none; }
.ss-hero.ill-hero .ss-hero-location { color: #5B6458; }
.ss-hero.ill-hero .ss-hero-bg { position: static; display: none; width: 100%; height: 210px; border-radius: 18px; margin-bottom: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.ss-hero.ill-hero .ss-hero-bg.loaded { display: block; opacity: 1; }
.ss-hero.ill-hero:has(.ss-hero-bg.loaded) .geo-art { display: none; }
.ss-hero.ill-hero:has(.ss-hero-bg.loaded) { padding-bottom: 1.6rem; }
@media (min-width: 1000px) {
  .ss-hero.ill-hero .ss-hero-bg { position: absolute; right: max(1.25rem, calc((100% - 1040px) / 2)); top: 1.6rem; bottom: 1.6rem; width: 40%; height: auto; margin: 0; }
}

/* ── Manifesto: testata a tutta altezza scura → testata illustrata ── */
.mf-hero.ill-hero { min-height: 0; display: block; }
.mf-hero.ill-hero::before { display: none; }
.mf-hero.ill-hero .mf-hero-inner { max-width: 620px; margin: 0; padding: 0; }
.mf-hero.ill-hero .tag { margin-bottom: 1rem; }
.mf-hero.ill-hero .section-sub { margin-top: 1rem; }
@media (min-width: 760px) { .mf-hero.ill-hero { padding-top: 3rem; padding-bottom: 3.4rem; min-height: 360px; } }

/* ── Per te: la testata era una card verde dentro il contenitore ── */
.hub-hero.ill-hero { border-radius: 18px; border: 1px solid #E7E5DF; margin-bottom: 1rem; }
@media (min-width: 760px) { .hub-hero.ill-hero { padding-left: 1.6rem; padding-right: 1.6rem; } }
.hub-hero.ill-hero .hero-prefs { color: #1B2A1E; }
/* Archivio: .page-header aveva il suo stile centrato */
.page-header.ill-hero h1 { margin-top: 0; }
.hub-hero.ill-hero .hp-chip { background: #EAF6EF; color: #007A38; border: 1px solid #CBE9D7; }
.hub-hero.ill-hero .hp-btn { background: #007A38; color: #fff; }
.hub-hero.ill-hero .hp-btn.ghost { background: #fff; color: #007A38; border-color: #CBE9D7; }

/* Mobile (prova 2026-10-13): scena più piccola, subito sotto il titolo come su desktop.
   Colonna flex + order: l'HTML delle pagine resta com'è. */
@media (max-width: 759px) {
  .ill-hero.ill-hero { display: flex; flex-direction: column; }
  .ill-hero.ill-hero > * { order: 3; }
  .ill-hero.ill-hero > .breadcrumb, .ill-hero.ill-hero > nav, .ill-hero.ill-hero > .ill-eyebrow, .ill-hero.ill-hero > h1,
  .ill-hero.ill-hero > .seo-hero-notitle, .ill-hero.ill-hero > .mf-hero-inner, .ill-hero.ill-hero > .ss-hero-content,
  .ill-hero.ill-hero > #hero-img-wrap, .ill-hero.ill-hero > .ss-hero-bg { order: 1; }
  .ill-hero.ill-hero > .ill-eyebrow { align-self: flex-start; }
  .ill-hero.ill-hero > .geo-art { order: 2; width: 150%; margin: -.3rem 0 .4rem -50%; }
}