/* ============================================================
   BLOG — Pioppi Experience · Dieta Mediterranea
   Complementa styles-cilento.css (usa le stesse variabili colore)
   ============================================================ */
.blog-header { background: #14352a; position: sticky; top: 0; z-index: 1000; }
.blog-header .navbar { padding: .6rem 0; }
.blog-header .logo-main { color: #fff; font-weight: 700; }
.blog-header .logo-sub { color: var(--c-oro, #C8A96E); font-size: .78rem; }
.blog-header .nav-link-item { color: rgba(255,255,255,.8); text-decoration: none; font-size: .92rem; }
.blog-header .nav-link-item:hover { color: var(--c-oro, #C8A96E); }

.blog-main { min-height: 60vh; background: #faf8f4; }

/* Hero */
.blog-hero { background: linear-gradient(135deg, #1d4634, #2e7d52); color: #fff; padding: 4.5rem 0 3.5rem; text-align: center; }
.blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: .5rem 0 1rem; }
.blog-hero p { max-width: 720px; margin: 0 auto; color: rgba(255,255,255,.85); line-height: 1.65; }
.blog-kicker { display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--c-oro, #C8A96E); }

/* Lista articoli */
.blog-list { padding: 3.5rem 0 4rem; }
.blog-empty { text-align: center; color: #6b6b6b; font-size: 1.05rem; padding: 3rem 0; }
.blog-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }
.blog-card-img { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #e7e1d6; background-image: linear-gradient(135deg,#dfe9e3,#cfe0d6); }
.blog-card-body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-card-body time { font-size: .76rem; color: #2e7d52; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.blog-card-body h2 { font-size: 1.25rem; line-height: 1.3; margin: 0; color: #1d3b2e; }
.blog-card-body p { font-size: .92rem; color: #5a5a5a; line-height: 1.55; margin: 0; }
.blog-card-more { margin-top: auto; padding-top: .6rem; color: var(--c-oro, #C8A96E); font-weight: 600; font-size: .9rem; }

/* Articolo singolo */
.blog-article-cover { height: clamp(220px, 38vw, 460px); background-size: cover; background-position: center; }
.blog-article-body { max-width: 800px; padding: 3rem 1rem 4rem; }
.blog-back { color: #2e7d52; text-decoration: none; font-weight: 600; font-size: .9rem; }
.blog-back:hover { text-decoration: underline; }
.blog-article-body h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #1d3b2e; margin: .6rem 0 .4rem; line-height: 1.2; }
.blog-meta { color: #7a7a7a; font-size: .9rem; margin-bottom: 2rem; }
.blog-content { font-size: 1.08rem; line-height: 1.8; color: #33352f; }
.blog-content h2 { font-size: 1.7rem; color: #1d3b2e; margin: 2.4rem 0 1rem; }
.blog-content h3 { font-size: 1.35rem; color: #2e7d52; margin: 2rem 0 .8rem; }
.blog-content p { margin: 0 0 1.3rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.5rem 0; }
.blog-content ul, .blog-content ol { margin: 0 0 1.3rem 1.2rem; }
.blog-content li { margin-bottom: .5rem; }
.blog-content blockquote { border-left: 4px solid var(--c-oro, #C8A96E); padding: .4rem 1.2rem; margin: 1.5rem 0; color: #4a4a4a; font-style: italic; background: #f3efe7; border-radius: 0 8px 8px 0; }
.blog-content a { color: #2e7d52; text-decoration: underline; }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-body { background: #f1f3f2; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #232826; margin: 0; }
.admin-topbar { background: #14352a; color: #fff; padding: .9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.admin-topbar .brand { font-weight: 700; letter-spacing: .02em; }
.admin-topbar .brand span { color: var(--c-oro, #C8A96E); }
.admin-topbar a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; margin-left: 1.2rem; }
.admin-topbar a:hover { color: #fff; }
.admin-wrap { max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.admin-wrap.narrow { max-width: 820px; }

.admin-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.06); padding: 1.6rem; }
.admin-h1 { font-size: 1.6rem; margin: 0 0 1.4rem; }
.admin-flex { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

.btn-primary-eu { display: inline-block; background: #2e7d52; color: #fff; border: 0; border-radius: 8px; padding: .6rem 1.2rem; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-primary-eu:hover { background: #24633f; color: #fff; }
.btn-ghost { display: inline-block; background: transparent; border: 1px solid #cfd5d2; color: #3a4540; border-radius: 8px; padding: .5rem 1rem; font-size: .88rem; text-decoration: none; cursor: pointer; }
.btn-ghost:hover { background: #eef1ef; }
.btn-danger { color: #b3261e; background: transparent; border: 0; cursor: pointer; font-size: .88rem; text-decoration: underline; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid #eceeed; font-size: .92rem; vertical-align: middle; }
.admin-table th { color: #6b756f; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 600; }
.badge-on { background: #d8f0e1; color: #1d6b41; }
.badge-off { background: #f1e4d2; color: #92651a; }

.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.form-group .hint { font-weight: 400; color: #8a8a8a; font-size: .8rem; }
.form-control { width: 100%; padding: .65rem .8rem; border: 1px solid #d3d8d6; border-radius: 8px; font-size: .95rem; font-family: inherit; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: #2e7d52; box-shadow: 0 0 0 3px rgba(46,125,82,.15); }
textarea.form-control { min-height: 360px; resize: vertical; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; line-height: 1.6; }
.form-check { display: flex; align-items: center; gap: .5rem; }
.cover-preview { max-width: 240px; border-radius: 8px; margin-top: .6rem; display: block; }

.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1.2rem; font-size: .92rem; }
.alert-error { background: #fde7e6; color: #a3211a; }
.alert-ok { background: #def0e3; color: #1d6b41; }

.login-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 380px; }
.login-box .admin-card { padding: 2rem; }
.login-box h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.login-box .sub { color: #7a7a7a; font-size: .9rem; margin-bottom: 1.5rem; }