/* Studio Immobiliare Boldrini — sezione Blog
   Estende il sistema visivo di index.html (Fraunces + Inter, pietra/verde/ottone). */

:root{
  --stone:#EDE9E1;
  --stone-light:#F7F4EE;
  --ink:#1C1F1A;
  --ink-soft:#4B4F47;
  --green:#2F4A3C;
  --green-dark:#1B2A22;
  --brass:#A98953;
  --line: rgba(28,31,26,0.14);
  --line-on-dark: rgba(247,244,238,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; line-height:1.12; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.eyebrow{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); font-weight:600;}

/* ---------- HEADER ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(237,233,225,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px;}
.logo{font-family:'Fraunces',serif; font-size:18px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap;}
.logo span{color:var(--green); font-style:italic; font-weight:500;}
nav.main-nav ul{display:flex; gap:32px;}
nav.main-nav a{font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .2s ease;}
nav.main-nav a:hover, nav.main-nav a:focus-visible{color:var(--green);}
nav.main-nav a[aria-current="page"]{color:var(--green); border-bottom:1px solid var(--brass); padding-bottom:2px;}
.header-cta{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; font-size:14px; font-weight:600;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:all .2s ease; white-space:nowrap;
}
.btn-primary{background:var(--green); color:var(--stone-light);}
.btn-primary:hover{background:var(--green-dark);}
.btn-line-dark{border-color:var(--line-on-dark); color:var(--stone-light);}
.btn-line-dark:hover{border-color:var(--brass); color:var(--brass);}
.btn-line-light{border-color:var(--ink); color:var(--ink);}
.btn-line-light:hover{border-color:var(--brass); color:var(--brass);}
.btn-lg{padding:16px 30px; font-size:15px;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}
.mobile-nav{display:none; flex-direction:column; gap:2px; background:var(--stone-light); border-bottom:1px solid var(--line);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:16px 22px; font-size:15px; font-weight:500; border-top:1px solid var(--line);}
.mobile-nav a.mobile-wa{color:var(--green); font-weight:600;}
/* sotto i 520px il pulsante in testata non ci sta: resta la voce nel menu */
@media (max-width:520px){
  .header-cta > .btn{display:none;}
}

/* ---------- TESTATA ARTICOLO / HUB ---------- */
.page-head{background:var(--green-dark); color:var(--stone-light); padding:86px 0 70px;}
.page-head .eyebrow{display:block; margin-bottom:20px;}
.page-head h1{font-size:clamp(30px, 4.4vw, 52px); max-width:940px; color:var(--stone-light);}
.page-head h1 em{font-style:italic; color:var(--brass);}
.page-head p.lede{margin-top:24px; max-width:640px; font-size:17px; color:rgba(247,244,238,0.78);}
.breadcrumb{margin-bottom:26px; font-size:12.5px; color:rgba(247,244,238,0.55);}
.breadcrumb a:hover{color:var(--brass);}
.breadcrumb span{margin:0 8px; color:rgba(247,244,238,0.3);}
.article-meta{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line-on-dark);
  display:flex; gap:44px; flex-wrap:wrap; font-size:13px; color:rgba(247,244,238,0.6);
}
.article-meta strong{display:block; font-family:'Fraunces',serif; font-size:17px; color:var(--stone-light); font-weight:500; margin-bottom:2px;}

/* ---------- CORPO ARTICOLO ---------- */
.article-body{background:var(--stone-light); border-bottom:1px solid var(--line); padding:76px 0 90px;}
.article-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:70px; align-items:start;}
.article-grid > *{min-width:0;}
.prose{max-width:720px; min-width:0;}
.prose > * + *{margin-top:22px;}
.prose h2{font-size:clamp(24px,2.7vw,32px); margin-top:52px; padding-top:26px; border-top:1px solid var(--line);}
.prose h3{font-size:19px; font-family:'Inter',sans-serif; font-weight:600; margin-top:34px; letter-spacing:0;}
.prose p{color:var(--ink-soft); font-size:16.5px;}
.prose strong{color:var(--ink); font-weight:600;}
.prose a{color:var(--green); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--brass);}
.prose a:hover{color:var(--brass);}
/* Nota: gli item usano posizionamento assoluto e non flex, perché in un
   contenitore flex ogni <strong> inline diventerebbe un flex item a sé
   e il testo non andrebbe a capo. */
.prose ul.tick{display:flex; flex-direction:column; gap:14px; margin-top:20px;}
.prose ul.tick li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:16px;}
.prose ul.tick li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--brass);}
.prose ol.numbered{list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:20px; margin-top:24px;}
.prose ol.numbered li{counter-increment:step; position:relative; padding-left:48px; min-height:30px; color:var(--ink-soft); font-size:16px;}
.prose ol.numbered li::before{
  content:counter(step); position:absolute; left:0; top:0;
  font-family:'Fraunces',serif; font-weight:600; font-size:14px; color:var(--brass);
  width:30px; height:30px; border:1px solid var(--brass); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.prose blockquote{
  border-left:2px solid var(--brass); padding:6px 0 6px 22px; margin-top:30px;
  font-family:'Fraunces',serif; font-size:20px; line-height:1.45; color:var(--ink);
}

/* tabelle */
.table-scroll{overflow-x:auto; margin-top:28px; border:1px solid var(--line); background:#fff;}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px;}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{
  background:var(--stone); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; white-space:nowrap;
}
tbody td{color:var(--ink-soft);}
tbody tr:last-child td{border-bottom:none;}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); font-weight:500;}
.table-note{margin-top:10px; font-size:12.5px; color:var(--ink-soft);}

