/* ============================================================================
 * Smart Housing Milan — CSS condiviso del Blog
 * Usato da blog/index.html e da tutti i singoli articoli /blog/<slug>.html
 * ========================================================================== */

:root{
  --brand:#C46A3D;
  --brand-dark:#A8552C;
  --brand-light:#E6A989;
  --ink:#3D3D3D;
  --ink-soft:#6B6B6B;
  --bg:#FFFFFF;
  --bg-soft:#FBFAF7;
  --line:#E5E5E5;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08), 0 20px 60px rgba(0,0,0,.12);
  --radius:14px;
  --radius-sm:10px;
  --maxw:1100px;
  --maxw-read:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  font-family:"Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100vw;
}
html[lang="zh"] body{ font-family:"Noto Sans SC", "Inter", sans-serif; }
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media(max-width:640px){ .container{padding:0 16px} }

/* ==== HEADER ==== */
.blog-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.blog-header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:24px}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo img{height:40px; width:auto}
.blog-nav{display:flex; align-items:center; gap:24px; position:relative}
.blog-nav a{color:var(--ink); font-weight:500; font-size:14px; transition:color .15s}
.blog-nav a:hover{color:var(--brand)}

/* Language dropdown */
.lang-trigger{
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px;
  transition:all .15s; cursor:pointer; background:#fff;
}
.lang-trigger:hover{border-color:var(--brand); color:var(--brand)}
.lang-flag{font-size:15px; line-height:1}
.lang-caret{font-size:9px; color:var(--ink-soft); margin-left:2px}
.lang-menu{
  position:absolute; top:100%; right:0; margin-top:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); min-width:170px; padding:6px;
  display:none; z-index:120;
}
.lang-menu.open{display:block}
.lang-option{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:6px; font-size:14px; color:var(--ink);
  cursor:pointer; transition:background .15s; width:100%; text-align:left;
}
.lang-option:hover{background:var(--bg-soft)}
.lang-option.active{background:rgba(196,106,61,.10); color:var(--brand); font-weight:600}

@media(max-width:640px){
  .blog-nav{gap:12px}
  .blog-nav a{font-size:13px}
}

/* ==== HERO BLOG ==== */
.blog-hero{padding:56px 0 32px; background:var(--bg-soft); text-align:center}
.blog-hero-tag{
  display:inline-block; font-size:12px; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px;
  background:rgba(196,106,61,.10); padding:6px 14px; border-radius:999px;
}
.blog-hero h1{
  font-size:clamp(28px, 4vw, 44px); line-height:1.2; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; margin-bottom:14px; max-width:780px; margin-left:auto; margin-right:auto;
}
.blog-hero-lead{
  font-size:17px; color:var(--ink-soft); line-height:1.55;
  max-width:640px; margin:0 auto;
}

/* ==== LISTA ARTICOLI ==== */
.blog-list-section{padding:48px 0 80px; background:#fff}
.blog-notice{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 18px; margin-bottom:36px; font-size:14px; color:var(--ink-soft);
  line-height:1.55;
}
.blog-notice strong{color:var(--ink)}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:940px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .blog-grid{grid-template-columns:1fr} }

.article-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:all .2s; text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
.article-card:not(.soon){cursor:pointer}
.article-card:not(.soon):hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:transparent}
.article-card.soon{opacity:.9}

.article-cover{
  aspect-ratio:16/9;
  background:linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.article-num{
  color:rgba(255,255,255,.9); font-size:56px; font-weight:800; letter-spacing:-.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
  font-family:"Inter", sans-serif;
}
.article-body{padding:20px; flex:1; display:flex; flex-direction:column}
.article-cat{
  font-size:11px; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.article-title{
  font-size:17px; font-weight:700; color:var(--ink); line-height:1.35;
  margin-bottom:10px; letter-spacing:-.01em;
}
.article-excerpt{
  font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; flex:1;
}
.article-more{
  font-size:13px; font-weight:600; color:var(--brand); margin-top:auto;
}
.article-card.soon .article-more{color:var(--ink-soft); font-style:italic}

/* ==== SINGLE ARTICLE (per i futuri file /blog/<slug>.html) ==== */
.article-hero{padding:48px 0 24px; background:var(--bg-soft); text-align:center}
.article-hero-cat{
  display:inline-block; font-size:12px; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px;
  background:rgba(196,106,61,.10); padding:5px 12px; border-radius:999px;
}
.article-hero h1{
  font-size:clamp(28px, 4vw, 42px); line-height:1.2; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; margin-bottom:14px;
  max-width:800px; margin-left:auto; margin-right:auto;
}
.article-hero-meta{
  font-size:14px; color:var(--ink-soft);
}
.article-body-content{
  max-width:var(--maxw-read); margin:0 auto; padding:48px 24px 64px;
  font-size:18px; line-height:1.75; color:var(--ink);
}
.article-body-content h2{
  font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  margin:48px 0 16px;
}
.article-body-content h3{
  font-size:20px; font-weight:600; color:var(--ink);
  margin:32px 0 12px;
}
.article-body-content p{margin-bottom:20px}
.article-body-content ul, .article-body-content ol{margin:0 0 20px 24px}
.article-body-content li{margin-bottom:8px}
.article-body-content a{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
.article-body-content a:hover{color:var(--brand-dark)}
.article-body-content blockquote{
  border-left:3px solid var(--brand); padding:6px 20px; margin:24px 0;
  color:var(--ink-soft); font-style:italic;
}
.article-body-content strong{color:var(--ink)}
.article-body-content code{
  background:var(--bg-soft); padding:2px 6px; border-radius:4px;
  font-family:Consolas, monospace; font-size:.9em; color:var(--brand-dark);
}
.article-body-content img{
  border-radius:var(--radius-sm); margin:24px 0; box-shadow:var(--shadow);
}
.article-body-content .callout{
  background:rgba(196,106,61,.08); border-left:3px solid var(--brand);
  padding:16px 20px; border-radius:var(--radius-sm); margin:24px 0;
  font-size:16px;
}

.article-cta{
  max-width:var(--maxw-read); margin:32px auto 0; padding:0 24px;
  text-align:center;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px;
  transition:all .15s; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}

/* ==== FOOTER ==== */
.blog-footer{background:var(--ink); color:#fff; padding:48px 0 24px; font-size:14px}
.blog-footer-inner{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-brand img{height:50px; width:auto; filter:brightness(0) invert(1); opacity:.95}
.footer-brand strong{font-size:16px; font-weight:600}
.footer-brand .tag{color:rgba(255,255,255,.6); font-size:13px; margin-top:2px}
.footer-links{display:flex; flex-direction:column; gap:8px}
.footer-links a{color:rgba(255,255,255,.7); font-size:14px}
.footer-links a:hover{color:#fff}
.footer-bottom{
  margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; color:rgba(255,255,255,.5); text-align:center;
}

/* ==== date + meta row on index cards ==== */
.article-meta-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.article-date{font-size:12px; color:var(--ink-soft)}
.article-card .article-cat{margin-bottom:0}

/* ==== 5-language switcher row (article header) ==== */
.lang-links{display:inline-flex; gap:2px; align-items:center; flex-wrap:wrap}
.lang-links a{font-size:12px; font-weight:600; color:var(--ink-soft); padding:4px 7px; border-radius:6px; text-decoration:none; line-height:1}
.lang-links a:hover{color:var(--brand); background:var(--bg-soft)}
.lang-links a.active{color:#fff; background:var(--brand)}

/* cover image sulle card indice */
.article-cover img{width:100%; height:100%; object-fit:cover; display:block}