@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;900&display=swap');

/* ===== BASE STYLES — ALL SITES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-icon{font-size:1.8rem;color:var(--primary)}
.site-title{display:block;font-size:1.6rem;font-weight:900;line-height:1.1;color:var(--heading-color,#fff)}
.tagline{display:block;font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;opacity:0.55;color:var(--heading-color,#fff);margin-top:2px}
.header-search{display:flex;gap:0;border-radius:25px;overflow:hidden;border:1px solid rgba(255,255,255,0.15)}
.search-input{background:rgba(255,255,255,0.08);border:none;padding:9px 18px;color:inherit;font-size:0.85rem;width:200px;outline:none}
.search-input::placeholder{opacity:0.5}
.search-btn{background:var(--primary);border:none;color:#fff;padding:9px 16px;cursor:pointer;font-size:1.1rem;transition:opacity .2s}
.search-btn:hover{opacity:.85}

/* NAV */
.site-nav{border-bottom:1px solid rgba(255,255,255,0.07)}
.nav-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav-link{padding:13px 16px;font-size:0.82rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;transition:all .2s;color:rgba(255,255,255,0.6);border-bottom:2px solid transparent}
.nav-link:hover,.nav-link.active{color:#fff;border-bottom-color:var(--primary)}

/* MAIN */
.site-main{padding:40px 0 60px}

/* HERO */
.hero-section{margin-bottom:48px}
.hero-card{position:relative;border-radius:var(--radius,10px);overflow:hidden;min-height:480px;display:flex;align-items:flex-end;background:var(--dark)}
.hero-img-wrap{position:absolute;inset:0}
.hero-img{width:100%;height:100%;object-fit:cover;opacity:.7}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 60%,transparent 100%)}
.hero-content{position:relative;padding:40px;max-width:720px}
.hero-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:12px}
.hero-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.4rem,3.5vw,2.4rem);font-weight:900;line-height:1.2;color:#fff;margin-bottom:12px}
.hero-link{color:inherit}
.hero-link:hover{text-decoration:underline}
.hero-resume{color:rgba(255,255,255,.75);font-size:.92rem;line-height:1.6;margin-bottom:20px}
.hero-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.meta-date{color:rgba(255,255,255,.55);font-size:.8rem}
.btn-read{background:var(--primary);color:#fff;padding:10px 22px;border-radius:25px;font-size:.85rem;font-weight:700;transition:all .2s;white-space:nowrap}
.btn-read:hover{opacity:.88;transform:translateX(3px)}

/* SECTION HEADERS */
.section-latest,.section-trending,.section-cat{margin-bottom:48px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border,rgba(255,255,255,.08))}
.section-title{font-size:1.15rem;font-weight:800;color:var(--heading-color,#fff);display:flex;align-items:center;gap:8px}
.title-accent{color:var(--primary);font-size:0.7rem}
.title-line{flex:1;height:1px;background:var(--border,rgba(255,255,255,.08));margin-left:16px}
.cat-dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex-shrink:0}
.see-all{color:var(--primary);font-size:.8rem;font-weight:600;transition:opacity .2s}
.see-all:hover{opacity:.75}

/* GRID 3 COLS */
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

/* CARD VERTICAL */
.card-v{background:var(--card-bg,rgba(255,255,255,.05));border-radius:var(--radius,10px);overflow:hidden;transition:transform .2s,box-shadow .2s;border:1px solid var(--border,rgba(255,255,255,.07))}
.card-v:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.card-img-link{display:block;overflow:hidden;aspect-ratio:16/9}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card-img-link:hover .card-img{transform:scale(1.04)}
.card-body{padding:16px}
.badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 9px;border-radius:3px;color:#fff;margin-bottom:8px}
.card-title{font-size:.95rem;font-weight:700;line-height:1.4;margin-bottom:8px}
.card-title a{color:var(--heading-color,#fff)}
.card-title a:hover{color:var(--primary)}
.card-resume{font-size:.82rem;color:var(--muted,rgba(255,255,255,.55));line-height:1.5;margin-bottom:12px}
.card-foot{display:flex;justify-content:space-between;align-items:center}
.card-date{font-size:.75rem;color:var(--muted,rgba(255,255,255,.4))}
.card-more{font-size:.78rem;font-weight:600;color:var(--primary)}
.card-more:hover{text-decoration:underline}

/* TRENDING STRIP */
.trending-header{margin-bottom:12px}
.trending-label{font-size:.82rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--primary)}
.trending-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.trending-item{display:flex;gap:14px;align-items:flex-start;background:var(--card-bg,rgba(255,255,255,.05));padding:14px 16px;border-radius:var(--radius,10px);border:1px solid var(--border,rgba(255,255,255,.07));transition:background .2s}
.trending-item:hover{background:var(--card-hover,rgba(255,255,255,.09))}
.trending-num{font-size:1.6rem;font-weight:900;color:var(--primary);opacity:.5;line-height:1;min-width:28px}
.trending-text{flex:1}
.trending-cat{display:block;font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--primary);margin-bottom:3px}
.trending-title{font-size:.88rem;font-weight:600;color:var(--heading-color,#fff);line-height:1.4}

/* GRID HORIZONTAL */
.grid-h{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card-h{display:flex;gap:14px;background:var(--card-bg,rgba(255,255,255,.05));border-radius:var(--radius,10px);overflow:hidden;border:1px solid var(--border,rgba(255,255,255,.07));padding:12px;transition:transform .2s}
.card-h:hover{transform:translateY(-2px)}
.card-h-img-wrap{width:90px;flex-shrink:0;border-radius:6px;overflow:hidden;aspect-ratio:1}
.card-h-img{width:100%;height:100%;object-fit:cover}
.card-h-body{flex:1;display:flex;flex-direction:column;gap:4px}
.card-h-title{font-size:.88rem;font-weight:700;line-height:1.35}
.card-h-title a{color:var(--heading-color,#fff)}
.card-h-title a:hover{color:var(--primary)}
.card-h-resume{font-size:.78rem;color:var(--muted,rgba(255,255,255,.5));line-height:1.45;flex:1}
.card-h-date{font-size:.72rem;color:var(--muted,rgba(255,255,255,.35))}

/* FOOTER */
.site-footer{border-top:1px solid var(--border,rgba(255,255,255,.08));padding:32px 0 24px;margin-top:20px}
.footer-inner{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.footer-brand{display:flex;flex-direction:column;gap:4px}
.footer-name{font-size:1.1rem;font-weight:800;color:var(--heading-color,#fff)}
.footer-tag{font-size:.75rem;color:var(--muted,rgba(255,255,255,.4));letter-spacing:1.5px;text-transform:uppercase}
.footer-nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.footer-nav a{font-size:.8rem;color:var(--muted,rgba(255,255,255,.5));transition:color .2s}
.footer-nav a:hover{color:var(--primary)}
.footer-copy{font-size:.75rem;color:var(--muted,rgba(255,255,255,.3))}

/* RESPONSIVE */
@media(max-width:600px){
  .hero-content{padding:24px}
  .hero-title{font-size:1.4rem}
  .grid-3{grid-template-columns:1fr}
  .grid-h{grid-template-columns:1fr}
  .trending-list{grid-template-columns:1fr}
  .search-input{width:120px}
}

/* === SITE THEME === */
:root{--primary:#E8500A;--gold:#F5A623;--dark:#1A1A2E;--card-bg:rgba(255,255,255,.04);--border:rgba(232,80,10,.15);--radius:6px;--heading-color:#fff;--muted:rgba(255,255,255,.5)}
body{background:#0F0F0F;color:rgba(255,255,255,.85);font-family:'Inter',system-ui,sans-serif}
.site-header{background:linear-gradient(135deg,#1A1A2E,#2A1A0E)}
.site-nav{background:#0F0F1A;border-bottom:2px solid #E8500A}
.brand-icon{color:#E8500A}

/* ===== ARTICLE PAGE CLASSES ===== */

/* Map legacy vars to theme */
:root {
  --coral:    var(--primary);
  --text:     rgba(255,255,255,.88);
  --text-lt:  rgba(255,255,255,.50);
  --cream:    rgba(255,255,255,.04);
  --sand:     rgba(255,255,255,.07);
}

/* ── HEADER logo (article.php uses .site-logo not .brand-link) ── */
.site-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem; flex-shrink: 0;
}
.logo-text {
  font-size: 1.15rem; font-weight: 900;
  color: #fff; line-height: 1;
}
.logo-dot { color: var(--primary); }

/* ── SITE-NAV (article.php uses nav.site-nav > a, not .nav-inner .nav-link) ── */
.site-header .site-nav {
  display: flex; gap: 0;
  overflow-x: auto; scrollbar-width: none;
  flex: 1; margin: 0 16px;
}
.site-header .site-nav::-webkit-scrollbar { display: none; }
.site-header .site-nav a {
  color: rgba(255,255,255,.55);
  font-size: .78rem; font-weight: 600;
  padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; text-decoration: none;
  border-radius: 6px; transition: all .18s;
}
.site-header .site-nav a:hover,
.site-header .site-nav a.active {
  color: #fff; background: rgba(255,255,255,.09);
}

/* ── HEADER SEARCH ── */
.header-search {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.search-icon { color: rgba(255,255,255,.45); font-size: .9rem; }
.header-search input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: #fff; padding: 7px 14px;
  border-radius: 20px; outline: none;
  font-size: .8rem; width: 170px;
}
.header-search input::placeholder { color: rgba(255,255,255,.35); }

/* ── TOP BAND AD ── */
.ad-top-band {
  display: block;
  background: linear-gradient(90deg, var(--primary), var(--gold, var(--primary)));
  color: #fff; text-decoration: none;
  font-size: .8rem; font-weight: 700;
  padding: 9px 20px; text-align: center;
}
.ad-top-band-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: center; gap: 10px;
}
.band-cta {
  background: rgba(255,255,255,.2);
  padding: 3px 12px; border-radius: 20px;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--text-lt);
  padding: 10px 0; flex-wrap: wrap;
}
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.sep { opacity: .5; }

/* ── CONTAINER NARROW ── */
.container--narrow {
  max-width: 820px; margin: 0 auto; padding: 0 20px;
}

/* ── ARTICLE HEADER ── */
.article-header {
  padding: 32px 0 20px;
  background: var(--dark, #111);
}
.article-category-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary);
  color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px;
  margin-bottom: 16px; text-decoration: none;
}
.article-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 900; line-height: 1.25;
  color: #fff; margin-bottom: 16px;
}
.article-meta-bar {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: var(--text-lt);
}

/* ── HERO IMAGE ── */
.article-hero-img {
  width: 100%; border-radius: 12px;
  margin: 20px auto; display: block;
  max-height: 480px; object-fit: cover;
}

/* ── ARTICLE LAYOUT: 2 columns ── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px; padding-top: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout aside { display: none; }
}

/* ── ARTICLE BODY ── */
.article-body {
  font-size: 1rem; line-height: 1.9;
  color: var(--text);
}
.article-body p { margin-bottom: 1.4em; }
.article-body h2 {
  font-size: 1.25rem; font-weight: 800;
  color: #fff; margin: 2em 0 .75em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}
.article-body h3 {
  font-size: 1.05rem; font-weight: 700;
  color: #fff; margin: 1.5em 0 .6em;
}
.article-body img {
  width: 100%; border-radius: 10px; margin: 20px 0;
}
.article-body a { color: var(--primary); }

/* ── IN-ARTICLE AD ── */
.in-article-ad {
  background: var(--cream);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px; padding: 20px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px;
  margin: 32px 0; flex-wrap: wrap;
}
.in-article-ad-badge {
  font-size: .7rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 6px;
}
.in-article-ad h4 { font-size: .95rem; color: #fff; margin-bottom: 6px; }
.in-article-ad p { font-size: .82rem; color: var(--text-lt); }
.in-article-ad-cta {
  background: var(--primary); color: #fff;
  padding: 10px 20px; border-radius: 8px;
  font-weight: 700; font-size: .85rem;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ── TAGS ── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: var(--sand);
  color: var(--text-lt);
  font-size: .75rem; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  text-decoration: none;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  transition: all .2s;
}
.tag:hover { background: var(--primary); color: #fff; border-color: transparent; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 8px;
  font-size: .85rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: none; transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--primary); color: #fff; }

/* ── SIDEBAR WIDGETS ── */
.sidebar-widget {
  background: var(--cream);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px; padding: 18px;
  margin-bottom: 20px;
}
.widget-title {
  font-size: .8rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}

/* ── SIDEBAR CARD HORIZONTAL ── */
.card-horizontal {
  display: flex; gap: 12px;
  border-radius: 8px; overflow: hidden;
  background: var(--sand); padding: 8px;
}
.card-img-side {
  width: 80px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
}
.card-img-side img {
  width: 100%; height: 65px;
  object-fit: cover; display: block;
}
.card-body-side { flex: 1; }
.card-title-small {
  font-size: .82rem; font-weight: 700;
  color: #fff; line-height: 1.35;
  text-decoration: none; display: block;
}
.card-title-small:hover { color: var(--primary); }
.card-time { font-size: .7rem; color: var(--text-lt); margin-top: 4px; }

/* ── SECTIONS ── */
.section { padding: 40px 0; }
.section-alt {
  background: var(--cream);
  padding: 40px 0;
}
.section-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border, rgba(255,255,255,.08));
}
.section-title {
  font-size: 1.1rem; font-weight: 800;
  color: #fff;
}
.section-title span { color: var(--primary); }
.section-link {
  font-size: .8rem; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

/* ── RELATED ARTICLES ── */
.related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.related-card {
  background: var(--cream);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px; overflow: hidden;
  transition: transform .2s;
}
.related-card:hover { transform: translateY(-3px); }
.related-card img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; display: block;
}
.related-card-body { padding: 12px 14px; }
.related-card-cat {
  font-size: .7rem; font-weight: 700;
  color: var(--primary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .8px;
}
.related-card-title {
  font-size: .88rem; font-weight: 700;
  color: #fff; line-height: 1.35;
  text-decoration: none; display: block;
}
.related-card-title:hover { color: var(--primary); }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center; padding: 80px 20px;
  color: var(--text-lt);
}
.empty-state .emoji { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.3rem; color: #fff; margin-bottom: 8px; }

/* ── FOOTER (article.php uses different classes) ── */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px; padding-bottom: 32px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 450px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-logo {
  font-size: 1.4rem; font-weight: 900;
  color: #fff; margin-bottom: 10px;
}
.footer-logo span { color: var(--primary); }
.footer-brand p { font-size: .82rem; color: var(--text-lt); line-height: 1.6; }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.social-btn {
  width: 34px; height: 34px;
  background: var(--sand);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; text-decoration: none;
  transition: background .2s;
}
.social-btn:hover { background: var(--primary); }
.footer-col h4 {
  font-size: .82rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 12px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  font-size: .82rem; color: var(--text-lt);
  text-decoration: none; transition: color .2s;
}
.footer-col ul li a:hover { color: var(--primary); }
.footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  font-size: .78rem; color: var(--text-lt);
  flex-wrap: wrap; gap: 8px;
}

/* ── AD LABEL ── */
.ad-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-lt); margin-bottom: 8px;
}