/* V11.0 — sistema unico per tutte le testate pubbliche.
 * Gippittino 3D sostituisce la vecchia fotografia in ogni hero generica.
 * Gli spazi interni dipendono dal riquadro, mai dalla larghezza del monitor. */
:root { --gippittino-3d: url("../img/gippittino-mascot-3d-v1.png"); }

#content > .page-hero {
  box-sizing: border-box;
  width: min(calc(100% - (var(--site-gutter) * 2)), var(--site-width));
  max-width: none;
  min-height: clamp(340px, 30vw, 410px);
  margin: clamp(28px, 4vw, 54px) auto 0;
  padding: clamp(48px, 5vw, 74px) clamp(300px, 29vw, 450px) clamp(48px, 5vw, 68px) clamp(34px, 5vw, 84px);
  overflow: hidden;
  border: 1px solid rgba(91, 222, 255, .33);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06);
}

#content > .page-hero > * {
  width: min(100%, 48rem);
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

#content > .page-hero:after {
  right: clamp(22px, 4vw, 64px);
  bottom: 0;
  width: clamp(185px, 19vw, 285px);
  height: clamp(250px, 27vw, 365px);
  opacity: 1;
  background: var(--gippittino-3d) center bottom / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 20px 21px rgba(0, 0, 0, .35)) drop-shadow(0 0 18px rgba(74, 225, 255, .32));
}

#content > .page-hero.compact {
  min-height: clamp(300px, 27vw, 350px);
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(40px, 4vw, 58px);
}

/* Diario e Regali hanno già una mascotte 3D reale nel markup: nessun doppione. */
.route-diario #content > .collection-hero--diary:after,
.route-regali #content > .collection-hero--gift:after {
  display: none !important;
}

/* Anche le piccole decorazioni degli articoli seguono la stessa mascotte. */
.article:before {
  background: var(--gippittino-3d) center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .32));
}

@media (max-width: 800px) {
  #content > .page-hero {
    min-height: 280px;
    padding: 52px clamp(200px, 31vw, 270px) 44px 28px;
    border-radius: 24px;
  }

  #content > .page-hero:after {
    right: 18px;
    width: clamp(148px, 25vw, 205px);
    height: clamp(205px, 33vw, 282px);
  }

  #content > .page-hero.compact { min-height: 260px; }
}

@media (max-width: 520px) {
  #content > .page-hero {
    min-height: 230px;
    padding: 42px 140px 34px 22px;
    border-radius: 21px;
  }

  #content > .page-hero:after {
    right: -3px;
    width: 142px;
    height: 194px;
    opacity: .92;
  }

  #content > .page-hero.compact {
    min-height: 220px;
    padding-top: 40px;
    padding-bottom: 30px;
  }

  #content > .page-hero h1 { max-width: 9ch; }
}