/*
Theme Name:  Infotainia
Description: Viral Buzz Magazine Theme
Version:     6.3
Author:      infotainia.com
Text Domain: infotainia
*/

/* ══════════════════════════════════════════════════════════════
   GOOGLE FONTS — defaults: Sora (headlines) + Mukta (Hindi/body)
   The Customizer Typography panel overrides these at runtime.
   Noto Sans is included as a universal Latin fallback alongside Devanagari fonts.
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800;900&family=Mukta:wght@400;500;600;700;800&family=Noto+Sans:wght@400;600;700&display=swap&subset=latin,devanagari');

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --primary:      #e63946;
  --primary-dk:   #c1121f;
  --primary-lt:   #fff0f1;
  --accent:       #ff6b35;
  --accent-2:     #ffd60a;

  /* Layout */
  --bg:           #f2f4f7;
  --surface:      #ffffff;
  --surface-2:    #f8f9fb;
  --border:       #e8eaed;
  --border-dk:    #d0d4da;

  /* Text */
  --text:         #1a1d23;
  --text-2:       #444c5a;
  --muted:        #7a8390;
  --on-primary:   #ffffff;

  /* Type */
  --font-h:       'Sora', 'Mukta', sans-serif;
  --font-b:       'Mukta', 'Sora', sans-serif;

  /* Radius */

  /* Shadow */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-h:  0 16px 48px rgba(0,0,0,.18);

  /* Sizing */
  --max-width:  1280px;
  --sidebar-w:  330px;
  --header-h:   68px;
  --nav-h:      48px;

  /* Font Weights (overridden dynamically via customizer) */
  --fw-body:    400;
  --fw-heading: 800;
  --fw-nav:     700;
  --fw-card:    800;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:       #111418;
  --surface:  #1c1f27;
  --surface-2:#222632;
  --border:   #2c3040;
  --border-dk:#3a3f52;
  --text:     #f0f2f5;
  --text-2:   #b8bfcc;
  --muted:    #7a8499;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: var(--fw-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-h);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--primary-dk); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
#page { width: 100%; }
#content {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding: 0 20px 60px;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 32px;
  align-items: start;
  width: 100%;
}
@media (max-width: 1024px) { #content { grid-template-columns: 1fr; } }
#primary { min-width: 0; }
#secondary { min-width: 0; width: 100%; }

/* ══════════════════════════════════════════════════════════════
   BREAKING TICKER
   ══════════════════════════════════════════════════════════════ */
.ticker-wrap {
  display: flex;
  width: 100%;
  background: var(--text);
  color: #fff;
  align-items: center;
  overflow: hidden;
  height: 40px;
  position: relative;
  z-index: 1002;
}
.ticker-label {
  background: var(--primary);
  color: #fff;
  padding: 0 18px;
  font-family: var(--font-h);
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  gap: 6px;
}
.ticker-scroll { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; height: 100%; }
.ticker-items {
  display: flex;
  gap: 48px;
  animation: scrollTicker 80s linear infinite;
  white-space: nowrap;
  padding-left: 24px;
  width: max-content;
  align-items: center;
  height: 100%;
}
.ticker-items:hover { animation-play-state: paused; }
.ticker-items a { color: #ccc; text-decoration: none; font-size: .82rem; font-weight: 600; transition: color .2s; }
.ticker-items a:hover { color: #fff; }
@keyframes scrollTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   FEATURED POSTS STRIP — Bimber style
   Image fills the card top, small title below. No side-by-side.
   ══════════════════════════════════════════════════════════════ */
.subheader-strip-wrap {
  width: 100%;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  z-index: 98;
  overflow: hidden;
}
.subheader-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  position: relative;
}

/* Label pill */
.subheader-strip-label { flex-shrink: 0; margin-right: 14px; }
.subheader-strip-label span {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 900;
  padding: 5px 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
}

/* Scrollable track */
.subheader-strip-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex: 1;
}
.subheader-strip-track::-webkit-scrollbar { display: none; }

/* ── Each card: image on top, title below ── */
.subheader-post-card {
  display: flex;
  flex-direction: column;        /* stacks image ABOVE title */
  flex-shrink: 0;
  width: 160px;                  /* fixed width for all cards */
  text-decoration: none;
  border-right: 1px solid var(--border);
  transition: background .18s;
  overflow: hidden;
}
.subheader-post-card:last-child { border-right: none; }
.subheader-post-card:hover { background: var(--surface-2); }

/* Image container — full width, fixed height */
.subheader-post-img-wrap {
  position: relative;
  width: 100%;
  height: 90px;                  /* portrait aspect inside the strip */
  overflow: hidden;
  flex-shrink: 0;
}
.subheader-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.subheader-post-card:hover .subheader-post-img { transform: scale(1.07); }
.subheader-post-img-placeholder {
  width: 100%; height: 100%;
  background: var(--border);
}

/* Category label over the image */
.subheader-post-cat {
  display: none; /* v6.0: hide category label on sub-header strip cards */
}

/* Title — sits below the image, small and clean */
.subheader-post-title {
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
  padding: 7px 9px 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.subheader-post-card:hover .subheader-post-title { color: var(--primary); }

/* Scroll arrows */
.subheader-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--surface); border: 1px solid var(--border);
  width: 28px; height: 28px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 5; box-shadow: var(--shadow-sm); transition: all .18s;
  font-size: 1.1rem; line-height: 1; color: var(--text);
}
.subheader-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.subheader-arrow-prev { left: 6px; }
.subheader-arrow-next { right: 6px; }

@media (max-width: 768px) {
  .subheader-strip-label { display: none; }
  .subheader-arrow { display: none; }
  .subheader-strip-inner { padding: 0; }
  .subheader-post-card { width: 130px; }
  .subheader-post-img-wrap { height: 74px; }
}

/* ══════════════════════════════════════════════════════════════
   MAIN HEADER
   ══════════════════════════════════════════════════════════════ */
#site-header {
  width: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
.site-branding a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-branding img, .custom-logo { max-height: 44px; width: auto !important; object-fit: contain; }
.site-title { font-family: var(--font-h); font-size: 1.7rem; font-weight: 900; color: var(--primary); letter-spacing: -1px; }
.site-description { display: none; }

/* Navigation */
.main-navigation { flex: 1; display: flex; justify-content: center; }
.primary-menu { display: flex; gap: 2px; align-items: center; }
.primary-menu li { position: relative; }
.primary-menu > li > a {
  display: block; padding: 8px 14px;
  font-family: var(--font-h); font-weight: 700; font-size: .88rem;
  color: var(--text-2); border-radius: 0;
  transition: all .2s;
}
.primary-menu > li:hover > a,
.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a { background: var(--primary-lt); color: var(--primary); }
.primary-menu .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--surface);
  border-radius: 0;
  box-shadow: var(--shadow-lg); min-width: 220px;
  padding: 6px; list-style: none;
  display: none; z-index: 99999;
  border: 1px solid var(--border);
}
.primary-menu li:hover > .sub-menu { display: block; animation: fadeDown .18s ease; }
.primary-menu .sub-menu li a {
  display: block; padding: 9px 14px; font-size: .86rem; font-weight: 600;
  color: var(--text-2); border-radius: 0;
  transition: all .15s;
}
.primary-menu .sub-menu li a:hover { color: var(--primary); background: var(--primary-lt); }
.primary-menu .sub-menu .sub-menu { top: -6px; left: 100%; margin-left: 4px; }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .search-form { display: flex; align-items: center; }
.header-actions .search-form input {
  padding: 7px 16px; border: 1.5px solid var(--border); border-radius: 0;
  font-size: .85rem; background: var(--bg); color: var(--text);
  width: 190px; transition: all .2s;
}
.header-actions .search-form input:focus { border-color: var(--primary); outline: none; background: var(--surface); width: 220px; }
.dark-toggle {
  background: var(--bg); border: 1.5px solid var(--border); width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all .2s; color: var(--text);
}
.dark-toggle:hover { border-color: var(--primary); background: var(--primary-lt); }
#mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); padding: 4px; }

