/*
 * hero-banner.css — DJ Nash
 * Stili per il banner hero full-width delle pagine single.
 *
 * Struttura visiva:
 *   ┌─ .post-hero-banner  (position:relative, full viewport width) ─────────┐
 *   │   <img hidden>  →  background-image via CSS var(--hero-bg)            │
 *   │   .post-hero-banner__overlay  (gradiente scuro)                       │
 *   │   .post-hero-banner__inner  (flex, align-end)                         │
 *   │     .container                                                         │
 *   │       breadcrumb / badges / h1 / meta / tags                          │
 *   │   .post-hero-banner__accent-line  (bordo colorato)                    │
 *   └────────────────────────────────────────────────────────────────────────┘
 *
 * L'immagine è resa come background-image via CSS custom property
 * in modo da:
 *   1. Coprire sempre tutto il viewport (object-fit: cover semantico)
 *   2. Non spostare il layout (nessun <img> che occupa spazio)
 *   3. Supportare srcset via <img> nascosto + fetchpriority="high" per preload
 *
 * Mobile-first: altezza minima cresce con i breakpoint.
 */

/* ============================================================
   WRAPPER PRINCIPALE — full viewport width
   Usa margin: 0 calc(-1 * var(--pad)) per uscire dal .container
   del parent. Il .container interno ri-centra il contenuto.
============================================================ */
.post-hero-banner {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       clamp(300px, 55vw, 580px);
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;           /* contenuto testuale al fondo */
  overflow:         hidden;
  margin-bottom:    0;

  /* La background-image viene iniettata via PHP inline style --hero-bg */
  background-image:    var(--hero-bg, none);
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;

  /* Separazione visiva dalla navbar */
  padding-top: var(--nav-h);
}

/* Altezze responsive */
@media (min-width: 600px) {
  .post-hero-banner { min-height: clamp(360px, 50vw, 620px); }
  .page-hero {min-height: clamp(200px, 30vw, 300px);}
}
@media (min-width: 1024px) {
  .post-hero-banner { min-height: clamp(440px, 45vw, 680px); }
  .page-hero {min-height: clamp(300px, 40vw, 400px);}
}
@media (min-width: 1440px) {
  .post-hero-banner { min-height: 680px; }
  .page-hero { min-height: 300px; }
}

/* Variante senza immagine: usa gradiente generato */
.post-hero-banner--no-image {
  background-image: none;
  background-color: var(--color-grey);
}
.post-hero-banner--no-image::before {
  content:      '';
  position:     absolute;
  inset:        0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, color-mix(in srgb, var(--hero-accent, #c8f500) 8%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,.01) 40px,
      rgba(255,255,255,.01) 41px
    );
  pointer-events: none;
}

/* ── Immagine nascosta (solo per preload / screen reader / SEO) ── */
.post-hero-banner__img-hidden {
  position:   absolute;
  width:      1px; height: 1px;
  opacity:    0;
  pointer-events: none;
  /* Non rimossa dal DOM — il browser la usa per il preload */
}

/* ── Pattern noise (variante senza immagine) ── */
.post-hero-banner__pattern {
  position: absolute; inset: 0; pointer-events: none;
  /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); */
  display: 200px 200px;
}

/* ============================================================
   OVERLAY GRADIENTE
   Doppio gradiente: scuro dal basso per leggibilità testo
   + vignettatura leggera sui lati
============================================================ */
.post-hero-banner__overlay {
  position: absolute;
  inset:    0;
  background:
    /* gradiente principale: trasparente → scuro verso il basso */
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  85%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    /* vignettatura radiale laterale */
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}

/* ============================================================
   INNER — contenitore testuale
============================================================ */
.post-hero-banner__inner {
  position:   relative;   /* sopra overlay */
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
}

.post-hero-banner__container {
  display:        flex;
  flex-direction: column;
  gap:            clamp(8px, 1.5vw, 14px);
}

