/* ============================================================
   Pistone Rappresentanze — Interior pages
   interior.css  ·  azienda · showroom · contatti
   ============================================================ */

.link-arrow { display:inline-flex; align-items:center; gap:.5rem; 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); }

/* ── SPLIT (text + side) ── */
.split { display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
/* Corpo del testo: stessa misura e stessa interlinea del resto del sito
   (.catsec-desc, .legal p, .catnote-in p). Senza queste due proprietà i
   paragrafi ereditavano 1rem/1.6 e risultavano più fitti delle altre pagine. */
.split-txt p { font-size:.95rem; line-height:1.8; color: var(--txt-body); font-weight:300; margin-bottom:1.1rem; }
.split-txt p.lead { color: var(--ink); }
.split-txt p:last-of-type { margin-bottom:0; }

.side-card { background: var(--cream); border:1px solid var(--line); border-radius:4px; padding: clamp(1.8rem,3vw,2.4rem); box-shadow: var(--shadow); }
.side-mono { font-size:4rem; color: var(--brass); line-height:1; font-weight:500; }
.side-name { font-family:'Cormorant Garamond', serif; font-size:1.5rem; color: var(--ink); margin-top:.4rem; }
.side-sub { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--txt-muted); margin-bottom:1.4rem; }
.side-list { list-style:none; }
.side-list li { display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-top:1px solid var(--line-2); font-size:.9rem; }
.side-list li span { color: var(--txt-muted); letter-spacing:.04em; }
.side-list li strong { color: var(--ink); font-weight:500; }

@media (max-width: 820px) { .split { grid-template-columns:1fr; } }

/* ── IL RESPONSABILE (azienda) ──
   Foto grande a sinistra, testo a destra. La foto è il pezzo forte della
   sezione: occupa la colonna più larga e si apre nel lightbox al clic. */
.respsec { background: var(--cream); }
.resp-grid { display:grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.resp-photo {
  aspect-ratio: 4/3; width:100%; cursor:zoom-in;
  border:1px solid var(--line); box-shadow: var(--shadow);
}
.resp-photo img { transition: transform .7s ease; }
.resp-photo:hover img { transform: scale(1.035); }
.resp-txt p { font-size:.95rem; line-height:1.8; color: var(--txt-body); font-weight:300; margin-bottom:1.1rem; }
.resp-txt p.lead { color: var(--ink); }
.resp-txt .link-arrow { margin-top:.4rem; }
/* Su schermi stretti la foto resta in cima: è la prima cosa che si vede. */
@media (max-width: 820px) { .resp-grid { grid-template-columns:1fr; } }

/* ── VALORI / METODO ── */
.valsec { background: var(--paper-2); }
.val-head { text-align:center; margin-bottom: clamp(2rem,4vw,3rem); }
.val-head .sec-lbl { justify-content:center; }
.val-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.6rem); }
.valcard { background: var(--cream); border:1px solid var(--line-2); border-radius:4px; padding: clamp(1.4rem,2.5vw,1.9rem); transition: transform .35s, box-shadow .35s; }
.valcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
/* I numeri usano il sans: nel Cormorant la cifra "1" è identica a una "I". */
.valcard-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:.7rem; }
.valcard-ttl { font-family:'Cormorant Garamond', serif; font-size:1.45rem; font-weight:500; color: var(--ink); margin-bottom:.6rem; line-height:1.15; }
.valcard-desc { font-size:.85rem; color: var(--txt-body); line-height:1.7; font-weight:300; }
@media (max-width: 900px) { .val-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 460px) { .val-grid { grid-template-columns:1fr; } }

/* ── SECTORS ROW (azienda) ── */
.sectors-row { border-top:1px solid var(--line); }
.srow { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding: clamp(1.3rem,3vw,2rem) .4rem; border-bottom:1px solid var(--line); transition: padding-left .3s, background .3s; }
.srow:hover { padding-left:1.2rem; background: var(--cream); }
.srow-l h3 { font-family:'Cormorant Garamond', serif; font-size: clamp(1.5rem,3vw,2rem); font-weight:500; color: var(--ink); line-height:1.1; }
.srow-l p { font-size:.85rem; color: var(--txt-muted); letter-spacing:.02em; margin-top:.2rem; }
.srow-r { display:flex; align-items:center; gap:1.2rem; flex-shrink:0; }
.srow-count { font-family:'Jost', system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; font-size:1.7rem; font-weight:300; color: var(--brass); }
.srow-arr { color: var(--brass); font-size:1.2rem; transition: transform .3s; }
.srow:hover .srow-arr { transform: translateX(6px); }

