/* /assets/css/main.css */

/* =========================
   CORE RESET & TOKENS
   ========================= */
:root{
  --primary:#0F766E;
  --primary-soft:#ECFEFF;
  --accent:#F97316;
  --bg:#020617;
  --card:#ffffff;
  --muted:#6b7280;
  --border:#E5E7EB;
  --radius-xl:20px;
  --radius-lg:14px;
  --shadow-soft:0 20px 45px rgba(15,23,42,.12);
  --max-width:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#F3F4F6;
  color:#020617;
  line-height:1.6;
}

.shell{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.25rem;
}

/* =========================
   HEADER
   ========================= */
.site-header{
  background:#020617;
  color:#E5E7EB;
  border-bottom:1px solid rgba(148,163,184,.3);
  position:sticky;
  top:0;
  z-index:50;
}
.shell-header{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.9rem 1.25rem;
}
.logo{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.logo-mark{
  width:38px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),#22c55e);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:white;
  font-size:1.1rem;
}
.logo-text{
  display:flex;
  flex-direction:column;
}
.logo-main{
  font-weight:700;
  font-size:1.1rem;
}
.logo-sub{
  font-size:.72rem;
  color:#9CA3AF;
}

.header-search{
  flex:1;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:rgba(15,23,42,.75);
  padding:.35rem .6rem;
  border-radius:999px;
}
.header-search input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:#E5E7EB;
  font-size:.85rem;
}
.header-search input::placeholder{
  color:#6B7280;
}
.header-search button{
  border:none;
  outline:none;
  border-radius:999px;
  padding:.35rem .9rem;
  font-size:.8rem;
  background:var(--primary);
  color:white;
  font-weight:500;
  cursor:pointer;
}

.header-nav{
  display:flex;
  gap:.9rem;
  font-size:.85rem;
  margin-left:.5rem;
}
.header-nav a{
  color:#E5E7EB;
  opacity:.8;
}
.header-nav a:hover{
  opacity:1;
}

.header-actions{
  display:flex;
  gap:.5rem;
  margin-left:auto;
}
.btn-primary,
.btn-secondary{
  padding:.45rem .95rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary{
  background:var(--accent);
  color:#111827;
  border-color:var(--accent);
}
.btn-secondary{
  background:transparent;
  color:#E5E7EB;
  border-color:#4B5563;
}
.btn-secondary:hover{
  background:#111827;
}

/* Burger mobile */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  margin-left:.5rem;
}
.burger span{
  width:20px;
  height:2px;
  background:#E5E7EB;
  border-radius:999px;
}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =========================
   PAGE HERO (for categories etc.)
   ========================= */
.page-hero{
  padding:2.2rem 0 1.4rem;
}
.page-hero-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
}
.page-hero .eyebrow{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:.35rem;
}
.page-hero h1{
  font-size:1.6rem;
  margin-bottom:.35rem;
}
.page-hero-sub{
  font-size:.9rem;
  color:var(--muted);
}
.page-hero-meta{
  display:flex;
  align-items:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:.78rem;
}
.pill-soft{
  background:#E5E7EB;
  color:#020617;
}
.dot-status{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
}

/* =========================
   HERO SLIDER
   ========================= */
.hero{
  padding:3rem 0 2.5rem;
}
.hero-grid{
  display:grid;
  gap:2rem;
}
@media (min-width:900px){
  .hero-grid{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    align-items:stretch;
  }
}

