/* ==========================================================================
   Guido Giannone — Fotografo | Foglio di stile
   Palette: bianco caldo, nero morbido, accento oro/terra
   ========================================================================== */

:root {
  --bg: #faf8f5;
  --bg-alt: #f1ece5;
  --ink: #1c1a17;
  --ink-soft: #55504a;
  --line: #e0d8cd;
  --accent: #a9855f;      /* oro/terra */
  --accent-dark: #7d6244;
  --white: #ffffff;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1200px;
  --shadow: 0 20px 50px rgba(28, 26, 23, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .3px; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

p { margin: 0 0 1.2em; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-block;
}

.section { padding: clamp(64px, 10vw, 140px) 0; }
.section--alt { background: var(--bg-alt); }
.center { text-align: center; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 34px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: all .3s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--light { border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); color:#fff; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(24px, 5vw, 60px);
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(250, 248, 245, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 14px; padding-bottom: 14px;
}
/* text brand (fallback / footer title) */
.brand { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 1px; color: var(--white); }
.brand small { display:block; font-family: var(--sans); font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color: rgba(255,255,255,.8); margin-top:2px; }
.site-header.scrolled .brand,
.site-header.scrolled .brand small { color: var(--ink); }
.site-header.scrolled .brand small { color: var(--ink-soft); }

/* signature logo in header */
.brand--sig { display:block; line-height:0; }
.brand--sig .sig { height: 72px; width:auto; display:block; transition: opacity .3s ease; }
.brand--sig .sig--black { display:none; }
.site-header.scrolled .brand--sig .sig--white { display:none; }
.site-header.scrolled .brand--sig .sig--black { display:block; }
.header-dark .brand--sig .sig--white { display:none; }
.header-dark .brand--sig .sig--black { display:block; }
@media (max-width: 600px){ .brand--sig .sig { height: 50px; } }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--white);
}
.site-header.scrolled .nav a { color: var(--ink); }
.nav a.active { color: var(--accent); }
.nav a:hover { color: var(--accent); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 22px; position: relative; }
.nav-toggle span { position:absolute; left:0; right:0; height:2px; background: var(--white); transition: .3s; }
.site-header.scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:10px; } .nav-toggle span:nth-child(3){ top:20px; }

