/* ═══════════════════════════════════════════════════════════
   Biagio Sollazzi Photography — Main Stylesheet
   Version: 1.0.0
═══════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #F5F0EA;
  --ivory:   #FAF7F3;
  --gold:    #B8975A;
  --gold-lt: #D4B47A;
  --dark:    #1C1814;
  --mid:     #4A4440;
  --light:   #8A817A;
  --white:   #FFFFFF;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Montserrat', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 200px; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ─── NAVIGATION ─── */
nav#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  transition: all .5s ease;
}

/* Evita che la toolbar di WordPress (solo utenti loggati) copra la nav fissa
   e blocchi i tap sull'hamburger mobile: la toolbar ha z-index 99999, sempre
   sopra la nostra nav (z-index 100/320), quindi la nav va spostata sotto di essa. */
body.admin-bar nav#main-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar nav#main-nav { top: 46px; }
}

/* Lo sfondo sfocato vive su uno pseudo-elemento decorativo (::before), non sulla
   nav stessa: backdrop-filter e' un effetto pesante per la GPU e, applicato
   direttamente al contenitore che ospita il bottone hamburger, puo' rallentare
   l'hit-testing dei tap reali su alcuni dispositivi/browser (il tap sembra "non
   rispondere"). Con lo sfondo su ::before il bottone resta un elemento leggero,
   sempre reattivo al tocco, e la nav non crea piu' un containing-block per i
   figli position:fixed (altro problema noto con backdrop-filter + fixed). */
nav#main-nav.scrolled {
  padding: 16px 56px;
  position: fixed;
}
nav#main-nav.scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(12,9,7,.90) 0%, rgba(12,9,7,.72) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--white);
  transition: color .4s;
}
.nav-logo img {
  display: inline-block;
  width: auto;
  max-height: 48px;
  transition: filter .4s ease;
}
/* Su fondo scuro il logo resta bianco/luminoso */
nav#main-nav.scrolled .nav-logo { color: var(--white); }
nav#main-nav.scrolled .nav-logo img {
  filter: none;
  opacity: 1;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links li a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: color .3s;
}
/* Su fondo scuro i link restano bianchi */
nav#main-nav.scrolled .nav-links li a { color: rgba(255,255,255,.85); }
.nav-links li a:hover { color: var(--gold-lt) !important; }

.nav-cta {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.4);
  padding: 10px 24px;
  transition: all .3s;
}
/* Su fondo scuro il CTA resta bianco */
nav#main-nav.scrolled .nav-cta { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--white) !important; }

/* ─── MOBILE NAV TOGGLE (hamburger) ─── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
/* Su fondo scuro l'hamburger resta bianco */
nav#main-nav.scrolled .nav-toggle span,
.nav-toggle.active span { background: var(--white); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* ─── HERO ─── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

/* Hero uniforme per le pagine interne (Chi Sono, Storie, Premi, Portfolio,
   Contatti) — la homepage resta a tutto schermo (regola sopra). */
.hero.hero--page {
  height: 55vh;
  min-height: 420px;
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28,24,20,.35) 0%,
    rgba(28,24,20,.20) 40%,
    rgba(28,24,20,.50) 100%
  );
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 0 24px;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .9s .3s forwards;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 110px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .9s .5s forwards;
}
.hero-title em { font-style: italic; font-weight: 300; }

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .9s .7s forwards;
}

.hero-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 36px auto;
  opacity: 0;
  animation: fadeUp .9s .9s forwards;
}

.hero-cta-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp .9s 1.1s forwards;
}

.hero-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .3s;
}
.hero-dot.active { background: var(--gold); transform: scale(1.3); }