/* ── PHOTO SLOTS (elegant placeholders) ── */
.photo-slot {
  position: relative; aspect-ratio: 4/3; border-radius:4px; overflow:hidden;
  background: linear-gradient(150deg, #2a241d 0%, #211d18 60%, #17130f 100%);
  display:flex; align-items:flex-end; padding:1.2rem;
}
.photo-slot::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(228,200,139,.16) 0%, transparent 42%),
    radial-gradient(circle at 75% 80%, rgba(138,50,71,.2) 0%, transparent 45%),
    repeating-linear-gradient(120deg, rgba(228,200,139,.05) 0 2px, transparent 2px 24px);
}
.photo-slot::after {
  content:''; position:absolute; inset:12px; border:1px solid rgba(228,200,139,.22); border-radius:2px;
}
.photo-tall { aspect-ratio: 3/4; }
.ps-label { position:relative; z-index:2; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color: var(--brass-3); }
/* quando c'è una foto reale: la mostra a tutta area, con un velo per la leggibilità della label */
.photo-slot.has-photo::before,
.photo-slot.has-photo::after { display:none; }
.photo-slot.has-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-slot.has-photo { background:#211d18; }
.photo-slot.has-photo .ps-label {
  z-index:2; background: linear-gradient(transparent, rgba(23,19,15,.85)); color:#fff;
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.2rem .9rem;
}

/* ── GALLERY ── */
.galsec { background: var(--paper); }
.gal-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.7rem,1.4vw,1rem); }
.gal-auto { grid-template-columns: repeat(3,1fr); }
.gal-cols-2 { grid-template-columns: repeat(2,1fr); }
.gal-auto .photo-slot img { transition: transform .6s ease; }
.gal-auto .photo-slot:hover img { transform: scale(1.045); }
.gal-note { text-align:center; margin-top:1.4rem; font-size:.72rem; letter-spacing:.06em; color: var(--txt-dim); font-style:italic; }
@media (max-width: 780px) { .gal-grid, .gal-auto { grid-template-columns:1fr 1fr; } }
@media (max-width: 480px) { .gal-auto { grid-template-columns:1fr; } }

/* Foto azienda accanto alla scheda societaria (orizzontale: la sorgente è 4:3,
   così si usa a piena risoluzione senza ingrandirla) */
.side-photo { margin-top: clamp(1rem,2vw,1.4rem); aspect-ratio: 4/3; }

/* Foto in fondo alla colonna informazioni della pagina Contatti */
.ci-photo { margin: clamp(1.4rem,3vw,2rem) 0 1.6rem; aspect-ratio: 3/4; }
@media (min-width: 861px) { .ci-photo { aspect-ratio: 4/5; } }