/* ── Breadcrumb ── */
.post-hero-banner .breadcrumb {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .15em;
  color:          rgba(240, 237, 230, .5);
  text-transform: uppercase;
}
.post-hero-banner .breadcrumb a { color: inherit; transition: color var(--tr); }
.post-hero-banner .breadcrumb a:hover { color: var(--color-acid); }
.post-hero-banner .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.post-hero-banner .breadcrumb li { white-space: nowrap; }
.post-hero-banner .breadcrumb li + li::before { content: '›'; margin-right: 6px; opacity: .4; }

/* ============================================================
   BADGES
============================================================ */
.post-hero-banner__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  align-items: center;
}

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding:        4px 10px;
  border:         1px solid currentColor;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:     all var(--tr);
  line-height:    1;
}
.hero-badge:hover { background: rgba(255,255,255,.08); }

/* Colori per tipo badge */
.hero-badge--cat    { color: var(--color-acid);    border-color: rgba(200,245,0,.5);   background: rgba(200,245,0,.08); }
.hero-badge--genre  { color: var(--color-acid);    border-color: rgba(200,245,0,.35);  background: rgba(200,245,0,.06); }
.hero-badge--decade { color: var(--color-cyan);    border-color: rgba(0,212,255,.4);   background: rgba(0,212,255,.07); }
.hero-badge--era    { color: var(--color-acid);    border-color: rgba(200,245,0,.3);   background: rgba(200,245,0,.05); }
.hero-badge--nation { color: rgba(240,237,230,.7); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.hero-badge--active { color: var(--color-acid);    border-color: rgba(200,245,0,.5);   background: rgba(200,245,0,.10); }
.hero-badge--closed { color: var(--color-magenta); border-color: rgba(255,45,110,.5);  background: rgba(255,45,110,.10); }

/* ============================================================
   TITOLO H1
============================================================ */
.post-hero-banner__title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 6.5vw, 72px);
  line-height:    .92;
  letter-spacing: .02em;
  color:          var(--color-white);
  max-width:      900px;
  text-shadow:    0 2px 24px rgba(0,0,0,.5);
  margin:         0;
}

/* Artista: nome in evidenza con l'accent */
.post-hero-banner--artista .post-hero-banner__title {
  color: var(--color-acid);
}

/* Titoli molto lunghi: riduce il font su mobile */
@media (max-width: 480px) {
  .post-hero-banner__title { font-size: clamp(24px, 8vw, 36px); }
}
@media (max-width: 600px) {
  .hero-cta-fissa {
      left: 0 !important;
      transform: none !important;
      justify-self: center;
  }
}
/* ============================================================
   META ROW
============================================================ */
.post-hero-banner__meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px 10px;
  font-family: var(--font-mono);
  font-size:   clamp(10px, 1.8vw, 12px);
  letter-spacing: .1em;
  color:       rgba(240, 237, 230, .65);
}
.post-hero-banner__meta a { color: inherit; transition: color var(--tr); }
.post-hero-banner__meta a:hover { color: var(--color-acid); }

.hero-meta-item {
  display:     flex;
  align-items: center;
  gap:         5px;
}
.hero-meta-icon {
  font-size:   11px;
  opacity:     .7;
  flex-shrink: 0;
}
.hero-meta-sep { opacity: .35; }

/* ============================================================
   TAG (post standard)
============================================================ */
.post-hero-banner__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
  margin-top: 2px;
}
.hero-tag {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .12em;
  color:          rgba(240,237,230,.5);
  text-decoration: none;
  transition:     color var(--tr);
  padding:        2px 0;
}
.hero-tag:hover { color: var(--color-acid); }

/* ============================================================
   LINEUP PILLOLE (evento/esperienza)
============================================================ */
.post-hero-banner__lineup {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-top: 4px;
}
.hero-lineup-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        4px 10px 4px 4px;
  background:     rgba(255,255,255,.08);
  border:         1px solid rgba(255,255,255,.15);
  color:          var(--color-white);
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition:     all var(--tr);
}
.hero-lineup-pill:hover { background: rgba(200,245,0,.12); border-color: rgba(200,245,0,.4); color: var(--color-acid); }
.hero-lineup-pill__avatar {
  width:        24px;
  height:       24px;
  border-radius: 50%;
  object-fit:   cover;
  flex-shrink:  0;
}
.hero-lineup-pill--more {
  background: rgba(255,45,110,.12);
  border-color: rgba(255,45,110,.3);
  color: var(--color-magenta);
  cursor: default;
}