.hero-scroll {
  position: absolute;
  bottom: 36px;
  right: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.6);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation: scrollLine 2s infinite;
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.appear {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.appear.visible { opacity: 1; transform: none; }

/* ─── SECTION UTILITIES ─── */
section { padding: 120px 0; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
}
.section-title em { font-style: italic; }
.section-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--mid);
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 16px 40px;
  background: var(--gold);
  color: var(--white);
  transition: background .3s, transform .3s;
}
.btn-primary:hover { background: #9E7D42; transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid rgba(255,255,255,.6);
  color: var(--white);
  transition: all .3s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

.btn-dark {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: var(--dark);
  color: var(--white);
  transition: background .3s;
}
.btn-dark:hover { background: var(--gold); }

.btn-outline {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: 1px solid var(--dark);
  color: var(--dark);
  transition: all .3s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-gold {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 14px 44px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  transition: all .3s;
}
.btn-gold:hover { background: var(--gold); color: var(--white); }

/* ─── TAGLINE STRIP ─── */
.tagline-strip {
  padding: 56px 0;
  background: var(--dark);
  text-align: center;
}
.tagline-strip p {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  letter-spacing: .04em;
}
.tagline-strip span { color: var(--gold-lt); }

/* ─── ABOUT ─── */
.about { background: var(--ivory); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.about-image-wrap { position: relative; }
.about-image-wrap img {
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
}
.about-image-accent {
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 55%;
  aspect-ratio: 1;
  background: var(--cream);
  z-index: -1;
  border: 2px solid var(--gold);
  opacity: .6;
}
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 52px;
}
.stat-item { border-top: 1px solid var(--gold); padding-top: 20px; }
.stat-number {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 300;
  color: var(--dark);
  line-height: 1;
}
.stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--light);
  margin-top: 6px;
}
.about-links { margin-top: 44px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ─── PORTFOLIO ─── */
.portfolio { background: var(--cream); }
.portfolio-header { text-align: center; margin-bottom: 60px; }

/* Filter buttons */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.filter-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  background: transparent;
  border: 1px solid #ccc5be;
  padding: 10px 22px;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.filter-btn:hover {
  color: var(--dark);
  border-color: var(--dark);
}
.filter-btn.active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}

/* Contenitore galleria da shortcode plugin */
.portfolio-gallery {
  width: 100%;
  margin: 0 auto;
}

/* Griglia portfolio (/portfolio/ page) */
.portfolio-grid {
  columns: 3;
  column-gap: 16px;
}
.portfolio-item {
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .4s, transform .4s;
}
.portfolio-item img {
  width: 100%;
  display: block;
  transition: transform .7s ease;
}
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,24,20,.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }
.portfolio-item-info { color: var(--white); }
.portfolio-item-cat {
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.portfolio-item-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  margin-top: 4px;
}
.portfolio-more { text-align: center; margin-top: 60px; }

/* Avviso per l'admin quando lo shortcode non è configurato */
.portfolio-gallery-notice {
  text-align: center;
  padding: 48px 24px;
  color: var(--light);
  font-size: 14px;
  border: 1px dashed var(--cream);
}
.portfolio-gallery-notice a { color: var(--gold); }

/* ── BS Photo Gallery – rendering diretto (fallback shortcode) ── */
.bs-photo-gallery-grid {
  columns: 3;
  column-gap: 12px;
  width: 100%;
}
.bs-photo-gallery-item {
  break-inside: avoid;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.bs-photo-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .45s ease;
}
.bs-gallery-link { display: block; position: relative; }
.bs-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
}
.bs-gallery-zoom {
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
}
.bs-photo-gallery-item:hover img { transform: scale(1.04); }
.bs-photo-gallery-item:hover .bs-gallery-overlay { background: rgba(0,0,0,.35); }
.bs-photo-gallery-item:hover .bs-gallery-zoom { opacity: 1; transform: scale(1); }

/* Lightbox – always full viewport */
.bs-gallery-lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  z-index: 99999;
}

@media (max-width: 900px) { .bs-photo-gallery-grid { columns: 2; } }
@media (max-width: 500px) { .bs-photo-gallery-grid { columns: 1; } }

/* Compatibilità con i plugin galleria più comuni
   (Photonic, NextGEN, FooGallery, Envira, ecc.) */
.portfolio-gallery .photonic-stream,
.portfolio-gallery .ngg-galleryoverview,
.portfolio-gallery .foo-gallery,
.portfolio-gallery .envira-gallery-wrap,
.portfolio-gallery .gallery {
  width: 100% !important;
}

