/* ============================================================
   Pistone Rappresentanze — Home
   home.css
   ============================================================ */

/* ── HERO ── */
.hero {
  position: relative; overflow: clip;
  padding: clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,5rem);
  background:
    radial-gradient(ellipse at 82% 18%, rgba(169,130,63,.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 90%, rgba(106,36,54,.08) 0%, transparent 55%),
    var(--paper);
}
.hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4.5rem);
  align-items: center; min-height: 70vh;
}
.hero-text { animation: fU .9s ease .05s both; }
.hero-ttl {
  font-family:'Cormorant Garamond', serif; font-weight:400;
  font-size: clamp(2.6rem,6vw,5rem); line-height:1.04; letter-spacing:-.01em;
  color: var(--ink); margin-bottom:1.4rem;
}
.hero-ttl em { display:block; font-style:italic; color: var(--brass); font-size:.82em; margin-top:.15em; }
.hero-sub { font-size: clamp(1rem,1.5vw,1.14rem); color: var(--txt-body); font-weight:300; line-height:1.85; max-width: 30rem; margin-bottom:2rem; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.6rem; }

.hero-trust { display:flex; gap: clamp(1.4rem,3vw,2.8rem); flex-wrap:wrap; padding-top:1.8rem; border-top:1px solid var(--line-2); }
.ht-item { display:flex; flex-direction:column; gap:.2rem; }
/* I numeri usano il sans: nel Cormorant la cifra "1" è identica a una "I". */
.ht-n { font-family:'Jost', system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size:1.6rem; font-weight:400; letter-spacing:.02em; color: var(--brass); line-height:1; }
.ht-l { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--txt-muted); }

/* Hero visual */
.hero-visual { animation: fU 1s ease .2s both; }
.hv-panel {
  position: relative; aspect-ratio: 3/4; border-radius: 4px; overflow:hidden;
  background: linear-gradient(155deg, #2a241d 0%, #211d18 55%, #17130f 100%);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hv-drape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.hv-mono {
  position:relative; font-size: clamp(9rem,20vw,15rem); font-weight:500; line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(228,200,139,.5); text-stroke: 1px rgba(228,200,139,.5);
}
.hv-tag {
  position:absolute; bottom: 1.6rem; left:50%; transform: translateX(-50%);
  font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color: var(--brass-3);
  white-space:nowrap;
}
.hv-panel::after {
  content:''; position:absolute; inset:10px; border:1px solid rgba(228,200,139,.25); border-radius:2px; pointer-events:none; z-index:3;
}
/* foto reale nella hero */
.hv-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hv-ov { position:absolute; inset:0; background: linear-gradient(160deg, rgba(23,19,15,.25) 0%, rgba(23,19,15,.55) 100%); z-index:1; }
.hv-panel.has-photo .hv-tag { z-index:4; }

/* ── Rotatore hero: le campagne dei brand in dissolvenza ──
   Crossfade lento + leggero zoom cinematografico ("Ken Burns").
   Lo stato di riposo ha la stessa scala dello stato finale dello zoom,
   così l'uscita in dissolvenza non "salta". */
.hv-rotator .hv-slide { opacity:0; transform: scale(1.08); transition: opacity 1.6s ease; z-index:0; }
.hv-rotator .hv-slide.on { opacity:1; animation: hvKen 9s ease-out both; }
@keyframes hvKen { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Le slide della hero sono ritagli verticali 3:4 dedicati (hero-slides/):
   stesso formato del pannello, quindi nessun ritaglio imprevisto. */

@media (prefers-reduced-motion: reduce) {
  .hv-rotator .hv-slide { transition:none; transform:none; animation:none !important; }
}

.scroll-ind {
  display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top: clamp(1.5rem,4vw,3rem);
}
.scroll-ind span { font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color: var(--txt-dim); }
.scroll-ind i { width:1px; height:44px; background: linear-gradient(var(--brass), transparent); }

@media (max-width: 880px) {
  .hero-inner { grid-template-columns:1fr; gap:2.5rem; }
  .hero-visual { max-width: 340px; }
}

/* ── MARQUEE ── */
.mq { overflow:hidden; background: var(--ink); padding:1.1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mq-t { display:inline-flex; align-items:center; white-space:nowrap; animation: mq 60s linear infinite; }
.mq-t span { font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.25rem; color: rgba(255,255,255,.82); padding:0 .3rem; }
.mq-t em { color: var(--brass); font-size:.5rem; margin:0 1.3rem; font-style:normal; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq:hover .mq-t { animation-play-state: paused; }

/* ── INTRO ── */
.intro { background: var(--paper); }
.intro-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.link-arrow { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.8rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink); font-weight:500; }
.link-arrow span { transition: transform .3s; color: var(--brass); }
.link-arrow:hover span { transform: translateX(6px); }
.intro-right { display:grid; grid-template-columns:1fr 1fr; gap:1px; background: var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.stat { background: var(--cream); padding: clamp(1.4rem,3vw,2.2rem) 1.4rem; display:flex; flex-direction:column; gap:.4rem; }
.stat-n { font-family:'Jost', system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size: clamp(2.1rem,4.4vw,2.9rem); font-weight:300; letter-spacing:.01em; color: var(--ink); line-height:1; }
.stat-n em { color: var(--brass); font-style:normal; }
.stat-l { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--txt-muted); }
@media (max-width: 820px) { .intro-grid { grid-template-columns:1fr; } }

/* ── CAMPAGNE (le nostre proposte) ── */
.campsec { background: var(--paper); }
.camp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom: clamp(2rem,4vw,3rem); }
.camp-head .sec-ttl { margin-bottom:0; }
.camp-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.4vw,1.1rem); }
.camp-cols-2 { grid-template-columns: repeat(2,1fr); }
.camp-item { position:relative; aspect-ratio: 3/2; overflow:hidden; border-radius:4px; background:#211d18; }
.camp-item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.camp-item::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(228,200,139,.18);
  background: linear-gradient(180deg, transparent 55%, rgba(23,19,15,.28) 100%);
  opacity:.9; transition: opacity .4s;
}
.camp-item:hover img { transform: scale(1.045); }
.camp-item:hover::after { opacity:.55; }
@media (max-width: 860px) { .camp-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px) { .camp-grid { grid-template-columns:1fr; } }

