/* pagehero-photo.css — hero fotografico delle pagine interne (stile di metodo-top.html reso riutilizzabile).
   Uso: <section class="pagehero has-photo" style="--pos:68% 50%"> con dentro <figure class="bg"> + <div class="container">
   (breadcrumb, eyebrow, h1, lead, actions). Si somma a styles.css; vedi REGOLE/22_hero-fotografico-pagine.md. */

.pagehero.has-photo{position:relative;min-height:min(86vh,760px);display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--navy);color:#fff;isolation:isolate;padding:120px 0 0;border-bottom:0}
.pagehero.has-photo .bg{position:absolute;inset:0;z-index:-2;margin:0}
.pagehero.has-photo .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,68% 50%);display:block;transform:scale(1.02)}
/* velo navy: pieno a sinistra (dove sta il testo), leggero a destra; più scuro in basso */
.pagehero.has-photo:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,29,54,.96) 0%,rgba(11,29,54,.86) 32%,rgba(11,29,54,.42) 62%,rgba(11,29,54,.18) 100%),
             linear-gradient(to top,rgba(11,29,54,.92) 0%,rgba(11,29,54,0) 45%)}
.pagehero.has-photo .container{position:relative}
.pagehero.has-photo .breadcrumb{color:#aac0d2}.pagehero.has-photo .breadcrumb a{color:#aac0d2}.pagehero.has-photo .breadcrumb a:hover{color:#fff}
.pagehero.has-photo .eyebrow{color:#e0b98f}
.pagehero.has-photo h1{color:#fff;max-width:20ch;font-size:clamp(2.2rem,4.6vw,4.1rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.pagehero.has-photo .lead{color:#dbe4ec;max-width:640px;font-weight:300}
.pagehero.has-photo .actions{margin:30px 0 56px}
.pagehero.has-photo .btn.ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}.pagehero.has-photo .btn.ghost:hover{border-color:#fff}
/* fascia opzionale in fondo (tre punti chiave), come in Metodo TOP */
.pagehero.has-photo .hero-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);background:rgba(11,29,54,.55)}
.pagehero.has-photo .hero-strip>div{padding:22px 28px;border-right:1px solid rgba(255,255,255,.12)}
.pagehero.has-photo .hero-strip>div:last-child{border-right:0}
.pagehero.has-photo .hero-strip strong{display:block;color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.pagehero.has-photo .hero-strip span{color:#c8d3dc;font-size:.9rem}

@media(max-width:950px){
  .pagehero.has-photo{min-height:auto;padding-top:90px}
  .pagehero.has-photo .bg img{object-position:var(--pos-m,62% 50%)}
  .pagehero.has-photo:before{background:linear-gradient(90deg,rgba(11,29,54,.94) 0%,rgba(11,29,54,.78) 55%,rgba(11,29,54,.5) 100%),linear-gradient(to top,rgba(11,29,54,.94) 0%,rgba(11,29,54,.1) 50%)}
  .pagehero.has-photo .hero-strip{grid-template-columns:1fr}
  .pagehero.has-photo .hero-strip>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:680px){.pagehero.has-photo .actions{margin-bottom:40px}.pagehero.has-photo h1{max-width:none}}