.portfolio-more { text-align: center; margin-top: 60px; }

/* ─── STORIE ─── */
.storie { background: var(--ivory); }
.storie-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
}
.storie-header a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.storie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.storia-card { display: block; cursor: pointer; }
.storia-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.storia-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.storia-card:hover .storia-card-img img { transform: scale(1.06); }
.storia-card-body { padding: 24px 0 0; }
.storia-card-cat {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
}
.storia-card-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--dark);
  margin-top: 8px;
  line-height: 1.3;
}
.storia-card-location {
  font-size: 12px;
  color: var(--light);
  margin-top: 8px;
  letter-spacing: .05em;
}

/* ─── QUOTE ─── */
.quote-section {
  padding: 100px 0;
  background: url('https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1920&q=80') center/cover no-repeat;
  position: relative;
}
.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28,24,20,.72);
}
.quote-section .container-narrow {
  position: relative;
  text-align: center;
  color: var(--white);
}
.quote-mark {
  font-family: var(--serif);
  font-size: 120px;
  line-height: .5;
  color: var(--gold);
  opacity: .5;
}
.quote-text {
  font-family: var(--serif);
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  margin-top: 20px;
}
.quote-author {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: 36px;
}

/* ─── HOME INTRO (testo hero spostato sotto la slide, stile "citazioni") ─── */
.home-intro-section {
  position: relative;
  padding: 140px 0;
  background: var(--dark) center/cover no-repeat;
}
.home-intro-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,24,20,.74);
}
.home-intro-section .container-narrow {
  position: relative;
  z-index: 1;
}
/* Il blocco .hero-content è condiviso con altri template (overlay assoluto sulla slide).
   Qui lo "neutralizziamo" e lo facciamo scorrere normalmente nel flusso, centrato. */
.home-intro-section .hero-content {
  position: relative;
  inset: auto;
  padding: 0;
  animation: none;
  opacity: 1;
  transform: none;
}
.home-intro-section .hero-title {
  font-size: clamp(40px, 6vw, 76px);
}

/* ─── LOCATIONS ─── */
.locations { background: var(--cream); }
.locations-header { text-align: center; margin-bottom: 64px; }
.locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.location-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
}
.location-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.location-card:hover img { transform: scale(1.08); }
.location-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,24,20,.75) 0%, transparent 55%);
}
.location-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 28px 24px;
  color: var(--white);
}
.location-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
}
.location-region {
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: 4px;
}

/* ─── PREMI E RICONOSCIMENTI ─── */
.awards { background: var(--ivory); padding: 120px 0; }
.awards-header { text-align: center; margin-bottom: 64px; }
.awards-grid {
  display: grid;
  /* minmax(0,1fr) invece di 1fr: senza, con testi lunghi (es. "Best Wedding
     Photographer") le colonne non si restringono sotto il loro contenuto
     minimo e la griglia sfonda la larghezza dello schermo su mobile,
     trascinando con se' l'intera pagina (e il pannello fisso del menu). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 768px) {
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.award-card {
  border: 1px solid rgba(28, 24, 20, .1);
  background: var(--white);
  padding: 40px 24px;
  text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}
.award-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.award-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}
.award-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.award-year {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 12px;
}
.award-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--dark);
  margin-bottom: 12px;
}
.award-ente {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--light);
}
.awards-footer { text-align: center; margin-top: 56px; }
.awards-link {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.awards-link:hover { color: var(--dark); border-color: var(--dark); }

@media (max-width: 900px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .awards-grid { grid-template-columns: 1fr; }
}

/* ─── TESTIMONIALS ─── */
.testimonials { background: var(--ivory); padding: 120px 0; }
.testimonials-header { text-align: center; margin-bottom: 72px; }
.testimonials-slider { position: relative; overflow: hidden; }
.testimonials-track {
  display: flex;
  transition: transform .6s ease;
}
.testimonial-item {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.testimonial-image { aspect-ratio: 4/5; overflow: hidden; }
.testimonial-image img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-content { padding-right: 40px; }
.testimonial-stars { color: var(--gold); font-size: 14px; letter-spacing: 4px; }
.testimonial-text {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--dark);
  margin-top: 24px;
}
.testimonial-couple {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial-divider { width: 32px; height: 1px; background: var(--gold); }
.testimonial-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}
.testimonial-date {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--light);
  margin-top: 4px;
}
.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
}
.t-nav-btn {
  width: 48px; height: 48px;
  border: 1px solid var(--dark);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}