/* ── SETTORI ── */
.settori { background: var(--paper-2); }
.settori-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom: clamp(2rem,4vw,3rem); }
.settori-head .sec-ttl { margin-bottom:0; }
/* Sei settori: griglia 3x2 (con 4 settori tornava comoda a 4 colonne). */
.settori-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,1.5vw,1.2rem); }
.scard {
  display:flex; flex-direction:column; background: var(--cream); border:1px solid var(--line-2);
  border-radius:4px; padding: clamp(1.4rem,2.5vw,2rem); transition: transform .35s, box-shadow .35s, border-color .35s;
}
.scard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line); }
.scard-photo { display:block; margin:-1px -1px 1.4rem; aspect-ratio: 3/2; overflow:hidden; border-radius:4px 4px 0 0; }
.scard-photo img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
/* Settore senza foto: pannello grafico della stessa altezza, così la fila
   resta allineata. Appena si carica la foto reale, sparisce da solo. */
.scard-photo.is-ph {
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line-2);
  background:
    radial-gradient(circle at 30% 20%, rgba(228,200,139,.28) 0%, transparent 55%),
    linear-gradient(150deg, var(--paper-2) 0%, var(--cream) 55%, #efe6d7 100%);
}
.scard-ph-ic { width:34%; height:auto; color: var(--brass); opacity:.22; transition: opacity .5s, transform .5s; }
.scard:hover .scard-ph-ic { opacity:.3; transform: scale(1.05); }
.scard:hover .scard-photo img { transform: scale(1.05); }
.scard:has(.scard-photo) { padding-top:0; overflow:hidden; }
.scard:has(.scard-photo) .scard-ic { margin-left: clamp(1.4rem,2.5vw,2rem); }
.scard:has(.scard-photo) .scard-ttl,
.scard:has(.scard-photo) .scard-desc,
.scard:has(.scard-photo) .scard-foot { margin-left: clamp(1.4rem,2.5vw,2rem); margin-right: clamp(1.4rem,2.5vw,2rem); }
.scard-ic { width:52px; height:52px; border-radius:50%; background: rgba(169,130,63,.1); display:flex; align-items:center; justify-content:center; color: var(--brass); margin-bottom:1.2rem; }
.scard-ic svg { width:26px; height:26px; }
.scard-ttl { font-family:'Cormorant Garamond', serif; font-size:1.55rem; font-weight:500; color: var(--ink); margin-bottom:.6rem; line-height:1.1; }
.scard-desc { font-size:.85rem; color: var(--txt-body); line-height:1.7; font-weight:300; flex:1; margin-bottom:1.4rem; }
.scard-foot { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; border-top:1px solid var(--line-2); }
.scard-count { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--brass); font-weight:500; }
.scard-cta { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--txt-muted); transition: color .3s; }
.scard:hover .scard-cta { color: var(--ink); }
@media (max-width: 900px) { .settori-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .settori-grid { grid-template-columns:1fr; } }

