/* pagine servizio: si appoggia a ../style.css */

/* ---------- intestazione di pagina ---------- */
.pagehead { padding-top: 40px; padding-bottom: clamp(40px, 5vw, 64px); }
.pagehead .tb-main { padding: 24px 28px 26px; border-right: var(--rule); display: flex; flex-direction: column; gap: 14px; }
.crumbs { margin: 0; color: var(--ink-2); }
/* percorso nell'angolo in alto a destra del riquadro, titolo e testo centrati in altezza */
.sheet.pagehead > header.tb { position: relative; align-items: center; }
.pagehead .crumbs { position: absolute; top: 14px; right: 18px; }
.pagehead .tb-main { justify-content: center; align-self: stretch; padding-top: 30px; padding-bottom: 30px; }
.sheet.pagehead > header.tb p:not(.crumbs) { align-self: center; padding-top: 34px; }
.crumbs a { color: var(--blue); }
.pagehead h1 {
  margin: 0; font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); line-height: 0.98;
  font-weight: 840; font-stretch: 112%; letter-spacing: -0.03em; text-wrap: balance;
}
.pagehead h1 em { font-style: normal; color: var(--magenta); }
.sheet.pagehead > header.tb { margin-bottom: 0; }

.index { list-style: none; padding: 0; margin-top: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--rule); border-top: 0; background: var(--paper); }
.index li + li { border-left: var(--hair); }
.index a { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px 20px; color: var(--ink); text-decoration: none; height: 100%; }
.index a:hover { background: var(--plain); color: var(--ink); }
.index .label { grid-row: 1 / span 2; align-self: center; color: var(--magenta-ink); font-size: 0.9rem; }
.index b { font-weight: 780; font-stretch: 100%; font-size: 1.1rem; }
.index small { color: var(--ink-2); font-size: 0.88rem; }

.sheet h2 .sec { display: block; margin-bottom: 14px; color: var(--magenta-ink); font-size: 0.85rem; letter-spacing: 0.12em; }

/* ---------- visori ---------- */
.viewer .figure { min-height: 0; }
.ortho, .embed { position: relative; aspect-ratio: 16 / 10; width: 100%; }
.ortho { background: #2b3238; z-index: 1; }
.ortho .leaflet-control-attribution { font: 500 0.68rem/1.4 "Archivo", sans-serif; background: rgba(251, 252, 247, 0.85); }
.ortho .leaflet-control-zoom { border: var(--rule) !important; border-radius: 0; margin: 0 14px 34px 0; }
.ortho .leaflet-control-zoom a { border-radius: 0 !important; color: var(--ink); width: 36px; height: 36px; line-height: 34px; }
.ortho.drawing { cursor: crosshair; }
.ortho.drawing .leaflet-interactive { cursor: crosshair; }
.map-fig .tabs { z-index: 1000; }
.map-fig .demo { z-index: 1000; bottom: 26px; }

.o-tip { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; box-shadow: none; padding: 4px 10px; font: 700 0.85rem/1.3 "Archivo", sans-serif; color: var(--ink); }
.o-tip::before { display: none; }
.o-vtx { background: var(--paper); border: 2.5px solid var(--magenta); border-radius: 50%; }

/* confronto a tendina */
.swipe { position: absolute; inset: 0; z-index: 900; pointer-events: none; }
.swipe-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px;
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.swipe-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2.5px; background: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.swipe-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); border: var(--rule); border-radius: 50%;
  font: 800 1.1rem/1 "Archivo", sans-serif; color: var(--ink); letter-spacing: 0.1em;
}
.swipe-handle:focus-visible { outline: none; }
.swipe-handle:focus-visible::after { outline: 2.5px solid var(--magenta); outline-offset: 3px; }
.swipe-tag { position: absolute; top: 70px; padding: 5px 10px; background: var(--paper); border: 1px solid var(--ink); font: var(--label); font-stretch: 72%; text-transform: uppercase; letter-spacing: 0.09em; }
.swipe-tag.l { left: 14px; }
.swipe-tag.r { right: 64px; }