.t-nav-btn:hover { background: var(--gold); border-color: var(--gold); }
.t-nav-btn:hover svg { stroke: white; }
.t-nav-btn svg {
  width: 18px; height: 18px;
  stroke: var(--dark);
  fill: none;
  stroke-width: 1.5;
}

/* ─── BLOG ─── */
.blog { background: var(--cream); }
.blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
}
.blog-header a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.blog-card { display: block; }
.blog-card-img {
  overflow: hidden;
  aspect-ratio: 4/3;
}
.blog-card:first-child .blog-card-img { aspect-ratio: 3/2; }
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 24px 0 0; }
.blog-card-tag {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--dark);
  margin-top: 10px;
  line-height: 1.3;
}
.blog-card-excerpt {
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-top: 10px;
}
.blog-card-date {
  font-size: 10px;
  color: var(--light);
  margin-top: 14px;
  letter-spacing: .08em;
}

/* ─── INSTAGRAM ─── */
.instagram { background: var(--dark); padding: 100px 0; }
.instagram-header { text-align: center; margin-bottom: 52px; color: var(--white); }
.instagram-header .section-label { color: var(--gold-lt); }
.instagram-header .section-title { color: var(--white); }
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.instagram-feed-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.insta-item { aspect-ratio: 1; overflow: hidden; position: relative; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.insta-item:hover img { transform: scale(1.08); }
.insta-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(184,151,90,0);
  transition: background .3s;
}
.insta-item:hover::after { background: rgba(184,151,90,.3); }
.instagram-follow { text-align: center; margin-top: 48px; }

/* ─── CONTACT CTA ─── */
.contact-cta {
  padding: 160px 0;
  background: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920&q=80') center/cover no-repeat;
  position: relative;
}
.contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28,24,20,.68);
}
.contact-cta .container-narrow {
  position: relative;
  text-align: center;
  color: var(--white);
}
.contact-cta .section-label { color: var(--gold-lt); }
.contact-cta .section-title { color: var(--white); margin-top: 12px; }
.contact-cta p {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  margin-top: 20px;
}
.contact-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}

/* ─── SINGLE POST ─── */
.single-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
}
.single-hero-img { width: 100%; height: 100%; object-fit: cover; }
.single-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,24,20,.5);
}
.single-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-content { padding: 80px 0; }
.entry-content {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--mid);
}
.entry-content h2,
.entry-content h3 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--dark);
  margin: 48px 0 20px;
}
.entry-content p { margin-bottom: 24px; }
.entry-content img { margin: 40px 0; border-radius: 0; }
.entry-content a { color: var(--gold); border-bottom: 1px solid var(--gold); }
.entry-tags { margin-top: 40px; font-size: 12px; color: var(--light); }
.entry-tags a { color: var(--gold); margin: 0 4px; }

.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--cream);
  font-size: 13px;
  color: var(--mid);
}
.post-navigation a { color: var(--dark); transition: color .3s; }
.post-navigation a:hover { color: var(--gold); }

/* CTA contatto negli articoli */
.article-cta {
  margin-top: 64px;
  padding: 56px 48px;
  background: var(--ivory);
  border: 1px solid rgba(28,24,20,.08);
  text-align: center;
}
.article-cta .section-label { justify-content: center; }
.article-cta h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  color: var(--dark);
  margin: 6px 0 16px;
}
.article-cta h3 em { font-style: italic; color: var(--gold); }
.article-cta p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--mid);
  max-width: 520px;
  margin: 0 auto 28px;
}
@media (max-width: 640px) {
  .article-cta { padding: 40px 24px; }
}

