/* ══════════════════════════════════════════════════════════════════
   ALGOZ BODYGUARD MAGAZINE — dark editorial theme
   Matches algozgroup.com (.lux-page dark): deep blue-black + gold,
   Gruppo titles · Montserrat body · Lora italic accents.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Montserrat:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root{
  --ed-bg:#0a1117; --ed-bg2:#0e1620; --ed-bg3:#070b0f;
  --ed-ink:#f3f2ec; --ed-ink2:#b3b6bb; --ed-ink3:#888d92;
  --ed-line:rgba(255,255,255,.12); --ed-line2:rgba(255,255,255,.20);
  --ed-gold:#cfc163; --ed-gold-dim:rgba(207,193,99,.72); --ed-gold-dark:#876f32;
  --ed-titles:'Gruppo','Century Gothic',sans-serif;
  --ed-sans:'Montserrat',Arial,sans-serif;
  --ed-serif:'Lora','Cormorant Garamond','Georgia',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ed-bg);color:var(--ed-ink);font-family:var(--ed-sans);
  font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--ed-gold);text-decoration:none;transition:color .2s,border-color .2s}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,17,23,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ed-line)}
.topbar-inner{max-width:1224px;margin:0 auto;padding:16px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--ed-titles);
  font-size:1.06rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ed-ink)}
.brand img{width:28px;height:28px}
.brand-tagline{display:block;font-family:var(--ed-sans);font-weight:500;font-size:.54rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ed-gold-dim);margin-top:2px}
.lang-toggle{display:flex;gap:14px;font-size:.74rem;font-weight:600;letter-spacing:.12em}
.lang-toggle a{color:var(--ed-ink3)}
.lang-toggle a.active,.lang-toggle a:hover{color:var(--ed-gold)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{text-align:center;max-width:900px;margin:0 auto;padding:78px 26px 18px}
.hero .eyebrow{font-family:var(--ed-sans);font-weight:500;font-size:.66rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ed-gold)}
.hero h1{font-family:var(--ed-titles);font-weight:400;font-size:clamp(2.2rem,5vw,3.7rem);
  line-height:1.12;color:var(--ed-ink);margin:18px 0 0}
.hero .subtitle{font-family:var(--ed-serif);font-style:italic;font-size:1.16rem;
  color:var(--ed-ink2);max-width:680px;margin:0 auto}
.hero .subtitle::before{content:"";display:block;width:64px;height:1px;
  background:var(--ed-gold);margin:24px auto}
.hero .byline{font-size:.76rem;letter-spacing:.06em;color:var(--ed-ink3);margin-top:20px}
.hero .byline .author{color:var(--ed-ink2);font-weight:600}
.hero .byline span,.hero .byline time{margin:0 7px}

/* ── Featured image ─────────────────────────────────────── */
.featured-image{max-width:1040px;width:calc(100% - 52px);margin:34px auto 0;
  height:auto;max-height:560px;object-fit:cover;border:1px solid var(--ed-line);border-radius:3px}

