:root {
  --hero-overlay-top: rgba(26, 89, 197, 0.33);
  --hero-overlay-mid: rgba(24, 89, 200, 0.28);
  --hero-overlay-bottom: rgba(30, 71, 194, 0.249);
}

.hero,
.service-hero {
  position: relative;
  overflow: hidden;
}

/* background image element (absolute, covers whole hero) */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/*
  MODIFICA NECESSARIA:
  - rimuovo .hero::before da qui per evitare conflitto con l'overlay "piatto" in main.css
  - mantengo overlay/gradient per service-hero (e per il vecchio overlay element)
*/

/* overlay sits above the image */
.service-hero::before,
.hero .service-hero-overlay,
.service-hero .service-hero-overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--hero-overlay-top) 0%,
    var(--hero-overlay-mid) 30%,
    rgba(255,255,255,0.12) 65%,
    var(--hero-overlay-bottom) 100%);
}

/* ensure hero content sits above overlay */
.hero-inner,
.hero-content,
.service-hero-inner,
.service-hero-content {
  position: relative;
  z-index: 2;
}

/* =================== Centering & typography tweaks for hero content =================== */
.hero.news-hero .hero-inner .hero-content,
.news-hero .hero-inner .hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 18px;
  min-height: 220px;
}

/* main title */
.hero-title {
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.02;
  color: #ffffff;
  font-size: clamp(1.6rem, 4.6vw, 3.2rem);
  text-shadow: 0 10px 28px rgba(0,0,0,0.45);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

/* Subtitle / lead sotto il titolo (più grande + shadow).
   Hardcoded responsive size so admin metabox/customizer non influiscono; più leggibile di default. */
.news-hero .hero-subtitle,
.hero.news-hero .hero-subtitle,
.hero .hero-subtitle,
.service-hero .hero-subtitle {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  color: #f4f8fb;
  line-height: 1.5;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  text-shadow: 0 8px 20px rgba(0,0,0,0.28);
  margin-bottom: 12px;
  -webkit-font-smoothing: antialiased;
}

/* eyebrow centered and subtle */
.news-hero .hero__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Media adjustments */
@media (max-width: 880px) {
  .service-hero::before,
  .service-hero .service-hero-overlay {
    background: linear-gradient(180deg,
      rgba(23, 79, 177, 0.451) 0%,
      rgba(255,255,255,0.92) 80%);
  }
  .hero.news-hero .hero-inner .hero-content,
  .news-hero .hero-inner .hero-content {
    padding: 36px 12px;
    min-height: 180px;
  }
  .news-hero .hero-subtitle {
    font-size: calc( clamp(1.05rem, 2.6vw, 1.35rem) * 0.95 );
    padding: 0 10px;
  }
}

/* Slightly reduce shadow intensity on very wide screens */
@media (min-width: 1200px) {
  .hero .hero-title { text-shadow: 0 8px 20px rgba(0,0,0,0.32); }
  .hero .hero-subtitle { text-shadow: 0 6px 16px rgba(0,0,0,0.22); }
}

/* Mobile minor adjustments */
@media (max-width: 420px) {
  .hero .hero-title { font-size: clamp(1.4rem, 6.8vw, 2.2rem); }
  .hero .hero-subtitle { font-size: clamp(0.98rem, 3.5vw, 1.05rem); }
}

/* ===== Solid internal hero: neutralize heavy shadows/sizes from shared hero ===== */
.hero.news-hero.news-hero--solid .hero-title {
  text-shadow: none;
}
.hero.news-hero.news-hero--solid .hero-subtitle {
  text-shadow: none;
}