/**
 * FONDAZIONE ARMANDO - PAGE HERO
 *
 * Hero condivisa per pagine secondarie (no homepage).
 * Usata da: page.php, single.php, archive-news.php, archive-progetti.php,
 *           taxonomy-news_category.php, template-donazione-alla-fondazione.php.
 *
 * Pattern: gradient verde→blu, padding 120/60, Montserrat, lowercase con first-letter maiuscola.
 *
 * Font-size desktop personalizzati da ACF via custom properties inline sul <section>:
 *   <section class="page-hero"
 *            style="--page-hero-title-size: 48px;
 *                   --page-hero-subtitle-size: 20px;
 *                   --page-hero-description-size: 18px;
 *                   --page-hero-title-color: #fff; ...">
 *
 * Su mobile (≤768px) i font-size sono fissi: il cliente non gestisce mobile da ACF.
 */

/* ============================================================
   Token di default (desktop)
   ============================================================ */
.page-hero {
  /* Sfondo */
  background: linear-gradient(to right, #26BF94, #0078e8);
  background-color: #0078e8;
  padding: 120px 20px;
  text-align: center;
  color: #fff;
  position: relative;

  /* Token tipografici (override-abili da ACF inline) */
  --page-hero-title-size: 48px;
  --page-hero-subtitle-size: 20px;
  --page-hero-description-size: 18px;
  --page-hero-title-color: #ffffff;
  --page-hero-subtitle-color: #ffffff;
  --page-hero-description-color: #ffffff;
}

/* Variante con background image (overlay scuro) */
.page-hero.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.page-hero.has-image > * {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--page-hero-title-size);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
  color: var(--page-hero-title-color);
  text-transform: lowercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-hero h1::first-letter {
  text-transform: uppercase;
}

.page-hero__subtitle {
  font-size: var(--page-hero-subtitle-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: var(--page-hero-subtitle-color);
}

.page-hero__description {
  font-size: var(--page-hero-description-size);
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
  color: var(--page-hero-description-color);
  opacity: 0.95;
}

.page-hero-content,
.news-archive-hero-content {
  position: relative;
  z-index: 2;
}

/* ============================================================
   Mobile (≤768px) — override diretti, NON via custom properties
   ============================================================ */
@media (max-width: 768px) {
  .page-hero {
    padding: 60px 20px;
  }

  .page-hero h1 { font-size: 36px; }
  .page-hero__subtitle { font-size: 16px; }
  .page-hero__description { font-size: 16px; }
}