/* ── Article body ───────────────────────────────────────── */
.post{max-width:760px;margin:0 auto;padding:14px 26px 30px}
.post p{color:#cfd2d6;font-weight:300;font-size:1.05rem;line-height:1.92;margin:0 0 22px}
.post h2{font-family:var(--ed-titles);font-weight:400;color:var(--ed-ink);
  font-size:1.72rem;letter-spacing:.015em;line-height:1.25;margin:44px 0 16px}
.post h2::before{content:"";display:block;width:42px;height:2px;
  background:var(--ed-gold);margin-bottom:18px}
.post a{color:var(--ed-gold);border-bottom:1px solid var(--ed-gold-dim)}
.post a:hover{border-color:var(--ed-gold)}
.post strong{color:var(--ed-ink);font-weight:600}
.post em{color:var(--ed-ink2)}

/* ── CTA block ──────────────────────────────────────────── */
.cta-block{max-width:760px;margin:50px auto;background:var(--ed-bg2);
  border:1px solid var(--ed-line);border-radius:4px;padding:42px 38px;text-align:center}
.cta-block h3{font-family:var(--ed-titles);font-weight:400;color:var(--ed-gold);
  font-size:1.6rem;margin:0 0 12px}
.cta-block p{color:var(--ed-ink2);font-weight:300;margin:0 auto 24px;max-width:560px}
.btn{display:inline-block;font-family:var(--ed-sans);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ed-btn-ink,#0a1117);
  background:var(--ed-gold);padding:15px 42px;border-radius:2px;border:1px solid var(--ed-gold)}
.btn:hover{background:var(--ed-gold-dark);border-color:var(--ed-gold-dark);color:#0a1117}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--ed-bg3);border-top:1px solid var(--ed-line);margin-top:64px;
  padding:56px 26px 0}
.footer-inner{max-width:1224px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:42px}
.footer-col h4{font-family:var(--ed-titles);font-weight:400;color:var(--ed-gold);
  letter-spacing:.18em;text-transform:uppercase;font-size:.82rem;margin:0 0 16px}
.footer-col a,.footer-col p{display:block;color:var(--ed-ink3);font-size:.85rem;
  line-height:1.95;margin:0}
.footer-col a:hover{color:var(--ed-gold)}
.newsletter-form{display:flex;gap:8px;margin-top:12px}
.newsletter-form input{flex:1;background:transparent;border:1px solid var(--ed-line2);
  color:var(--ed-ink);padding:10px 12px;border-radius:2px;font-family:var(--ed-sans);font-size:.85rem}
.newsletter-form input:focus{outline:none;border-color:var(--ed-gold)}
.newsletter-form button{background:var(--ed-gold);color:#0a1117;border:0;border-radius:2px;
  padding:0 16px;font-size:1rem;cursor:pointer}
.footer-bottom{max-width:1224px;margin:48px auto 0;border-top:1px solid var(--ed-line);
  padding:22px 0;text-align:center;color:var(--ed-ink3);font-size:.74rem;line-height:1.8}
.footer-bottom a{color:var(--ed-gold)}

/* ── Index: categories + cards ──────────────────────────── */
.section{max-width:1224px;margin:0 auto;padding:0 26px}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 36px}
.tag-row a{color:var(--ed-ink3);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 16px;border:1px solid var(--ed-line);border-radius:999px}
.tag-row a:hover,.tag-row a.active{color:var(--ed-gold);border-color:var(--ed-gold-dim)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:26px;padding-bottom:84px}
.card{display:flex;flex-direction:column;background:var(--ed-bg2);
  border:1px solid var(--ed-line);border-radius:4px;overflow:hidden;
  transition:transform .22s,border-color .22s,box-shadow .22s}
.card:hover{transform:translateY(-4px);border-color:var(--ed-gold-dim);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card-image{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--ed-line)}
.card.card-no-image{border-top:3px solid var(--ed-gold)}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 22px}
.card-eyebrow{color:var(--ed-gold);font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:10px}
.card h3{font-family:var(--ed-titles);font-weight:400;color:var(--ed-ink);
  font-size:1.2rem;line-height:1.26;margin:0 0 10px}
.card p{color:var(--ed-ink3);font-weight:300;font-size:.86rem;line-height:1.62;margin:0 0 16px;flex:1}
.card-meta{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--ed-line);padding-top:13px;color:var(--ed-ink3);
  font-size:.72rem;letter-spacing:.04em}
.card-meta .read-more{color:var(--ed-gold)}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:860px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .topbar-inner{padding:13px 18px}
  .brand{font-size:.9rem;gap:9px}
  .brand-tagline{display:none}
  .hero{padding:54px 20px 14px}
  .post{padding:10px 22px 24px}
  .featured-image{width:calc(100% - 36px)}
  .cards{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .cta-block{padding:32px 24px}
}