/* ============================================================
   WAVEFORM DECORATIVA (djset)
============================================================ */
.post-hero-banner__waveform {
  margin-top: 4px;
  height:     36px;
}

/* ============================================================
   ACCENT LINE — bordo colorato in basso
============================================================ */
.post-hero-banner__accent-line {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(
    90deg,
    var(--hero-accent, #c8f500) 0%,
    transparent 60%
  );
  opacity: .7;
}

/* ============================================================
   ARTISTA: foto profilo sovrapposta al banner
   Si posiziona in basso-sinistra e sborda nel contenuto
============================================================ */
.post-hero-banner--artista {
  /* Il contenuto ha più spazio per la foto profilo */
  padding-bottom: 0;
}

/* ============================================================
   CORREZIONE BREAKOUT su template con .container padre
   In alcuni contesti (es. dentro un .container con max-width)
   il breakout 50vw potrebbe non funzionare. Questa regola
   assicura che il banner sia sempre ancorato all'edge sinistro.
============================================================ */
.single-post .post-hero-banner,
.single-djset .post-hero-banner,
.single-venue .post-hero-banner,
.single-artista .post-hero-banner,
.single-evento .post-hero-banner,
.single-esperienza .post-hero-banner {
  /* Il banner NON va dentro .container — è fratello di esso */
  /* Questa regola è di sicurezza */
  width:       100vw;
  margin-left: calc(50% - 50vw);
}

/* ============================================================
   STATO: focus visibile per accessibilità
============================================================ */
.hero-badge:focus-visible,
.hero-tag:focus-visible,
.hero-lineup-pill:focus-visible {
  outline:        2px solid var(--color-acid);
  outline-offset: 2px;
}

/* ============================================================
   ARTISTA — profile strip sotto il banner
   Foto profilo "sborda" dal banner con margin-top negativo
============================================================ */
.artista-profile-strip {
  background:    var(--color-grey);
  border-bottom: 1px solid var(--color-grey-2);
  padding:       clamp(12px, 2vw, 20px) 0;
}
.artista-profile-strip__inner {
  display:     flex;
  align-items: center;
  gap:         clamp(12px, 2.5vw, 24px);
  flex-wrap:   wrap;
}
.artista-profile-photo {
  width:        72px;  height: 72px;
  border-radius: 50%;
  overflow:     hidden;
  border:       3px solid var(--color-acid);
  flex-shrink:  0;
  margin-top:   -36px;  /* sborda sopra il bordo del banner */
  background:   var(--color-grey-3);
}
.artista-profile-photo__img { width: 100%; height: 100%; object-fit: cover; }
.artista-profile-photo--ph {
  display:     flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; color: var(--color-acid);
}
.artista-profile-social {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
@media (min-width: 768px) {
  .artista-profile-photo { width: 90px; height: 90px; margin-top: -45px; }
}

/* ============================================================
   HERO BANNERS PER CPT SPECIFICI
   Stili simili a post-hero-banner ma per classi specifiche
============================================================ */

/* Page + Post Hero */
.page-hero,
.post-hero {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       0;
  /* min-height:       clamp(400px, 45vw, 800px);*/
  display:          flex;
  flex-direction:   column;
  justify-content: center;
  /*justify-content:  flex-end;*/
  overflow:         hidden;
  margin-bottom:    0;
  padding-top:      var(--nav-h);
  padding-bottom:   clamp(50px, 6vw, 90px);
  background-size:  content !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  height:           auto !important;
  display: grid;
  place-items: center; 
  align-items: start; 
}

.page-hero-overlay,
.post-hero-overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  95%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}



.page-hero .section-title,
.page-hero-title,
.post-hero-title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 6.5vw, 72px);
  line-height:    .92;
  letter-spacing: .02em;
  color:          var(--color-white);
  /* max-width:      900px; */
  margin:         0;
  text-align: center;
  width: 100%;
}
.page-hero .section-title {
  margin-bottom: clamp(10px, 1.5vw, 20px);
}
/*
.page-hero-inner .post-hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}*/
.page-hero-inner,
.post-hero-inner {
  position:   relative;
  inset:      0;
  z-index:    2;
  width:      100%;
  height:     100%;
  padding:    clamp(20px, 4vw, 48px);
  display: grid;

}
/* ============================================================
   HERO IMAGE ELEMENT (compatibilità con background-image)
   Usa <img class="hero-bg"> posizionato assoluto per simulare
   `background-size: cover` mantenendo markup semantico.
============================================================ */
/*
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  display: block;
  z-index: 0;
}
 */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 0;
}
.hero-bg-page {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 0;
}
section.page-hero--articoli img.hero-bg {
    width: auto !important;
    height: auto !important;
}
.post-hero-meta {
  font-size:      12px;
  letter-spacing: .05em;
  color:          rgba(240, 237, 230, .7);
  display:        flex;
  flex-wrap:      wrap;
  gap:            12px;
  align-items:    center;
  margin:         8px 0 16px 0;
}