/* ── VISIT INFO + MAP ── */
.visit-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,4vw,3.5rem); align-items:stretch; }
.visit-info { display:grid; grid-template-columns:1fr 1fr; gap: 1.6rem 2rem; align-content:start; }
.vi-block h3 { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: var(--brass); margin-bottom:.6rem; }
.vi-block p { font-size:.92rem; color: var(--txt-body); line-height:1.7; font-weight:300; }
.vi-block a { color: var(--ink); }
.vi-block a:hover { color: var(--brass); }
.vi-block .link-arrow { margin-top:.6rem; }
.visit-map { min-height: 320px; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.visit-map iframe { width:100%; height:100%; min-height:320px; border:0; display:block; filter: grayscale(.2) contrast(1.02); }
@media (max-width: 820px) { .visit-grid { grid-template-columns:1fr; } }
@media (max-width: 420px) { .visit-info { grid-template-columns:1fr; } }

/* ── CONTACT PAGE ── */
.contact-grid { display:grid; grid-template-columns: .9fr 1.3fr; gap: clamp(2rem,4vw,4rem); align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1.4rem; }
.ci-card { display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.4rem; border-bottom:1px solid var(--line-2); }
.ci-ic { font-size:1.3rem; color: var(--brass); line-height:1.4; flex-shrink:0; width:2rem; text-align:center; }
.ci-ic-wa { display:inline-flex; align-items:center; justify-content:center; padding-top:.25rem; }
.ci-ic-wa svg { fill: var(--brass); }
.ci-card h3 { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: var(--txt-muted); margin-bottom:.4rem; }
.ci-card a { color: var(--ink); font-size:1rem; }
.ci-card a:hover { color: var(--brass); }
.ci-muted { color: var(--txt-muted); font-size:.85rem; }
.ci-legal { font-size:.72rem; color: var(--txt-dim); letter-spacing:.04em; line-height:1.7; margin-top:.4rem; }

.contact-form { background: var(--cream); border:1px solid var(--line); border-radius:6px; padding: clamp(1.6rem,3.5vw,2.6rem); box-shadow: var(--shadow); }
.cf-head { font-family:'Cormorant Garamond', serif; font-size:1.6rem; color: var(--ink); margin-bottom:1.6rem; line-height:1.2; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cf-g { margin-bottom:1.1rem; display:flex; flex-direction:column; }
.cf-g label { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--txt-muted); margin-bottom:.5rem; }
.cf-g input, .cf-g select, .cf-g textarea {
  font-family:'Jost',sans-serif; font-size:.95rem; color: var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius:3px; padding:12px 14px;
  transition: border-color .25s, box-shadow .25s;
}
.cf-g input:focus, .cf-g select:focus, .cf-g textarea:focus {
  outline:none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(169,130,63,.12);
}
.cf-g textarea { resize: vertical; }
.cf-check { display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color: var(--txt-body); margin:.4rem 0 1.4rem; line-height:1.5; }
.cf-check input { margin-top:3px; accent-color: var(--brass); }
.cf-check a { color: var(--brass); text-decoration:underline; }
.cf-submit { width:100%; justify-content:center; }
.cf-note { text-align:center; font-size:.72rem; color: var(--txt-dim); margin-top:.9rem; }
.cf-msg { margin-top:1rem; font-size:.9rem; padding:0; border-radius:4px; text-align:center; }
.cf-msg.cf-ok { padding:12px; background: rgba(74,120,74,.12); color:#3a6a3a; border:1px solid rgba(74,120,74,.3); }
.cf-msg.cf-err { padding:12px; background: rgba(138,50,71,.1); color: var(--wine-2); border:1px solid rgba(138,50,71,.3); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width: 860px) { .contact-grid { grid-template-columns:1fr; } }
@media (max-width: 480px) { .cf-row { grid-template-columns:1fr; } }

/* ── LEGAL ── */
.legal { max-width: 52rem; }
.legal-upd { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--txt-dim); margin-bottom:2rem; }
.legal h2 { font-family:'Cormorant Garamond', serif; font-size:1.6rem; color: var(--ink); font-weight:500; margin:2rem 0 .7rem; }
.legal p { color: var(--txt-body); font-weight:300; line-height:1.85; margin-bottom:1rem; }
.legal a { color: var(--brass); text-decoration:underline; }
.legal-note { font-size:.82rem; color: var(--txt-dim); font-style:italic; margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line-2); }

/* ── SOCI E COLLABORATORI (pagina Contatti) ── */
.teamsec { background: var(--paper-2); }
.team-note { font-size:.92rem; color: var(--txt-body); font-weight:300; margin-top:-.4rem; }
.team-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.9rem,2vw,1.4rem); }
.tcard {
  background: var(--cream); border:1px solid var(--line-2); border-radius:4px;
  padding: clamp(1.4rem,2.5vw,1.9rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line); }
.tcard-ini {
  width:52px; height:52px; border-radius:50%; background: rgba(169,130,63,.1);
  display:grid; place-items:center; margin-bottom:.6rem;
  font-family:'Cormorant Garamond', serif; font-size:1.35rem; color: var(--brass); line-height:1;
}
.tcard-name { font-family:'Cormorant Garamond', serif; font-size:1.35rem; font-weight:500; color: var(--ink); line-height:1.15; }
.tcard-nick { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--txt-muted); }
.tcard-tel {
  margin-top:.5rem; font-variant-numeric: lining-nums tabular-nums;
  font-size:.95rem; color: var(--brass); letter-spacing:.03em; transition: color .25s;
}
.tcard-tel:hover { color: var(--ink); }
@media (max-width: 900px) { .team-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 430px) { .team-grid { grid-template-columns:1fr; } }