/* riquadri */
.callout{background:var(--stone); border:1px solid var(--line); border-left:3px solid var(--brass); padding:26px 28px; margin-top:32px;}
.callout .eyebrow{display:block; margin-bottom:10px;}
.callout p{font-size:15.5px; color:var(--ink-soft);}
.callout p + p{margin-top:12px;}
.callout.dark{background:var(--green-dark); border-color:var(--line-on-dark); border-left-color:var(--brass); color:var(--stone-light);}
.callout.dark p{color:rgba(247,244,238,0.78);}

.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px;}
.figure{background:var(--stone-light); padding:22px;}
.figure strong{display:block; font-family:'Fraunces',serif; font-size:28px; font-weight:500; color:var(--green); line-height:1.1;}
.figure span{display:block; margin-top:8px; font-size:13px; color:var(--ink-soft);}

/* ---------- SIDEBAR ---------- */
.sidebar{position:sticky; top:100px; display:flex; flex-direction:column; gap:26px;}
.side-card{border:1px solid var(--line); background:var(--stone); padding:24px;}
.side-card.dark{background:var(--green-dark); border-color:var(--line-on-dark); color:var(--stone-light);}
.side-card .eyebrow{display:block; margin-bottom:12px;}
.side-card h3{font-family:'Inter',sans-serif; font-size:15.5px; font-weight:600; margin-bottom:8px;}
.side-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px;}
.side-card.dark p{color:rgba(247,244,238,0.7);}
.side-card .btn{width:100%;}
.toc ol{list-style:none; counter-reset:toc; display:flex; flex-direction:column;}
.toc li{counter-increment:toc; border-top:1px solid var(--line);}
.toc li:first-child{border-top:none;}
.toc a{display:block; padding:11px 0; font-size:13.5px; color:var(--ink-soft); transition:color .2s ease;}
.toc a::before{content:counter(toc) ". "; color:var(--brass); font-weight:600;}
.toc a:hover{color:var(--green);}

/* ---------- FAQ ---------- */
.faq{margin-top:52px; padding-top:26px; border-top:1px solid var(--line);}
.faq h2{margin-top:0; padding-top:0; border-top:none;}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item h3{margin-top:0; font-size:16.5px;}
.faq-item p{margin-top:8px; font-size:15.5px; color:var(--ink-soft);}

/* ---------- CTA + CORRELATI ---------- */
.cta-band{background:var(--green-dark); color:var(--stone-light); padding:74px 0;}
.cta-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;}
.cta-band h2{font-size:clamp(24px,3vw,34px); color:var(--stone-light);}
.cta-band p{margin-top:16px; font-size:16px; color:rgba(247,244,238,0.72); max-width:520px;}
.cta-actions{display:flex; flex-direction:column; gap:14px;}
.cta-actions .form-note{font-size:13px; color:rgba(247,244,238,0.55); line-height:1.6;}

.related{padding:80px 0;}
.related h2{font-size:clamp(22px,2.6vw,30px); padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:0;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-top:none;}
.card{background:var(--stone-light); padding:30px 28px; display:flex; flex-direction:column; gap:12px; transition:background .2s ease;}
.card:hover{background:#fff;}
.card .eyebrow{font-size:11px;}
.card h3{font-size:20px; line-height:1.22;}
.card p{font-size:14.5px; color:var(--ink-soft);}
.card .more{margin-top:auto; padding-top:14px; font-size:13px; font-weight:600; color:var(--green);}
.card:hover .more{color:var(--brass);}

/* ---------- FOOTER ---------- */
footer{background:var(--green-dark); border-top:1px solid var(--line-on-dark); padding:34px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-inner .logo{color:var(--stone-light);}
.footer-links{display:flex; gap:24px; flex-wrap:wrap;}
.footer-links a{font-size:13px; color:rgba(247,244,238,0.6);}
.footer-links a:hover{color:var(--brass);}
.copyright{font-size:12px; color:rgba(247,244,238,0.4);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .article-grid{grid-template-columns:minmax(0,1fr); gap:46px;}
  .prose{max-width:none;}
  .sidebar{position:static; flex-direction:row; flex-wrap:wrap;}
  .sidebar > *{flex:1 1 260px; min-width:0;}
  .cta-inner{grid-template-columns:minmax(0,1fr); gap:32px;}
}
@media (max-width:680px){
  .wrap{padding:0 22px;}
  nav.main-nav{display:none;}
  .menu-toggle{display:block;}
  .nav-inner{gap:12px;}
  .header-cta{gap:6px;}
  .header-cta .btn{padding:10px 14px; font-size:12.5px;}
  .page-head{padding:60px 0 50px;}
  .article-body{padding:52px 0 64px;}
  .related{padding:56px 0;}
  .article-meta{gap:26px;}
  .logo{font-size:15px;}
  .prose h2{margin-top:40px;}
}