.tool-out { display: flex; flex-direction: column; gap: 6px; }
.tool-out output small { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
#o-coord { font-size: 1.35rem; letter-spacing: 0; min-height: 0; }
.m-btns { display: flex; gap: 8px; margin-top: 14px; }

.btn-s {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px;
  font: inherit; font-weight: 700; font-stretch: 90%; font-size: 0.95rem;
  background: var(--magenta); color: #fff; border: var(--rule); cursor: pointer; text-decoration: none;
}
.btn-s:hover { background: var(--magenta-ink); color: #fff; }
.btn-s.ghost { background: var(--paper); color: var(--ink); }
.btn-s.ghost:hover { background: var(--plain); color: var(--ink); }
.btn-s.big { min-height: 52px; padding: 0 24px; font-size: 1.05rem; }

/* embed caricati al clic: niente traffico finché non serve */
.embed { background: #0f1418 var(--poster, none) center / cover no-repeat; }
.embed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(15, 20, 24, 0.55), rgba(15, 20, 24, 0.75)); }
.embed:not([style*="--poster"])::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(163, 21, 122, 0.25), transparent 60%),
    repeating-linear-gradient(0deg, rgba(251, 252, 247, 0.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(251, 252, 247, 0.06) 0 1px, transparent 1px 40px);
}
.embed .load {
  position: absolute; inset: 0; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: none; border: 0; color: #fff; font: inherit; cursor: pointer;
}
.embed .load b { padding: 10px 20px; background: var(--magenta); border: 1.5px solid #fff; font-weight: 750; font-stretch: 92%; font-size: 1.05rem; }
.embed .load:hover b { background: var(--magenta-ink); }
.embed .load small { font-weight: 600; font-size: 0.85rem; padding: 3px 10px; background: rgba(15, 20, 24, 0.78); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.on::before { display: none; }

.keys { list-style: none; margin: 4px 0 0; padding: 0; border-top: var(--hair); }
.keys li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 8px 0; border-bottom: var(--hair); align-items: baseline; }
kbd { font: 700 0.85rem/1.2 "Archivo", sans-serif; font-stretch: 85%; color: var(--ink); }
.keys span { color: var(--ink-2); font-size: 0.95rem; }
.notes .label { display: block; color: var(--ink-2); margin-bottom: 6px; }
.notes p + p { margin-top: 10px; }
.credit { font-size: 0.82rem; }

/* ---------- consegna ---------- */
.deliver { margin-bottom: 0; }
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 0; padding: 22px clamp(20px, 3vw, 40px); background: var(--paper); border: var(--rule); border-top: 0; }
.closing p { margin: 0; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 760; font-stretch: 100%; letter-spacing: -0.01em; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .pagehead .tb-main { border-right: 0; border-bottom: var(--rule); }
  .pagehead .crumbs { position: static; }
  .sheet.pagehead > header.tb p:not(.crumbs) { padding-top: 16px; }
  .index { grid-auto-flow: row; }
  .index li + li { border-left: 0; border-top: var(--hair); }
  .ortho, .embed { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .pagehead .tb-main { padding: 18px 18px 20px; }
  .sheet.pagehead > header.tb h1 { font-size: 2.3rem; }
  .ortho, .embed { aspect-ratio: 4 / 5; }
  .map-fig .tabs { left: 8px; right: 8px; top: 8px; }
  .map-fig .tabs button { flex: 1; padding: 0 6px; }
  .swipe-tag { top: 62px; }
  .swipe-tag.r { right: 58px; }
  .keys li { grid-template-columns: 8rem 1fr; }
  .closing .btn-s { width: 100%; justify-content: center; }
}

/* modello GLB: fondo chiaro da plastico */
.embed model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: #5a90b0; --poster-color: transparent; }
.embed-3d { background-color: #5a90b0; }
.embed-3d::before { background: linear-gradient(rgba(15, 20, 24, 0.15), rgba(15, 20, 24, 0.55)); }
.mv-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(280px, 70%); display: grid; gap: 10px; text-align: center; font-weight: 700; font-stretch: 90%; color: var(--ink); }
.mv-bar::before { content: ""; grid-row: 1; height: 6px; border: var(--rule); background: var(--paper); }
.mv-bar i { grid-row: 1; align-self: center; height: 6px; width: 0; margin: 0 1.5px; background: var(--magenta); transition: width 0.2s; }
.mv-bar[hidden] { display: none; }

/* ---------- quando serve: casi in schede ---------- */
.uses { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; border: var(--rule); background: var(--paper); }
.uses li { padding: 26px clamp(20px, 3vw, 40px) 30px; }
.uses li:nth-child(even) { border-left: var(--rule); }
.uses li:nth-child(n + 3) { border-top: var(--rule); }
.uses h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.05; font-weight: 800; font-stretch: 106%; letter-spacing: -0.015em; }
.uses p { margin: 0; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 720px) {
  .uses { grid-template-columns: 1fr; }
  .uses li:nth-child(even) { border-left: 0; }
  .uses li + li { border-top: var(--rule); }
}