.post-hero-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

/* DJ Set Hero */
.djset-hero {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       clamp(300px, 55vw, 580px);
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  overflow:         hidden;
  margin-bottom:    0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  padding-top: var(--nav-h);
}

.djset-hero-overlay {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  85%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.djset-hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
}

.djset-hero-title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 6.5vw, 72px);
  line-height:    .92;
  letter-spacing: .02em;
  color:          var(--color-white);
  max-width:      900px;
}

.djset-hero-meta {
  font-size:      12px;
  letter-spacing: .05em;
  color:          rgba(240, 237, 230, .7);
  display:        flex;
  flex-wrap:      wrap;
  gap:            12px;
  align-items:    center;
  margin:         8px 0 16px 0;
}

/* Artista Hero */
.artista-hero {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       clamp(300px, 55vw, 580px);
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  overflow:         hidden;
  margin-bottom:    0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  padding-top: var(--nav-h);
}

.artista-hero-overlay {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  85%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.artista-hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
}

/* Evento / Esperienza Hero */
.evento-hero, .esperienza-hero {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       clamp(300px, 55vw, 580px);
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  overflow:         hidden;
  margin-bottom:    0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  padding-top: var(--nav-h);
}

.evento-hero-overlay, .esperienza-hero-overlay {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  85%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.esperienza-hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
}

.evento-hero-inner, .esperienza-hero-title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 6.5vw, 72px);
  line-height:    .92;
  letter-spacing: .02em;
  color:          var(--color-white);
  max-width:      900px;
}

.evento-hero-meta , .esperienza-hero-meta {
  font-size:      12px;
  letter-spacing: .05em;
  color:          rgba(240, 237, 230, .7);
  display:        flex;
  flex-wrap:      wrap;
  gap:            12px;
  align-items:    center;
  margin:         8px 0 16px 0;
}

/* Venue Hero */
.venue-hero {
  position:         relative;
  width:            100%;
  margin-left:      0;
  margin-right:     0;
  min-height:       clamp(300px, 55vw, 580px);
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  overflow:         hidden;
  margin-bottom:    0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  padding-top: var(--nav-h);
}

.venue-hero-overlay {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0)     0%,
      rgba(8, 8, 8, 0.15)  30%,
      rgba(8, 8, 8, 0.60)  65%,
      rgba(8, 8, 8, 0.90)  85%,
      rgba(8, 8, 8, 0.97)  100%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(8, 8, 8, 0.3) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.venue-hero-inner {
  position:   relative;
  z-index:    2;
  width:      100%;
  padding:    clamp(20px, 4vw, 48px) 0;
}

.venue-hero-title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 6.5vw, 72px);
  line-height:    .92;
  letter-spacing: .02em;
  color:          var(--color-white);
  max-width:      900px;
}

.venue-hero-meta {
  font-size:      12px;
  letter-spacing: .05em;
  color:          rgba(240, 237, 230, .7);
  display:        flex;
  flex-wrap:      wrap;
  gap:            12px;
  align-items:    center;
  margin:         8px 0 16px 0;
}