/* ─── PAGE HEADER ─── */
/* ─── PAGE HEADER ─── */
.page-header {
  position: relative;
  padding: 160px 0 80px;
  text-align: center;
  overflow: hidden;
}

/* Variante: nessuna immagine in evidenza → gradiente scuro */
.page-header--gradient {
  background: linear-gradient(135deg, #1a120a 0%, #2d1f12 60%, #3d2a17 100%);
}

/* Variante: immagine in evidenza come sfondo */
.page-header--image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay scuro sopra l'immagine (non sul gradiente) */
.page-header-overlay {
  display: none;
}
.page-header--image .page-header-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.48);
}

/* Il contenuto del titolo sopra l'overlay */
.page-header-content {
  position: relative;
  z-index: 1;
  padding: 0 24px;
}

/* Titolo sempre bianco */
.page-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Breadcrumb sempre leggibile su scuro */
.page-header .breadcrumbs { color: rgba(255,255,255,.65); }
.page-header .breadcrumbs a { color: rgba(255,255,255,.80); }
.page-header .breadcrumbs a:hover { color: var(--gold-lt); }

/* ─── BREADCRUMBS ─── */
.breadcrumbs {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--light);
  margin-bottom: 24px;
}
.breadcrumbs a { color: var(--mid); }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .sep { margin: 0 8px; }

/* ─── PAGINATION ─── */
.page-numbers {
  display: inline-flex;
  gap: 8px;
  margin-top: 16px;
}
.page-numbers a,
.page-numbers span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cream);
  font-size: 12px;
  color: var(--mid);
  transition: all .3s;
}
.page-numbers .current,
.page-numbers a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ─── FOOTER ─── */
footer { background: var(--dark); color: rgba(255,255,255,.6); }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding: 80px 0 60px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--white);
  margin-bottom: 20px;
}
.footer-tagline { font-size: 13px; line-height: 1.75; }
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
}
.footer-contact li,
.footer-contact a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .3s;
}
.footer-contact a:hover { color: var(--gold); }
.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  transition: all .3s;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-col h4 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 24px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  transition: color .3s;
}
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copy { font-size: 11px; letter-spacing: .05em; }
.footer-copy a { color: rgba(255,255,255,.4); transition: color .3s; }
.footer-copy a:hover { color: var(--gold); }
.footer-awards { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.award-badge {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 6px 14px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .container { padding: 0 40px; }
  nav#main-nav { padding: 24px 40px; }
  nav#main-nav.scrolled { padding: 14px 40px; }
}

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .about-image-wrap { max-width: 520px; margin: 0 auto; }
  .portfolio-grid { columns: 2; }
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  section { padding: 80px 0; }
  .container { padding: 0 24px; }
  nav#main-nav { padding: 20px 24px; }
  nav#main-nav.scrolled { padding: 8px 20px; }
  nav#main-nav.scrolled .nav-logo img { max-height: 30px; }

  .nav-toggle { display: flex; }

  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    list-style: none;
    position: fixed;
    inset: 0;
    background: rgba(28,24,20,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
    z-index: 200;
  }
  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links li a {
    font-size: 22px;
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: .06em;
    color: rgba(255,255,255,.9);
    display: block;
    padding: 8px 0;
  }

  .hero-scroll { display: none; }
  .storie-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-item { grid-template-columns: 1fr; }
  .testimonial-image { display: none; }
  .testimonial-content { padding-right: 0; }
  .footer-top { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr 1fr; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .hero-cta-group { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .portfolio-grid { columns: 1; }
  .locations-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
}


/* ─── STILE GRID (chi-sono: Il mio stile) ─── */
.stile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 768px) {
  .stile-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── MOBILE MENU: disabilita backdrop-filter quando menu aperto ─── */
/* backdrop-filter crea un containing block per position:fixed figli */
body.nav-open nav#main-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ─── GALLERY ROWS (chi-sono: Galleria stile) ─── */
.gallery-row-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 300px;
  gap: 2px;
}
.gallery-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 380px;
  gap: 2px;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .gallery-row-5 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .gallery-row-4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}