/* ---------- fotovoltaico: difetti ---------- */
.defects { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule); background: var(--paper); }
.defects li { padding: 24px clamp(18px, 2.2vw, 30px) 26px; display: flex; flex-direction: column; gap: 10px; }
.defects li:not(:nth-child(3n + 1)) { border-left: var(--rule); }
.defects li:nth-child(n + 4) { border-top: var(--rule); }
.defects h3 { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.05; font-weight: 800; font-stretch: 106%; letter-spacing: -0.015em; }
.defects p { margin: 0; color: var(--ink-2); }
.defects .worse { margin-top: auto; padding-top: 10px; border-top: var(--hair); color: var(--magenta-ink); font-size: 0.92rem; }

/* ---------- fotovoltaico: stima della perdita ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: var(--rule); background: var(--paper); }
.calc-in { padding: 26px clamp(20px, 3vw, 40px) 30px; border-right: var(--rule); display: grid; gap: 12px; align-content: start; }
.calc-in h3 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.05; font-weight: 800; font-stretch: 106%; letter-spacing: -0.015em; }
.calc .hint { margin: 0; color: var(--ink-2); font-size: 0.9rem; }
.calc-in label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-top: 10px; border-top: var(--hair); }
.calc-in .in { display: inline-flex; align-items: center; border: var(--rule); background: #fff; }
.calc-in input { width: 7.5ch; padding: 8px 10px; border: 0; font: inherit; font-weight: 700; text-align: right; background: none; color: var(--ink); }
.calc-in input:focus-visible { outline: 2.5px solid var(--magenta); outline-offset: 2px; }
.calc-in i { font-style: normal; font-size: 0.85rem; color: var(--ink-2); padding: 0 10px; border-left: var(--hair); min-width: 4.6rem; }
.calc-out { padding: 26px clamp(20px, 3vw, 40px) 30px; display: flex; flex-direction: column; gap: 18px; background: var(--night, #060212); color: #fff; }
.calc-out dl { margin: 0; display: grid; }
.calc-out dl div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.calc-out dt { color: #cfc4dc; font-size: 0.95rem; }
.calc-out dd { margin: 0; font-weight: 750; font-size: 1.15rem; }
.calc-out .big dd { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 820; font-stretch: 95%; letter-spacing: -0.02em; color: #f6842a; }
.calc-out .hint { color: #cfc4dc; }

@media (max-width: 960px) {
  .defects { grid-template-columns: 1fr 1fr; }
  .defects li:not(:nth-child(3n + 1)) { border-left: 0; }
  .defects li:nth-child(even) { border-left: var(--rule); }
  .defects li:nth-child(n + 3) { border-top: var(--rule); }
  .calc { grid-template-columns: 1fr; }
  .calc-in { border-right: 0; border-bottom: var(--rule); }
}
@media (max-width: 720px) {
  .defects { grid-template-columns: 1fr; }
  .defects li:nth-child(even) { border-left: 0; }
  .defects li + li { border-top: var(--rule); }
}
.pv-fig .demo { left: auto; right: 14px; }
@media (max-width: 720px) { .pv-fig .demo { right: auto; } }