/* ══════════════════════════════════════════════════
   HERO — "scheda naturalistica" (Abruzzo Wild & Authentic)
   Riutilizzabile come TEMPLATE regionale: per una nuova
   regione cambiare 4 cose in HTML → parola sfumata (.hh2-ghost),
   foto (.hh2-img), coordinate (.hh2-rail), dati (.hh2-ribbon),
   e la parola del logo (.brandmark07 .abr).
══════════════════════════════════════════════════ */

.hh2{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;}
.hh2-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 26%;transform:scale(1.05);animation:hh2Zoom 16s ease-out forwards;}
@keyframes hh2Zoom{to{transform:scale(1);}}
.hh2-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right,rgba(12,15,8,.62) 0%,rgba(12,15,8,.15) 42%,transparent 70%),
  linear-gradient(to bottom,rgba(20,25,14,.18) 0%,transparent 34%,rgba(16,20,10,.5) 70%,rgba(10,13,7,.95) 100%);}

/* binario coordinate (sinistra) */
.hh2-rail{position:absolute;left:1.9rem;top:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;pointer-events:none;}
.hh2-rail i{width:1px;background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.04));height:24vh;}
.hh2-rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;}

/* parola sfumata (firma) — serif calligrafica Cormorant */
.hh2-ghost{position:absolute;z-index:0;top:7%;right:3%;margin:0;padding:0;line-height:.9;white-space:nowrap;pointer-events:none;user-select:none;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(4rem,15vw,13rem);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-repeat:no-repeat;
  background-image:linear-gradient(170deg,rgba(255,255,255,.62),rgba(255,255,255,0) 72%);}

/* contenuto */
.hh2-content{position:relative;z-index:2;max-width:820px;padding:0 4rem 2.2rem 5.5rem;animation:hh2Rise .95s cubic-bezier(.2,.7,.2,1) .1s both;}
@keyframes hh2Rise{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
.hh2-tag{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-light);margin-bottom:1.5rem;}
.hh2-tag b{width:28px;height:1px;background:var(--rose-light);display:inline-block;opacity:.8;}
.hh2-h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:1.02;letter-spacing:-.015em;color:#fff;margin-bottom:1.4rem;text-wrap:balance;}
.hh2-h1 em{font-style:italic;color:#b8d4a0;}
.hh2-sub{font-family:var(--sans);font-weight:300;font-size:1.08rem;line-height:1.7;color:rgba(255,255,255,.8);max-width:470px;margin-bottom:2.1rem;}
.hh2-ctas{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;}

/* indizio scroll */
.hh2-scroll{position:absolute;right:4rem;bottom:8.6rem;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.4);font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;animation:hh2Bounce 2.6s ease-in-out infinite;}
.hh2-scroll i{width:1px;height:40px;background:linear-gradient(rgba(255,255,255,.4),transparent);}
@keyframes hh2Bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* data ribbon — didascalia da guida da campo */
.hh2-ribbon{position:relative;z-index:2;display:flex;border-top:1px solid rgba(255,255,255,.14);background:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.hh2-datum{flex:1;padding:1.15rem 1.6rem 1.3rem;display:flex;flex-direction:column;gap:.18rem;}
.hh2-datum + .hh2-datum{border-left:1px solid rgba(255,255,255,.12);}
.hh2-datum strong{font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1;color:#fff;}
.hh2-datum strong span{font-size:.9rem;color:var(--rose-light);margin-left:.1em;}
.hh2-datum em{font-style:normal;font-family:var(--sans);font-size:.64rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);}

@media (max-width:900px){
  .hh2-rail{display:none;}
  .hh2-scroll{display:none;}
  .hh2-content{padding:0 2.2rem 1.8rem;}
  .hh2-datum{padding:.95rem 1.1rem 1.05rem;}
  .hh2-datum strong{font-size:1.5rem;}
  .hh2-ghost{top:auto;bottom:10.5rem;right:1.2rem;}
}
@media (max-width:560px){
  .hh2-ribbon{flex-wrap:wrap;}
  .hh2-datum{flex:1 1 50%;}
  .hh2-datum:nth-child(3){border-left:none;}
  .hh2-datum:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);}
}