/* pages with light hero: force dark header text */
.header-dark .brand, .header-dark .brand small, .header-dark .nav a, .header-dark .nav-toggle span { color: var(--ink); }
.header-dark .brand small { color: var(--ink-soft); }
.header-dark .nav-toggle span { background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); overflow: hidden;
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.5)); }
.hero__inner { position: relative; z-index: 2; padding: 0 24px; max-width: 900px; }
.hero h1 { color: var(--white); margin-bottom: .3em; }
.hero p.lead { color: rgba(255,255,255,.9); font-size: 1.05rem; letter-spacing: .05em; max-width: 620px; margin: 0 auto 2em; }
.hero .eyebrow { color: rgba(255,255,255,.85); }
.scroll-cue { position:absolute; bottom: 30px; left:50%; transform:translateX(-50%); z-index:2; color:#fff; font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; opacity:.8; }
.scroll-cue::after { content:""; display:block; width:1px; height:40px; background:#fff; margin:10px auto 0; opacity:.6; }

/* page hero (inner pages) */
.page-hero { padding: 180px 0 70px; text-align: center; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.page-hero p { max-width: 640px; margin: 0 auto; }

/* ---------- Placeholder images ---------- */
.ph {
  position: relative; background:
    repeating-linear-gradient(45deg, #e7ded2, #e7ded2 12px, #e2d8cb 12px, #e2d8cb 24px);
  display:flex; align-items:center; justify-content:center; color: var(--accent-dark);
  font-family: var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  overflow: hidden;
}
.ph span { background: rgba(250,248,245,.75); padding: 6px 14px; border:1px solid var(--line); }
.hero .ph { width:100%; height:100%; }
.ratio-4x5 { aspect-ratio: 4/5; }
.ratio-3x2 { aspect-ratio: 3/2; }
.ratio-1x1 { aspect-ratio: 1/1; }
.ratio-16x9 { aspect-ratio: 16/9; }

/* ---------- Real image cover ---------- */
.shot { position: relative; overflow: hidden; background: var(--bg-alt); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.split__media .shot img, .card .shot img { border-radius: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,13,11,.94); display: none; align-items: center; justify-content: center; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; transition: opacity .2s; }
.lightbox .lb-close { top: 22px; right: 28px; font-size: 2.2rem; line-height: 1; }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 10px 18px; }
.lightbox .lb-prev { left: 10px; } .lightbox .lb-next { right: 10px; }
.lightbox button:hover { opacity: 1; }

/* ---------- Intro split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.split--reverse .split__media { order: 2; }
.signature { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); margin-top: .4em; }

/* ---------- Services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__body { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.card__body .btn { margin-top: auto; align-self: flex-start; }
/* card servizi cliccabile */
a.card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
a.card-link .card { height: 100%; transition: box-shadow .3s ease, transform .3s ease; }
a.card-link:hover .card { box-shadow: var(--shadow); transform: translateY(-4px); }
a.card-link:hover .shot img { transform: scale(1.04); }
.card__body .go { margin-top: auto; padding-top: 6px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
a.card-link:hover .go { color: var(--accent-dark); }
.card h3 { margin-bottom: .35em; }
.card .price { font-family: var(--serif); font-size: 1.1rem; color: var(--accent-dark); margin-bottom: .8em; }

/* ---------- Gallery grid ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery .ph { transition: transform .5s ease, filter .5s ease; }
.gallery a:hover .ph { transform: scale(1.02); filter: brightness(1.05); }
.tall { grid-row: span 2; }
/* la cella verticale riempie entrambe le righe (niente vuoto sotto) */
.gallery .tall { aspect-ratio: auto; }
@media (max-width: 540px){ .gallery .tall { aspect-ratio: 4/5; } }
/* Griglia giustificata (portfolio): righe ad altezza uniforme, nessun ritaglio */
.gallery.justified { display: flex; flex-wrap: wrap; gap: 14px; }
.gallery.justified::after { content: ""; flex-grow: 1000000; }
.gallery.justified .shot { --ar: 1.5; aspect-ratio: var(--ar); flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * 220px); cursor: pointer; }
.gallery.justified .shot.v { --ar: 0.667; }
.gallery.justified .shot img { width: 100%; height: 100%; object-fit: cover; }
.gallery.justified .shot:hover img { transform: scale(1.02); }
@media (max-width: 900px) { .gallery.justified .shot { flex-basis: calc(var(--ar) * 150px); } }
@media (max-width: 540px) { .gallery.justified .shot { flex-basis: calc(var(--ar) * 110px); } }

/* Masonry gallery (natural heights) */
.masonry { column-count: 3; column-gap: 14px; }
.masonry .shot { break-inside: avoid; margin: 0 0 14px; cursor: pointer; }
.masonry .shot img { width: 100%; height: auto; display: block; }
.masonry .shot:hover img { transform: scale(1.02); }
@media (max-width: 900px){ .masonry { column-count: 2; } }
@media (max-width: 540px){ .masonry { column-count: 1; } }

.gallery-filters { display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; margin-bottom: 40px; }
.gallery-filters button {
  background:none; border:1px solid var(--line); padding: 9px 20px; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); transition: all .25s;
}
.gallery-filters button.active, .gallery-filters button:hover { background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Quote ---------- */
.quote { text-align:center; max-width: 820px; margin: 0 auto; }
/* citazione con sfondo fotografico in parallax */
.quote-parallax {
  position: relative;
  background-image: url("img/quote-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}
.quote-parallax::before { content:""; position:absolute; inset:0; background: rgba(250,248,245,.82); }
.quote-parallax .container { position: relative; z-index: 1; }
@media (max-width: 900px){ .quote-parallax { background-attachment: scroll; } }
/* variante per la pagina Chi sono */
.quote-parallax.quote-parallax--chisono { background-image: url("img/quote-bg-chisono.jpg"); background-position: center 35%; }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height:1.35; color: var(--ink); font-style: italic; margin:0 0 .6em; }
.quote cite { font-style: normal; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align:center; }
.stats .num { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.2rem); color: var(--accent-dark); }
.stats .lbl { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft); }

/* ---------- Contact / Form ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,70px); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap: 18px; }
label { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:6px; }
input, textarea, select {
  width:100%; padding: 13px 15px; border:1px solid var(--line); background: var(--white);
  font-family: var(--sans); font-size:.95rem; color: var(--ink); margin-bottom: 18px; border-radius:0;
}
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--accent); }
textarea { min-height: 130px; resize: vertical; }
.contact-info p { margin-bottom:.4em; }
.contact-info .lbl { display:block; margin-bottom: 4px; }
.contact-info .block { margin-bottom: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #cfc7bc; padding: 70px 0 30px; }
.site-footer a { color:#cfc7bc; }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.site-footer .brand { color:#fff; }
.footer-social { display:flex; gap:18px; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top: 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.72rem; letter-spacing:.08em; color: #8f877d; }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 800px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; font-size: 1.7rem; }
.prose h3 { margin-top: 1.3em; font-size: 1.25rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2em; margin-bottom: 1.2em; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- Header su mobile: sempre solido e leggibile ---------- */
/* Su iOS/Safari un header fixed con backdrop-filter (blur) e sfondo semi-trasparente
   fa "sparire" lo sfondo durante lo scroll: su mobile usiamo sfondo PIENO e NIENTE blur. */
@media (max-width: 900px) {
  .site-header {
    background: #faf8f5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--line);
    padding-top: 12px; padding-bottom: 12px;
  }
  .site-header.scrolled {
    background: #faf8f5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header .brand--sig .sig--white { display: none; }
  .site-header .brand--sig .sig--black { display: block; }
  .site-header .nav-toggle span { background: var(--ink); }
}

/* ---------- Lavori: griglia progetti ---------- */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .works { grid-template-columns: 1fr; } }
.work-card { position: relative; display: block; overflow: hidden; aspect-ratio: 3/2; background: var(--bg-alt); color: inherit; }
.work-card--wide { grid-column: 1 / -1; aspect-ratio: 16/9; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.work-card:hover img { transform: scale(1.04); }
.work-card__cap { position: absolute; inset: auto 0 0 0; padding: 40px 30px 26px; background: linear-gradient(transparent, rgba(15,13,11,.72)); }
.work-card__cap .eyebrow { color: #fff; opacity: .9; margin-bottom: 4px; }
.work-card__cap h3 { color: #fff; margin: 0; }

/* ---------- Video: player responsivo 16:9 ---------- */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Griglia servizi a 4 (foto + video) ---------- */
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards--4 { grid-template-columns: 1fr; } }

/* Pastiglia play sulla card Video */
.card--video .shot { position: relative; }
.card--video .shot::after {
  content: "\25B6"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: #fff; background: rgba(0,0,0,.30);
  text-shadow: 0 2px 14px rgba(0,0,0,.5); transition: background .3s ease;
}
a.card-link:hover .card--video .shot::after { background: rgba(0,0,0,.15); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--bg); flex-direction: column; justify-content: center;
    gap: 26px; transform: translateX(100%); transition: transform .35s ease; box-shadow: var(--shadow);
  }
  .nav.open { transform: none; }
  .nav a { color: var(--ink) !important; font-size: 1rem; }
  .nav-toggle { display: block; z-index: 120; }
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}