/* ── FEATURED ── */
.featured { background: var(--paper); }
.featured-head { text-align:center; margin-bottom: clamp(2rem,4vw,3rem); }
.featured-head .sec-lbl { justify-content:center; }
.featured-more { text-align:center; margin-top: clamp(2rem,4vw,3rem); }

/* ── WHY ── */
.why { background: var(--paper-2); }
.why-head { text-align:center; margin-bottom: clamp(2rem,4vw,3.2rem); }
.why-head .sec-lbl { justify-content:center; }
.why-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.6rem); }
.wcard { padding: clamp(1.2rem,2vw,1.6rem) 0; border-top:2px solid var(--ink); }
.wcard-n { font-family:'Jost', system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size:1.1rem; letter-spacing:.1em; color: var(--brass); font-weight:400; display:block; margin-bottom:.8rem; }
.wcard-ttl { font-family:'Cormorant Garamond', serif; font-size:1.4rem; font-weight:500; color: var(--ink); margin-bottom:.6rem; line-height:1.15; }
.wcard-desc { font-size:.85rem; color: var(--txt-body); line-height:1.7; font-weight:300; }
@media (max-width: 900px) { .why-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .why-grid { grid-template-columns:1fr; } }

/* ── SHOWROOM BAND ── */
.showband { position:relative; display:grid; grid-template-columns:1fr 1fr; min-height: 60vh; overflow:clip; }
.showband-media { position:relative; background: linear-gradient(155deg, #2a241d, #17130f); overflow:hidden; }
.showband-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.showband-media.has-photo::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(23,19,15,.42) 0%, rgba(23,19,15,.12) 55%, rgba(23,19,15,.35) 100%);
}
.showband-motif {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(228,200,139,.18) 0%, transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(138,50,71,.22) 0%, transparent 45%),
    repeating-linear-gradient(115deg, rgba(228,200,139,.06) 0 2px, transparent 2px 26px);
}
.showband-in { display:flex; flex-direction:column; justify-content:center; padding: clamp(2.5rem,6vw,5rem) clamp(1.4rem,5vw,4.5rem); background: var(--ink); color: var(--cream); }
.showband-in .sec-lbl { color: var(--brass-3); }
.showband-in .sec-lbl::before { background: var(--brass-3); }
.showband-in .sec-ttl { color: var(--cream); }
.showband-in .sec-ttl em { color: var(--brass-3); }
.showband-sub { font-size:.95rem; color: rgba(255,255,255,.66); line-height:1.85; font-weight:300; max-width:34rem; margin-bottom:1.6rem; }
.showband-feats { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.showband-feats span { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--brass-3); border:1px solid rgba(228,200,139,.3); border-radius:100px; padding:6px 14px; }
.showband-in .btn-g { color: var(--cream); border-color: rgba(255,255,255,.28); align-self:flex-start; }
.showband-in .btn-g:hover { color: var(--brass-3); border-color: var(--brass-3); background: rgba(255,255,255,.05); }
@media (max-width: 820px) { .showband { grid-template-columns:1fr; } .showband-media { min-height: 220px; } }