/* Pagine di servizio, pagine semplici e blog.
   Testata come la home (testo a sinistra, foto a filo a destra), poi un corpo editoriale:
   indice della pagina fisso a sinistra, testo a una colonna, titoli numerati. */

/* ---------- Testata ---------- */
.svc-hero{position:relative;background:#fff;overflow:hidden}
.svc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:88vh;min-height:88svh}
.svc-txt{display:flex;flex-direction:column;justify-content:center;padding:132px clamp(32px,5vw,96px) 80px var(--gut);max-width:820px;margin-left:auto;width:100%}
.svc-txt>*{animation:fkup 1.3s var(--ease) both}
.svc-txt>*:nth-child(2){animation-delay:.1s}.svc-txt>*:nth-child(3){animation-delay:.2s}.svc-txt>*:nth-child(4){animation-delay:.3s}.svc-txt>*:nth-child(5){animation-delay:.4s}
@keyframes fkup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.crumb{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted);margin-bottom:30px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal)}
.svc .h1,.pg .h1{font-size:clamp(40px,4.4vw,72px);letter-spacing:-.045em;line-height:1;margin-top:22px}
.svc-hero .lead{margin-top:28px;max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:36px}
.status{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:30px}
.status i{width:6px;height:6px;border-radius:50%;background:#B3BFC4;display:block}
.svc-media{position:relative;margin:0;overflow:hidden;animation:fkclip 1.6s var(--ease) both}
@keyframes fkclip{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;animation:fkzoom 2.6s var(--ease) both}
@keyframes fkzoom{from{scale:1.12}to{scale:1}}
.svc-tel{font:300 clamp(30px,2.6vw,40px)/1 var(--display);letter-spacing:-.04em;color:inherit;text-decoration:none}

/* Pronto soccorso: unica testata scura del sito */
.svc-dark .svc-hero{background:var(--ink);color:#fff}
.svc-dark .svc-hero .lead,.svc-dark .crumb,.svc-dark .crumb a,.svc-dark .status{color:#AFC0C8}
.svc-dark .svc-hero .h1{color:#fff}
.svc-dark .svc-hero .eyebrow{color:#FF9B73;display:flex;align-items:center;gap:10px}
.svc-dark .svc-hero .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(200,75,31,.6);animation:breath 2.4s infinite}
.svc-dark .svc-tel{color:#fff}
.svc-dark .svc-media img{opacity:.82}
@keyframes breath{0%{box-shadow:0 0 0 0 rgba(200,75,31,.55)}70%{box-shadow:0 0 0 12px rgba(200,75,31,0)}100%{box-shadow:0 0 0 0 rgba(200,75,31,0)}}

/* ---------- Corpo ---------- */
.svc-body{padding:clamp(88px,10vw,150px) 0 clamp(72px,8vw,120px)}
.svc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start}
.toc{position:sticky;top:120px}
.toc ol{margin-top:18px;counter-reset:t;border-left:1px solid var(--line)}
.toc li{counter-increment:t}
.toc a{display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:1px solid transparent;font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .3s,border-color .3s}
.toc a::before{content:counter(t,decimal-leading-zero) '  ';color:#9DB3BB;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--teal)}

.prose{max-width:760px;counter-reset:h;font-size:18px;line-height:1.75;color:#33434C}
.prose>*:first-child{margin-top:0}
.prose h2{counter-increment:h;font-size:clamp(28px,2.6vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.08;color:var(--ink);margin:clamp(72px,8vw,112px) 0 26px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:110px}
.svc .prose h2::before{content:counter(h,decimal-leading-zero);display:block;margin-bottom:18px;font:300 15px/1 var(--display);letter-spacing:.04em;color:var(--teal)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:40px 0 12px}
.prose p{margin:0 0 20px}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.arrow):not(.btn){color:var(--teal);text-underline-offset:3px}
.prose .arrow{font-size:16px}
.prose ul{margin:6px 0 28px;border-top:1px solid var(--line)}
.prose ul li{padding:15px 0 15px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--ink);font-size:17px;line-height:1.55}
.prose ul li::before{content:'';position:absolute;left:2px;top:25px;width:8px;height:1px;background:var(--teal)}
.prose ol:not(.crumb){margin:10px 0 30px;counter-reset:s}
.prose ol:not(.crumb)>li{counter-increment:s;display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:20px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.6}
.prose ol:not(.crumb)>li:last-child{border-bottom:1px solid var(--line)}
.prose ol:not(.crumb)>li::before{content:counter(s,decimal-leading-zero);font:300 30px/1 var(--display);letter-spacing:-.04em;color:var(--teal)}
.prose img{border-radius:18px;height:auto}
.prose figure{margin:36px 0}
.prose figcaption{font-size:13px;color:var(--soft);margin-top:10px}
.prose blockquote{margin:36px 0;padding:6px 0 6px 26px;border-left:2px solid var(--verde);font-size:22px;line-height:1.5;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0 32px;font-size:16px}
.prose th,.prose td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--ink)}
.prose .callout{margin:28px 0;padding:26px 30px;border-radius:18px;background:var(--mist);color:var(--ink)}
.prose .callout.urg{background:#FBEDE7}
.prose .callout p:last-child{margin-bottom:0}

/* Domande frequenti dentro il testo */
.prose .faq{margin-top:8px}
.prose .faq summary{font-size:clamp(18px,1.5vw,21px);font-weight:600;padding:24px 0}
.prose .faq summary::after{content:'';flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;color:var(--ink);transition:transform .4s var(--ease),background-color .3s}
.prose .faq details[open] summary::after{transform:rotate(45deg)}
.prose .faq details p{padding:0 56px 24px 0;margin:0;font-size:17px}

/* Pulsanti dei blocchi di WordPress */
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.prose .wp-block-button__link{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;background:linear-gradient(135deg,#127F98 0%,#0E7490 45%,#0A5468 100%);color:#fff;font:600 15px/1 var(--body);text-decoration:none}

.sign{padding-top:28px;padding-bottom:28px;font-size:13px;color:var(--soft);border-top:1px solid var(--line)}
.cta-photo{position:relative;align-self:stretch;min-height:420px;border-radius:20px;overflow:hidden}
.cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}

/* ---------- Pagine semplici e blog ---------- */
.pg-hero{padding:clamp(150px,16vw,220px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.pg-hero .h1{max-width:16em}
.pg-body{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(88px,10vw,140px)}
.pg-body .prose{margin:0 auto}
.post-meta{font-size:13px;letter-spacing:.06em;color:var(--soft);margin-top:18px}
.post-cover{margin-top:48px}
.post-cover img{width:100%;height:auto;border-radius:20px}
.post-list{border-top:1px solid var(--line);max-width:900px}
.post-list a{display:block;padding:36px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.post-list h2{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;margin:10px 0 12px}
.post-list p{color:var(--muted);max-width:44em;margin-bottom:14px}
.post-list a:hover h2{color:var(--teal)}

@media (max-width:1080px){
  .svc-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .svc-media{order:-1;height:52svh;min-height:360px}
  .svc-txt{padding:40px var(--gut) 72px;margin:0;max-width:none}
  .svc-layout{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .cta-photo{min-height:300px}
}
@media (max-width:640px){
  .prose{font-size:17px}
  .prose .faq details p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){.svc-txt>*,.svc-media,.svc-media img{animation:none}}