/* ─── CONTACT FORM 7 (.bs-cf7) ───
   Aggiungere html_class="bs-cf7" allo shortcode [contact-form-7 id="..." html_class="bs-cf7"]
   per applicare questi stili senza toccare altri form CF7 presenti sul sito. */
.bs-cf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.bs-cf7 .bs-cf7-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.bs-cf7 .bs-cf7-row > .bs-cf7-field { flex: 1 1 220px; }

.bs-cf7 label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}

.bs-cf7 input[type="text"],
.bs-cf7 input[type="email"],
.bs-cf7 input[type="tel"],
.bs-cf7 input[type="date"],
.bs-cf7 textarea,
.bs-cf7 select,
.bs-cf7 .wpcf7-form-control {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(28,24,20,.15);
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--dark);
  transition: border-color .3s ease;
}
.bs-cf7 textarea.wpcf7-form-control { min-height: 130px; resize: vertical; }

.bs-cf7 input:focus,
.bs-cf7 textarea:focus,
.bs-cf7 select:focus,
.bs-cf7 .wpcf7-form-control:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.bs-cf7 ::placeholder { color: var(--light); opacity: .8; }

.bs-cf7 .wpcf7-acceptance label,
.bs-cf7 .wpcf7-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mid);
}

/* Etichetta gruppo (es. "Servizi di interesse") */
.bs-cf7-group-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}

/* Selettore servizi — checkbox a "pillole" */
.bs-cf7 .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bs-cf7 .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
}
.bs-cf7 .wpcf7-checkbox .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid rgba(28,24,20,.18);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--mid);
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.bs-cf7 .wpcf7-checkbox .wpcf7-list-item label:hover {
  border-color: var(--gold);
  color: var(--dark);
}
.bs-cf7 .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) {
  border-color: var(--gold);
  background: rgba(196, 160, 82, .14);
  color: var(--dark);
}
.bs-cf7 .wpcf7-checkbox input[type="checkbox"] {
  /* checkbox nativa nascosta visivamente, ma accessibile */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pulsante invio (riusa lo stile .btn-dark del tema) */
.bs-cf7 input.wpcf7-submit,
.bs-cf7 .wpcf7-submit {
  align-self: flex-start;
  display: inline-block;
  margin-top: 6px;
  padding: 14px 36px;
  background: var(--dark);
  color: var(--white);
  border: none;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.bs-cf7 input.wpcf7-submit:hover,
.bs-cf7 .wpcf7-submit:hover { background: var(--gold); }

.bs-cf7.bs-cf7-mini .wpcf7-submit,
.bs-cf7.bs-cf7-mini input.wpcf7-submit { width: 100%; text-align: center; }

@media (max-width: 640px) {
  .bs-cf7 .bs-cf7-row { flex-direction: column; gap: 30px; }
  .bs-cf7 .wpcf7-submit,
  .bs-cf7 input.wpcf7-submit { width: 100%; text-align: center; }
}

/* ---- BS Gallery Lightbox ---- */
#bs-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
}
#bs-lightbox.open { display: flex; }
#bs-lightbox img {
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 12px 60px rgba(0,0,0,.55);
}

/* Controlli lightbox (creati via JS in main.js) */
.bs-lb-close,
.bs-lb-prev,
.bs-lb-next {
  position: absolute;
  background: rgba(0,0,0,.35);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, opacity .25s ease;
  z-index: 1;
}
.bs-lb-close:hover,
.bs-lb-prev:hover,
.bs-lb-next:hover { background: var(--gold); }

.bs-lb-close {
  top: 24px;
  right: 28px;
  width: 48px;
  height: 48px;
  font-size: 30px;
  line-height: 1;
  border-radius: 50%;
}
.bs-lb-prev,
.bs-lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 34px;
  line-height: 1;
  border-radius: 50%;
}
.bs-lb-prev { left: 28px; }
.bs-lb-next { right: 28px; }

.bs-lb-caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
}

