/* NEURAFIT Blog — si appoggia a /assets/site.css (token, nav, footer, bottoni, campi) */

/* ---------- Testata pagina (come privacy/) ---------- */
.page-head{padding-top:calc(var(--nav-h) + clamp(40px,7vw,104px));padding-bottom:clamp(40px,6vw,80px)}
.crumb{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--ink-2)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}
.page-head h1{font-size:clamp(2.4rem,6vw,5.2rem);letter-spacing:-.04em;line-height:.98;margin-top:22px;max-width:20ch;animation:b-rise 1s var(--ease-expo) both}
.page-head .lede{color:var(--ink-2);max-width:60ch;margin-top:24px;font-size:16px;animation:b-fade .9s .25s var(--ease-out) both}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:32px;padding-top:20px;border-top:1.5px solid var(--intense-blue);font-size:13px;animation:b-fade .9s .35s var(--ease-out) both}
.doc-meta dt{color:var(--ink-3)}
.doc-meta dd{font-family:var(--f-ui);font-weight:600;font-size:14.5px}
@keyframes b-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes b-fade{from{opacity:0;transform:translateY(12px)}}

.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li{padding:3px 10px;border-radius:999px;background:var(--surface);font-size:12px;line-height:1.6;color:var(--ink-2)}

/* ---------- Elenco articoli: card con l'immagine del post ---------- */
.posts-area{background:#fff;padding-block:clamp(40px,5vw,72px) clamp(80px,10vw,140px)}
.cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(32px,4vw,56px) clamp(20px,3vw,40px)}
.card{position:relative;display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--intense-blue);border:1px solid var(--line);margin-bottom:20px} /* il bordo stacca le slide chiare dal fondo bianco */
.card-media img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease-expo)}
.card:hover .card-media img{scale:1.04}
.card-mark{position:absolute;inset:30%;width:40%;height:40%;color:var(--yellow-green)}
.badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--yellow-green);color:var(--intense-blue);font-family:var(--f-ui);font-size:13px;font-weight:600;line-height:1}
.badge svg{width:9px;height:11px}
.card time{font-size:13px;color:var(--ink-3)}
.card h2{font-size:clamp(1.45rem,2.2vw,1.85rem);letter-spacing:-.03em;line-height:1.08;margin-top:6px}
.card h2 a{text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0} /* tutta la card è cliccabile */
.card h2 a:focus-visible{outline:none}
.card:has(a:focus-visible){outline:2px solid var(--second-blue);outline-offset:8px;border-radius:calc(var(--radius) + 4px)}
.card p{color:var(--ink-2);margin-top:10px;font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .tags{margin-top:14px}
.empty{padding:40px 0;color:var(--ink-2)}
.feed-link{display:inline-flex;margin-top:20px;font-size:13px;color:var(--ink-2)}

/* ---------- Articolo ---------- */
.cover{margin-bottom:clamp(40px,6vw,72px)}
.cover img{width:100%;border-radius:var(--radius);aspect-ratio:1200/630;object-fit:cover;background:var(--surface)}
.prose{max-width:68ch;font-family:var(--f-ui);font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin-top:2.2em}
.prose h3{font-family:var(--f-ui);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin-top:1.8em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--second-blue);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:.5em;counter-reset:n}
.prose li{position:relative;padding-left:30px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.8em;width:12px;height:1.5px;background:var(--second-blue)}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--second-blue)}
.prose blockquote{padding:20px 24px;border-radius:14px;background:var(--yellow-green);color:var(--intense-blue);font-weight:500}
.prose code{font-family:var(--f-body);font-size:.88em;padding:.1em .35em;border-radius:6px;background:var(--surface);color:var(--ink)}
.prose pre{padding:18px 20px;border-radius:14px;background:var(--intense-blue);color:var(--white);overflow-x:auto}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.prose figure img{border-radius:14px}
.prose figcaption{font-size:13px;color:var(--ink-3);margin-top:8px}
/* testo + reel affiancati; su schermi stretti il video segue il testo */
.post-body{display:grid;grid-template-columns:minmax(0,68ch) minmax(240px,300px);gap:clamp(40px,6vw,96px);align-items:start}
.post-body:not(:has(.reel)){grid-template-columns:minmax(0,68ch)}
.reel{position:sticky;top:calc(var(--nav-h) + 28px)}
.reel video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:var(--radius);background:var(--intense-blue)}
.reel p{margin-top:12px;font-size:13px;color:var(--ink-3)}
@media (max-width:900px){
  .post-body{grid-template-columns:minmax(0,1fr)}
  .reel{position:static;max-width:300px}
}
.post-foot{max-width:68ch;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}