/* Slider wrapper */
.hero-slider{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(135deg,#020617,#020617);
  box-shadow:var(--shadow-soft);
  min-height:320px;
}
.hero-slides{
  position:relative;
}

/* Individual slides */
.hero-slide{
  display:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
  transform:translateX(16px);
}
.hero-slide.is-active{
  display:block;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.hero-article .hero-image-link{
  display:block;
  max-height:250px;
  overflow:hidden;
  border-radius:24px 24px 0 0;
}
.hero-article img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.hero-article:hover img{
  transform:scale(1.03);
}
.hero-body{
  padding:1.5rem 1.75rem 1.75rem;
}
.hero-body h1{
  font-size:1.5rem;
  line-height:1.3;
  margin-bottom:.5rem;
}
.hero-meta{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.75rem;
}
.hero-excerpt{
  font-size:.95rem;
  color:#e5e7eb;
  margin-bottom:1.25rem;
}
.hero-tag{
  position:absolute;
  inset:auto auto 1rem 1rem;
  display:inline-flex;
  align-items:center;
  padding:.3rem .65rem;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  font-size:.75rem;
  letter-spacing:.02em;
}

/* Slider nav arrows */
.hero-slider-controls{
  position:absolute;
  inset:auto 1.25rem 1.25rem auto;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.hero-nav{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.hero-nav:hover{
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-1px);
}

/* Slider dots */
.hero-dots{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  background:rgba(148,163,184,.55);
  cursor:pointer;
  padding:0;
  transition:background .25s ease, width .25s ease;
}
.hero-dot.is-active{
  width:18px;
  background:var(--accent);
}

/* Trending sidebar next to hero */
.hero-side{
  background:#020617;
  border-radius:24px;
  padding:1.5rem 1.25rem;
  box-shadow:var(--shadow-soft);
}
.hero-side h3{
  font-size:1rem;
  margin-bottom:1rem;
}
.trending-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.trending-item{
  display:flex;
  gap:.75rem;
}
.trending-thumb{
  width:72px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
}
.trending-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.trending-text h4{
  font-size:.9rem;
  line-height:1.35;
  margin-bottom:.15rem;
}
.trending-category{
  font-size:.72rem;
  color:var(--muted);
}
.trending-meta{
  font-size:.75rem;
  color:var(--muted);
}

/* =========================
   MAIN CONTENT & CARDS
   ========================= */
.content-section{
  padding:0 0 2.5rem;
}
.content-grid{
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:1.75rem;
}
.section-heading h2{
  font-size:1.2rem;
  margin-bottom:.25rem;
}
.section-heading p{
  font-size:.88rem;
  color:var(--muted);
  margin-bottom:1rem;
}

/* Article cards */
.article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem;
}
.card-article{
  background:var(--card);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  height:100%;
}
.card-thumb{
  position:relative;
  display:block;
}
.card-thumb img{
  width:100%;
  height:170px;
  object-fit:cover;
}
.card-tag{
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  background:rgba(15,23,42,.9);
  color:#E5E7EB;
  font-size:.7rem;
  padding:.18rem .55rem;
  border-radius:999px;
}
.card-body{
  padding:.9rem .95rem 1.05rem;
  display:flex;
  flex-direction:column;
}
.card-body h3{
  font-size:.95rem;
  margin-bottom:.2rem;
}
.card-meta{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:.35rem;
}
.card-excerpt{
  font-size:.84rem;
  color:#111827;
}

/* Sidebar boxes */
.side-box{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:.9rem .95rem;
  margin-bottom:1rem;
  box-shadow:0 16px 30px rgba(15,23,42,.05);
}
.side-box h4{
  font-size:.9rem;
  margin-bottom:.6rem;
}
.side-list li+li{
  margin-top:.4rem;
}
.side-list a{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
}
.badge{
  background:var(--primary-soft);
  color:#0f172a;
  border-radius:999px;
  padding:.1rem .55rem;
  font-size:.7rem;
}
.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.tag-cloud a{
  font-size:.75rem;
  padding:.2rem .55rem;
  border-radius:999px;
  background:#F9FAFB;
  border:1px solid #E5E7EB;
}
.comments-list li+li{
  margin-top:.6rem;
}
.comment-snippet{
  font-size:.8rem;
  color:#111827;
}
.comment-article{
  font-size:.78rem;
  color:var(--primary);
}
.comment-date{
  font-size:.72rem;
  color:var(--muted);
}

/* Load more */
.load-more-wrap{
  text-align:center;
  margin-top:1.4rem;
}
.form-msg{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.4rem;
}

/* =========================
   CATEGORY GRID (categories.php)
   ========================= */
.category-grid-table{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.category-tile{
  background:#020617;
  border-radius:16px;
  padding:1.1rem 1.2rem;
  border:1px solid rgba(148,163,184,.25);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.category-tile:hover{
  background:rgba(15,23,42,.95);
  border-color:var(--primary);
  transform:translateY(-1px);
}
.category-tile-name{
  font-weight:600;
  color:#E5E7EB;
}
.category-tile-count{
  font-size:.8rem;
  color:#9CA3AF;
}
.category-tile-desc{
  font-size:.85rem;
  color:#e5e7eb;
}
.category-tile-cta{
  margin-top:.15rem;
  font-size:.8rem;
  color:var(--accent);
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background:#020617;
  color:#9CA3AF;
  margin-top:1rem;
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1.5fr;
  gap:1.5rem;
  padding:1.8rem 1.25rem 1.3rem;
}
.footer-col h4{
  font-size:.9rem;
  margin-bottom:.4rem;
  color:#E5E7EB;
}
.footer-col p{
  font-size:.8rem;
}
.footer-col ul li+li{
  margin-top:.25rem;
}
.footer-col a{
  font-size:.8rem;
  color:#CBD5F5;
}

.footer-col form{
  margin-top:.5rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.footer-col input{
  border-radius:999px;
  border:1px solid #4B5563;
  padding:.35rem .7rem;
  font-size:.8rem;
  background:transparent;
  color:#E5E7EB;
}
.footer-col button{
  border-radius:999px;
  border:none;
  padding:.35rem .7rem;
  font-size:.8rem;
  background:var(--accent);
  color:#111827;
  font-weight:500;
  cursor:pointer;
}

.footer-bottom{
  border-top:1px solid #1F2937;
  padding:.65rem 0;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.78rem;
}
.footer-links a+a{
  margin-left:.7rem;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:960px){
  .hero-grid,
  .content-grid,
  .footer-top{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .shell-header{
    flex-wrap:wrap;
  }
  .header-nav,
  .header-actions{
    display:none;
    width:100%;
    margin-top:.6rem;
  }
  .header-nav.is-open,
  .header-actions.is-open{
    display:flex;
  }
  .header-nav{
    flex-wrap:wrap;
  }
  .header-actions{
    justify-content:flex-start;
  }
  .burger{
    display:flex;
  }

  .hero{
    padding:2rem 0 1.75rem;
  }
  .hero-slider{
    border-radius:20px;
  }
  .hero-article .hero-image-link{
    max-height:210px;
  }
  .hero-body{
    padding:1.25rem 1.25rem 1.5rem;
  }
  .hero-body h1{
    font-size:1.25rem;
  }
  .hero-slider-controls{
    inset:auto 1rem 1rem auto;
  }
  .hero-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .page-hero-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}







/* =========================
   FEATURED (HERO) SLIDER
   ========================= */

/* Section spacing */
.hero{
  padding: 2.5rem 0 2rem;
}

/* Main grid */
.hero-grid{
  display:grid;
  gap:2rem;
  align-items:stretch;
}

@media (min-width:1024px){
  .hero-grid{
    grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);
  }
}

/* Slider container */
.hero-slider{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:radial-gradient(circle at top left,#0f172a,#020617);
  box-shadow:0 24px 55px rgba(15,23,42,.32);
  padding:1.4rem 1.6rem;
}

/* Slides wrapper */
.hero-slides{
  position:relative;
}

/* Individual slide */
.hero-slide{
  display:none;
  opacity:0;
  pointer-events:none;
  transform:translateX(20px);
  transition:opacity .45s ease,transform .45s ease;
}

/* Active slide */
.hero-slide.is-active{
  display:flex;
  flex-direction:row;
  gap:1.8rem;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

/* Image side */
.hero-slide .hero-image-link{
  flex:1.1;
  border-radius:18px;
  overflow:hidden;
  align-self:stretch;
  background:#020617;
}

.hero-slide .hero-image-link img{
  width:100%;
  height:100%;
  min-height:230px;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .6s ease;
}

.hero-slide:hover .hero-image-link img{
  transform:scale(1.08);
}

/* Tag on image */
.hero-tag{
  position:absolute;
  inset:auto auto 1rem 1rem;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  padding:.3rem .7rem;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* Text side */
.hero-body{
  flex:1.4;
  background:rgba(255,255,255,.98);
  border-radius:18px;
  padding:1.5rem 1.7rem 1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hero-body h1{
  font-size:1.55rem;
  line-height:1.3;
  margin-bottom:.55rem;
  color:#020617;
}

.hero-meta{
  font-size:.83rem;
  color:#6b7280;
  margin-bottom:.8rem;
}

.hero-excerpt{
  font-size:.94rem;
  color:#111827;
  margin-bottom:1.3rem;
}

.hero-body .btn-primary{
  align-self:flex-start;
  padding:.6rem 1.35rem;
  font-size:.82rem;
  border-radius:999px;
}

/* Slider controls */
.hero-slider-controls{
  position:absolute;
  inset:auto 1.8rem 1.6rem auto;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.hero-nav{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.hero-nav:hover{
  background:var(--accent);
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(15,23,42,.5);
}

/* Dots */
.hero-dots{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.hero-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:none;
  background:rgba(148,163,184,.55);
  cursor:pointer;
  padding:0;
  transition:background .25s ease,width .25s ease,opacity .25s ease;
  opacity:.65;
}

.hero-dot.is-active{
  width:18px;
  background:var(--accent);
  opacity:1;
}

/* Mobile / tablet tweaks */
@media (max-width:900px){
  .hero-slider{
    padding:1.1rem 1.2rem 1.3rem;
  }
  .hero-slide.is-active{
    flex-direction:column;
  }
  .hero-slide .hero-image-link{
    border-radius:16px;
    max-height:230px;
  }
  .hero-body{
    padding:1.2rem 1.2rem 1.35rem;
  }
  .hero-body h1{
    font-size:1.28rem;
  }
  .hero-slider-controls{
    position:static;
    margin-top:1rem;
    justify-content:flex-end;
  }
}

/* =========================
   TRENDING SIDEBAR
   ========================= */

.hero-side{
  background:#020617;
  border-radius:24px;
  padding:1.5rem 1.25rem;
  box-shadow:0 22px 45px rgba(15,23,42,.4);
  color:#e5e7eb;
  display:flex;
  flex-direction:column;
}

.hero-side h3{
  font-size:1rem;
  font-weight:600;
  margin-bottom:.85rem;
}

/* Scrollable list */
.trending-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  max-height:420px;
  overflow:auto;
  padding-right:.2rem;
}

/* Custom scrollbar (WebKit) */
.trending-list::-webkit-scrollbar{
  width:4px;
}
.trending-list::-webkit-scrollbar-track{
  background:transparent;
}
.trending-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.55);
  border-radius:999px;
}

/* Trending item card */
.trending-item{
  display:flex;
  gap:.7rem;
  padding:.55rem;
  border-radius:14px;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.25);
  cursor:pointer;
  transition:background .2s ease,transform .15s ease,border-color .2s ease,box-shadow .2s ease;
}

.trending-item:hover{
  background:rgba(15,23,42,1);
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 16px 35px rgba(15,23,42,.55);
}

/* Thumbnail */
.trending-thumb{
  width:72px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:#020617;
}

.trending-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .4s ease;
}

.trending-item:hover .trending-thumb img{
  transform:scale(1.08);
}

/* Text */
.trending-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.trending-category{
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:.1rem;
}

.trending-text h4{
  font-size:.86rem;
  line-height:1.35;
  margin-bottom:.15rem;
  color:#e5e7eb;
}

.trending-meta{
  font-size:.72rem;
  color:#9ca3af;
}




/* =========================
   TOP CATEGORY STRIPS
   ========================= */

.topcats{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(148,163,184,.35);
}

.topcats .section-heading{
  margin-bottom:1.25rem;
}

.topcats .section-heading h2{
  font-size:1.15rem;
  margin-bottom:.25rem;
}

.topcats .section-heading p{
  font-size:.86rem;
  color:var(--muted);
}

/* strip wrapper per category */
.topcat-strip + .topcat-strip{
  margin-top:1.9rem;
}

.topcat-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}

.topcat-strip-head h3{
  font-size:.98rem;
  font-weight:600;
}

.topcat-view-all{
  font-size:.78rem;
  color:var(--primary);
}

/* FLEX row of article cards */
.topcat-strip-row{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.4rem;
  scroll-snap-type:x mandatory;
}

/* nice, slim scrollbar */
.topcat-strip-row::-webkit-scrollbar{
  height:5px;
}
.topcat-strip-row::-webkit-scrollbar-track{
  background:transparent;
}
.topcat-strip-row::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.6);
  border-radius:999px;
}

/* individual article card – only image + title */
.topcat-card{
  flex:0 0 210px;
  scroll-snap-align:start;
  text-decoration:none;
}

@media (max-width:600px){
  .topcat-card{
    flex:0 0 170px;
  }
}

.topcat-card-img{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#020617;
  min-height:140px;
  box-shadow:0 16px 36px rgba(15,23,42,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}

.topcat-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .4s ease;
}

/* gradient + title overlay */
.topcat-card-gradient{
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background:linear-gradient(to top,rgba(15,23,42,.9),rgba(15,23,42,0));
}

.topcat-card-title{
  position:absolute;
  left:.8rem;
  right:.8rem;
  bottom:.65rem;
  font-size:.85rem;
  font-weight:500;
  color:#f9fafb;
  line-height:1.3;
}

/* hover state on desktop */
@media (hover:hover){
  .topcat-card:hover .topcat-card-img{
    transform:translateY(-2px);
    box-shadow:0 22px 45px rgba(15,23,42,.24);
  }
  .topcat-card:hover img{
    transform:scale(1.06);
  }
}



.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.tag-cloud a{
  font-size:.75rem;
  padding:.2rem .7rem;
  border-radius:999px;
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  color:#020617;           /* ensure text is dark/visible */
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}

.tag-cloud a:hover{
  border-color:var(--primary);
  background:#ECFEFF;
}




/* =========================
   TOP CATEGORIES STRIPS
   ========================= */
.topcats{
  padding:2.5rem 0 3rem;
}

.topcats .section-heading h2{
  font-size:1.25rem;
  margin-bottom:.25rem;
}

.topcats .section-heading p{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:1.2rem;
}

/* Each category block */
.topcat-strip{
  margin-bottom:2rem;
}

.topcat-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}

.topcat-strip-head h3{
  font-size:1rem;
  font-weight:600;
}

.topcat-view-all{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
}

/* Row of article cards (image + title only) */
.topcat-strip-row{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.3rem;
  scrollbar-width:thin;
}

.topcat-strip-row::-webkit-scrollbar{
  height:6px;
}
.topcat-strip-row::-webkit-scrollbar-track{
  background:transparent;
}
.topcat-strip-row::-webkit-scrollbar-thumb{
  background:#E5E7EB;
  border-radius:999px;
}

/* Individual article card */
.topcat-card{
  flex:0 0 210px;
  text-decoration:none;
}

.topcat-card-img{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#020617;
  min-height:130px;
}

.topcat-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, opacity .35s ease;
}

/* Dark gradient overlay for text */
.topcat-card-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(15,23,42,0) 20%,
    rgba(15,23,42,.75) 100%
  );
  pointer-events:none;
}

/* Title at the bottom of image */
.topcat-card-title{
  position:absolute;
  left:.7rem;
  right:.7rem;
  bottom:.6rem;
  font-size:.86rem;
  font-weight:600;
  line-height:1.3;
  color:#F9FAFB;
}

/* Hover effect */
.topcat-card:hover img{
  transform:scale(1.05);
  opacity:.95;
}

/* Mobile tweaks */
@media (max-width:768px){
  .topcat-card{
    flex:0 0 65%;
    max-width:260px;
  }
}