/* ══════════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════════ */
.hero-section-wrap {
  max-width: var(--max-width);
  margin: 20px auto 0;
  padding: 0 20px;
  display: grid;
  gap: 8px;
}
/* hero-in-wrap: hero is placed inside a .wrap by front-page.php — remove own max-width/padding to avoid double-constraining */
.hero-section-wrap.hero-in-wrap {
  max-width: 100%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
/* hero-fw: hero is full-width (no outer .wrap) — keep own centering/padding */
.hero-section-wrap.hero-fw {
  max-width: var(--max-width);
  margin: 20px auto 0;
  padding: 0 20px;
}
/* feature_grid_wide full-width: only expands beyond max-width when hero-fw is active */
.hero-section-wrap.hero-fw.hero-layout-food-wide {
  max-width: 100%;
  padding: 0;
}
/* When hero-in-wrap, food-wide must NOT expand beyond its container */
.hero-section-wrap.hero-in-wrap.hero-layout-food-wide {
  max-width: 100%;
  padding: 0;
}
.hero-item {
  position: relative;
  overflow: hidden;
}
/* img-link fills the entire hero-item cell absolutely */
.hero-img-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  overflow: hidden;
}
/* img also absolute so it fills the link container completely */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease);
}
/* placeholder fills same way */
.hero-img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--border) 0%, var(--surface-2) 100%);
}
.hero-item:hover .hero-img { transform: scale(1.06); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px;
  z-index: 2;
}
.hero-content-sm { padding: 12px 14px; }
.hero-cat {
  display: inline-block; background: var(--primary); color: #fff;
  font-family: var(--font-h); font-size: .68rem; font-weight: 800;
  padding: 3px 10px; border-radius: 0; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.hero-badge {
  display: inline-block; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-family: var(--font-h); font-size: .63rem; font-weight: 800;
  padding: 2px 9px; border-radius: 0; margin-left: 4px;
}
.hero-title { margin: 4px 0 5px; }
.hero-title a {
  color: #fff; font-family: var(--font-h); font-size: 1.45rem;
  font-weight: 900; line-height: 1.25; text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.hero-title a:hover { opacity: .88; color: #fff; }
.hero-title-sm a { font-size: .92rem; line-height: 1.3; }
.hero-meta { color: rgba(255,255,255,.65); font-size: .74rem; font-weight: 500; margin-top: 4px; }

/* Hero layout variants */
/* Layout 2: two equal columns */
.hero-layout-2 { grid-template-columns: 1fr 1fr; }
.hero-item-half { height: 460px; }

/* Layout 3: big left + 2 stacked right
   align-items:stretch = stack-col fills full height of main item.
   flex-direction:column + flex:1 on children = equal halves, zero gap. */
.hero-layout-3 { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
.hero-item-main { height: 490px; }
.hero-stack-col { display: flex; flex-direction: column; gap: 8px; }
.hero-stack-col .hero-item-stack { flex: 1; min-height: 0; overflow: hidden; }

/* Layout 5: panorama — 2 left + big center + 2 right
   Same approach: side cols stretch to center height via align-items:stretch,
   then flex:1 children fill without any height math or gaps. */
.hero-layout-5 { grid-template-columns: 1fr 1.5fr 1fr; align-items: stretch; }
.hero-item-center { height: 510px; }
.hero-side-col { display: flex; flex-direction: column; gap: 8px; }
.hero-side-col .hero-item-side { flex: 1; min-height: 0; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   POST CARDS — completely redesigned like Bimber
   ══════════════════════════════════════════════════════════════ */
.grid-item {
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  border: 1px solid var(--border);
}
.grid-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.grid-item .thumb-wrap { position: relative; overflow: hidden; }
.grid-item .thumb-wrap img { width: 100%; height: 210px; object-fit: cover; transition: transform .5s var(--ease); }
.grid-item:hover .thumb-wrap img { transform: scale(1.05); }

/* Category badge on card image */
.grid-item .meta-cat,
.grid-item .bimber-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--primary); color: #fff;
  font-family: var(--font-h); font-size: .66rem; font-weight: 800;
  padding: 3px 10px; border-radius: 0;
  text-transform: uppercase; letter-spacing: .4px;
  text-decoration: none;
  z-index: 2;
}
.grid-item .meta-cat:hover { background: var(--primary-dk); }

/* Card number badge (for ranked lists) */
.card-number {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: .78rem; font-weight: 800;
}

/* HOT / TRENDING / NEW labels */
.card-badge-hot  { background: var(--primary) !important; }
.card-badge-new  { background: #22c55e !important; }
.card-badge-trending { background: var(--accent) !important; }

.grid-item .card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }

.grid-item h3 { font-size: 1.05rem; font-weight: var(--fw-card); line-height: 1.45; flex: 1; }
.grid-item h3 a { color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grid-item h3 a:hover { color: var(--primary); }
.grid-item h3:has(a:hover) { color: var(--primary); }

.card-excerpt {
  font-size: .83rem; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-footer {
  border-top: 1px solid var(--border); padding-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; color: var(--muted); font-weight: 600; margin-top: auto;
}
.cf-views::before { content: "👁 "; }
.cf-shares { color: var(--primary); }
.cf-shares::before { content: "🔥 "; }
.card-date { font-size: .74rem; color: var(--muted); }
.meta-cat { font-family: var(--font-h); font-size: .7rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.meta-sep { margin: 0 5px; color: var(--border-dk); }

/* ══════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ══════════════════════════════════════════════════════════════ */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.posts-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.posts-grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }
@media (max-width: 900px) { .posts-grid-4 { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 600px) { .posts-grid-2, .posts-grid-4 { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS — Bimber-style with colored left border
   ══════════════════════════════════════════════════════════════ */
.section-title {
  font-family: var(--font-h); font-size: 1.25rem; font-weight: 900;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  padding-left: 14px;
  border-left: 4px solid var(--primary);
  color: var(--text);
  letter-spacing: -.3px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.section-title .see-all {
  font-size: .72rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px;
  border: 1.5px solid var(--primary); border-radius: 0;
  transition: all .2s; white-space: nowrap;
}
.section-title .see-all:hover { background: var(--primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY FILTER TABS — Bimber-style pill tabs
   ══════════════════════════════════════════════════════════════ */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0; }
.cat-tab {
  padding: 7px 18px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2);
  border-radius: 0; font-family: var(--font-h);
  font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .2s; font-size: .82rem;
}
.cat-tab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-lt); }
.cat-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   TOP BAR — Bimber-style Latest/Popular/Hot/Trending pills
   ══════════════════════════════════════════════════════════════ */
.viralo-sort-bar {
  display: flex; gap: 6px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;
}
.viralo-sort-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 0;
  font-family: var(--font-h); font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all .2s;
}
.viralo-sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.viralo-sort-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.viralo-sort-btn .dot { width: 7px; height: 7px; border-radius: 50%; }
.viralo-sort-btn.v-hot .dot   { background: var(--primary); }
.viralo-sort-btn.v-new .dot   { background: #22c55e; }
.viralo-sort-btn.v-trend .dot { background: var(--accent); }
.viralo-sort-btn.active .dot  { background: #fff; }

/* ══════════════════════════════════════════════════════════════
   LOAD MORE
   ══════════════════════════════════════════════════════════════ */
.load-more-wrap { text-align: center; padding: 32px 0 0; }
.btn-load-more {
  background: var(--surface); color: var(--text-2);
  border: 1.5px solid var(--border);
  padding: 12px 40px; border-radius: 0;
  font-family: var(--font-h); font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: all .25s; display: inline-block;
}
.btn-load-more:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-lt); }
.load-spinner { font-weight: 700; color: var(--muted); padding: 16px; font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════
   LIST LAYOUT
   ══════════════════════════════════════════════════════════════ */
.posts-list { display: flex; flex-direction: column; gap: 20px; }
.posts-list .grid-item { flex-direction: row; align-items: stretch; }
.posts-list .grid-item .thumb-wrap { width: 280px; flex-shrink: 0; }
.posts-list .grid-item .thumb-wrap img { height: 100%; width: 100%; position: absolute; inset: 0; }
.posts-list .grid-item .thumb-wrap { position: relative; }
.posts-list .grid-item .card-body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.posts-list .grid-item h3 { font-size: 1.25rem; }
@media (max-width: 768px) {
  .posts-list .grid-item { flex-direction: column; }
  .posts-list .grid-item .thumb-wrap { width: 100%; }
  .posts-list .grid-item .thumb-wrap img { position: relative; height: 220px; }
}

/* Small list variant */
.posts-list.posts-list-sm .grid-item { flex-direction: row; }
.posts-list.posts-list-sm .grid-item .thumb-wrap { width: 100px; flex-shrink: 0; }
.posts-list.posts-list-sm .grid-item .thumb-wrap .thumb-ratio { padding-top: 75%; }
.posts-list.posts-list-sm .grid-item .card-body { padding: 10px 14px; }
.posts-list.posts-list-sm .grid-item h3 { font-size: .88rem; -webkit-line-clamp: 2; }
.posts-list.posts-list-sm .card-excerpt { display: none; }

/* Large list */
.posts-list.posts-list-lg .grid-item { flex-direction: row; min-height: 200px; }
.posts-list.posts-list-lg .grid-item .thumb-wrap { width: 400px; flex-shrink: 0; }
.posts-list.posts-list-lg .grid-item h3 { font-size: 1.45rem; }
@media (max-width: 768px) {
  .posts-list.posts-list-lg .grid-item { flex-direction: column; }
  .posts-list.posts-list-lg .grid-item .thumb-wrap { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   MOSAIC LAYOUT
   ══════════════════════════════════════════════════════════════ */
.posts-mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 250px 250px; gap: 8px; }
.posts-mosaic .grid-item:first-child { grid-row: 1 / 3; position: relative; }
.posts-mosaic .grid-item:first-child .thumb-wrap,
.posts-mosaic .grid-item:first-child .thumb-wrap img { height: 100%; width: 100%; position: absolute; inset: 0; }
.posts-mosaic .grid-item:first-child .thumb-wrap { position: absolute; inset: 0; border-radius: 0; }
.posts-mosaic .grid-item:first-child .card-body { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 100%); color: #fff; z-index: 2; padding: 28px 22px; border-radius: 0 0 0 0; }
.posts-mosaic .grid-item:first-child h3 { font-size: 1.6rem; color: #fff; -webkit-line-clamp: 3; }
.posts-mosaic .grid-item:first-child h3 a { color: #fff; }
.posts-mosaic .grid-item:first-child .meta-cat { position: static; background: none; color: rgba(255,255,255,.8); font-size: .72rem; padding: 0; }
.posts-mosaic .grid-item:first-child .card-footer { border-color: rgba(255,255,255,.15); }
.posts-mosaic .grid-item:first-child .card-date { color: rgba(255,255,255,.6); }
@media(max-width: 768px) {
  .posts-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .posts-mosaic .grid-item:first-child { grid-row: auto; min-height: 280px; position: relative; }
}

/* ══════════════════════════════════════════════════════════════
   MAGAZINE LAYOUT
   ══════════════════════════════════════════════════════════════ */
.posts-magazine .mag-hero { display: grid; grid-template-columns: 1.75fr 1fr; gap: 8px; margin-bottom: 8px; }
.posts-magazine .mag-hero-main .grid-item { height: 100%; }
.posts-magazine .mag-hero-main .grid-item .thumb-wrap { height: 310px; }
.posts-magazine .mag-hero-main .grid-item .thumb-wrap img { height: 100%; }
.posts-magazine .mag-stack { display: flex; flex-direction: column; gap: 8px; }
.posts-magazine .mag-stack .grid-item .thumb-wrap { height: 148px; }
.posts-magazine .mag-stack .grid-item .thumb-wrap img { height: 148px; }
.posts-magazine .mag-stack .grid-item .card-body { padding: 12px 14px; }
.posts-magazine .mag-stack .grid-item h3 { font-size: .9rem; }
.posts-magazine .mag-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 900px) {
  .posts-magazine .mag-hero { grid-template-columns: 1fr; }
  .posts-magazine .mag-hero-main .grid-item .thumb-wrap { height: 240px; }
  .posts-magazine .mag-stack { flex-direction: row; }
  .posts-magazine .mag-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .posts-magazine .mag-stack { flex-direction: column; }
  .posts-magazine .mag-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CAROUSEL LAYOUT
   ══════════════════════════════════════════════════════════════ */
.posts-carousel-wrap { position: relative; }
.posts-carousel {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--primary) var(--border);
}
.posts-carousel::-webkit-scrollbar { height: 4px; }
.posts-carousel::-webkit-scrollbar-track { background: var(--border); border-radius: 0; }
.posts-carousel::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 0; }
.posts-carousel .grid-item { flex: 0 0 270px; scroll-snap-align: start; }
.posts-carousel .grid-item .thumb-wrap img { height: 160px; }
.carousel-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.carousel-btn {
  background: var(--surface); border: 1.5px solid var(--border);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s; color: var(--text);
}
.carousel-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   ZIGZAG / STREAM LAYOUTS
   ══════════════════════════════════════════════════════════════ */
.posts-zigzag { display: flex; flex-direction: column; gap: 24px; }
.posts-zigzag .grid-item { flex-direction: row; align-items: stretch; }
.posts-zigzag .grid-item .thumb-wrap { width: 50%; flex-shrink: 0; }
.posts-zigzag .grid-item .thumb-wrap .thumb-ratio { padding-top: 66.67%; height: 100%; }
.posts-zigzag .grid-item .card-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.posts-zigzag .grid-item h3 { font-size: 1.25rem; }
.posts-zigzag .grid-item:nth-child(even) { flex-direction: row-reverse; }
@media (max-width: 768px) {
  .posts-zigzag .grid-item, .posts-zigzag .grid-item:nth-child(even) { flex-direction: column; }
  .posts-zigzag .grid-item .thumb-wrap { width: 100%; }
}
.posts-stream { display: flex; flex-direction: column; gap: 32px; }
.posts-stream .grid-item { flex-direction: column; max-width: 680px; margin: 0 auto; width: 100%; }
.posts-stream .grid-item .thumb-wrap .thumb-ratio { padding-top: 56.25%; }
.posts-stream .grid-item .card-body { padding: 20px 0; }
.posts-stream .grid-item h3 { font-size: 1.3rem; }

/* ══════════════════════════════════════════════════════════════
   THUMBNAIL RATIO SYSTEM
   ══════════════════════════════════════════════════════════════ */
.thumb-ratio { position: relative; overflow: hidden; width: 100%; background: var(--border); }
.thumb-ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.thumb-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--border) 25%, var(--surface-2) 100%); }
.thumb-placeholder::after { content: '📷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2rem; opacity: .2; }
.grid-item:hover .thumb-ratio img { transform: scale(1.06); }

/* ══════════════════════════════════════════════════════════════
   SINGLE POST — ARTICLE
   ══════════════════════════════════════════════════════════════ */
.single-post-card {
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  padding: 32px 36px 40px;
  border: 1px solid var(--border);
}
@media(max-width: 600px) { .single-post-card { padding: 18px 16px 28px; } }

.single-post-card .post-header { margin-bottom: 10px; }
.single-post-card .cat-label a {
  display: inline-block; background: var(--primary); color: #fff;
  padding: 4px 14px; border-radius: 0;
  font-family: var(--font-h); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.single-post-card h1 {
  font-size: 2.2rem; line-height: 1.2; margin: 14px 0 16px;
  letter-spacing: -.5px;
}
@media(max-width: 600px) { .single-post-card h1 { font-size: 1.6rem; } }
.single-post-card .post-meta {
  color: var(--muted); font-size: .84rem; font-weight: 500; margin-bottom: 24px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.post-author-link { color: var(--text-2); font-weight: 700; }
.post-author-link:hover { color: var(--primary); }
.single-post-card .featured-image { margin-bottom: 28px; border-radius: 0; overflow: hidden; }
.single-post-card .featured-image img { width: 100%; height: auto; border-radius: 0; }

/* Article typography */
.post-content { font-size: 1.08rem; line-height: 1.85; color: var(--text-2); }
.post-content p { margin-bottom: 1.6em; }
.post-content h2 { font-size: 1.75rem; margin: 2em 0 .75em; padding-bottom: 10px; border-bottom: 2px solid var(--border); color: var(--text); }
.post-content h3 { font-size: 1.35rem; margin: 1.5em 0 .6em; color: var(--text); }
.post-content h4 { font-size: 1.1rem; margin: 1.2em 0 .5em; }
.post-content ul { list-style: disc; padding-left: 24px; margin-bottom: 1.4em; }
.post-content ol { list-style: decimal; padding-left: 24px; margin-bottom: 1.4em; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote {
  border-left: 4px solid var(--primary); padding: 18px 22px;
  margin: 2em 0; background: var(--primary-lt);
  border-radius: 0 0 0 0; color: var(--text-2);
  font-style: italic;
}
.post-content table { width: 100%; border-collapse: collapse; margin-bottom: 2em; border-radius: 0; overflow: hidden; }
.post-content th, .post-content td { padding: 12px 16px; border: 1px solid var(--border); text-align: left; }
.post-content th { background: var(--surface-2); font-family: var(--font-h); }
.post-content img { border-radius: 0; margin: 8px 0; }
.post-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: var(--primary-dk); }
.post-tags { margin: 24px 0 0; }
.tags-wrap { font-size: .84rem; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tags-wrap a { display: inline-block; padding: 4px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0; color: var(--text-2); font-size: .8rem; font-weight: 600; transition: all .2s; }
.tags-wrap a:hover { background: var(--primary-lt); border-color: var(--primary); color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   READING PROGRESS BAR
   ══════════════════════════════════════════════════════════════ */
#reading-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 99999; transition: width .1s linear; width: 0;
  box-shadow: 0 0 8px rgba(230,57,70,.5);
}

/* ══════════════════════════════════════════════════════════════
   INLINE SHARE BAR
   ══════════════════════════════════════════════════════════════ */
.inline-share-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 24px; padding: 14px 16px;
  background: var(--surface-2); border-radius: 0;
  border: 1px solid var(--border);
}
.inline-share-label { font-family: var(--font-h); font-weight: 800; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; flex-shrink: 0; }
.inline-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 0; border: none;
  font-family: var(--font-h); font-weight: 700; font-size: .8rem;
  cursor: pointer; text-decoration: none; transition: all .2s; color: #fff;
}
.inline-share-btn:hover { transform: translateY(-2px); opacity: .9; color: #fff; }
.inline-share-btn.fb { background: #1877f2; }
.inline-share-btn.tw { background: #000; }
.inline-share-btn.wa { background: #25d366; }
.inline-share-btn.cp { background: #64748b; }
.single .sticky-share { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   REACTIONS
   ══════════════════════════════════════════════════════════════ */
.reactions { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0; }
.reaction-btn {
  background: var(--surface-2); border: 1.5px solid var(--border);
  padding: 9px 16px; border-radius: 0;
  font-family: var(--font-b); font-size: .88rem; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.reaction-btn:hover { border-color: var(--primary); background: var(--primary-lt); transform: translateY(-2px); }
.reaction-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.reaction-btn span { font-size: .82rem; color: var(--muted); }
.reaction-btn.active span { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════════════
   AUTHOR BOX
   ══════════════════════════════════════════════════════════════ */
.author-box {
  display: flex; gap: 20px;
  background: var(--surface-2); padding: 22px 24px;
  border-radius: 0; border: 1px solid var(--border);
  margin: 32px 0;
}
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box-info { flex: 1; }
.author-box h4 { margin-bottom: 6px; font-size: 1rem; }
.author-box h4 a { color: var(--text); }
.author-box h4 a:hover { color: var(--primary); }
.author-box p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.author-social-link { display: inline-block; margin: 8px 8px 0 0; font-size: .78rem; font-weight: 700; color: var(--primary); border: 1px solid var(--border); padding: 3px 10px; border-radius: 0; transition: all .2s; }
.author-social-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   RELATED POSTS
   ══════════════════════════════════════════════════════════════ */
.related-posts { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border); }
.related-title { font-family: var(--font-h); font-size: 1.2rem; font-weight: 900; margin-bottom: 20px; padding-left: 12px; border-left: 4px solid var(--primary); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width: 720px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 500px) { .related-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER BOX
   ══════════════════════════════════════════════════════════════ */
.newsletter-box {
  margin: 40px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  border-radius: 0; padding: 36px 40px; text-align: center;
  color: #fff; position: relative; overflow: hidden;
}
.newsletter-box::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.newsletter-inner { position: relative; z-index: 1; }
.newsletter-icon { font-size: 2.5rem; margin-bottom: 12px; }
.newsletter-box h3 { font-size: 1.5rem; color: #fff; margin-bottom: 8px; }
.newsletter-box p { color: rgba(255,255,255,.85); font-size: .95rem; margin-bottom: 20px; }
.newsletter-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.nl-input {
  flex: 1; padding: 12px 18px; border: none; border-radius: 0;
  font-size: .9rem; outline: none; font-family: var(--font-b);
}
.nl-btn {
  padding: 12px 22px; background: var(--text); color: #fff;
  border: none; border-radius: 0; font-family: var(--font-h);
  font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.nl-btn:hover { background: #000; transform: translateY(-1px); }
@media(max-width: 500px) { .newsletter-form { flex-direction: column; } .newsletter-box { padding: 28px 20px; } }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.sticky-sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.widget {
  background: var(--surface); border-radius: 0; overflow: hidden;
  box-shadow: var(--shadow-xs); padding: 20px 22px;
  border: 1px solid var(--border); margin-bottom: 24px;
}
.widget:last-child { margin-bottom: 0; }
.widget-title {
  font-family: var(--font-h); font-size: 1rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--primary);
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.widget ul li { padding: 9px 0; border-bottom: 1px solid var(--border); font-weight: 500; font-size: .9rem; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--text-2); transition: color .2s; }
.widget ul li a:hover { color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   THUMBNAIL WIDGET
   ══════════════════════════════════════════════════════════════ */
.iw-thumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.iw-thumb-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.iw-thumb-item:last-child { border-bottom: none; }
.iw-thumb-img-link { flex-shrink: 0; display: block; position: relative; border-radius: 0; overflow: hidden; }
.iw-thumb-img { width: 78px; height: 62px; object-fit: cover; display: block; transition: transform .4s; }
.iw-thumb-item:hover .iw-thumb-img { transform: scale(1.07); }
.iw-rank-badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--primary); color: #fff;
  font-family: var(--font-h); font-size: .66rem; font-weight: 900;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.iw-popular-list .iw-thumb-item:first-child .iw-rank-badge { background: #f59e0b; }
.iw-popular-list .iw-thumb-item:nth-child(2) .iw-rank-badge { background: #94a3b8; }
.iw-popular-list .iw-thumb-item:nth-child(3) .iw-rank-badge { background: #cd7c2f; }
.iw-thumb-body { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.iw-thumb-cat { font-family: var(--font-h); font-size: .65rem; font-weight: 800; color: var(--primary); text-transform: uppercase; }
.iw-thumb-title { font-family: var(--font-h); font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iw-thumb-title:hover { color: var(--primary); }
.iw-thumb-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.iw-thumb-meta span { font-size: .7rem; color: var(--muted); font-weight: 600; }

/* Spotlight Widget */
.iw-spotlight { border-radius: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.iw-spotlight-img-wrap { display: block; position: relative; overflow: hidden; }
.iw-spotlight-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform .4s; }
.iw-spotlight:hover .iw-spotlight-img { transform: scale(1.04); }
.iw-spotlight-label { position: absolute; top: 10px; left: 10px; background: var(--primary); color: #fff; font-family: var(--font-h); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 10px; border-radius: 0; }
.iw-spotlight-body { padding: 16px 18px 18px; }
.iw-spotlight-cat { font-family: var(--font-h); font-size: .66rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; display: inline-block; margin-bottom: 6px; }
.iw-spotlight-title { display: block; font-family: var(--font-h); font-size: 1rem; font-weight: 900; color: var(--text); line-height: 1.42; margin-bottom: 8px; }
.iw-spotlight-title:hover { color: var(--primary); }
.iw-spotlight-excerpt { font-size: .83rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iw-spotlight-meta { font-size: .72rem; color: var(--muted); margin-bottom: 14px; }
.iw-spotlight-btn { display: inline-block; background: var(--primary); color: #fff; padding: 8px 18px; border-radius: 0; font-family: var(--font-h); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; transition: all .2s; }
.iw-spotlight-btn:hover { background: var(--primary-dk); color: #fff; transform: translateY(-1px); }

/* Gallery Widget */
.iw-gallery-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.iw-gallery-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.iw-gallery-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.iw-gallery-item { aspect-ratio: 1; overflow: hidden; border-radius: 0; cursor: pointer; position: relative; display: block; background: var(--border); }
.iw-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.iw-gallery-item:hover img { transform: scale(1.1); }
.iw-gallery-item::before { content: '+'; position: absolute; inset: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; z-index: 1; }
.iw-gallery-item:hover::before { opacity: 1; }
.iw-gallery-cap { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%); color: #fff; font-family: var(--font-h); font-size: .66rem; font-weight: 700; padding: 12px 8px 6px; z-index: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Category Grid Widget */
.iw-cat-grid-see-all { display: block; font-family: var(--font-h); font-size: .72rem; font-weight: 800; color: var(--primary); text-align: right; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .3px; }
.iw-cat-grid-see-all:hover { opacity: .8; }
.iw-cat-grid-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.iw-cat-grid-item { background: var(--surface); border-radius: 0; overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s; }
.iw-cat-grid-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.iw-cat-grid-img-wrap { display: block; overflow: hidden; }
.iw-cat-grid-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .35s; }
.iw-cat-grid-item:hover .iw-cat-grid-img { transform: scale(1.07); }
.iw-cat-grid-body { padding: 8px 10px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.iw-cat-grid-cat { font-family: var(--font-h); font-size: .6rem; font-weight: 900; color: var(--primary); text-transform: uppercase; letter-spacing: .3px; }
.iw-cat-grid-title { font-family: var(--font-h); font-size: .78rem; font-weight: 800; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.iw-cat-grid-title:hover { color: var(--primary); }
.iw-cat-grid-footer { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.iw-cat-grid-date, .iw-cat-grid-views { font-size: .64rem; color: var(--muted); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   FULL-WIDTH SECTION (above footer)
   ══════════════════════════════════════════════════════════════ */
.fw-section-wrap {
  width: 100%; background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 48px 0 60px; margin-top: 48px;
}
.fw-section-title { font-size: 1.5rem; margin-bottom: 28px; }
.fw-see-all { font-family: var(--font-h); font-size: .78rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .3px; margin-left: auto; padding: 5px 14px; border: 1.5px solid var(--primary); border-radius: 0; transition: all .2s; }
.fw-see-all:hover { background: var(--primary); color: #fff; }
.fw-grid-container.posts-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fw-load-more-wrap { margin-top: 28px; }

/* ══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════ */
.breadcrumbs { max-width: var(--max-width); margin: 0 auto 4px; padding: 10px 20px; font-size: .78rem; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 4px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }
.bc-sep { color: var(--border-dk); margin: 0 2px; }

/* ══════════════════════════════════════════════════════════════
   ARCHIVE HEADER
   ══════════════════════════════════════════════════════════════ */
.archive-header { width: 100%; margin-bottom: 0; }
.archive-header-inner { padding: 28px 20px; max-width: var(--max-width); margin: 0 auto; }
.archive-title { font-family: var(--font-h); font-size: 1.9rem; font-weight: 900; margin: 0 0 8px; }
.archive-desc { font-size: .9rem; color: var(--muted); margin: 8px 0; max-width: 600px; }
.archive-count { display: inline-block; font-size: .75rem; color: var(--muted); font-weight: 700; background: var(--surface-2); padding: 3px 10px; border-radius: 0; border: 1px solid var(--border); }
.archive-header-default { border-bottom: 3px solid var(--primary); background: var(--surface); }
.archive-header-banner { border-left: 6px solid var(--primary); background: var(--surface); border-radius: 0 0 0 0; margin-bottom: 28px; }

/* ══════════════════════════════════════════════════════════════
   AD SLOTS
   ══════════════════════════════════════════════════════════════ */
.ad-slot { text-align: center; padding: 18px; min-height: 90px; background: var(--surface-2); border-radius: 0; border: 1px dashed var(--border-dk); }
.ad-label { font-size: .68rem; color: var(--muted); display: block; margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; }
.infotainia-ad-wrap, .dyads-ad-wrap {
  text-align: center; margin: 24px auto; width: 100%;
}
.inad-label, .dyads-label { display: block; font-size: .68rem; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; font-family: var(--font-b); }
.inad-img-link, .dyads-img-link { display: inline-block; }
.inad-img-link img, .dyads-img-link img, .infotainia-ad-wrap img, .dyads-ad-wrap img { max-width: 100%; height: auto; display: inline-block; border-radius: 0; }
.inad-pos-footer_banner, .dyads-pos-footer_banner, .dyads-sticky {
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.1); padding: 6px 0;
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════ */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 99999; justify-content: center; align-items: center; }
.lightbox-overlay.show { display: flex; }
.lightbox-inner { position: relative; text-align: center; max-width: 90vw; }
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 0; }
.lightbox-close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 2.2rem; cursor: pointer; opacity: .8; transition: opacity .2s; }
.lightbox-close:hover { opacity: 1; }
.lightbox-caption { color: rgba(255,255,255,.8); font-family: var(--font-h); font-size: .88rem; margin-top: 12px; }
.lightbox-article-link { display: inline-block; margin-top: 8px; background: var(--primary); color: #fff; padding: 6px 18px; border-radius: 0; font-family: var(--font-h); font-size: .82rem; font-weight: 800; }
.lightbox-article-link:hover { background: var(--primary-dk); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   EMAIL MODAL
   ══════════════════════════════════════════════════════════════ */
.email-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 99998; justify-content: center; align-items: center; }
.email-modal.show { display: flex; }
.email-box { background: var(--surface); border-radius: 0; padding: 36px 40px; max-width: 420px; width: 90%; text-align: center; }
.email-box h3 { font-size: 1.5rem; margin-bottom: 10px; }
.email-box p { color: var(--muted); margin-bottom: 20px; }
.email-box input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 0; font-size: .9rem; margin-bottom: 10px; outline: none; }
.email-box input:focus { border-color: var(--primary); }
.email-box button:first-of-type { width: 100%; background: var(--primary); color: #fff; border: none; padding: 13px; border-radius: 0; font-family: var(--font-h); font-size: .9rem; font-weight: 800; cursor: pointer; transition: background .2s; }
.email-box button:first-of-type:hover { background: var(--primary-dk); }
.email-close { background: none; border: none; color: var(--muted); margin-top: 10px; cursor: pointer; font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
#site-footer {
  width: 100%; background: #0f1117;
  color: #8a9099; padding: 64px 0 0; margin-top: 0;
  font-size: .92rem;
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; width: 100%; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; margin-bottom: 48px; }
#site-footer .widget { background: transparent; padding: 0; box-shadow: none; margin: 0; border: none; }
#site-footer .widget-title { color: #fff; border-bottom: 2px solid #1c2028; padding-bottom: 12px; margin-bottom: 18px; font-size: 1rem; text-transform: uppercase; letter-spacing: .8px; }
#site-footer .widget ul li { border-bottom: 1px solid #1c2028; padding: 9px 0; font-weight: 500; }
#site-footer .widget ul li:last-child { border-bottom: none; }
#site-footer .widget ul li a { color: #8a9099; transition: color .2s; }
#site-footer .widget ul li a:hover { color: var(--primary); }
#site-footer .widget p { line-height: 1.8; margin-bottom: 12px; }
.footer-info-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 28px 0; margin-top: 0; border-top: 1px solid #1c2028; flex-wrap: wrap; gap: 20px; }
.fib-col { flex: 1; }
.fib-left { text-align: left; }
.fib-left img { max-width: 140px; height: auto; display: block; margin-bottom: 5px; }
.fib-logo { display: block; font-family: var(--font-h); font-size: 24px; font-weight: 900; line-height: 1.1; color: #fff; }
.fib-tagline { display: block; font-size: 12px; color: #555; margin-top: 4px; }
.fib-center { text-align: center; }
.fib-center a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 4px; font-size: 16px; text-decoration: none; background: #1c2028; border-radius: 50%; transition: all .2s; }
.fib-center a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
.fib-right { text-align: right; }
.fib-right a { display: inline-block; margin-left: 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #555; letter-spacing: .5px; transition: color .2s; }
.fib-right a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid #1c2028; padding: 22px 0; text-align: center; font-size: .82rem; color: #444; }

/* ══════════════════════════════════════════════════════════════
   SCROLL-TO-TOP
   ══════════════════════════════════════════════════════════════ */
#scroll-top-btn {
  position: fixed; bottom: 24px; right: 24px;
  width: 42px; height: 42px; background: var(--primary); color: #fff;
  border: none; border-radius: 50%; font-size: 1.1rem;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 999; box-shadow: var(--shadow-md);
  transition: all .2s;
}
#scroll-top-btn:hover { background: var(--primary-dk); transform: translateY(-2px); }
#scroll-top-btn.visible { display: flex; }

/* ══════════════════════════════════════════════════════════════
   SUBMIT FORM
   ══════════════════════════════════════════════════════════════ */
.submit-form label { font-weight: 700; display: block; margin: 16px 0 6px; }
.submit-form input, .submit-form textarea, .submit-form select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 0; font-size: .9rem; background: var(--surface); color: var(--text); outline: none; transition: border .2s; }
.submit-form input:focus, .submit-form textarea:focus { border-color: var(--primary); }
.submit-form textarea { min-height: 130px; resize: vertical; }
.btn-submit { background: var(--primary); color: #fff; border: none; padding: 13px 34px; border-radius: 0; font-family: var(--font-h); font-size: .9rem; font-weight: 800; cursor: pointer; transition: all .2s; }
.btn-submit:hover { background: var(--primary-dk); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   CONTACT FORM (WP CF7)
   ══════════════════════════════════════════════════════════════ */
.wpcf7 { max-width: 600px; margin: 0 auto; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; padding: 12px 14px; margin-bottom: 16px; border: 1.5px solid var(--border); border-radius: 0; font-size: .9rem; background: var(--surface); color: var(--text); outline: none; transition: border .2s; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--primary); }
.wpcf7-submit { background: var(--primary); color: #fff; padding: 12px 30px; border: none; border-radius: 0; font-family: var(--font-h); font-size: .9rem; font-weight: 800; cursor: pointer; transition: background .2s; }
.wpcf7-submit:hover { background: var(--primary-dk); }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR LEFT LAYOUT
   ══════════════════════════════════════════════════════════════ */
.content-wrapper-left #secondary { order: -1; }

/* ══════════════════════════════════════════════════════════════
   MOBILE — responsive breakpoints
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — v4.3 complete mobile system
   Layout order on mobile:
   top-bar → header (sticky) → featured posts carousel →
   hero (single card) → sections as list → sidebar → footer
   ══════════════════════════════════════════════════════════════ */

/* ── TABLET: 1024px ── */
@media (max-width: 1024px) {
    /* Show hamburger, hide desktop search */
    #mobile-menu-toggle { display: block; }
    .header-actions .search-form { display: none; }

    /* Main nav: hidden until toggled */
    .main-navigation {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        width: 100%;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        padding: 8px 20px 16px;
        z-index: 9998;
        border-top: 1px solid var(--border);
    }
    .main-navigation.active { display: block; }
    .main-navigation-inline { display: none; }
    .main-navigation-inline.active { display: block; position: static; box-shadow: none; border: none; padding: 0; }

    /* Mobile menu: vertical list */
    .primary-menu { flex-direction: column; gap: 0; }
    .primary-menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--border); }
    .primary-menu .sub-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 16px;
        display: none !important;
        width: auto;
        animation: none;
    }
    .primary-menu li.open-sub > .sub-menu { display: block !important; }
    .primary-menu .menu-item-has-children > a::after { content: " ▾"; float: right; }

    /* Sidebar: collapse to below main */
    #content { grid-template-columns: 1fr; }
    .content-sidebar-grid { grid-template-columns: 1fr; }
    #secondary { margin-top: 0; }
}

/* ── LARGE PHONE: 900px ── */
@media (max-width: 900px) {
    .posts-grid-4 { grid-template-columns: repeat(2,1fr) !important; }
    .sec-feature-hero { grid-template-columns: 1fr; }
    .sec-feature-main { min-height: 260px; }
    .sec-feature-list { border-left: 1px solid var(--border); border-top: none; }
    .hero-layout-food { grid-template-columns: 1fr; }
    .hero-food-img-link { min-height: 280px; }
    .hero-food-list { border-left: 1px solid var(--border); }
    .hero-food-wide-grid { grid-template-columns: 1fr 1fr; }
    .hero-food-banner { height: 260px; }
    .hero-food-banner-title { font-size: 1.6rem; }
    /* Reduce heights at 900px */
    .hero-item-main  { height: 420px !important; }
    .hero-item-center{ height: 430px !important; }
    .hero-stack-col .hero-item-stack { height: 206px !important; }
    .hero-side-col .hero-item-side   { height: 211px !important; }
}

/* ── PHONE: 768px ── FULL MOBILE LAYOUT ── */
@media (max-width: 768px) {

    /* === TOP BAR: slim, ticker hidden === */
    .site-topbar { font-size: .72rem; }
    .topbar-inner { height: auto; min-height: 34px; padding: 6px 14px; flex-wrap: wrap; gap: 6px; }
    .topbar-left { max-width: 100%; flex: 1; }
    .topbar-right { flex-shrink: 0; }
    .topbar-ticker { display: none; } /* hide ticker on mobile — too cramped */
    .topbar-menu li a { padding: 0 6px; font-size: .7rem; }

    /* === FEATURED POSTS STRIP: touch carousel === */
    .subheader-strip-wrap { border-bottom: 1px solid var(--border); }
    .subheader-strip-inner { padding: 0; }
    .subheader-strip-label { display: none; }
    .subheader-arrow { display: none; }
    .subheader-strip-track {
        gap: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .subheader-strip-track::-webkit-scrollbar { display: none; }
    .subheader-post-card {
        width: 120px !important;
        scroll-snap-align: start;
        flex-shrink: 0;
        border-right: 1px solid var(--border);
    }
    .subheader-post-img-wrap { height: 72px !important; }
    .subheader-post-title { font-size: .68rem; padding: 5px 7px 7px; }

    /* === HERO: single full-width card on mobile === */
    .hero-section-wrap { padding: 8px 0 0; margin: 0; }
    /* Classic layouts 2/3/5: show only main item, stacks/sides hidden */
    .hero-layout-2,
    .hero-layout-3,
    .hero-layout-5 { grid-template-columns: 1fr !important; gap: 0; }
    /* Each visible hero item gets explicit height */
    .hero-item-main,
    .hero-item-center { height: 260px !important; }
    .hero-item-half { height: 240px !important; }
    /* Hide secondary items on mobile — show 1 featured card only */
    .hero-layout-2 .hero-item-half:not(:first-child) { display: none; }
    .hero-layout-3 .hero-stack-col { display: none; }
    .hero-layout-5 .hero-side-col { display: none; }
    /* Feature+List: stack vertically */
    .hero-layout-food { grid-template-columns: 1fr; }
    .hero-food-img-link { min-height: 240px; }
    .hero-food-list { border-left: 1px solid var(--border); border-top: none; }
    .hero-food-item-thumb { width: 56px; height: 44px; }
    .hero-food-wide-grid { grid-template-columns: 1fr 1fr; }
    .hero-food-banner { height: 220px; }
    .hero-food-banner-title { font-size: 1.3rem; padding: 16px; }

    /* === SECTIONS: always list with image top === */
    /* Grid becomes single column */
    .posts-grid { grid-template-columns: 1fr !important; }
    .posts-grid-2,
    .posts-grid-4 { grid-template-columns: 1fr !important; }
    /* Mosaic: single column */
    .posts-mosaic { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
    .posts-mosaic .grid-item:first-child { grid-row: auto; min-height: 240px; position: relative; }
    .posts-mosaic .grid-item:first-child .thumb-wrap { position: absolute; inset: 0; }
    /* Magazine: single column */
    .posts-magazine .mag-hero { grid-template-columns: 1fr; }
    .posts-magazine .mag-stack { flex-direction: column; }
    .posts-magazine .mag-row { grid-template-columns: 1fr; }
    /* List layouts */
    .posts-list .grid-item,
    .posts-list.posts-list-lg .grid-item { flex-direction: column !important; }
    .posts-list .grid-item .thumb-wrap,
    .posts-list.posts-list-lg .grid-item .thumb-wrap { width: 100% !important; }
    /* Feature sections: stack */
    .sec-feature-hero { grid-template-columns: 1fr; }
    .sec-feature-main { min-height: 220px; }
    /* Carousel: single item visible */
    .posts-carousel .grid-item { flex: 0 0 85vw; }
    /* Card: image always full width on top */
    .grid-item { flex-direction: column !important; }
    .grid-item .thumb-wrap { width: 100% !important; }
    .grid-item .thumb-wrap img { height: 200px; }

    /* === SIDEBAR: full width below content === */
    #secondary { width: 100%; display: block; }
    .content-sidebar-grid { grid-template-columns: 1fr; }
    #content { grid-template-columns: 1fr; }
    .sticky-sidebar { position: static; }
    .widget { margin-bottom: 16px; }

    /* === FOOTER === */
    .footer-info-bar { flex-direction: column; text-align: center; gap: 16px; padding: 20px 0; }
    .fib-left, .fib-center, .fib-right { text-align: center; width: 100%; flex: none; }
    .fib-left img { margin: 0 auto 6px; }
    .footer-bottom-menu { justify-content: center; flex-wrap: wrap; }
    .footer-bottom-menu li a { margin: 0 5px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .inf-social { justify-content: center; }

    /* === MISC === */
    .inline-share-bar { gap: 6px; padding: 10px 12px; }
    .inline-share-btn { padding: 7px 12px; font-size: .76rem; }
    .reactions { gap: 6px; }
    .reaction-btn { padding: 7px 12px; font-size: .82rem; }
    .section-title { font-size: 1.05rem; }
    .newsletter-box { padding: 22px 16px; }
    .newsletter-form { flex-direction: column; }
    .related-grid { grid-template-columns: 1fr 1fr; }
    .author-box { flex-direction: column; text-align: center; }
    .author-box img { margin: 0 auto; }
}

/* ── SMALL PHONE: 600px ── */
@media (max-width: 600px) {
    :root { --header-h: 58px; }

    .single-post-card { padding: 14px 14px 24px; }
    .single-post-card h1 { font-size: 1.4rem; letter-spacing: -.3px; }

    /* Hero: single card only */
    .hero-item-main,
    .hero-layout-3 .hero-item-main { height: 220px !important; }
    .hero-section-wrap { padding: 0; }

    #content { padding: 0 12px 40px; }
    .wrap { padding: 0 12px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom-menu li a { font-size: .72rem; margin: 0 4px; }

    /* Posts: compact card on tiny screens */
    .grid-item .thumb-wrap img { height: 180px; }
    .grid-item .card-body { padding: 12px 14px 14px; }
    .grid-item h3 { font-size: .95rem; }

    /* Tabs */
    .cat-tabs { gap: 5px; }
    .cat-tab { padding: 5px 10px; font-size: .76rem; }

    /* Related posts: single col */
    .related-grid { grid-template-columns: 1fr; }
}

/* ── VERY SMALL: 400px ── */
@media (max-width: 400px) {
    .header-inner { padding: 0 10px; }
    .site-title { font-size: 1.3rem; }
    .footer-grid { gap: 16px; }
    .sec-feature-item-thumb { display: none; }
    .hero-food-item-thumb { display: none; }
    .reaction-btn { padding: 6px 10px; font-size: .78rem; }
    .grid-item .thumb-wrap img { height: 160px; }
}



/* ══════════════════════════════════════════════════════════════
   TOP BAR (pre-header)
   ══════════════════════════════════════════════════════════════ */
.site-topbar {
  width: 100%;
  font-size: .78rem;
  font-weight: 600;
  z-index: 1001;
}
.topbar-inner {
  display: flex;
  align-items: center;
  height: 36px;
  gap: 12px;
}
.topbar-label {
  background: var(--primary);
  color: #fff;
  padding: 2px 12px;
  font-family: var(--font-h);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  flex-shrink: 0;
}
.topbar-social { display: flex; gap: 10px; margin-left: auto; }
.topbar-social-link {
  font-size: .75rem; font-weight: 800; opacity: .8;
  transition: opacity .2s; text-decoration: none;
}
.topbar-social-link:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   HEADER STYLE VARIANTS
   ══════════════════════════════════════════════════════════════ */

/* Use CSS variable for header bg so customizer overrides work */
#site-header { background: var(--header-bg, var(--surface)); }

/* --- Centered style --- */
.header-centered .header-centered-logo {
  display: flex; justify-content: center; padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.header-centered .site-branding-center { text-align: center; }
.header-centered .header-centered-nav {
  border-bottom: 2px solid var(--border);
}
.header-centered .header-inner-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px;
}
.header-centered .main-navigation { flex: 1; display: flex; justify-content: center; }

/* --- Magazine style (two rows) --- */
.header-magazine .header-mag-top {
  border-bottom: 1px solid var(--border);
}
.header-mag-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
}
.header-magazine .header-mag-nav {
  background: var(--text);
  border-bottom: 3px solid var(--primary);
}
.header-magazine .header-mag-nav .primary-menu > li > a {
  color: rgba(255,255,255,.85);
}
.header-magazine .header-mag-nav .primary-menu > li:hover > a,
.header-magazine .header-mag-nav .primary-menu > .current-menu-item > a {
  color: #fff; background: rgba(255,255,255,.1);
}
.header-magazine .header-mag-nav .sub-menu { background: var(--surface); }
.header-magazine .header-mag-nav .sub-menu li a { color: var(--text); }

/* --- Bold / colored header --- */
.header-bold { border-bottom: none; }
.header-bold .site-title { color: #fff !important; }
.header-bold .primary-menu > li > a { color: rgba(255,255,255,.9) !important; }
.header-bold .primary-menu > li:hover > a { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.header-bold .dark-toggle { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.header-bold .header-actions .search-form input { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.header-bold .header-actions .search-form input::placeholder { color: rgba(255,255,255,.6); }

/* --- Minimal: nav is inside header-actions, no center nav --- */
.header-minimal .main-navigation-inline { display: flex; }
.header-minimal .main-navigation-inline .primary-menu { flex-direction: row; gap: 2px; }

/* Border toggle */
.header-no-border { box-shadow: none; border-bottom: none !important; }

/* --- Social icons in header --- */
.header-social-icons { display: flex; gap: 8px; align-items: center; }
.header-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: .7rem; font-weight: 900;
  border: 1px solid rgba(0,0,0,.1); text-decoration: none;
  transition: all .2s; background: transparent;
}
.header-social-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   BIMBER-STYLE WIDGET EXTRAS
   ══════════════════════════════════════════════════════════════ */

/* ── Numbered List Widget (like Bimber "Most Shared") ── */
.iw-numbered { list-style: none; margin: 0; padding: 0; }
.iw-numbered-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.iw-numbered-item:last-child { border-bottom: none; }
.iw-numbered-num {
  font-family: var(--font-h); font-size: 1.4rem; font-weight: 900;
  color: var(--border-dk); line-height: 1; flex-shrink: 0;
  min-width: 28px;
}
.iw-numbered-item:nth-child(1) .iw-numbered-num { color: var(--primary); }
.iw-numbered-item:nth-child(2) .iw-numbered-num { color: #f59e0b; }
.iw-numbered-item:nth-child(3) .iw-numbered-num { color: #94a3b8; }
.iw-numbered-title { font-family: var(--font-h); font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1.4; display: block; margin-bottom: 4px; }
.iw-numbered-title:hover { color: var(--primary); }
.iw-numbered-meta { font-size: .72rem; color: var(--muted); font-weight: 600; }

/* ── Tab Widget (Latest | Popular | Hot) ── */
.iw-tab-widget {}
.iw-tab-nav { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.iw-tab-btn {
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  font-family: var(--font-h); font-size: .8rem; font-weight: 800;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s;
}
.iw-tab-btn:hover { color: var(--text); }
.iw-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.iw-tab-panel { display: none; }
.iw-tab-panel.active { display: block; }

/* ── Hot Takes / Tags Cloud widget (Bimber-style) ── */
.iw-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.iw-tag-cloud a, .widget_tag_cloud a {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--border);
  font-size: .78rem !important; font-weight: 700;
  color: var(--text-2); background: var(--surface-2);
  transition: all .2s; text-decoration: none;
}
.iw-tag-cloud a:hover, .widget_tag_cloud a:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ── Author Card Widget (Bimber "About Author") ── */
.iw-author-card { text-align: center; padding: 4px 0; }
.iw-author-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; display: block; }
.iw-author-card h4 { font-size: 1rem; margin-bottom: 6px; }
.iw-author-card p { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.iw-author-social { display: flex; justify-content: center; gap: 8px; }
.iw-author-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border);
  font-size: .75rem; font-weight: 800; color: var(--text-2);
  text-decoration: none; transition: all .2s;
}
.iw-author-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Newsletter Sidebar Widget ── */
.iw-newsletter-widget {
  background: var(--primary);
  color: #fff; padding: 20px; text-align: center;
}
.iw-newsletter-widget .widget-title { color: #fff; border-color: rgba(255,255,255,.3); }
.iw-newsletter-widget p { font-size: .85rem; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.iw-newsletter-widget input {
  width: 100%; padding: 10px 14px; border: none;
  font-size: .88rem; margin-bottom: 8px; background: #fff;
  color: var(--text);
}
.iw-newsletter-widget button {
  width: 100%; padding: 10px; background: var(--text);
  color: #fff; border: none; font-family: var(--font-h);
  font-size: .85rem; font-weight: 800; cursor: pointer;
  transition: background .2s; text-transform: uppercase; letter-spacing: .5px;
}
.iw-newsletter-widget button:hover { background: #000; }

/* ── Video/Media Card Widget ── */
.iw-video-card { position: relative; display: block; overflow: hidden; }
.iw-video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s; }
.iw-video-card:hover img { transform: scale(1.04); }
.iw-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 50px; height: 50px; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; transition: all .2s;
}
.iw-video-card:hover .iw-video-play { background: var(--primary); transform: translate(-50%,-50%) scale(1.08); }
.iw-video-meta { padding: 12px 0 4px; }
.iw-video-meta h4 { font-size: .9rem; margin-bottom: 4px; line-height: 1.4; }
.iw-video-meta h4 a { color: var(--text); }
.iw-video-meta h4 a:hover { color: var(--primary); }
.iw-video-meta span { font-size: .74rem; color: var(--muted); }

/* ── Social Follow Widget (Bimber-style big buttons) ── */
.iw-social-follow { display: flex; flex-direction: column; gap: 8px; }
.iw-social-btn {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  font-family: var(--font-h); font-size: .82rem; font-weight: 800;
  color: #fff; text-decoration: none; transition: opacity .2s;
}
.iw-social-btn:hover { opacity: .88; color: #fff; }
.iw-social-btn .isb-icon { font-size: 1.1rem; flex-shrink: 0; }
.iw-social-btn .isb-count { margin-left: auto; font-size: .72rem; opacity: .85; }
.iw-social-btn.isb-fb { background: #1877f2; }
.iw-social-btn.isb-tw { background: #000; }
.iw-social-btn.isb-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.iw-social-btn.isb-yt { background: #ff0000; }

/* ── Trending Topics / Hot Categories strip ── */
.iw-hot-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.iw-hot-topic-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border);
  font-family: var(--font-h); font-size: .78rem; font-weight: 800;
  color: var(--text-2); background: var(--surface-2); text-decoration: none;
  transition: all .18s;
}
.iw-hot-topic-link::before { content: '#'; color: var(--primary); font-weight: 900; }
.iw-hot-topic-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.iw-hot-topic-link:hover::before { color: #fff; }

/* ── Content-body ad placeholder (Bimber-style "Sponsored" label) ── */
.inad-sponsored-label {
  font-size: .68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; text-align: center; display: block; margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════
   VIRALO / BIMBER SORT BAR  (Latest · Popular · Hot)
   ══════════════════════════════════════════════════════════════ */
.viralo-sort-bar {
  display: flex; gap: 0; align-items: center;
  margin-bottom: 22px; border-bottom: 2px solid var(--border);
}
.viralo-sort-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: none; background: none; cursor: pointer;
  font-family: var(--font-h); font-size: .82rem; font-weight: 800;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s; text-transform: uppercase;
  letter-spacing: .4px;
}
.viralo-sort-btn:hover { color: var(--text); }
.viralo-sort-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.viralo-sort-btn .dot { width: 7px; height: 7px; background: var(--border-dk); }
.viralo-sort-btn.v-hot .dot { background: var(--primary); }
.viralo-sort-btn.v-new .dot { background: #22c55e; }
.viralo-sort-btn.v-trend .dot { background: #f59e0b; }
.viralo-sort-btn.active .dot { background: var(--primary) !important; }

/* ══════════════════════════════════════════════════════════════
   MISC REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Fix: search form input full width on mobile */
.searchform { display: flex; }
.searchform input[type="search"] {
  flex: 1; padding: 7px 14px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: .85rem;
  outline: none; transition: border .2s;
}
.searchform input[type="search"]:focus { border-color: var(--primary); }
.searchform button[type="submit"] {
  padding: 7px 14px; background: var(--primary); color: #fff;
  border: none; cursor: pointer; font-size: .85rem; transition: background .2s;
}
.searchform button[type="submit"]:hover { background: var(--primary-dk, #c1121f); }

/* Fix: WP default search form */
.search-form label { display: none; }
.search-form .search-field { padding: 7px 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .85rem; width: 180px; }
.search-form .search-submit { padding: 7px 14px; background: var(--primary); color: #fff; border: none; cursor: pointer; }

/* Fix: comment form */
.comment-form input, .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .9rem; margin-bottom: 12px; outline: none; transition: border .2s; font-family: var(--font-b); }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--primary); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit { background: var(--primary); color: #fff; border: none; padding: 11px 28px; font-family: var(--font-h); font-size: .9rem; font-weight: 800; cursor: pointer; transition: background .2s; }
.comment-form .submit:hover { background: var(--primary-dk, #c1121f); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--border); }
.comment-author .fn { font-family: var(--font-h); font-weight: 800; font-size: .92rem; }
.comment-metadata { font-size: .76rem; color: var(--muted); margin: 3px 0 10px; }
.comment-content { font-size: .9rem; line-height: 1.7; }

/* Fix: pagination */
.page-numbers {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 32px; flex-wrap: wrap;
}
.page-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); color: var(--text-2);
  font-family: var(--font-h); font-size: .88rem; font-weight: 700;
  text-decoration: none; transition: all .18s;
}
.page-numbers .current { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-numbers a:hover { border-color: var(--primary); color: var(--primary); }

/* Fix: blockquote refinement */
blockquote {
  border-left: 4px solid var(--primary); padding: 16px 20px;
  margin: 1.5em 0; background: var(--surface-2); color: var(--text-2);
  font-size: 1.05em;
}

/* Fix: image captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 6px; font-style: italic; }

/* Fix: post navigation */
.post-navigation { display: flex; gap: 20px; margin: 32px 0; border-top: 1px solid var(--border); padding-top: 24px; }
.post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; }
.post-navigation .nav-next { text-align: right; }
.nav-links a { font-family: var(--font-h); font-size: .88rem; font-weight: 800; color: var(--text); }
.nav-links a:hover { color: var(--primary); }
.nav-links .meta-nav { font-size: .72rem; color: var(--muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Mobile responsive additions ── */
@media (max-width: 768px) {
  .site-topbar { display: none; }
  .header-centered .header-centered-logo { padding: 10px 16px; }
  .header-mag-top-inner { height: 60px; }
  .iw-social-follow { flex-direction: row; flex-wrap: wrap; }
  .iw-social-btn { flex: 1; min-width: 140px; }
}


/* ══════════════════════════════════════════════════════════════
   TOP BAR — ticker + menu
   ══════════════════════════════════════════════════════════════ */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  gap: 12px;
}
.topbar-left  { display:flex; align-items:center; gap:8px; flex-shrink:0; max-width:50%; overflow:hidden; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-label {
  font-family: var(--font-h); font-size:.68rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.8px;
  background:var(--primary); color:#fff;
  padding:2px 10px; flex-shrink:0; white-space:nowrap;
}
.topbar-menu  { display:flex; gap:0; list-style:none; }
.topbar-menu li a { padding:0 8px; font-size:.72rem; font-weight:600; text-decoration:none; color:inherit; opacity:.75; transition:opacity .15s; white-space:nowrap; }
.topbar-menu li a:hover { opacity:1; }
/* Ticker — constrained width, does NOT span full bar */
.topbar-ticker {
  overflow: hidden;
  max-width: 480px;
  width: 100%;
  position: relative;
}
.topbar-ticker-items {
  display: flex;
  gap: 40px;
  animation: scrollTicker 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.topbar-ticker-items:hover { animation-play-state: paused; }
.topbar-ticker-items a {
  font-size:.72rem; font-weight:600;
  color:inherit; opacity:.75; text-decoration:none;
  flex-shrink:0;
}
.topbar-ticker-items a::before {
  content:"● "; color:var(--primary); font-size:.5rem; vertical-align:middle; margin-right:4px;
}
.topbar-ticker-items a:hover { opacity:1; }

/* ══════════════════════════════════════════════════════════════
   FOOD DEMO — HERO LAYOUTS
   ══════════════════════════════════════════════════════════════ */

/* Food: Big image left + numbered list right */
.hero-layout-food {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  min-height: 480px;
}
.hero-food-main {
  position: relative;
  overflow: hidden;
}
.hero-food-img-link {
  display: block;
  height: 100%;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  position: relative;
  text-decoration: none;
  transition: opacity .3s;
}
.hero-food-img-link:hover { opacity: .95; }
.hero-food-main-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 24px;
  z-index: 2;
}
.hero-food-title { font-size: 1.7rem; line-height: 1.2; margin: 8px 0 8px; }
.hero-food-title a { color: #fff; }
.hero-food-title a:hover { opacity: .88; color: #fff; }

/* Right side: numbered list */
.hero-food-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  display: flex;
  flex-direction: column;
}
.hero-food-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .18s;
  flex: 1;
}
.hero-food-item:last-child { border-bottom: none; }
.hero-food-item:hover { background: var(--surface-2); }
.hero-food-num {
  font-family: var(--font-h);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--border-dk);
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
}
.hero-food-item:nth-child(1) .hero-food-num { color: var(--primary); }
.hero-food-item:nth-child(2) .hero-food-num { color: #f59e0b; }
.hero-food-item:nth-child(3) .hero-food-num { color: #94a3b8; }
.hero-food-item-thumb {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
}
.hero-food-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-food-item-body { flex: 1; min-width: 0; }
.hero-food-item-cat { font-family:var(--font-h); font-size:.65rem; font-weight:900; color:var(--primary); text-transform:uppercase; display:block; margin-bottom:3px; }
.hero-food-item-title { font-family:var(--font-h); font-size:.88rem; font-weight:800; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-food-item:hover .hero-food-item-title { color:var(--primary); }
.hero-food-item-date { font-size:.7rem; color:var(--muted); font-weight:500; margin-top:3px; display:block; }

/* Food Wide: full-width banner + 4-col grid */
.hero-layout-food-wide {
  /* max-width and padding are now controlled by .hero-fw / .hero-in-wrap modifier classes */
}
.hero-food-banner {
  width: 100%; height: 380px;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.hero-food-banner-body { position:absolute; bottom:0; left:0; right:0; padding:32px; z-index:2; max-width:var(--max-width); margin:0 auto; }
.hero-food-banner-title { font-size:2.4rem; color:#fff; line-height:1.2; margin:10px 0 10px; letter-spacing:-.5px; }
.hero-food-banner-title a { color:#fff; }
.hero-food-banner-title a:hover { opacity:.88; color:#fff; }
.hero-food-wide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:0; border:1px solid var(--border); border-top:3px solid var(--primary); }
.hero-food-wide-item { text-decoration:none; border-right:1px solid var(--border); display:flex; flex-direction:column; transition:background .18s; }
.hero-food-wide-item:last-child { border-right:none; }
.hero-food-wide-item:hover { background:var(--surface-2); }
.hero-food-wide-thumb { overflow:hidden; }
.hero-food-wide-thumb img { width:100%; height:140px; object-fit:cover; display:block; transition:transform .4s; }
.hero-food-wide-item:hover .hero-food-wide-thumb img { transform:scale(1.05); }
.hero-food-wide-body { padding:12px 14px 14px; flex:1; }
.hero-food-wide-body h4 { font-family:var(--font-h); font-size:.88rem; font-weight:800; color:var(--text); line-height:1.35; margin:4px 0 4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-food-wide-item:hover h4 { color:var(--primary); }

/* ══════════════════════════════════════════════════════════════
   FOOD DEMO — SECTION LAYOUTS
   ══════════════════════════════════════════════════════════════ */
.sec-food-hero { display:grid; grid-template-columns:1.6fr 1fr; gap:0; min-height:420px; border:1px solid var(--border); }
.sec-food-main {
  display: block; min-height: 420px;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden; text-decoration: none;
  transition: opacity .3s;
}
.sec-food-main:hover { opacity:.95; }
.sec-food-main-body { position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2; }
.sec-food-title { font-size:1.5rem; line-height:1.2; margin:8px 0 8px; }
.sec-food-title a { color:#fff; }
.sec-food-title a:hover { opacity:.88; color:#fff; }
.sec-food-list { background:var(--surface); display:flex; flex-direction:column; }
.sec-food-item {
  display:flex; align-items:center; gap:12px; padding:14px 14px;
  border-bottom:1px solid var(--border); text-decoration:none; transition:background .18s; flex:1;
}
.sec-food-item:last-child { border-bottom:none; }
.sec-food-item:hover { background:var(--surface-2); }
.sec-food-num { font-family:var(--font-h); font-size:1.4rem; font-weight:900; color:var(--border-dk); line-height:1; flex-shrink:0; min-width:28px; text-align:center; }
.sec-food-item:nth-child(1) .sec-food-num { color:var(--primary); }
.sec-food-item:nth-child(2) .sec-food-num { color:#f59e0b; }
.sec-food-item:nth-child(3) .sec-food-num { color:#94a3b8; }
.sec-food-item-thumb { width:74px; height:56px; flex-shrink:0; overflow:hidden; }
.sec-food-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sec-food-item-body { flex:1; min-width:0; }
.sec-food-item-body h4 { font-family:var(--font-h); font-size:.85rem; font-weight:800; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sec-food-item:hover h4 { color:var(--primary); }

/* ══════════════════════════════════════════════════════════════
   HERO IMG PLACEHOLDER
   ══════════════════════════════════════════════════════════════ */
.hero-img-placeholder { display:block; width:100%; height:100%; background:linear-gradient(135deg,var(--border) 0%,var(--surface-2) 100%); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-layout-food { grid-template-columns: 1fr; }
  .hero-food-img-link { min-height: 280px; }
  .hero-food-list { flex-direction: row; flex-wrap: wrap; border-left: 1px solid var(--border); border-top: none; }
  .hero-food-item { flex: 0 0 50%; border-right: 1px solid var(--border); }
  .hero-food-wide-grid { grid-template-columns: 1fr 1fr; }
  .hero-food-banner { height: 260px; }
  .hero-food-banner-title { font-size: 1.7rem; }
  .sec-food-hero { grid-template-columns: 1fr; }
  .sec-food-main { min-height: 260px; }
}
@media (max-width: 600px) {
  .hero-food-list { flex-direction: column; }
  .hero-food-item { flex: 1 1 100%; }
  .hero-food-wide-grid { grid-template-columns: 1fr; }
  .topbar-inner { height: 32px; }
}

/* Footer bottom menu */
.footer-bottom-menu { display:flex; flex-wrap:wrap; gap:0; list-style:none; justify-content:flex-end; }
.footer-bottom-menu li a { display:inline-block; margin-left:14px; font-size:.78rem; font-weight:600; text-transform:uppercase; color:#666; letter-spacing:.4px; transition:color .2s; text-decoration:none; }
.footer-bottom-menu li a:hover { color:var(--primary); }

/* ── Content + sidebar grid (used by sidebar sections in front-page) ── */
.content-with-sidebar { width:100%; }
.content-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    gap: 36px;
    align-items: start;
    padding-top: 32px;
    padding-bottom: 48px;
}
@media(max-width:1024px) {
    .content-sidebar-grid { grid-template-columns: 1fr; }
}

/* ── Rename sec-food → sec-feature for clean class names ── */
.sec-feature-hero { display:grid; grid-template-columns:1.6fr 1fr; gap:0; min-height:420px; border:1px solid var(--border); }
.sec-feature-main {
    display:block; min-height:420px;
    background-size:cover; background-position:center;
    position:relative; overflow:hidden; text-decoration:none; transition:opacity .3s;
}
.sec-feature-main:hover { opacity:.95; }
.sec-feature-main-body { position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2; }
.sec-feature-title { font-size:1.5rem; line-height:1.2; margin:8px 0; }
.sec-feature-title a { color:#fff; }
.sec-feature-title a:hover { opacity:.88; color:#fff; }
.sec-feature-list { background:var(--surface); display:flex; flex-direction:column; border-left:1px solid var(--border); }
.sec-feature-item {
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    border-bottom:1px solid var(--border); text-decoration:none; transition:background .18s; flex:1;
}
.sec-feature-item:last-child { border-bottom:none; }
.sec-feature-item:hover { background:var(--surface-2); }
.sec-feature-num { font-family:var(--font-h); font-size:1.4rem; font-weight:900; color:var(--border-dk); line-height:1; flex-shrink:0; min-width:26px; text-align:center; }
.sec-feature-item:nth-child(1) .sec-feature-num { color:var(--primary); }
.sec-feature-item:nth-child(2) .sec-feature-num { color:#f59e0b; }
.sec-feature-item:nth-child(3) .sec-feature-num { color:#94a3b8; }
.sec-feature-item-thumb { width:72px; height:54px; flex-shrink:0; overflow:hidden; }
.sec-feature-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sec-feature-item-body { flex:1; min-width:0; }
.sec-feature-item-body h4 { font-family:var(--font-h); font-size:.85rem; font-weight:800; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sec-feature-item:hover h4 { color:var(--primary); }
.sec-item-cat { font-family:var(--font-h); font-size:.63rem; font-weight:900; color:var(--primary); text-transform:uppercase; display:block; margin-bottom:2px; }
.sec-item-date { font-size:.7rem; color:var(--muted); font-weight:500; margin-top:2px; display:block; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY STRIP (below header)
   ══════════════════════════════════════════════════════════════ */
.cat-strip-wrap {
  width: 100%;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--header-h);
  z-index: 99;
}
.cat-strip-wrap::-webkit-scrollbar { display: none; }
.cat-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.cat-strip-item {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-strip-item:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.cat-strip-item.active,
.cat-strip-all.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 800;
}
@media (max-width: 768px) {
  .cat-strip-wrap { position: sticky; top: 58px; }
  .cat-strip-item { padding: 8px 12px; font-size: .74rem; }
}

/* ── Mobile menu toggle animation ── */
#mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text);
  padding: 4px 6px;
  line-height: 1;
  transition: color .2s;
}
#mobile-menu-toggle:hover { color: var(--primary); }
#mobile-menu-toggle.open { color: var(--primary); }

/* ══════════════════════════════════════════════════════════════
   MOSAIC LAYOUT - fix absolute positioning for images
   ══════════════════════════════════════════════════════════════ */
.posts-mosaic .grid-item:first-child {
  grid-row: 1 / 3;
  position: relative;
  min-height: 500px;
}
.posts-mosaic .grid-item:first-child .thumb-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.posts-mosaic .grid-item:first-child .thumb-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.posts-mosaic .grid-item:first-child .card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.1) 70%, transparent 100%);
  color: #fff;
  z-index: 2;
  padding: 28px 22px;
}
.posts-mosaic .grid-item:first-child h3 { font-size: 1.6rem; color: #fff; }
.posts-mosaic .grid-item:first-child h3 a { color: #fff; }
.posts-mosaic .grid-item:first-child .meta-cat { color: rgba(255,255,255,.85); background: none; position: static; padding: 0; font-size: .72rem; }
.posts-mosaic .grid-item:first-child .card-footer { border-color: rgba(255,255,255,.15); }
.posts-mosaic .grid-item:first-child .card-date { color: rgba(255,255,255,.65); }
/* Mosaic grid: 2 cols, 2 rows */
.posts-mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 250px 250px; gap: 8px; }
@media (max-width: 768px) {
  .posts-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .posts-mosaic .grid-item:first-child { grid-row: auto; min-height: 260px; }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE POST - fix reading progress bar top offset
   ══════════════════════════════════════════════════════════════ */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent, #ff6b35));
  z-index: 99999;
  width: 0;
  transition: width .1s linear;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON
   ══════════════════════════════════════════════════════════════ */
#scroll-top-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 40px; height: 40px;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: var(--shadow-md);
  transition: all .2s;
}
#scroll-top-btn:hover { background: var(--primary-dk, #c1121f); transform: translateY(-2px); }
#scroll-top-btn.visible { display: flex; }

/* ══════════════════════════════════════════════════════════════
   HERO OVERLAY fix - ensure it's above the img
   ══════════════════════════════════════════════════════════════ */
.hero-img-link .hero-overlay { z-index: 1; }
.hero-img-link .hero-content { z-index: 2; }
.hero-img-link .hero-content a { pointer-events: all; }
/* The hero-img-link itself shouldn't block clicks on cat/title links inside */
.hero-img-link { pointer-events: all; }

/* ── Footer social icons alignment fix ── */
.fib-center .inf-social {
  justify-content: center;
  gap: 8px;
}
.fib-center .inf-soc-icon-link {
  width: 36px;
  height: 36px;
  font-size: .8rem;
}
/* Footer dark background overrides */
#site-footer .inf-soc-icon-link {
  opacity: .85;
}
#site-footer .inf-soc-icon-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   v4.4 — LAYOUT FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Homepage section wrappers ── */
.homepage-section { width: 100%; }

/* Sidebar-layout sections: constrained to max-width with grid */
.homepage-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    gap: 36px;
    align-items: start;
    padding: 32px 0 48px;
}
@media (max-width: 1024px) {
    .homepage-sidebar-grid { grid-template-columns: 1fr; }
}

/* fw-section-wrap: ensure it doesn't break layout */
.fw-section-wrap {
    width: 100%;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 40px 0 48px;
    margin-top: 40px;
}
.fw-section-wrap + .fw-section-wrap { margin-top: 0; border-top: none; }
.fw-section-wrap .section-title { margin-bottom: 22px; }

/* ── Hero Layout 4: four equal banner panels ── */
.hero-layout-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.hero-item-banner {
    height: 340px;
    position: relative;
    overflow: hidden;
}
.hero-item-banner .hero-title-sm a { font-size: 1rem; line-height: 1.3; }

@media (max-width: 900px) {
    .hero-layout-4 { grid-template-columns: repeat(2, 1fr); }
    .hero-item-banner { height: 220px; }
}
@media (max-width: 600px) {
    .hero-layout-4 { grid-template-columns: 1fr 1fr; }
    .hero-item-banner { height: 180px; }
}

/* ── Hero Layout 2: two equal halves — ensure both show ── */
.hero-layout-2 .hero-item-half { height: 460px; }

/* ── Hero Layout 3 stack col heights ── */

/* ── Section title with left accent ── */
.homepage-main .section-title,
.homepage-section .section-title {
    font-size: 1.2rem;
    font-weight: 900;
    padding-left: 14px;
    border-left: 4px solid var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.homepage-main .section-title::after,
.homepage-section .section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Mosaic layout: ensure second section size ── */
.posts-mosaic { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    grid-template-rows: 250px 250px; 
    gap: 8px; 
}

/* ── Mobile: restore hidden items for layout 2 ── */
@media (max-width: 768px) {
    .hero-layout-2 .hero-item-half:not(:first-child) { display: none; }
    .hero-layout-2 .hero-item-half:first-child { height: 250px !important; }
    .hero-layout-3 .hero-stack-col { display: none; }
    .hero-layout-3 .hero-item-main { height: 260px !important; }
    .hero-layout-5 .hero-side-col { display: none; }
    .hero-item-center { height: 260px !important; }
    .hero-layout-4 { grid-template-columns: 1fr 1fr; }
    .homepage-sidebar-grid { grid-template-columns: 1fr; }
    .posts-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
    .posts-mosaic .grid-item:first-child { grid-row: auto; }
}

/* ══════════════════════════════════════════════════════════════
   FEATURED SLIDER — v6.0
   ══════════════════════════════════════════════════════════════ */
.feat-slider {
  position: relative;
  overflow: hidden;
  background: #111;
  width: 100%;
}

.feat-slider-track {
  position: relative;
  width: 100%;
}

.feat-slide {
  display: none;
  position: relative;
  width: 100%;
  min-height: 420px;
  max-height: 520px;
}

.feat-slide.active {
  display: flex;
  align-items: stretch;
}

.feat-slide-img-wrap {
  flex: 0 0 60%;
  overflow: hidden;
  display: block;
}

.feat-slide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.feat-slide:hover .feat-slide-img-wrap img {
  transform: scale(1.04);
}

.feat-slide-body {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
  background: #1a1a2e;
  color: #fff;
  gap: 12px;
}

.feat-slide-cat {
  display: inline-block;
  background: var(--primary, #e63946);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 3px 10px;
  border-radius: 3px;
  text-decoration: none;
  align-self: flex-start;
}

.feat-slide-title {
  font-family: var(--font-h, sans-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  text-decoration: none;
  display: block;
}

.feat-slide-title:hover { color: var(--primary, #e63946); }

.feat-slide-exc {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  margin: 0;
}

.feat-slide-date {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
}

/* Nav buttons */
.feat-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.feat-slider-btn:hover { background: var(--primary, #e63946); }
.feat-slider-btn.prev { left: 14px; }
.feat-slider-btn.next { right: 14px; }

/* Dots */
.feat-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}

.feat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
}

.feat-dot.active,
.feat-dot:hover {
  background: var(--primary, #e63946);
  border-color: var(--primary, #e63946);
}

@media (max-width: 768px) {
  .feat-slide.active { flex-direction: column; }
  .feat-slide-img-wrap { flex: 0 0 200px; max-height: 200px; }
  .feat-slide-body { flex: 1; padding: 20px 18px; }
  .feat-slide-title { font-size: 1.1rem; }
  .feat-slide { min-height: auto; }
}

/* ══════════════════════════════════════════════════════════════
   POST TYPE FRONT-END — Quiz, Poll, Meme, Viral List — v6.0
   ══════════════════════════════════════════════════════════════ */

/* ── Empty state ── */
.info-pt-empty {
  background: #fff3cd;
  border: 1px solid #ffc107;
  padding: 16px 20px;
  border-radius: 6px;
  color: #856404;
  font-size: .95rem;
}

/* ══ QUIZ ══ */
.info-quiz-wrap {
  max-width: 680px;
  margin: 0 auto 32px;
  font-family: var(--font-h, sans-serif);
}

.info-quiz-progress {
  height: 6px;
  background: var(--surface-2, #eee);
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}

.info-quiz-progress-bar {
  height: 100%;
  background: var(--primary, #e63946);
  transition: width .4s ease;
}

.info-quiz-counter {
  text-align: right;
  font-size: .8rem;
  color: var(--text-muted, #888);
  margin-bottom: 18px;
}

.info-quiz-question { display: none; }
.info-quiz-question.active { display: block; }

.info-quiz-q-img { margin-bottom: 14px; }
.info-quiz-q-img img { width: 100%; border-radius: 8px; max-height: 320px; object-fit: cover; }

.info-quiz-q-text {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 18px;
  line-height: 1.3;
}

.info-quiz-choices {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-quiz-choice-btn {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  background: var(--surface-2, #f5f5f5);
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  color: var(--text, #222);
}

.info-quiz-choice-btn:hover {
  border-color: var(--primary, #e63946);
  background: var(--surface-3, #ffe0e2);
}

.info-quiz-choice-btn.correct {
  background: #d4edda;
  border-color: #28a745;
  color: #155724;
}

.info-quiz-choice-btn.wrong {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

.info-quiz-hint {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: .9rem;
  border-radius: 0 6px 6px 0;
}

.info-quiz-q-nav { text-align: right; }

.info-quiz-result { text-align: center; padding: 40px 20px; }

.info-quiz-score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--primary, #e63946) calc(var(--score-pct, 0) * 1%), #eee 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
}

.info-quiz-score-circle::after {
  content: '';
  position: absolute;
  inset: 14px;
  background: #fff;
  border-radius: 50%;
}

.info-quiz-score-pct {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--primary, #e63946);
}

.info-quiz-score-msg {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.info-quiz-score-detail {
  color: var(--text-muted, #888);
  margin-bottom: 20px;
}

.info-quiz-retry {
  background: var(--primary, #e63946);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}

/* ══ POLL ══ */
.info-poll-wrap {
  background: var(--surface-2, #f8f8f8);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 560px;
  margin: 0 auto 32px;
}

.info-poll-question {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 20px;
}

.info-poll-ended {
  background: #fff3cd;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: .88rem;
  margin-bottom: 16px;
}

.info-poll-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.info-poll-vote-btn {
  width: 100%;
  padding: 13px 18px;
  background: #fff;
  border: 2px solid var(--primary, #e63946);
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary, #e63946);
  cursor: pointer;
  text-align: left;
  transition: background .2s, color .2s;
}

.info-poll-vote-btn:hover {
  background: var(--primary, #e63946);
  color: #fff;
}

.info-poll-bar-wrap {
  position: relative;
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  padding: 12px 14px;
  min-height: 48px;
}

.info-poll-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary, #e63946)80, rgba(230,57,70,.25));
  border-radius: 8px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.info-poll-bar-label {
  position: relative;
  font-weight: 700;
  font-size: .92rem;
}

.info-poll-bar-pct {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: .9rem;
  color: #333;
}

.info-poll-meta {
  font-size: .8rem;
  color: var(--text-muted, #888);
  text-align: right;
}

/* ══ MEME ══ */
.info-meme-card {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.info-meme-canvas {
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

.info-meme-img {
  width: 100%;
  display: block;
}

.info-meme-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.15;
  padding: 0 12px;
  text-shadow: 3px 3px 0 #000, -3px -3px 0 #000,
               3px -3px 0 #000, -3px 3px 0 #000,
               0 3px 0 #000,  3px 0 0 #000,
               0 -3px 0 #000, -3px 0 0 #000;
}

.info-meme-top    { top: 10px; }
.info-meme-bottom { bottom: 10px; }

.info-meme-watermark {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: .6rem;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .3px;
}

.info-meme-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-fb { background: #1877f2; color: #fff !important; }
.btn-tw { background: #1da1f2; color: #fff !important; }
.btn-wa { background: #25d366; color: #fff !important; }
.btn-outline { background: transparent; border: 2px solid var(--primary, #e63946); color: var(--primary, #e63946) !important; }
.btn-fb, .btn-tw, .btn-wa, .btn-outline {
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  display: inline-block;
  transition: opacity .2s;
}
.btn-fb:hover, .btn-tw:hover, .btn-wa:hover, .btn-outline:hover { opacity: .85; }

/* ══ VIRAL LIST ══ */
.info-viral-list { max-width: 720px; margin: 0 auto 32px; }

/* Numbered style */
.info-viral-numbered .info-viral-item {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border, #eee);
}
.info-viral-numbered .info-viral-item:last-of-type { border-bottom: none; }

.info-viral-item-num {
  flex-shrink: 0;
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary, #e63946);
  line-height: 1;
  min-width: 60px;
  text-align: center;
  font-family: var(--font-h, sans-serif);
}

.info-viral-item-body { flex: 1; }

.info-viral-label {
  display: inline-block;
  background: var(--primary, #e63946);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.info-viral-item-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.25;
}

.info-viral-item-img { margin-bottom: 12px; }
.info-viral-item-img img {
  width: 100%;
  border-radius: 8px;
  max-height: 400px;
  object-fit: cover;
}

.info-viral-embed { margin-bottom: 12px; border-radius: 8px; overflow: hidden; }

.info-viral-item-desc {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text, #333);
}

/* Cards style */
.info-viral-cards .info-viral-item {
  background: var(--surface-2, #f9f9f9);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
}

.info-viral-cards .info-viral-item-num {
  background: var(--primary, #e63946);
  color: #fff;
  font-size: 1.8rem;
  padding: 20px 16px;
  display: flex;
  align-items: flex-start;
}

.info-viral-cards .info-viral-item-body { padding: 20px; }

/* Share bar */
.info-viral-share-bar {
  background: linear-gradient(135deg, var(--primary, #e63946), #457b9d);
  color: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.info-viral-share-count {
  font-weight: 800;
  font-size: 1rem;
  margin-right: auto;
}

@media (max-width: 600px) {
  .info-viral-numbered .info-viral-item { flex-direction: column; gap: 10px; }
  .info-viral-item-num { font-size: 2rem; text-align: left; min-width: auto; }
  .info-meme-text { font-size: clamp(1rem, 5vw, 1.6rem); }
}

/* Post type intro paragraph — v6.2 */
.info-pt-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text, #333);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #eee);
}

/* ══════════════════════════════════════════════════════════════
   DEVANAGARI / HINDI TYPOGRAPHY — v6.3
   Applied when a Devanagari font is active via the body class
   .deva-font added by the theme when a Hindi font is selected.
   ══════════════════════════════════════════════════════════════ */

/* Base Devanagari rendering improvements */
.deva-font body,
.deva-font .post-content,
.deva-font .entry-content,
.deva-font p {
  line-height: 1.9;                /* Matras (vowel marks) need extra vertical space */
  letter-spacing: 0.01em;          /* Slight tracking improves Devanagari readability */
  word-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings in Devanagari */
.deva-font h1,
.deva-font h2,
.deva-font h3,
.deva-font h4,
.deva-font h5,
.deva-font h6,
.deva-font .section-title,
.deva-font .grid-item h3,
.deva-font .hero-title {
  line-height: 1.45;               /* Headings also need more room than Latin */
  letter-spacing: 0;
  word-spacing: 0.08em;
}

/* Card titles in Devanagari */
.deva-font .subheader-post-title,
.deva-font .iw-thumb-title,
.deva-font .feat-slide-title {
  line-height: 1.5;
}

/* Navigation — Devanagari items can be wider, prevent overflow */
.deva-font .primary-menu > li > a {
  letter-spacing: 0;
  word-spacing: 0.05em;
}

/* Breaking ticker */
.deva-font .ticker-item {
  line-height: 1.6;
}

/* Subheader strip post titles */
.deva-font .subheader-post-card .subheader-post-title {
  line-height: 1.45;
  font-size: .75rem;
}

/* ── Noto Sans Devanagari specific fixes ── */
.font-noto-deva body,
.font-noto-deva .post-content {
  font-size: calc(var(--font-size-base) + 1px); /* Noto renders slightly smaller */
}

/* ── Baloo 2 specific (slightly decorative, needs less tracking) ── */
.font-baloo body {
  letter-spacing: -0.01em;
}

/* ── Rozha One / Yatra One — display only, force to headings ── */
.font-rozha h1,
.font-rozha h2,
.font-rozha h3,
.font-yatra h1,
.font-yatra h2,
.font-yatra h3 {
  font-weight: 400; /* These are display fonts with built-in weight */
}

/* ── Hind — clean screen font, tighten slightly ── */
.font-hind body {
  letter-spacing: 0.005em;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   MIXED SCRIPT SUPPORT
   When both Hindi and English text appear on the same page,
   ensure proper rendering for both scripts.
   ══════════════════════════════════════════════════════════════ */

/* The :lang(hi) pseudo-class targets elements with lang="hi" attribute */
:lang(hi) {
  font-family: var(--font-b);
  line-height: 1.9;
}

/* Inline Hindi text within English content */
[lang="hi"] {
  font-family: var(--font-b);
  line-height: 1.9;
  display: inline-block; /* Prevents matra clipping on inline elements */
}