@media (max-width: 640px) {
  .bs-lb-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 26px; }
  .bs-lb-prev,
  .bs-lb-next { width: 46px; height: 46px; font-size: 28px; }
  .bs-lb-prev { left: 10px; }
  .bs-lb-next { right: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7.5.0 — HEADER UNIFICATO PAGINE SECONDARIE
   Tutte le pagine interne (Chi sono, Portfolio, Blog, Storie, Premi, Contatti,
   archivi e pagine generiche) usano lo stesso header: titolo + sottotitolo
   centrati su sfondo crema, stessa altezza. Niente immagini/overlay scuri.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Hero delle pagine-template (.hero--page) reso identico al page-header --- */
.hero.hero--page {
  height: auto;
  min-height: 0;
  padding: 150px 24px 70px;
  background: var(--cream);
  overflow: visible;
}
.hero.hero--page .hero-slides,
.hero.hero--page .hero-overlay { display: none !important; }
.hero.hero--page .hero-content {
  position: static;
  inset: auto;
  padding: 0;
  color: var(--dark);
}
.hero.hero--page .hero-eyebrow {
  color: var(--gold);
  margin-bottom: 18px;
}
.hero.hero--page .hero-title {
  color: var(--dark);
  font-size: clamp(40px, 6vw, 80px) !important;
  text-shadow: none;
}
.hero.hero--page .hero-title em { color: var(--dark); }
.hero.hero--page .hero-sub {
  color: var(--mid);
  text-shadow: none;
}

/* --- page.php (.page-header) reso identico: crema + testo scuro --- */
.page-header,
.page-header--gradient,
.page-header--image {
  background: var(--cream) !important;
  padding: 150px 0 70px;
}
.page-header--image .page-header-overlay,
.page-header-overlay { display: none !important; }
.page-title {
  color: var(--dark) !important;
  text-shadow: none !important;
  font-size: clamp(40px, 6vw, 80px);
}
.page-header .breadcrumbs { color: var(--mid); }
.page-header .breadcrumbs a { color: var(--gold); }
.page-header .breadcrumbs a:hover { color: var(--dark); }

/* --- index.php / archive.php: stessa altezza dell'header unificato --- */
.page-header .section-label { color: var(--gold); }
.page-header .section-title { color: var(--dark); }

/* Mobile: header piu' compatto ma sempre uniforme */
@media (max-width: 768px) {
  .hero.hero--page { padding: 110px 20px 50px; }
  .page-header,
  .page-header--gradient,
  .page-header--image { padding: 110px 0 50px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7.5.0 — FIX NAVIGAZIONE MOBILE
   1) Il pannello menu (.nav-links) e' position:fixed; un ancestor con
      backdrop-filter creava un containing-block che lo faceva collassare.
      Annullato quando il menu e' aperto (regola gia' presente, rafforzata).
   2) Il bottone hamburger restava SOTTO l'overlay (z-index 101 < 200): non si
      riusciva a chiudere il menu. Ora il toggle sta sopra l'overlay.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hamburger sempre cliccabile, sopra il pannello menu */
  .nav-toggle { z-index: 320; }
  .nav-links  { z-index: 300; }
}
/* Neutralizza qualsiasi filtro/trasformazione sul nav quando il menu e' aperto
   cosi' .nav-links:fixed si ancora al viewport e copre tutto lo schermo */
body.nav-open nav#main-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

/* ─── PREMI GRID (chi-sono: "Membro di") ─────────────────────────────────
   In precedenza era una griglia a 4 colonne inline (grid-template-columns:
   repeat(4,1fr)) senza breakpoint mobile. "1fr" da solo non riduce mai la
   colonna sotto il contenuto minimo (min-width:auto di default): con titoli
   lunghi come "Best Wedding Photographer" la griglia si allargava oltre la
   larghezza dello schermo, spostando l'intera pagina (e con essa il pannello
   fisso del menu mobile) fuori dal viewport su schermi stretti. Fix:
   minmax(0,1fr) forza le colonne a poter restringersi, + 2 colonne sotto
   768px per leggibilita'. */
.chisono-premi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  text-align: center;
}
@media (max-width: 768px) {
  .chisono-premi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}