/* ---------- Commenti ---------- */
.comments{max-width:68ch;padding-block:clamp(64px,8vw,112px)}
.comments > h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em}
.comments > h2 small{font-family:var(--f-body);font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-3);margin-left:10px}
.c-list{list-style:none;margin-top:28px;border-top:1.5px solid var(--intense-blue)}
.c-item{padding:22px 0;border-bottom:1px solid var(--line)}
.c-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.c-head b{font-family:var(--f-ui);font-weight:600;font-size:15px}
.c-head time{font-size:12.5px;color:var(--ink-3)}
.c-text{margin-top:8px;font-family:var(--f-ui);font-size:15.5px;line-height:1.65;color:var(--ink-2);overflow-wrap:anywhere}
.c-none{margin-top:16px;color:var(--ink-2)}
form.comment{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:40px;padding:clamp(20px,4vw,32px);border-radius:var(--radius);background:var(--surface)}
form.comment h3{grid-column:1/-1;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em}
form.comment .hint{grid-column:1/-1;margin-top:-8px;font-family:var(--f-ui);font-size:13.5px;color:var(--ink-2)}
.field small{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3)}
.field .err,.consent-err{font-family:var(--f-ui);font-size:13px;font-weight:600;color:#A3261B}
.consent-err{grid-column:1/-1;margin-top:-10px}
.field [aria-invalid="true"]{border-color:#A3261B}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.notice{grid-column:1/-1;padding:14px 18px;border-radius:12px;font-family:var(--f-ui);font-size:14.5px;line-height:1.5}
.notice--ok{background:var(--yellow-green);color:var(--intense-blue)}
.notice--err{background:#FBE3DF;color:#7A1B12}
.c-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}
@media (max-width:560px){form.comment{grid-template-columns:1fr}}

/* ---------- Moderazione ---------- */
.admin{padding-block:40px 80px}
.admin-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1.5px solid var(--intense-blue)}
.admin-bar img{height:22px;width:auto}
.admin-bar form{display:flex;gap:12px;align-items:center;font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}
.admin h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.035em;margin-top:40px}
.admin h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em;margin-top:48px}
.admin .meta{font-size:13px;color:var(--ink-3);margin-top:8px}
.mod-list{list-style:none;margin-top:16px;border-top:1px solid var(--line-strong)}
.mod{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.mod .c-head a{font-size:13px;color:var(--second-blue)}
.mod-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.mod-actions form{display:contents}
.mod-actions .btn{padding:.7em 1.1em;font-size:13.5px}
.mod-actions details{position:relative}
.mod-actions summary{list-style:none;cursor:pointer}
.mod-actions summary::-webkit-details-marker{display:none}
.mod-actions details[open] .btn--danger{margin-top:8px}
.btn--danger{--bg:#A3261B;--fg:#fff;--hover:#7A1B12}
.login{max-width:420px;margin:12vh auto 0;padding-inline:var(--gutter)}
.login img{height:24px;width:auto}
.login h1{font-size:clamp(2rem,6vw,2.8rem);letter-spacing:-.03em;margin:28px 0 24px}
.login form{display:grid;gap:16px}
.login .btn{justify-content:center}
@media (max-width:640px){.mod{grid-template-columns:1fr}}