/*
Theme Name: InsideDubaiNow
Theme URI: https://insidedubainow.com
Author: InsideDubaiNow
Author URI: https://insidedubainow.com
Description: Professional UAE news portal theme — real-time data, full API integration, no fake content. Complete rebuild v4.1.1.
Version: 4.1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0+
Text Domain: insidedubainow
Tags: news, magazine, arabic, uae, dubai, responsive, custom-header, custom-menu, featured-images, sticky-post, threaded-comments
*/

/* ============================================================
   DESIGN TOKENS — WHITE & RED BREAKING NEWS STYLE
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary:       #CC0000;
  --color-primary-dark:  #990000;
  --color-primary-light: #FF1A1A;
  --color-accent:        #FF6B00;
  --color-gold:          #C9A84C;

  /* Neutrals */
  --color-black:         #0A0A0A;
  --color-dark:          #1A1A1A;
  --color-dark-2:        #2D2D2D;
  --color-mid:           #555555;
  --color-muted:         #888888;
  --color-border:        #E0E0E0;
  --color-border-light:  #F0F0F0;
  --color-bg:            #F8F8F8;
  --color-white:         #FFFFFF;

  /* Brand supplementary */
  --color-navy:          #1a2744;

  /* Category Colors */
  --cat-uae:             #CC0000;
  --cat-business:        #0066CC;
  --cat-property:        #007755;
  --cat-tech:            #6600CC;
  --cat-life:            #CC6600;
  --cat-lifestyle:       #CC6600;
  --cat-world:           #333333;
  --cat-sports:          #006633;
  --cat-entertainment:   #CC0066;
  --cat-health:          #00997A;
  --cat-guides:          #885500;

  /* Typography */
  --font-heading:        'Playfair Display', 'Georgia', serif;
  --font-body:           'Source Sans 3', 'Helvetica Neue', sans-serif;
  --font-ui:             'DM Sans', 'Arial', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;
  --font-arabic:         'Noto Naskh Arabic', 'Amiri', serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Layout */
  --container-max:       1280px;
  --container-wide:      1440px;
  --sidebar-width:       320px;
  --header-height:       140px;
  --topbar-height:       38px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.14);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.07);

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-black);
  font-weight: 700;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm { gap: var(--space-sm); }
.flex-gap-md { gap: var(--space-md); }

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar {
  background: var(--color-dark);
  color: rgba(255,255,255,0.85);
  height: var(--topbar-height);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 200;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar__date {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255,255,255,0.6);
}

.topbar__date .separator { opacity: 0.3; }

.topbar__fajr {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-gold);
  font-weight: 600;
}

.topbar__fajr svg { width: 13px; height: 13px; }

.topbar__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: rgba(255,255,255,0.7);
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  font-weight: 500;
}

.topbar__link:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
}

.topbar__link--arabic {
  font-family: var(--font-arabic);
  font-size: 0.85rem;
  color: var(--color-gold);
  border: 1px solid rgba(201,168,76,0.3);
}

.topbar__link--arabic:hover {
  background: rgba(201,168,76,0.12);
  color: var(--color-gold);
}

.topbar__social { display: flex; align-items: center; gap: var(--space-xs); }
.topbar__social a {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
.topbar__social a:hover { color: var(--color-white); background: rgba(255,255,255,0.1); }

/* ============================================================
   MAIN HEADER
   ============================================================ */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  z-index: 190;
}

.header__main {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.header__main-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
}

/* Widgets left */
.header__widgets-left,
.header__widgets-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__widgets-right { justify-content: flex-end; }

.header__widget-pill {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.header__widget-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(204,0,0,0.04);
}

.header__widget-pill .widget-icon {
  width: 18px; height: 18px;
  object-fit: contain;
}

.header__widget-pill .widget-label { color: var(--color-muted); font-weight: 400; }
.header__widget-pill .widget-value { color: var(--color-dark); font-weight: 700; }
.header__widget-pill.gold .widget-value { color: var(--color-gold); }
.header__widget-pill.forex .widget-value { color: #0066CC; }
.header__widget-pill.prayer .widget-value { color: var(--color-primary); }

/* Logo */
.site-logo {
  text-align: center;
}

.site-logo a {
  display: inline-block;
}

.site-logo__text {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-black);
  letter-spacing: -1px;
  line-height: 1;
}

.site-logo__text span { color: var(--color-primary); }

.site-logo__tagline {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-top: 3px;
}

.site-logo img { max-height: 70px; margin: 0 auto; }

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */
.nav-primary {
  background: var(--color-primary);
  position: relative;
  z-index: 180;
  overflow: visible; /* MUST be visible so mega menus can drop below */
}

.nav-primary__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-primary__menu {
  display: flex;
  align-items: center;
}

.nav-primary__menu > li {
  position: relative;
}

.nav-primary__menu > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px 16px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  transition: var(--transition-fast);
  position: relative;
}

.nav-primary__menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px; right: 16px;
  height: 3px;
  background: var(--color-white);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  border-radius: 2px 2px 0 0;
}

.nav-primary__menu > li:hover > a,
.nav-primary__menu > li.current-menu-item > a {
  color: var(--color-white);
  background: rgba(0,0,0,0.15);
}

.nav-primary__menu > li:hover > a::after,
.nav-primary__menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Mega Menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0ms linear 150ms;
  z-index: 100000; /* above WP admin bar (99999) */
}

.mega-menu--wide {
  width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.nav-primary__menu > li:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0ms linear 0ms;
}

.mega-menu__col { padding: var(--space-md); }
.mega-menu__col:not(:last-child) { border-right: 1px solid var(--color-border-light); }

.mega-menu__title {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-sm);
}

.mega-menu a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  color: var(--color-dark);
  transition: var(--transition-fast);
  border-bottom: 1px solid transparent;
}

.mega-menu a:hover {
  color: var(--color-primary);
  padding-left: 6px;
}

/* Nav Right Tools */
.nav-primary__tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav-primary__tools button,
.nav-primary__tools a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.nav-primary__tools button:hover,
.nav-primary__tools a:hover {
  background: rgba(0,0,0,0.2);
  color: var(--color-white);
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0ms linear 180ms;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0ms linear 0ms;
}

.search-overlay__form {
  width: 100%;
  max-width: 700px;
  padding: 0 var(--space-lg);
}

.search-overlay__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 2rem;
  padding: var(--space-md) 0;
  outline: none;
}

.search-overlay__input::placeholder { color: rgba(255,255,255,0.3); }

.search-overlay__close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: var(--transition-fast);
}

.search-overlay__close:hover { background: var(--color-primary); }

/* Sticky Header */
.site-header.is-sticky .topbar { display: none; }
.site-header.is-sticky .header__main { display: none; }
.site-header.is-sticky .nav-primary {
  position: fixed;
  top: 0; left: 0; right: 0;
  box-shadow: var(--shadow-md);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ============================================================
   BREAKING NEWS TICKER
   ============================================================ */
.breaking-news-bar {
  background: var(--color-dark);
  color: var(--color-white);
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 3px solid var(--color-primary);
  position: relative;
}
.breaking-news-bar .breaking-news-bar__label {
  flex-shrink: 0;
}

.breaking-news-bar__label {
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0 var(--space-md);
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  gap: var(--space-xs);
}

.breaking-news-bar__label .pulse {
  width: 8px; height: 8px;
  background: var(--color-white);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.breaking-news-bar__track {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.breaking-news-bar__track::before,
.breaking-news-bar__track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.breaking-news-bar__track::before { left: 0; background: linear-gradient(to right, var(--color-dark), transparent); }
.breaking-news-bar__track::after  { right: 0; background: linear-gradient(to left, var(--color-dark), transparent); }

.breaking-news-bar__scroll {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  will-change: transform;
  padding: 0;
  width: max-content;
  /* JS-driven smooth scroll — no CSS animation to avoid glitch */
}
.breaking-news-bar__scroll:hover { /* pause handled by JS */ }

/* Fallback CSS animation if JS fails */
@keyframes ticker-fallback {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.breaking-news-bar__item {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.breaking-news-bar__item::before {
  content: '◆';
  color: var(--color-primary);
  font-size: 0.55rem;
}

.breaking-news-bar__item a:hover { color: var(--color-primary); }

/* ============================================================
   CATEGORY LABEL BADGES
   ============================================================ */
.cat-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  line-height: 1;
}

.cat-label--uae         { background: var(--cat-uae); }
.cat-label--business    { background: var(--cat-business); }
.cat-label--property    { background: var(--cat-property); }
.cat-label--tech        { background: var(--cat-tech); }
.cat-label--life        { background: var(--cat-life); }
.cat-label--lifestyle   { background: var(--cat-lifestyle); }
.cat-label--world       { background: var(--cat-world); }
.cat-label--sports      { background: var(--cat-sports); }
.cat-label--entertainment { background: var(--cat-entertainment); }
.cat-label--health      { background: var(--cat-health); }
.cat-label--guides      { background: var(--cat-guides); }
.cat-label--outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

/* ============================================================
   POST CARDS
   ============================================================ */
.post-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.post-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-border-light);
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__thumb img { transform: scale(1.04); }

.post-card__thumb-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-sm);
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

.post-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
  margin-bottom: var(--space-sm);
  flex: 1;
}

.post-card__title a:hover { color: var(--color-primary); }

.post-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-mid);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

.post-card__author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-family: var(--font-ui);
}

.post-card__author img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.post-card__date {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.post-card__readtime {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Card Variants */
.post-card--horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.post-card--horizontal .post-card__thumb {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.post-card--horizontal .post-card__body { padding: var(--space-sm) var(--space-md); }
.post-card--horizontal .post-card__title { font-size: 0.88rem; }

.post-card--large .post-card__title { font-size: 1.4rem; }
.post-card--large .post-card__thumb { aspect-ratio: 16/10; }

.post-card--overlay {
  position: relative;
}
.post-card--overlay .post-card__thumb {
  aspect-ratio: 4/5;
}
.post-card--overlay .post-card__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  color: var(--color-white);
  border-radius: 0;
}
.post-card--overlay .post-card__title { color: var(--color-white); font-size: 1.05rem; }
.post-card--overlay .post-card__date,
.post-card--overlay .post-card__readtime { color: rgba(255,255,255,0.7); }
.post-card--overlay .post-card__footer { border-top-color: rgba(255,255,255,0.2); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  padding: var(--space-lg) 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
}

.hero-section__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-lg);
}

.hero-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-main__image {
  position: absolute;
  inset: 0;
}

.hero-main__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-main__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.5) 40%,
    transparent 100%
  );
}

.hero-main__content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.hero-main__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.hero-main__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.hero-main__title a:hover { color: var(--color-primary-light); }

.hero-main__excerpt {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-main__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

.hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero-sidebar__item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: var(--transition-fast);
  border: 1px solid transparent;
}

.hero-sidebar__item:hover {
  background: var(--color-white);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.hero-sidebar__thumb {
  width: 90px;
  min-width: 90px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border-light);
}

.hero-sidebar__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-base);
}

.hero-sidebar__item:hover .hero-sidebar__thumb img { transform: scale(1.05); }

.hero-sidebar__content { flex: 1; min-width: 0; }

.hero-sidebar__title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-sidebar__title a:hover { color: var(--color-primary); }

.hero-sidebar__meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 4px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--color-border-light);
  position: relative;
}

.section-header::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--color-primary);
}

.section-header__title {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-header__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 2px;
}

.section-header__link {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.section-header__link:hover { gap: 8px; }

/* ============================================================
   CATEGORY SECTIONS (Homepage)
   ============================================================ */
.category-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.category-section--alt { background: var(--color-bg); }

.category-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-md);
}

.category-section__grid--featured {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
}

.category-section__grid--featured .post-card:first-child {
  grid-row: 1 / 3;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-widget {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-lg);
}

.sidebar-widget__header {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sidebar-widget__header--red { background: var(--color-primary); }
.sidebar-widget__header--gold { background: var(--color-gold); color: var(--color-black); }

.sidebar-widget__body { padding: var(--space-md); }

/* Trending Widget */
.trending-list { display: flex; flex-direction: column; gap: 0; }

.trending-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: var(--transition-fast);
}

.trending-list__item:last-child { border-bottom: none; }
.trending-list__item:hover { padding-left: 4px; }

.trending-list__num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--color-border);
  line-height: 1;
  min-width: 28px;
}

.trending-list__item:nth-child(1) .trending-list__num { color: var(--color-primary); }
.trending-list__item:nth-child(2) .trending-list__num { color: #CC3300; }
.trending-list__item:nth-child(3) .trending-list__num { color: #CC6600; }

.trending-list__title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
}

.trending-list__title a:hover { color: var(--color-primary); }

/* Gold Widget */
.gold-widget-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.83rem;
}
.gold-widget-table th {
  background: var(--color-bg);
  padding: 6px var(--space-sm);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gold-widget-table td {
  padding: 8px var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-dark);
  font-weight: 600;
}
.gold-widget-table td:last-child { text-align: right; color: var(--color-gold); }
.gold-widget-table tr:last-child td { border-bottom: none; }

/* Prayer Times Widget */
.prayer-times { display: flex; flex-direction: column; gap: 0; }
.prayer-times__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.prayer-times__row:last-child { border-bottom: none; }
.prayer-times__name { color: var(--color-dark); font-weight: 600; }
.prayer-times__time { color: var(--color-primary); font-weight: 700; }
.prayer-times__row.is-next {
  background: rgba(204,0,0,0.04);
  padding: 8px var(--space-sm);
  border-radius: var(--radius-sm);
  margin: 2px -var(--space-sm);
}

/* Ad Spaces */
.ad-space {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ad-space--banner { width: 100%; height: 90px; }
.ad-space--rect   { width: 300px; height: 250px; margin: 0 auto var(--space-lg); }
.ad-space--leader { width: 100%; height: 100px; margin: var(--space-lg) auto; }

/* ============================================================
   SINGLE ARTICLE PAGE
   ============================================================ */
.single-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  align-items: flex-start;
}

.article-header { margin-bottom: var(--space-lg); }

.article-header__cats { margin-bottom: var(--space-md); display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.article-header__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: var(--space-md);
}

.article-header__subtitle {
  font-size: 1.15rem;
  color: var(--color-mid);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  font-style: italic;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.article-meta__author-img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.article-meta__author-name {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark);
}

.article-meta__author-title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.article-meta__sep { width: 1px; height: 30px; background: var(--color-border); }

.article-meta__date,
.article-meta__readtime,
.article-meta__views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Social Share */
.social-share {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  flex-wrap: wrap;
}

.social-share__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.social-share__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-white);
  transition: var(--transition-fast);
}

.social-share__btn:hover { opacity: 0.9; transform: translateY(-1px); }
.social-share__btn--fb       { background: #1877F2; }
.social-share__btn--tw       { background: #000000; }
.social-share__btn--wa       { background: #25D366; }
.social-share__btn--li       { background: #0A66C2; }
.social-share__btn--copy     { background: var(--color-mid); }

/* Reading Progress Bar */
.reading-progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-primary);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* Article Content */
.article-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-dark);
}

.article-content p { margin-bottom: var(--space-md); }

.article-content h2 {
  font-size: 1.6rem;
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border-light);
}

.article-content h3 {
  font-size: 1.3rem;
  margin: var(--space-lg) 0 var(--space-sm);
}

.article-content blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-mid);
}

.article-content img {
  width: 100%;
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0 var(--space-sm);
}

.article-content figcaption {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.article-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(204,0,0,0.3);
}

.article-content a:hover {
  text-decoration-color: var(--color-primary);
}

.article-content ul, .article-content ol {
  list-style: initial;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.article-content ul li, .article-content ol li {
  margin-bottom: var(--space-xs);
}

/* In-article Ad */
.article-content .ad-inline {
  margin: var(--space-xl) 0;
}

/* Author Box */
.author-box {
  display: flex;
  gap: var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  border: 1px solid var(--color-border-light);
}

.author-box__photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  flex-shrink: 0;
}

.author-box__info { flex: 1; }

.author-box__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.author-box__role {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.author-box__bio {
  font-size: 0.88rem;
  color: var(--color-mid);
  line-height: 1.6;
}

.author-box__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.author-box__social a {
  width: 30px; height: 30px;
  background: var(--color-border-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: var(--color-mid);
  transition: var(--transition-fast);
}

.author-box__social a:hover { background: var(--color-primary); color: var(--color-white); }

/* Tags */
.article-tags {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  flex-wrap: wrap;
}

.article-tags__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}

.tag-pill {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-mid);
  transition: var(--transition-fast);
}

.tag-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(204,0,0,0.04);
}

/* Related Articles */
.related-posts { margin: var(--space-xl) 0; }

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Sticky Share (Article) */
.sticky-share {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 100;
}

.sticky-share__btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.sticky-share__btn:hover { transform: scale(1.1); }
.sticky-share__btn--fb { background: #1877F2; }
.sticky-share__btn--tw { background: #000; }
.sticky-share__btn--wa { background: #25D366; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.7);
  padding-top: var(--space-2xl);
}

.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__brand { padding-right: var(--space-xl); }

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-white);
}

.footer__brand-name span { color: var(--color-primary); }

.footer__brand-tagline {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
}

.footer__brand-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.88rem;
  transition: var(--transition-fast);
}

.footer__social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.footer__col-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.footer__links { display: flex; flex-direction: column; gap: 10px; }

.footer__links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
  padding-left: 0;
}

.footer__links a:hover {
  color: var(--color-primary);
  padding-left: 6px;
}

/* Newsletter */
.footer__newsletter { margin-top: var(--space-md); }

.newsletter-form {
  display: flex;
  gap: var(--space-sm);
}

.newsletter-form input {
  flex: 1;
  padding: 10px var(--space-md);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition-fast);
}

.newsletter-form input:focus { border-color: var(--color-primary); background: rgba(255,255,255,0.1); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.3); }

.newsletter-form button {
  padding: 10px var(--space-lg);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.newsletter-form button:hover { background: var(--color-primary-dark); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}

.footer__bottom-links { display: flex; gap: var(--space-lg); }
.footer__bottom-links a { color: rgba(255,255,255,0.3); transition: var(--transition-fast); }
.footer__bottom-links a:hover { color: var(--color-white); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-2xl) 0;
}

.pagination a,
.pagination span {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: var(--transition-fast);
}

.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination .prev, .pagination .next { width: auto; padding: 0 var(--space-md); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-lg);
}

.breadcrumbs__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-muted);
  flex-wrap: wrap;
}

.breadcrumbs__sep { color: var(--color-border); }
.breadcrumbs__inner a:hover { color: var(--color-primary); }
.breadcrumbs__current { color: var(--color-dark); font-weight: 600; }

/* ============================================================
   404 PAGE
   ============================================================ */
.page-404 {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.page-404__num {
  font-family: var(--font-heading);
  font-size: 10rem;
  font-weight: 900;
  color: var(--color-border-light);
  line-height: 1;
  margin-bottom: 0;
}

.page-404__num span { color: var(--color-primary); }
.page-404__title { font-size: 1.8rem; margin-bottom: var(--space-md); }
.page-404__desc { color: var(--color-muted); max-width: 400px; margin: 0 auto var(--space-xl); }

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0ms linear 180ms;
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0ms linear 0ms;
}

.mobile-menu {
  position: fixed;
  top: 0; right: -320px;
  width: 320px;
  height: 100%;
  background: var(--color-white);
  z-index: 999;
  overflow-y: auto;
  transition: right 200ms ease;
  box-shadow: var(--shadow-lg);
}

.mobile-menu.is-open { right: 0; }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-dark);
  color: var(--color-white);
}

.mobile-menu__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.mobile-menu__close:hover { background: var(--color-primary); }

.mobile-menu__nav { padding: var(--space-md); }

.mobile-menu__nav > ul > li {
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu__nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
}

.mobile-menu__sub {
  padding: 0 0 var(--space-sm) var(--space-md);
  display: none;
}

.mobile-menu__sub.is-open { display: block; }
.mobile-menu__sub a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-mid);
}
.mobile-menu__sub a:hover { color: var(--color-primary); }

/* ============================================================
   WEATHER WIDGET
   ============================================================ */
.weather-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a6b9e, #0d4f7a);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.weather-widget__city {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.weather-widget__temp {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.weather-widget__desc {
  font-size: 0.82rem;
  opacity: 0.8;
}

.weather-widget__icon { font-size: 3rem; }

/* ============================================================
   LIVE BLOG
   ============================================================ */
.live-blog-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.live-blog-indicator .dot {
  width: 8px; height: 8px;
  background: var(--color-white);
  border-radius: 50%;
  animation: pulse 1s infinite;
}

.live-entry {
  border-left: 3px solid var(--color-border-light);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
  position: relative;
}

.live-entry.is-new { border-left-color: var(--color-primary); }

.live-entry::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border-light);
  position: absolute;
  left: -6.5px;
  top: 6px;
}

.live-entry.is-new::before { background: var(--color-primary); }

.live-entry__time {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-section { margin: var(--space-xl) 0; }
.comment-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.comment {
  display: flex;
  gap: var(--space-md);
}

.comment__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-border-light);
  object-fit: cover;
  flex-shrink: 0;
}

.comment__body { flex: 1; }

.comment__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 6px;
}

.comment__author {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark);
}

.comment__date {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.comment__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-mid);
  background: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
}

/* Comment Form */
.comment-form { margin-top: var(--space-xl); }
.comment-form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--color-dark);
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 10px var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-dark);
  background: var(--color-white);
  transition: var(--transition-fast);
  margin-bottom: var(--space-md);
  outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(204,0,0,0.07); }
.comment-form textarea { min-height: 120px; resize: vertical; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition-fast);
  cursor: pointer;
}

.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); }
.btn--outline { border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }
.btn--dark { background: var(--color-dark); color: var(--color-white); }
.btn--dark:hover { background: var(--color-black); color: var(--color-white); }
.btn--sm { padding: 6px var(--space-md); font-size: 0.78rem; }
.btn--lg { padding: 14px var(--space-xl); font-size: 0.95rem; }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding: 0 var(--space-md); }
  .hero-section__inner { grid-template-columns: 1fr; }
  .hero-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .single-layout { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; }
  .category-section__grid { grid-template-columns: repeat(2,1fr); }
  .category-section__grid--featured { grid-template-columns: 1fr 1fr; }
  .category-section__grid--featured .post-card:first-child { grid-row: auto; }
  .header__main-inner { grid-template-columns: 1fr auto 1fr; }
  .header__widgets-right { display: none; }
  .sticky-share { display: none; }
  .related-posts__grid { grid-template-columns: repeat(2,1fr); }
  /* Prevent mega menu overflow */
  .mega-menu--wide { width: 100%; max-width: 500px; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   GOAL: Better than Khaleej Times mobile experience
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Root overrides ---- */
  :root {
    --space-xl:  20px;
    --space-2xl: 36px;
    --space-lg:  16px;
    --sidebar-width: 100%;
  }

  /* ---- Prevent ANY horizontal overflow ---- */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  * { max-width: 100%; }
  img { width: 100%; height: auto; }

  /* ---- Hide desktop-only elements ---- */
  .topbar           { display: none !important; }
  .header__widgets-left  { display: none !important; }
  .header__widgets-right { display: none !important; }
  .nav-primary      { display: none !important; }
  .sticky-share     { display: none !important; }
  .breadcrumbs      { display: none; }

  /* ---- Mobile header layout ---- */
  .header__main { padding: 10px 0; }
  .header__main-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
  }

  /* Logo */
  .site-logo__text   { font-size: 1.45rem; letter-spacing: -0.5px; }
  .site-logo__tagline { display: none; }

  /* Mobile hamburger always visible */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
  }

  /* Search toggle */
  .search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    color: var(--color-dark);
  }

  /* ---- Mobile breaking news bar ---- */
  .breaking-news-bar { height: 34px; }
  .breaking-news-bar__label {
    padding: 0 10px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    min-width: 90px;
  }
  .breaking-news-bar__scroll {
    font-size: 0.75rem;
    gap: 40px;
  }

  /* ---- Ad banner — reduce height on mobile ---- */
  .ad-space--banner  { height: 60px; font-size: 0.7rem; }
  .ad-space--leader  { height: 60px; font-size: 0.7rem; }
  .ad-space--rect    { width: 100%; height: 200px; }

  /* ---- HERO section ---- */
  .hero-section { padding: var(--space-md) 0; }
  .hero-section__inner { grid-template-columns: 1fr; gap: var(--space-md); }

  .hero-main {
    min-height: 260px;
    border-radius: var(--radius-md);
  }
  .hero-main__content {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }
  .hero-main__title  { font-size: 1.25rem; line-height: 1.25; }
  .hero-main__excerpt { display: none; }
  .hero-main__meta {
    font-size: 0.7rem;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  /* Hero sidebar — horizontal scroll strip on mobile */
  .hero-sidebar {
    display: flex !important;
    overflow-x: auto;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-template-columns: unset;
  }
  .hero-sidebar::-webkit-scrollbar { display: none; }

  .hero-sidebar__item {
    flex-direction: column;
    min-width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--color-border-light);
    padding: 0;
    overflow: hidden;
  }
  .hero-sidebar__thumb {
    width: 100%;
    min-width: unset;
    aspect-ratio: 16/9;
  }
  .hero-sidebar__content { padding: var(--space-sm); }
  .hero-sidebar__title   { font-size: 0.78rem; -webkit-line-clamp: 3; }
  .hero-sidebar__meta    { font-size: 0.65rem; }

  /* ---- Latest news + sidebar layout on mobile ---- */
  /* Stack sidebar below content */
  [style*="grid-template-columns:1fr var(--sidebar-width)"],
  [style*="grid-template-columns: 1fr var(--sidebar-width)"] {
    display: block !important;
  }

  /* ---- Post cards — full width on mobile ---- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .category-section__grid   { grid-template-columns: 1fr !important; }
  .category-section__grid--featured { grid-template-columns: 1fr !important; }

  .post-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .post-card__title  { font-size: 0.95rem; }
  .post-card__thumb  { aspect-ratio: 16/9; }
  .post-card__body   { padding: var(--space-sm) var(--space-md); }
  .post-card__excerpt { display: none; }

  /* Horizontal card for sidebar lists */
  .post-card--horizontal { flex-direction: row !important; }
  .post-card--horizontal .post-card__thumb {
    width: 100px !important;
    min-width: 100px !important;
    aspect-ratio: 4/3;
  }

  /* ---- Section headers ---- */
  .section-header { margin-bottom: var(--space-md); }
  .section-header__title { font-size: 0.95rem; }
  .section-header__link  { font-size: 0.72rem; }

  /* ---- Category sections ---- */
  .category-section { padding: var(--space-lg) 0; }

  /* ---- Single article ---- */
  .single-layout {
    display: block !important;
    padding: var(--space-md) 0;
  }
  .article-header__title  { font-size: 1.4rem; line-height: 1.25; }
  .article-header__subtitle { font-size: 0.95rem; }
  .article-content        { font-size: 0.97rem; line-height: 1.75; }

  .article-meta {
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
  }
  .article-meta__sep    { display: none; }
  .article-meta__views  { display: none; }

  /* Share buttons */
  .social-share { gap: var(--space-xs); flex-wrap: wrap; }
  .social-share__btn {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  .social-share__btn--li { display: none; }

  /* Author box */
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  .author-box__social { justify-content: center; }

  /* Related posts */
  .related-posts__grid { grid-template-columns: 1fr !important; }

  /* Post navigation */
  .post-navigation { grid-template-columns: 1fr !important; }

  /* ---- Sidebar on mobile — full width below content ---- */
  .sidebar {
    margin-top: var(--space-lg);
    width: 100%;
  }
  /* Hide some sidebar widgets on mobile to keep it clean */
  #weatherSidebarWidget { display: none; }

  /* ---- Footer ---- */
  .site-footer { padding-top: var(--space-lg); }
  .footer__main {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }
  .footer__brand    { padding-right: 0; }
  .footer__brand-name { font-size: 1.5rem; }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    font-size: 0.72rem;
    padding: var(--space-md) 0;
  }
  .footer__bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* Newsletter form */
  .newsletter-form { flex-direction: column; }
  .newsletter-form input  { width: 100%; }
  .newsletter-form button { width: 100%; }

  /* ---- Search overlay ---- */
  .search-overlay { padding-top: 80px; }
  .search-overlay__input { font-size: 1.3rem; }

  /* ---- 404 page ---- */
  .page-404__num { font-size: 6rem; }
  .page-404__title { font-size: 1.4rem; }

  /* ---- Pagination ---- */
  .pagination a, .pagination span { width: 34px; height: 34px; font-size: 0.8rem; }
  .pagination .prev, .pagination .next { padding: 0 var(--space-sm); }

  /* ---- Tags ---- */
  .article-tags { gap: var(--space-xs); }
  .tag-pill { font-size: 0.72rem; padding: 3px 8px; }

  /* ---- Comment form ---- */
  .comment-form input[style*="grid"],
  [style*="grid-template-columns:1fr 1fr"] { display: block !important; }
}

/* ---- Very small phones (max 380px) ---- */
@media (max-width: 380px) {
  .site-logo__text { font-size: 1.25rem; }
  .hero-main__title { font-size: 1.1rem; }
  .breaking-news-bar__label { min-width: 80px; padding: 0 8px; font-size: 0.6rem; }
  .hero-sidebar__item { min-width: 125px; max-width: 125px; }
  .post-card__title { font-size: 0.9rem; }
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-red { color: var(--color-primary); }
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.w-full { width: 100%; }
.lazy { opacity: 0; transition: opacity var(--transition-slow); }
.lazy.loaded { opacity: 1; }

/* ============================================================
   v4 FIXES — Header widget links, sidebar polish
   ============================================================ */

/* Header widget pills as links */
a.header__widget-pill {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
a.header__widget-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(204,0,0,0.04);
}
a.header__widget-pill.gold:hover .widget-value { color: var(--color-gold); }
a.header__widget-pill.forex:hover .widget-value { color: #0066CC; }
a.header__widget-pill.prayer:hover .widget-value { color: var(--color-primary); }

/* Prayer times row styling */
.prayer-times__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}
.prayer-times__row:last-child { border-bottom: none; }
.prayer-times__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-dark);
    font-weight: 600;
}
.prayer-times__time {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.88rem;
}
.prayer-times__row.is-next {
    background: rgba(204,0,0,0.05);
    margin: 0 -var(--space-md);
    padding: 9px var(--space-md);
    border-radius: var(--radius-sm);
}

/* Sidebar widget header gold variant */
.sidebar-widget__header--gold {
    background: var(--color-gold);
    color: var(--color-black);
    font-weight: 800;
}

/* Remove default widget styling bleed */
.widget { all: unset; display: block; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 6px 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; }
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--color-dark); }
.widget a:hover { color: var(--color-primary); }

/* Post card — no image placeholder is clean */
.post-card__thumb > div { min-height: 180px; }

/* Highlight next prayer row */
.prayer-times__row.next-prayer {
    background: rgba(204,0,0,0.06);
    padding-left: 6px;
    padding-right: 6px;
    border-radius: var(--radius-sm);
    margin: 2px 0;
}

/* ============================================================
   LAYOUT: Content + Sidebar grid — responsive
   ============================================================ */
.layout-content-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-xl);
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .layout-content-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE BOTTOM NAV BAR — Premium UX (better than KT)
   ============================================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    z-index: 500;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding: 0;
    height: 56px;
}

.mobile-bottom-nav__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--color-muted);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 600;
    transition: color var(--transition-fast);
    padding: 6px 0;
}

.mobile-bottom-nav__item i {
    font-size: 1.1rem;
    line-height: 1;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item.active {
    color: var(--color-primary);
}

.mobile-bottom-nav__item--search {
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    margin: auto;
    align-self: center;
    justify-self: center;
    font-size: 0;
}
.mobile-bottom-nav__item--search i { font-size: 1.1rem; }
.mobile-bottom-nav__item--search:hover { color: white; background: var(--color-primary-dark); }

/* Show bottom nav + add padding to body on mobile */
@media (max-width: 768px) {
    .mobile-bottom-nav { display: block; }
    body { padding-bottom: 56px; }
    main { padding-bottom: 0; }
}

/* ============================================================
   MOBILE: Compact post card list style (for category/archive)
   ============================================================ */
@media (max-width: 768px) {
    /* Category sections on mobile — show as compact list */
    .category-section__grid {
        display: flex !important;
        flex-direction: column;
        gap: var(--space-sm) !important;
    }

    /* Post card compact horizontal on mobile for category sections */
    .category-section .post-card {
        flex-direction: row;
        align-items: flex-start;
    }
    .category-section .post-card .post-card__thumb {
        width: 110px;
        min-width: 110px;
        aspect-ratio: 4/3;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        flex-shrink: 0;
    }
    .category-section .post-card .post-card__body {
        padding: var(--space-sm);
        display: flex;
        flex-direction: column;
    }
    .category-section .post-card .post-card__excerpt { display: none; }
    .category-section .post-card .post-card__title { font-size: 0.88rem; }

    /* Latest news grid on mobile — horizontal compact cards */
    #latestNewsGrid {
        display: flex !important;
        flex-direction: column;
        gap: var(--space-sm);
    }
    #latestNewsGrid .post-card {
        flex-direction: row;
    }
    #latestNewsGrid .post-card .post-card__thumb {
        width: 110px;
        min-width: 110px;
        aspect-ratio: 4/3;
        flex-shrink: 0;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }
    #latestNewsGrid .post-card .post-card__body { padding: var(--space-sm); }
    #latestNewsGrid .post-card .post-card__excerpt { display: none; }
    #latestNewsGrid .post-card .post-card__title { font-size: 0.88rem; }
    #latestNewsGrid .post-card .post-card__footer { display: none; }
}

/* ============================================================
   MOBILE: Header — slim, clean, professional
   ============================================================ */
@media (max-width: 768px) {
    /* Desktop site-header is hidden on mobile — mobile-header-bar replaces it */
    .site-header {
        display: none !important;
    }

    /* Mobile quick access bar below logo — prayer + weather */
    .mobile-header-utils {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        padding: 5px var(--space-md);
        font-family: var(--font-ui);
        font-size: 0.72rem;
        color: var(--color-muted);
        gap: var(--space-md);
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .mobile-header-utils::-webkit-scrollbar { display: none; }

    .mobile-header-utils a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-dark);
        font-weight: 600;
        flex-shrink: 0;
        text-decoration: none;
    }
    .mobile-header-utils .gold-val { color: var(--color-gold); font-weight: 700; }
    .mobile-header-utils .prayer-val { color: var(--color-primary); font-weight: 700; }
    .mobile-header-utils .weather-val { color: #1a6b9e; font-weight: 700; }
}

/* Desktop: hide mobile utils bar */
@media (min-width: 769px) {
    .mobile-header-utils { display: none; }
    .mobile-bottom-nav   { display: none !important; }
}

/* ============================================================
   POST NAVIGATION
   ============================================================ */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 768px) {
    .post-navigation { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE: Make post-card always horizontal in hero sidebar
   on mobile without breaking desktop
   ============================================================ */
@media (max-width: 768px) {
    /* Ensure no element causes horizontal scroll */
    .breaking-news-bar { overflow: hidden; }
    /* nav-primary is hidden on mobile anyway — overflow:hidden not needed and breaks desktop */
    .mega-menu         { display: none !important; }
    .hero-main__gradient { border-radius: var(--radius-md); }

    /* Fix ad spaces on mobile */
    .ad-space { 
        overflow: hidden;
        word-break: break-all;
    }
    .ad-space--banner, .ad-space--leader {
        width: 100% !important;
        max-width: 100%;
    }

    /* Sidebar stacks below on mobile cleanly */
    .layout-content-sidebar > aside,
    .single-layout > aside {
        border-top: 2px solid var(--color-border-light);
        padding-top: var(--space-lg);
        margin-top: var(--space-lg);
    }

    /* Mobile: compress sidebar widgets */
    .sidebar-widget { margin-bottom: var(--space-md); }
    
    /* Hide gold price sidebar table on mobile (shown in header utils) */
    #goldSidebarWidget { display: none; }
}

/* ============================================================
   v6 ADDITIONS
   ============================================================ */

/* Subscribe button in topbar */
.topbar__link--subscribe {
    background: var(--color-primary);
    color: var(--color-white) !important;
    border-radius: var(--radius-sm);
    padding: 4px 10px !important;
    font-weight: 700;
}
.topbar__link--subscribe:hover {
    background: var(--color-primary-dark) !important;
}

/* Mobile subscribe button */
.mobile-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
}
.mobile-subscribe-btn:hover { background: var(--color-primary-dark); color: white; }

/* Mobile header bar (replaces old topbar on mobile) */
.mobile-header-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 190;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: var(--color-white);
}

.mobile-header-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    gap: 12px;
}

.mobile-utils-sep {
    color: var(--color-border);
    font-size: 0.7rem;
    flex-shrink: 0;
    display: none; /* only shown inside mobile-header-utils */
}
@media (max-width: 768px) {
    .mobile-utils-sep { display: inline; }
}

/* ============================================================
   FULL-PAGE SEARCH OVERLAY — v6
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    overflow-y: auto;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-overlay__inner {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-2xl);
    min-height: 100vh;
}

.search-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.search-overlay__logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-black);
}
.search-overlay__logo span { color: var(--color-primary); }

.search-overlay__close {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    color: var(--color-dark);
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
}
.search-overlay__close:hover { background: var(--color-primary); color: white; }

.search-overlay__form-wrap {
    margin-bottom: var(--space-xl);
}

.search-overlay__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-overlay__icon {
    position: absolute;
    left: 16px;
    color: var(--color-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.search-overlay__input {
    width: 100%;
    padding: 16px 48px 16px 48px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    outline: none;
    transition: var(--transition-fast);
}

.search-overlay__input:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(204,0,0,0.08);
}

.search-overlay__input::placeholder { color: var(--color-border); }

.search-overlay__clear {
    position: absolute;
    right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: var(--color-mid);
    cursor: pointer;
    border: none;
    transition: var(--transition-fast);
}
.search-overlay__clear:hover { background: var(--color-primary); color: white; }

/* Suggestions dropdown */
.search-overlay__suggestions { margin-top: 8px; }

.search-overlay__searching {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-muted);
    font-family: var(--font-ui);
}

.search-overlay__suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-fast);
    margin-bottom: 4px;
}
.search-overlay__suggestion-item:hover { background: var(--color-bg); }

.search-overlay__suggestion-thumb {
    width: 64px; min-width: 64px; height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-border-light);
    display: flex; align-items: center; justify-content: center;
}
.search-overlay__suggestion-thumb img { width:100%; height:100%; object-fit:cover; }

.search-overlay__suggestion-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    margin-bottom: 4px;
}

.search-overlay__suggestion-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--color-muted);
}

.search-overlay__view-all {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(204,0,0,0.05);
    border: 1px solid rgba(204,0,0,0.15);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--space-sm);
    transition: var(--transition-fast);
}
.search-overlay__view-all:hover { background: var(--color-primary); color: white; }

.search-overlay__no-results {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--color-muted);
    font-family: var(--font-ui);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Default state sections */
.search-overlay__section { }

.search-overlay__section-title {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-overlay__trending-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: var(--transition-fast);
}
.search-overlay__trending-item:last-child { border-bottom: none; }
.search-overlay__trending-item:hover { background: var(--color-bg); border-radius: var(--radius-sm); }

.search-overlay__trending-num {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-border);
    min-width: 28px;
    line-height: 1;
}
.search-overlay__trending-item:nth-child(1) .search-overlay__trending-num { color: var(--color-primary); }
.search-overlay__trending-item:nth-child(2) .search-overlay__trending-num { color: #CC3300; }
.search-overlay__trending-item:nth-child(3) .search-overlay__trending-num { color: #CC6600; }

.search-overlay__trending-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-dark);
}
.search-overlay__trending-info img {
    width: 48px; height: 38px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.search-overlay__popular-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: var(--transition-fast);
}
.search-overlay__popular-item:last-child { border-bottom: none; }
.search-overlay__popular-item:hover { background: var(--color-bg); border-radius: var(--radius-sm); }
.search-overlay__popular-item img {
    width: 64px; min-width: 64px; height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.search-overlay__popular-thumb-placeholder {
    width: 64px; min-width: 64px; height: 50px;
    background: var(--color-border-light);
    border-radius: var(--radius-sm);
}
.search-overlay__popular-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
}
.search-overlay__popular-meta {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 3px;
}

/* ============================================================
   MOBILE RESPONSIVE — v6
   ============================================================ */
@media (max-width: 768px) {
    /* Show mobile header bar, hide desktop topbar & header */
    .topbar { display: none !important; }
    .header__main { display: none !important; }
    .mobile-header-bar { display: block; }

    /* Mobile header inner */
    .mobile-header-bar__inner .site-logo__text { font-size: 1.3rem; }
    .mobile-header-bar__inner .site-logo__tagline { display: none; }

    /* Full-page search on mobile is full width */
    .search-overlay__inner { padding: var(--space-md); }
    .search-overlay__input { font-size: 1rem; padding: 13px 44px; }
    .search-overlay__header { margin-bottom: var(--space-lg); }

    /* Bottom nav label fix */
    .mobile-bottom-nav__item[data-label="Latest"] span { }
}

@media (min-width: 769px) {
    .mobile-header-bar { display: none !important; }
    .mobile-subscribe-btn { display: none; }
}

/* ============================================================
   v6 FINAL FIXES
   ============================================================ */

/* Hide old mobile-header-utils if it ever renders — replaced by mobile-header-bar */
.mobile-header-utils {
    display: none !important;
}
@media (max-width: 768px) {
    /* Re-enable only inside mobile-header-bar */
    .mobile-header-bar .mobile-header-utils {
        display: flex !important;
    }
}

/* ---- Bigger hero on mobile ---- */
@media (max-width: 768px) {
    .hero-main {
        min-height: 320px !important;
    }
    .hero-main__title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }
    .hero-main__excerpt {
        display: block !important;
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
    }

    /* Mobile: 2-column grid for category section posts */
    .category-section__grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Post cards on mobile: vertical (stacked) for grid */
    .post-card {
        flex-direction: column !important;
        align-items: stretch;
    }
    .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    .post-card .post-card__body {
        padding: 8px !important;
    }
    .post-card .post-card__title {
        font-size: 0.82rem !important;
        -webkit-line-clamp: 3;
        line-height: 1.3;
    }
    .post-card .post-card__meta { margin-bottom: 4px; }
    .post-card .post-card__footer { display: none; }

    /* Latest news grid — also 2-col on mobile */
    #latestNewsGrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #latestNewsGrid .post-card {
        flex-direction: column !important;
    }
    #latestNewsGrid .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    #latestNewsGrid .post-card .post-card__body { padding: 8px !important; }
    #latestNewsGrid .post-card .post-card__footer { display: none; }

    /* BUT hero sidebar items stay as horizontal scroll cards */
    .hero-sidebar__item {
        flex-direction: column !important;
    }
    .hero-sidebar__item .post-card__thumb {
        width: 100% !important;
    }
}

/* Search overlay on mobile — full screen */
@media (max-width: 768px) {
    .search-overlay__input {
        font-size: 1rem !important;
        padding: 14px 44px !important;
    }
    .search-overlay__logo {
        font-size: 1.1rem;
    }
    .search-overlay__section-title {
        font-size: 0.7rem;
    }
}

/* Ensure category sections use red for section-header accent */
.category-section .section-header::before {
    background: var(--color-primary) !important;
}
.category-section .section-header__title::before {
    background: var(--color-primary) !important;
}


/* ============================================================
   v6 FIX PACK — Mobile header, 2-col cards, live panel
   ============================================================ */

/* Mobile header bar — proper layout */
.mobile-header-bar__inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-header-bar .site-logo {
    flex: 1;
    text-align: center;
}

/* Mobile menu — icon LEFT, text LEFT (not space-between) */
.mobile-menu__nav > ul > li > a {
    justify-content: flex-start !important;
    gap: 14px !important;
}

.mobile-menu__nav > ul > li > a i {
    width: 20px;
    text-align: center;
    color: var(--color-primary);
}

/* Live panel — collapse below top stories on mobile */
@media (max-width: 768px) {
    /* KT top stories + live panel — stack on mobile */
    .container > div[style*="grid-template-columns:1fr 340px"],
    .container > div[style*="grid-template-columns: 1fr 340px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* 2-column post card grid on mobile for homepage */
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Top stories section on mobile — 2 col */
    section .grid-2 .post-card {
        flex-direction: column !important;
    }
    section .grid-2 .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    section .grid-2 .post-card .post-card__body { padding: 8px !important; }
    section .grid-2 .post-card .post-card__title { font-size: 0.82rem !important; }
    section .grid-2 .post-card .post-card__footer { display: none; }

    /* Breaking news bar on mobile */
    .breaking-news-bar {
        flex-wrap: nowrap;
        height: 36px;
    }
    .breaking-news-bar__label {
        font-size: 0.62rem !important;
        padding: 0 8px !important;
        min-width: 82px;
        flex-shrink: 0;
    }
}

/* ============================================================
   MOBILE HEADER: Hide desktop topbar + main header,
   show only mobile-header-bar
   ============================================================ */
@media (max-width: 768px) {
    .topbar { display: none !important; }
    .header__main { display: none !important; }
    .nav-primary { display: none !important; }
    .mobile-header-bar { display: block !important; }
}

@media (min-width: 769px) {
    .mobile-header-bar { display: none !important; }
}

/* ============================================================
   CATEGORY SECTION GRID — 2 col on mobile (fixes right side)
   ============================================================ */
@media (max-width: 768px) {
    .category-section__grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .category-section .post-card {
        flex-direction: column !important;
        align-items: stretch;
    }
    .category-section .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
        flex-shrink: unset;
    }
    .category-section .post-card .post-card__body { padding: 8px !important; }
    .category-section .post-card .post-card__title { font-size: 0.82rem !important; }
    .category-section .post-card .post-card__excerpt { display: none; }
    .category-section .post-card .post-card__footer { display: none; }
}

/* ============================================================
   LATEST NEWS GRID — 2 col on mobile
   ============================================================ */
@media (max-width: 768px) {
    #latestNewsGrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #latestNewsGrid .post-card {
        flex-direction: column !important;
    }
    #latestNewsGrid .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    #latestNewsGrid .post-card .post-card__body { padding: 8px !important; }
    #latestNewsGrid .post-card .post-card__title { font-size: 0.82rem !important; }
    #latestNewsGrid .post-card .post-card__footer { display: none; }
    #latestNewsGrid .post-card .post-card__excerpt { display: none; }
}

/* Newsletter subscribe page dark background */
.newsletter-page-wrap {
    background: linear-gradient(135deg,#0A0A0A 0%,#1A1A1A 50%,#0A0A0A 100%);
}

/* Sitemap responsive */
@media (max-width: 768px) {
    .page-sitemap-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Arabic page RTL */
[dir="rtl"] .post-card__body { text-align: right; }
[dir="rtl"] .article-header__title { text-align: right; }


/* ================================================================
   IDN FINAL MOBILE OVERRIDES — v6 Complete Fix
   These override any conflicting earlier rules
   ================================================================ */

/* 1. Mobile header bar — sticky, always visible on mobile */
@media (max-width: 768px) {
    .mobile-header-bar {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 500 !important;
        background: var(--color-white) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
        border-bottom: 2px solid var(--color-primary) !important;
    }
    .mobile-header-bar__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        gap: 12px !important;
    }
    .mobile-header-bar .site-logo { flex:1; text-align:center; }
    .mobile-header-bar .site-logo__text { font-size: 1.35rem !important; }

    /* Mobile utils row (Gold · Prayer · Weather) */
    .mobile-header-bar .mobile-header-utils {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        padding: 5px 16px;
        font-family: var(--font-ui);
        font-size: 0.72rem;
        color: var(--color-muted);
        gap: var(--space-md);
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }
    .mobile-header-bar .mobile-header-utils::-webkit-scrollbar { display:none; }
    .mobile-header-bar .mobile-header-utils a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-dark);
        font-weight: 600;
        flex-shrink: 0;
        text-decoration: none;
    }
}

/* 2. Desktop: hide mobile bar */
@media (min-width: 769px) {
    .mobile-header-bar { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
}

/* 3. Mobile menu — icon LEFT, text LEFT, properly spaced */
.mobile-menu__nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 13px 0 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark) !important;
    border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu__nav > ul > li > a i {
    width: 22px;
    text-align: center;
    color: var(--color-primary);
    font-size: 1rem;
}

/* 4. Post cards — 2-column vertical on mobile */
@media (max-width: 768px) {
    /* Reset old horizontal-card overrides */
    .post-card { flex-direction: column !important; }
    .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        aspect-ratio: 16/9 !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    .post-card .post-card__body { padding: 8px 10px !important; }
    .post-card .post-card__title { font-size: 0.83rem !important; line-height:1.3 !important; }
    .post-card .post-card__excerpt { display: none !important; }
    .post-card .post-card__footer { display: none !important; }

    /* 2-column grids on mobile */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .category-section__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    #latestNewsGrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* Hero sidebar stays as horizontal scroll */
    .hero-sidebar { display: flex !important; flex-direction: row !important; overflow-x: auto !important; }
    .hero-sidebar__item { flex-direction: column !important; min-width: 145px; max-width: 145px; flex-shrink: 0; }
    .hero-sidebar__item .post-card__thumb { width: 100% !important; }

    /* KT-style panel: stack below on mobile */
    .idn-top-stories-live { grid-template-columns: 1fr !important; }
}

/* 5. Breaking news ticker: always proper on mobile */
@media (max-width: 768px) {
    .breaking-news-bar { height: 36px; }
    .breaking-news-bar__label { min-width: 80px; flex-shrink: 0; font-size: 0.62rem; padding: 0 8px; }
    .breaking-news-bar__scroll { font-size: 0.75rem; gap: 40px; }
}

/* 6. Body padding for bottom nav — handled by final overrides below */
@media (max-width: 767px) {
    body { padding-bottom: 62px; }
    /* old mobile-bottom-nav replaced by idn-bottom-nav */
    .mobile-bottom-nav { display: none !important; }
}

/* 7. Hero section on mobile */
@media (max-width: 768px) {
    .hero-section { padding: 12px 0; }
    .hero-section__inner { grid-template-columns: 1fr; gap: 12px; }
    .hero-main { min-height: 300px !important; border-radius: var(--radius-md); }
    .hero-main__content { padding: var(--space-lg) 14px 14px; }
    .hero-main__title { font-size: 1.3rem !important; line-height: 1.2 !important; }
    .hero-main__excerpt { display: block !important; font-size: 0.8rem; -webkit-line-clamp: 2; }
    .hero-main__meta { font-size: 0.68rem; gap: 8px; flex-wrap: wrap; }
}

/* 8. Section headers on mobile */
@media (max-width: 768px) {
    .section-header { margin-bottom: 12px; }
    .section-header__title { font-size: 0.88rem; }
    .section-header__link { font-size: 0.7rem; }
}

/* 9. Category section padding on mobile */
@media (max-width: 768px) {
    .category-section { padding: 16px 0; }
}

/* 10. Single article mobile */
@media (max-width: 768px) {
    .single-layout { display: block !important; padding: 14px 0; }
    .article-header__title { font-size: 1.35rem; line-height: 1.2; }
    .article-content { font-size: 0.97rem; line-height: 1.75; }
    .article-meta { gap: 8px; padding: 10px 0; flex-wrap: wrap; }
    .article-meta__sep { display: none; }
    .social-share { gap: 6px; flex-wrap: wrap; }
    .social-share__btn { padding: 6px 10px; font-size: 0.72rem; }
    .social-share__btn--li { display: none; }
    .related-posts__grid { grid-template-columns: 1fr 1fr !important; }
    .author-box { flex-direction: column; align-items: center; text-align: center; }
    .author-box__social { justify-content: center; }
}

/* 11. Footer mobile */
@media (max-width: 768px) {
    .footer__main { grid-template-columns: 1fr !important; gap: var(--space-lg); }
    .footer__bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 0.72rem; }
    .footer__bottom-links { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input, .newsletter-form button { width: 100%; }
}

/* 12. Ad spaces mobile */
@media (max-width: 768px) {
    .ad-space--banner, .ad-space--leader { height: 60px !important; width: 100% !important; }
    .ad-space--rect { width: 100%; height: 200px; }
}

/* 13. Search overlay full-screen on mobile */
@media (max-width: 768px) {
    .search-overlay__inner { padding: 16px; }
    .search-overlay__input { font-size: 1rem !important; padding: 14px 44px !important; }
    .search-overlay__logo { font-size: 1.1rem; }
}

/* 14. Sidebar on mobile */
@media (max-width: 768px) {
    .sidebar { margin-top: var(--space-lg); width: 100%; }
    .sidebar-widget { margin-bottom: 14px; }
    #goldSidebarWidget { display: none; }
}

/* 15. Topbar — always hidden on mobile */
@media (max-width: 768px) {
    .topbar { display: none !important; }
}


/* ============================================================
   IDN v6 — HOMEPAGE HERO CARDS
   Featured card LEFT + sidebar story cards RIGHT
   ============================================================ */

.idn-hero-cards {
    padding: var(--space-lg) 0;
    background: var(--color-white);
}

.idn-hero-cards__inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-lg);
    align-items: flex-start;
}

/* Featured Card */
.idn-featured-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}
.idn-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.idn-featured-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-border-light);
}
.idn-featured-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}
.idn-featured-card:hover .idn-featured-card__thumb img { transform: scale(1.04); }
.idn-featured-card__nothumb {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f0f0f0,#e0e0e0);
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 3rem;
}
.idn-featured-card__badge {
    position: absolute; top: var(--space-sm); left: var(--space-sm);
}
.badge-live {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-primary); color: white;
    font-family: var(--font-ui); font-size: 0.65rem; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-sm);
}
.badge-dot {
    width: 6px; height: 6px; background: white; border-radius: 50%;
    display: inline-block; animation: pulse 1s infinite;
}
.idn-featured-card__body {
    padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.idn-featured-card__title {
    font-family: var(--font-heading);
    font-size: 1.55rem; font-weight: 900; line-height: 1.25;
    color: var(--color-black); margin: 0;
}
.idn-featured-card__title a { color: inherit; text-decoration: none; }
.idn-featured-card__title a:hover { color: var(--color-primary); }
.idn-featured-card__excerpt {
    font-size: 0.92rem; color: var(--color-mid); line-height: 1.6; margin: 0;
}
.idn-featured-card__meta {
    display: flex; align-items: center; gap: var(--space-sm);
    flex-wrap: wrap; margin-top: var(--space-xs);
    font-family: var(--font-ui); font-size: 0.72rem; color: var(--color-muted);
}
.idn-featured-card__meta .meta-sep { opacity: 0.4; }

/* Hero Sidebar */
.idn-hero-sidebar {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.idn-hero-sidebar__header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px var(--space-md);
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border-light);
    font-family: var(--font-ui); font-size: 0.72rem; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary);
}
.idn-hero-sidebar__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-primary);
    animation: pulse 1.5s infinite; display: inline-block;
    flex-shrink: 0;
}
.idn-hero-sidebar__card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
    text-decoration: none;
}
.idn-hero-sidebar__card:last-child { border-bottom: none; }
.idn-hero-sidebar__card:hover { background: var(--color-bg); }
.idn-hero-sidebar__thumb {
    width: 80px; min-width: 80px; height: 64px;
    border-radius: var(--radius-sm); overflow: hidden;
    flex-shrink: 0; display: block;
    background: var(--color-border-light);
}
.idn-hero-sidebar__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition-slow);
}
.idn-hero-sidebar__card:hover .idn-hero-sidebar__thumb img { transform: scale(1.05); }
.idn-hero-sidebar__nothumb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 1.2rem;
}
.idn-hero-sidebar__content { flex: 1; min-width: 0; }
.idn-hero-sidebar__top {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.idn-hero-sidebar__title {
    font-family: var(--font-heading); font-size: 0.875rem;
    font-weight: 700; color: var(--color-dark); line-height: 1.35;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idn-hero-sidebar__title a { color: inherit; text-decoration: none; }
.idn-hero-sidebar__title a:hover { color: var(--color-primary); }
.idn-hero-sidebar__meta {
    font-family: var(--font-ui); font-size: 0.68rem;
    color: var(--color-muted); margin-top: 4px;
}
.badge-breaking-xs {
    font-family: var(--font-ui); font-size: 0.58rem; font-weight: 800;
    color: var(--color-primary); letter-spacing: 0.5px; text-transform: uppercase;
}

/* ============================================================
   CATEGORY LABEL SIZES — subtler small variants
   ============================================================ */
.cat-label--sm {
    font-size: 0.65rem !important;
    padding: 2px 7px !important;
}
.cat-label--xs {
    font-size: 0.58rem !important;
    padding: 1px 5px !important;
    letter-spacing: 0.3px;
}

/* ============================================================
   IDN 2-COLUMN GRID — used on homepage + category sections
   ============================================================ */
.idn-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

/* ============================================================
   LATEST NEWS WRAP — white bg with padding
   ============================================================ */
.idn-latest-wrap {
    padding: var(--space-xl) 0;
    background: var(--color-white);
}

/* ============================================================
   POST CARD — clean/slim overrides for new card style
   ============================================================ */
.post-card__badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-ui); font-size: 0.6rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 3px;
}
.post-card__badge--breaking {
    background: var(--color-primary); color: white;
}
.post-card__badge--sponsored {
    background: var(--color-gold); color: var(--color-black);
}

/* Post card: no excerpt in default card — cleaner KT-style */
.post-card__excerpt { display: none; }

/* ============================================================
   MOBILE — hero cards responsive
   ============================================================ */
@media (max-width: 1024px) {
    .idn-hero-cards__inner {
        grid-template-columns: 1fr 280px;
    }
}

@media (max-width: 768px) {
    /* Hero stacks vertically */
    .idn-hero-cards__inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .idn-featured-card__title { font-size: 1.2rem; }
    .idn-featured-card__excerpt { display: none; }

    /* Hero sidebar: horizontal scroll on mobile */
    .idn-hero-sidebar {
        flex-direction: row;
        overflow-x: auto;
        border-radius: var(--radius-md);
        scrollbar-width: none;
    }
    .idn-hero-sidebar::-webkit-scrollbar { display: none; }
    .idn-hero-sidebar__header { display: none; }
    .idn-hero-sidebar__card {
        flex-direction: column;
        min-width: 145px; max-width: 145px;
        padding: 0; border-bottom: none;
        border-right: 1px solid var(--color-border-light);
        flex-shrink: 0;
    }
    .idn-hero-sidebar__thumb {
        width: 100%; min-width: unset; height: 90px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .idn-hero-sidebar__content { padding: var(--space-sm); }
    .idn-hero-sidebar__title { font-size: 0.75rem; -webkit-line-clamp: 3; }

    /* 2-col grid stays 2 columns on mobile */
    .idn-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    /* Post cards in the 2-col grid: stacked (image top) */
    .idn-grid-2 .post-card {
        flex-direction: column !important;
    }
    .idn-grid-2 .post-card .post-card__thumb {
        width: 100% !important; min-width: unset !important;
        aspect-ratio: 16/9; border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    .idn-grid-2 .post-card .post-card__body { padding: var(--space-sm); }
    .idn-grid-2 .post-card .post-card__title { font-size: 0.82rem; }
    .idn-grid-2 .post-card .post-card__footer { flex-direction: column; align-items: flex-start; gap: 2px; }

    /* Latest news wrap */
    .idn-latest-wrap { padding: var(--space-md) 0; }

    /* Category sections also use 2-col on mobile */
    .category-section .idn-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }
    .category-section .idn-grid-2 .post-card {
        flex-direction: column !important;
    }
    .category-section .idn-grid-2 .post-card .post-card__thumb {
        width: 100% !important; aspect-ratio: 16/9;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
}

/* ============================================================
   DESKTOP NAV — E-Paper + Subscribe button alignment fix
   ============================================================ */
.nav-primary__tools {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.nav-primary__tools a,
.nav-primary__tools button {
    white-space: nowrap;
}

/* ============================================================
   MOBILE MENU — left-aligned items (already in HTML, safety belt)
   ============================================================ */
.mobile-menu__nav ul li a {
    justify-content: flex-start !important;
}

/* ============================================================
   ADVERTISE PAGE — email button responsive fix
   ============================================================ */
@media (max-width: 600px) {
    a[href^="mailto:"] {
        word-break: break-all;
        font-size: 0.82rem !important;
        padding: 12px 20px !important;
    }
}

/* ============================================================
   SECTION HEADER — consistent across pages
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border-light);
}
.section-header::before {
    content: '';
    display: none;
}
.section-header__title {
    font-family: var(--font-heading);
    font-size: 1.1rem; font-weight: 900;
    color: var(--color-black); margin: 0;
    position: relative; padding-left: 12px;
}
.section-header__title::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}
.section-header__link {
    font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700;
    color: var(--color-primary); display: flex; align-items: center; gap: 4px;
    white-space: nowrap; text-decoration: none;
}
.section-header__link:hover { color: var(--color-primary-dark); }



/* ============================================================
   TOPBAR — Subscribe as proper pill button
   ============================================================ */
.topbar__link--subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: var(--color-primary);
    color: white !important;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.topbar__link--subscribe-btn:hover {
    background: var(--color-primary-dark);
    color: white !important;
}

/* ============================================================
   HERO 3-COLUMN ROW (legacy — kept only for idn-hero-3col)
   ============================================================ */
/* .idn-hero-row is defined in v7 section below */

.idn-hero-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.idn-hero-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.idn-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.idn-hero-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-border-light);
    flex-shrink: 0;
}
.idn-hero-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}
.idn-hero-card:hover .idn-hero-card__thumb img { transform: scale(1.04); }

.idn-hero-card__nothumb {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f0f0f0,#e8e8e8);
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 2.5rem;
}

.idn-badge {
    position: absolute;
    top: var(--space-sm); left: var(--space-sm);
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-ui); font-size: 0.62rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px;
}
.idn-badge--live {
    background: var(--color-primary); color: white;
}
.idn-badge--sponsored {
    background: var(--color-gold); color: var(--color-black);
}
.idn-badge__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: white; display: inline-block;
    animation: pulse 1s infinite; flex-shrink: 0;
}

.idn-hero-card__body {
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: 7px;
    flex: 1;
}
.idn-hero-card__title {
    font-family: var(--font-heading);
    font-size: 1.1rem; font-weight: 800; line-height: 1.3;
    color: var(--color-black); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idn-hero-card__title a { color: inherit; text-decoration: none; }
.idn-hero-card__title a:hover { color: var(--color-primary); }
.idn-hero-card__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-family: var(--font-ui); font-size: 0.72rem; color: var(--color-muted);
    margin-top: auto; padding-top: var(--space-xs);
}

/* ============================================================
   POST CARD — pure KT style
   ============================================================ */
.post-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.post-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-border-light);
    flex-shrink: 0;
}
.post-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__nothumb {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f5f5f5,#eaeaea);
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 2rem; min-height: 140px;
}
.post-card__badge {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-ui); font-size: 0.58rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px;
}
.post-card__badge--breaking { background: var(--color-primary); color: white; }
.post-card__badge--sponsored { background: var(--color-gold); color: var(--color-black); }
.post-card__badge-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: white; display: inline-block; animation: pulse 1s infinite;
}
.post-card__body {
    padding: 12px var(--space-md);
    display: flex; flex-direction: column; gap: 6px;
    flex: 1;
}
.post-card__title {
    font-family: var(--font-heading);
    font-size: 1rem; font-weight: 700; line-height: 1.3;
    color: var(--color-black); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__meta {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-ui); font-size: 0.72rem; color: var(--color-muted);
    margin-top: auto;
}
.post-card__meta-sep { opacity: 0.4; }
/* Hide old elements no longer used */
.post-card__footer,
.post-card__excerpt,
.post-card__author,
.post-card__date,
.post-card__readtime { display: none !important; }

/* ============================================================
   RESPONSIVE — hero 3-col + grid
   ============================================================ */
@media (max-width: 1024px) {
    .idn-hero-3col { grid-template-columns: 1fr 1fr; }
    .idn-hero-3col .idn-hero-card:last-child { grid-column: 1 / -1; flex-direction: row; }
    .idn-hero-3col .idn-hero-card:last-child .idn-hero-card__thumb {
        width: 280px; min-width: 280px; aspect-ratio: unset; height: auto;
    }
}

@media (max-width: 768px) {
    /* Hero: 1 column stacked on mobile */
    .idn-hero-3col {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    .idn-hero-3col .idn-hero-card:last-child { flex-direction: column; }
    .idn-hero-3col .idn-hero-card:last-child .idn-hero-card__thumb {
        width: 100%; min-width: unset; height: auto; aspect-ratio: 16/9;
    }
    .idn-hero-card__title { font-size: 0.95rem; -webkit-line-clamp: 2; }
    .idn-hero-card__body { padding: 10px 12px; gap: 5px; }
    .idn-hero-row { padding: var(--space-md) 0; }

    /* 2-col grid stays 2 columns on mobile — KT style */
    .idn-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }
    /* Cards in 2-col: image top, compact body */
    .idn-grid-2 .post-card {
        flex-direction: column !important;
    }
    .idn-grid-2 .post-card .post-card__thumb {
        aspect-ratio: 16/9;
        border-radius: 0;
        width: 100% !important;
        min-width: unset !important;
    }
    .idn-grid-2 .post-card .post-card__body {
        padding: 8px 10px;
    }
    .idn-grid-2 .post-card .post-card__title {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
    }
    .idn-grid-2 .post-card .post-card__meta {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .idn-grid-2 .post-card__title { font-size: 0.78rem; }
}



/* ============================================================
   TICKER FIX — clean seamless scroll, no overlap
   ============================================================ */
.breaking-news-bar__track {
    overflow: hidden;
    position: relative;
    flex: 1;
}
.breaking-news-bar__item a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
}
.breaking-news-bar__item a:hover { color: var(--color-primary); }

/* ============================================================
   PREMIUM MOBILE — full overhaul
   ============================================================ */
@media (max-width: 768px) {

    /* Mobile header bar — clean centred logo */
    .mobile-header-bar {
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border-light);
        box-shadow: var(--shadow-sm);
        position: sticky;
        top: 0;
        z-index: 300;
    }

    /* Utils bar under logo — gold, prayer, weather */
    .mobile-header-utils {
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        padding: 6px var(--space-md);
        font-size: 0.72rem;
        font-family: var(--font-ui);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0;
    }
    .mobile-utils-sep {
        color: var(--color-border);
        font-size: 0.85rem;
    }
    .mobile-header-utils a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-dark);
        text-decoration: none;
    }

    /* Hero 3-col: single column, compact */
    .idn-hero-row { padding: var(--space-md) 0 var(--space-sm); }
    .idn-hero-3col {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .idn-hero-card { border-radius: var(--radius-md); }
    .idn-hero-card__thumb { aspect-ratio: 16/9; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .idn-hero-card__body { padding: 10px 12px 12px; gap: 6px; }
    .idn-hero-card__title { font-size: 1rem; font-weight: 800; -webkit-line-clamp: 2; }
    .idn-hero-card__meta  { font-size: 0.68rem; }

    /* Latest news 2-col compact grid — pure KT style */
    .idn-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .idn-grid-2 .post-card {
        border-radius: var(--radius-md);
        flex-direction: column !important;
    }
    .idn-grid-2 .post-card .post-card__thumb {
        aspect-ratio: 16/9;
        width: 100% !important;
        min-width: unset !important;
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }
    .idn-grid-2 .post-card .post-card__body {
        padding: 8px 10px 10px;
        gap: 5px;
    }
    .idn-grid-2 .post-card .post-card__title {
        font-size: 0.82rem;
        font-weight: 700;
        -webkit-line-clamp: 3;
        line-height: 1.3;
    }
    .idn-grid-2 .post-card .cat-label {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
    }
    .idn-grid-2 .post-card .post-card__meta {
        font-size: 0.64rem;
        gap: 4px;
    }
    .idn-grid-2 .post-card .post-card__meta i {
        font-size: 0.58rem;
    }

    /* Category sections on mobile — also 2-col */
    .category-section .idn-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Section header mobile */
    .section-header { margin-bottom: 12px; }
    .section-header__title { font-size: 0.9rem; }
    .section-header__link  { font-size: 0.7rem; }

    /* Latest news wrap */
    .idn-latest-wrap { padding: var(--space-md) 0; }

    /* Bottom nav — always visible, polished */
    .mobile-bottom-nav {
        display: block;
        height: 58px;
    }
    .mobile-bottom-nav__inner {
        height: 58px;
    }
    .mobile-bottom-nav__item {
        font-size: 0.58rem;
        gap: 2px;
    }
    .mobile-bottom-nav__item i {
        font-size: 1.15rem;
    }
    .mobile-bottom-nav__item--search {
        width: 46px;
        height: 46px;
    }
    body { padding-bottom: 58px; }

    /* Breaking ticker on mobile */
    .breaking-news-bar {
        height: 32px;
    }
    .breaking-news-bar__label {
        padding: 0 10px;
        font-size: 0.62rem;
        min-width: 88px;
        gap: 5px;
    }
    .breaking-news-bar__label .pulse {
        width: 6px; height: 6px;
    }
    .breaking-news-bar__scroll {
        font-size: 0.72rem;
        gap: 36px;
    }

    /* Category section spacing */
    .category-section { padding: var(--space-md) 0; }
    .category-section .container { padding: 0 12px; }

    /* Container padding on mobile */
    .container { padding: 0 12px; }
}

/* Very small screens */
@media (max-width: 380px) {
    .idn-grid-2 { gap: 8px; }
    .idn-grid-2 .post-card .post-card__title { font-size: 0.76rem; }
    .idn-hero-card__title { font-size: 0.92rem; }
}



/* ============================================================
   CARD IMAGE SIZE — bigger images, text below (KT style)
   ============================================================ */

/* Desktop post cards — taller image */
.post-card__thumb { aspect-ratio: 4/3 !important; }
.idn-hero-card__thumb { aspect-ratio: 16/9 !important; }

/* Post card body — clean, generous padding */
.post-card__body {
    padding: 12px 14px 14px !important;
    gap: 7px !important;
}
.post-card__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
}
.post-card__meta {
    font-size: 0.74rem !important;
    color: var(--color-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 4px !important;
}

/* ============================================================
   MOBILE HEADER — Search | Logo | E-Paper Subscribe
   ============================================================ */
@media (max-width: 768px) {
    .mobile-header-bar {
        background: var(--color-white);
        border-bottom: 2px solid var(--color-border-light);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        position: sticky;
        top: 0;
        z-index: 400;
    }
    .mobile-header-bar__inner {
        padding: 8px 12px !important;
    }

    /* Mobile card images — bigger */
    .idn-grid-2 .post-card .post-card__thumb {
        aspect-ratio: 3/2 !important;
    }
    .idn-hero-3col .idn-hero-card__thumb {
        aspect-ratio: 16/9 !important;
    }

    /* 2-col grid cards on mobile — proper image + body */
    .idn-grid-2 .post-card {
        flex-direction: column !important;
    }
    .idn-grid-2 .post-card .post-card__thumb {
        width: 100% !important;
        min-width: unset !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }
    .idn-grid-2 .post-card .post-card__body {
        padding: 8px 10px 10px !important;
    }
    .idn-grid-2 .post-card .post-card__title {
        font-size: 0.82rem !important;
        -webkit-line-clamp: 3 !important;
        line-height: 1.3 !important;
    }
    .idn-grid-2 .post-card .post-card__meta {
        font-size: 0.65rem !important;
        gap: 4px !important;
    }
    .idn-grid-2 .post-card .cat-label {
        font-size: 0.56rem !important;
        padding: 1px 4px !important;
    }
}

/* ============================================================
   ADVERTISE PAGE — email on 1 line, responsive
   ============================================================ */
.idn-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-primary);
    color: white;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 600px) {
    .idn-email-btn {
        padding: 12px 20px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* ============================================================
   SITEMAP — ensure page renders
   ============================================================ */
.sitemap-wrap { padding: var(--space-xl) 0; background: var(--color-bg); min-height: 60vh; }



/* ============================================================
   NO-IMAGE PLACEHOLDER — styled, not just an icon
   ============================================================ */
.idn-hero-card__nothumb {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.15);
    font-size: 3rem;
    min-height: 180px;
}

.post-card__nothumb {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e4e4e4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 2rem;
    min-height: 140px;
}

/* ============================================================
   TOP STORIES — ensure 3col always renders, not same as latest
   ============================================================ */
/* .idn-hero-row is defined in v7 section — no override here */

.idn-hero-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Make hero cards clearly distinct from regular post cards */
.idn-hero-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.09);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.idn-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.idn-hero-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #1a1a1a;
    flex-shrink: 0;
}
.idn-hero-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.idn-hero-card:hover .idn-hero-card__thumb img { transform: scale(1.05); }

.idn-hero-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.idn-hero-card__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-black);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.idn-hero-card__title a { color: inherit; text-decoration: none; }
.idn-hero-card__title a:hover { color: var(--color-primary); }
.idn-hero-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: auto;
}

/* Responsive hero 3col */
@media (max-width: 1024px) {
    .idn-hero-3col { grid-template-columns: 1fr 1fr; }
    .idn-hero-3col .idn-hero-card:nth-child(3) {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .idn-hero-3col .idn-hero-card:nth-child(3) .idn-hero-card__thumb {
        width: 300px;
        min-width: 300px;
        aspect-ratio: unset;
    }
}

@media (max-width: 768px) {
    .idn-hero-3col { grid-template-columns: 1fr; gap: 10px; }
    .idn-hero-3col .idn-hero-card:nth-child(3) {
        flex-direction: column;
        grid-column: auto;
    }
    .idn-hero-3col .idn-hero-card:nth-child(3) .idn-hero-card__thumb {
        width: 100%;
        min-width: unset;
        aspect-ratio: 16/9;
    }
    .idn-hero-card__title { font-size: 1rem; }
    .idn-hero-card__body { padding: 10px 12px 12px; }
}



/* ============================================================
   KT-STYLE HOMEPAGE LAYOUT
   ============================================================ */

/* Page wrapper */
.kt-page { padding: var(--space-lg) 0 var(--space-2xl); background: var(--color-white); }

/* Main grid: content (wide) + sidebar (fixed) */
.kt-main-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-xl);
    align-items: flex-start;
}

/* ── HERO SECTION ──────────────────────────────────────── */
.kt-hero {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}

/* Big featured image */
.kt-hero__img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #1a1a1a;
}
.kt-hero__img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.kt-hero__main:hover .kt-hero__img-wrap img { transform: scale(1.03); }

.kt-hero__body { padding-top: var(--space-sm); }
.kt-hero__title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--color-black);
    margin: 8px 0;
}
.kt-hero__title a { color: inherit; text-decoration: none; }
.kt-hero__title a:hover { color: var(--color-primary); }
.kt-hero__excerpt {
    font-size: 0.9rem;
    color: var(--color-mid);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Right list */
.kt-hero__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--color-border-light);
    padding-left: var(--space-lg);
}

/* ── LIST ITEMS (hero + section) ───────────────────────── */
.kt-list-item {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: background 0.15s;
    align-items: flex-start;
}
.kt-list-item:last-child { border-bottom: none; }
.kt-list-item:hover .kt-list-item__title { color: var(--color-primary); }

.kt-list-item__thumb {
    width: 88px;
    min-width: 88px;
    height: 66px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-border-light);
    flex-shrink: 0;
}
.kt-list-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.kt-list-item:hover .kt-list-item__thumb img { transform: scale(1.05); }

.kt-nothumb-sm {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f0f0f0,#e4e4e4);
}

.kt-list-item__body { flex: 1; min-width: 0; }
.kt-list-item__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    margin: 4px 0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.kt-list-item__title--sm {
    font-size: 0.84rem;
    -webkit-line-clamp: 3;
}

.kt-list-item--sm .kt-list-item__thumb {
    width: 80px;
    min-width: 80px;
    height: 60px;
}

/* ── CATEGORY LABELS ───────────────────────────────────── */
.kt-cat-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    color: white;
    text-decoration: none;
    margin-bottom: 4px;
}
.kt-cat-label--uae           { background: var(--cat-uae); }
.kt-cat-label--business      { background: var(--cat-business); }
.kt-cat-label--property      { background: var(--cat-property); }
.kt-cat-label--tech          { background: var(--cat-tech); }
.kt-cat-label--life          { background: var(--cat-life); }
.kt-cat-label--world         { background: var(--cat-world); }
.kt-cat-label--sports        { background: var(--cat-sports); }
.kt-cat-label--entertainment { background: var(--cat-entertainment); }
.kt-cat-label--health        { background: var(--cat-health); }
.kt-cat-label--guides        { background: var(--cat-guides); }

/* ── META (time · read time) ───────────────────────────── */
.kt-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: var(--color-muted);
}
.kt-meta--sm { font-size: 0.68rem; }
.kt-meta-dot { opacity: 0.4; }

/* ── LIVE BADGE ────────────────────────────────────────── */
.kt-live-badge {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
}
.kt-live-badge--sm { font-size: 0.58rem; padding: 2px 6px; }
.kt-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: white;
    display: inline-block;
    animation: pulse 1.2s infinite;
    flex-shrink: 0;
}

/* ── NO-THUMB PLACEHOLDERS ─────────────────────────────── */
.kt-nothumb-lg {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#1a1a1a,#2d2d2d);
    min-height: 220px;
}
.kt-nothumb-feat {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f0f0f0,#e4e4e4);
    min-height: 160px;
}

/* ── CATEGORY SECTIONS ─────────────────────────────────── */
.kt-section {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}
.kt-section:last-of-type { border-bottom: none; }

.kt-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 3px solid var(--color-border-light);
}
.kt-section__title {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: calc(var(--space-sm) + 3px);
    margin-bottom: -3px;
    border-bottom: 3px solid transparent;
    transition: color 0.15s;
}
.kt-section__title--uae           { color: var(--cat-uae);           border-bottom-color: var(--cat-uae); }
.kt-section__title--business      { color: var(--cat-business);      border-bottom-color: var(--cat-business); }
.kt-section__title--property      { color: var(--cat-property);      border-bottom-color: var(--cat-property); }
.kt-section__title--tech          { color: var(--cat-tech);          border-bottom-color: var(--cat-tech); }
.kt-section__title--life          { color: var(--cat-life);          border-bottom-color: var(--cat-life); }
.kt-section__title--world         { color: var(--cat-world);         border-bottom-color: var(--cat-world); }
.kt-section__title--sports        { color: var(--cat-sports);        border-bottom-color: var(--cat-sports); }
.kt-section__title--entertainment { color: var(--cat-entertainment); border-bottom-color: var(--cat-entertainment); }
.kt-section__title--health        { color: var(--cat-health);        border-bottom-color: var(--cat-health); }
.kt-section__title--guides        { color: var(--cat-guides);        border-bottom-color: var(--cat-guides); }

.kt-section__more {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.kt-section__more:hover { color: var(--color-primary); }

/* Section body: big left + list right */
.kt-section__body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-lg);
    align-items: flex-start;
}

/* Featured article in section */
.kt-section__feat-img {
    display: block;
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #1a1a1a;
    margin-bottom: var(--space-sm);
}
.kt-section__feat-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.kt-section__feat-img:hover img { transform: scale(1.03); }
.kt-section__feat-body { padding-top: 4px; }
.kt-section__feat-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-black);
    margin: 6px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kt-section__feat-title a { color: inherit; text-decoration: none; }
.kt-section__feat-title a:hover { color: var(--color-primary); }
.kt-section__feat-excerpt {
    font-size: 0.85rem;
    color: var(--color-mid);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small list in section */
.kt-section__list {
    border-left: 1px solid var(--color-border-light);
    padding-left: var(--space-md);
}

/* ── TOPBAR: remove E-Paper button ─────────────────────── */
.topbar__link--epaper-topbar { display: none !important; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kt-main-grid { grid-template-columns: 1fr 260px; gap: var(--space-lg); }
    .kt-hero { grid-template-columns: 1fr 240px; }
}

@media (max-width: 900px) {
    .kt-main-grid { grid-template-columns: 1fr; }
    .kt-sidebar { display: none; } /* sidebar below on mobile via sidebar.php */
    .kt-hero { grid-template-columns: 1fr; }
    .kt-hero__list {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--color-border-light);
        padding-top: var(--space-md);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }
    .kt-list-item { padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
    .kt-section__body { grid-template-columns: 1fr; }
    .kt-section__list {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--color-border-light);
        padding-top: var(--space-md);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-sm);
    }
    .kt-list-item--sm .kt-list-item__thumb { width: 70px; min-width: 70px; height: 54px; }
}

@media (max-width: 640px) {
    .kt-hero__title { font-size: 1.2rem; }
    .kt-hero__excerpt { display: none; }
    .kt-hero__list {
        grid-template-columns: 1fr;
    }
    .kt-list-item__thumb { width: 80px; min-width: 80px; height: 60px; }
    .kt-section__list {
        grid-template-columns: 1fr 1fr;
    }
    .kt-section__feat-title { font-size: 1rem; }
    .kt-section__feat-excerpt { display: none; }
    .kt-page { padding: var(--space-md) 0; }
    .kt-section { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); }
}

@media (max-width: 420px) {
    .kt-section__list { grid-template-columns: 1fr; }
    .kt-hero__list { grid-template-columns: 1fr; }
    .kt-list-item { border-bottom: 1px solid var(--color-border-light); }
}



/* ================================================================
   KT-EXACT LAYOUT CSS
   ================================================================ */

.kt-wrap { background: var(--color-white); padding-bottom: var(--space-2xl); }

/* ── TOP ROW: Big story | List | Sidebar ──────────────────────── */
.kt-top-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 300px;
  gap: var(--space-lg);
  padding: var(--space-lg) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-xl);
  align-items: flex-start;
}

/* Big card — col 1 */
.kt-big-card__img {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #111;
}
.kt-big-card__img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 0.4s ease;
}
.kt-big-card__img:hover img { transform: scale(1.03); }
.kt-big-card__body { padding-top: 10px; }
.kt-big-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.22;
  color: var(--color-black);
  margin: 6px 0 8px;
}
.kt-big-card__title a { color:inherit; text-decoration:none; }
.kt-big-card__title a:hover { color: var(--color-primary); }
.kt-big-card__exc {
  font-size: 0.85rem;
  color: var(--color-mid);
  line-height: 1.6;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Story list — col 2 */
.kt-top-list {
  border-left: 1px solid var(--color-border-light);
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
}
.kt-story-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  align-items: flex-start;
  transition: background 0.15s;
}
.kt-story-row:last-child { border-bottom: none; }
.kt-story-row__img {
  width: 105px; min-width: 105px; height: 78px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border-light);
  flex-shrink: 0;
}
.kt-story-row__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.kt-story-row:hover .kt-story-row__img img { transform: scale(1.05); }
.kt-story-row__body { flex:1; min-width:0; }
.kt-story-row__title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 4px 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.kt-story-row:hover .kt-story-row__title { color: var(--color-primary); }

/* Sidebar — col 3 */
.kt-top-sidebar { border-left: 1px solid var(--color-border-light); padding-left: var(--space-md); }

/* ── CATEGORY TAG LABELS ──────────────────────────────────────── */
.kt-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  color: white;
  text-decoration: none;
  margin-bottom: 4px;
  line-height: 1.4;
}
.kt-tag--uae           { background: var(--cat-uae); }
.kt-tag--business      { background: var(--cat-business); }
.kt-tag--property      { background: var(--cat-property); }
.kt-tag--tech          { background: var(--cat-tech); }
.kt-tag--life          { background: var(--cat-life); }
.kt-tag--world         { background: var(--cat-world); }
.kt-tag--sports        { background: var(--cat-sports); }
.kt-tag--entertainment { background: var(--cat-entertainment); }
.kt-tag--health        { background: var(--cat-health); }
.kt-tag--guides        { background: var(--cat-guides); }

/* ── TIME META ────────────────────────────────────────────────── */
.kt-time {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 4px;
}
.kt-time--xs { font-size: 0.65rem; }

/* ── LIVE BADGE ───────────────────────────────────────────────── */
.kt-badge {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary);
  color: white;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 2;
}
.kt-badge--sm { font-size: 0.56rem; padding: 2px 6px; }
.kt-badge--xs { font-size: 0.52rem; padding: 2px 5px; }
.kt-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  display: inline-block;
  animation: pulse 1.2s infinite;
  flex-shrink: 0;
}

/* ── PLACEHOLDERS ─────────────────────────────────────────────── */
.kt-ph-big  { width:100%; height:100%; background:linear-gradient(135deg,#1a1a1a,#333); min-height:200px; }
.kt-ph-sm   { width:100%; height:100%; background:linear-gradient(135deg,#f0f0f0,#e4e4e4); }
.kt-ph-feat { width:100%; height:100%; background:linear-gradient(135deg,#f0f0f0,#e4e4e4); min-height:180px; }

/* ── CATEGORY SECTIONS ────────────────────────────────────────── */
.kt-section {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.kt-sec-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border-light);
}
.kt-sec-title {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: -10px;
  border-bottom: 3px solid transparent;
}
.kt-sec-title--uae           { color:var(--cat-uae);           border-bottom-color:var(--cat-uae); }
.kt-sec-title--business      { color:var(--cat-business);      border-bottom-color:var(--cat-business); }
.kt-sec-title--property      { color:var(--cat-property);      border-bottom-color:var(--cat-property); }
.kt-sec-title--tech          { color:var(--cat-tech);          border-bottom-color:var(--cat-tech); }
.kt-sec-title--life          { color:var(--cat-life);          border-bottom-color:var(--cat-life); }
.kt-sec-title--world         { color:var(--cat-world);         border-bottom-color:var(--cat-world); }
.kt-sec-title--sports        { color:var(--cat-sports);        border-bottom-color:var(--cat-sports); }
.kt-sec-title--entertainment { color:var(--cat-entertainment); border-bottom-color:var(--cat-entertainment); }
.kt-sec-title--health        { color:var(--cat-health);        border-bottom-color:var(--cat-health); }
.kt-sec-title--guides        { color:var(--cat-guides);        border-bottom-color:var(--cat-guides); }

.kt-sec-more {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
}
.kt-sec-more:hover { color: var(--color-primary); }

/* Section body: big card LEFT, small grid RIGHT */
.kt-sec-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: flex-start;
}

/* Big card in section */
.kt-sec-big__img {
  display: block;
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #111;
  margin-bottom: 10px;
}
.kt-sec-big__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
.kt-sec-big__img:hover img { transform: scale(1.03); }
.kt-sec-big__body {}
.kt-sec-big__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-black);
  margin: 6px 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kt-sec-big__title a { color:inherit; text-decoration:none; }
.kt-sec-big__title a:hover { color: var(--color-primary); }
.kt-sec-big__exc {
  font-size: 0.82rem;
  color: var(--color-mid);
  line-height: 1.55;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Small cards grid (2×2 on right side) */
.kt-sec-smalls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: flex-start;
}

.kt-small-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 7px;
  transition: opacity 0.15s;
}
.kt-small-card:hover { opacity: 0.85; }
.kt-small-card__img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-border-light);
}
.kt-small-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.kt-small-card:hover .kt-small-card__img img { transform: scale(1.04); }
.kt-small-card__body {}
.kt-small-card__title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.kt-small-card:hover .kt-small-card__title { color: var(--color-primary); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */

/* Tablet 900-1100px */
@media (max-width: 1100px) {
  .kt-top-row { grid-template-columns: 320px 1fr 260px; gap: var(--space-md); }
  .kt-big-card__title { font-size: 1.2rem; }
}

/* Tablet 768-900px: drop sidebar */
@media (max-width: 900px) {
  .kt-top-row { grid-template-columns: 1fr 1fr; }
  .kt-top-sidebar { display: none; }
  .kt-top-list { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border-light); padding-top: var(--space-md); grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .kt-story-row { border-bottom: 1px solid var(--color-border-light); }
  .kt-sec-body { grid-template-columns: 1fr 1fr; }
}

/* Mobile ≤768px */
@media (max-width: 768px) {
  .kt-top-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .kt-top-list { grid-template-columns: 1fr; display: flex; flex-direction: column; border-top: 1px solid var(--color-border-light); padding-top: var(--space-md); }
  .kt-big-card__title { font-size: 1.1rem; }
  .kt-big-card__exc { display: none; }
  .kt-sec-body { grid-template-columns: 1fr; }
  .kt-sec-smalls { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .kt-sec-big__exc { display: none; }
  .kt-sec-big__title { font-size: 0.95rem; }
  .kt-small-card__title { font-size: 0.78rem; }
  .kt-section { padding: var(--space-md) 0; }
  .kt-story-row__img { width: 80px; min-width: 80px; height: 60px; }
}

/* Very small ≤420px */
@media (max-width: 420px) {
  .kt-sec-smalls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kt-small-card__title { font-size: 0.74rem; -webkit-line-clamp: 2; }
  .kt-time--xs { font-size: 0.6rem; }
}


/* ============================================================
   POST CARD — no-image placeholder with branding
   ============================================================ */
.post-card__nothumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 60%, #cc0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.post-card__nothumb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.post-card__nothumb-inner i { font-size: 1.8rem; }

/* KT no-image placeholders */
.kt-ph-sm {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#f0f0f0,#e0e0e0);
    min-height: 60px;
}
.kt-ph-big {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#1a1a1a,#cc0000);
    min-height: 220px;
}
.kt-ph-feat {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#1a1a1a,#2d2d2d);
    min-height: 180px;
}

/* Ensure post-card thumb has proper height even without image */
.post-card__thumb {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--color-border-light);
    min-height: 120px;
}
.post-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}


/* ============================================================
   BREAKING NEWS TICKER — clean rewrite, no glitch
   ============================================================ */
.breaking-news-bar {
    background: var(--color-dark);
    color: var(--color-white);
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 3px solid var(--color-primary);
    position: relative;
    z-index: 100;
}

.breaking-news-bar__label {
    flex-shrink: 0;
    background: var(--color-primary);
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    position: relative;
}

.breaking-news-bar__label .pulse {
    width: 7px; height: 7px;
    background: white;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.breaking-news-bar__track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Fade edges */
.breaking-news-bar__track::before,
.breaking-news-bar__track::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 32px;
    z-index: 3;
    pointer-events: none;
}
.breaking-news-bar__track::before {
    left: 0;
    background: linear-gradient(to right, var(--color-dark) 30%, transparent);
}
.breaking-news-bar__track::after {
    right: 0;
    background: linear-gradient(to left, var(--color-dark) 30%, transparent);
}

.breaking-news-bar__scroll {
    display: flex;
    align-items: center;
    gap: 56px;
    white-space: nowrap;
    will-change: transform;
    /* transform set by JS */
}

.breaking-news-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.92);
    flex-shrink: 0;
    padding: 0 32px 0 0;
}
.breaking-news-bar__item::before {
    content: '●';
    color: rgba(255,255,255,0.5);
    font-size: 0.4rem;
    line-height: 1;
    margin-right: 4px;
}
.breaking-news-bar__item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.breaking-news-bar__item a:hover { color: white; }

/* Mobile ticker */
@media (max-width: 768px) {
    .breaking-news-bar { height: 32px; }
    .breaking-news-bar__label {
        padding: 0 10px;
        font-size: 0.62rem;
        letter-spacing: 1px;
        gap: 5px;
    }
    .breaking-news-bar__label .pulse { width: 6px; height: 6px; }
    .breaking-news-bar__scroll {
        font-size: 0.72rem;
        gap: 44px;
    }
    .breaking-news-bar__item { font-size: 0.72rem; }
}



/* ================================================================
   IDN v7 — ENHANCED MOBILE HEADER + LIVE STRIP + CENTERED LOGO
   ================================================================ */

/* ── Logo always centered in the 3-col grid ─────────────────── */
.header__main-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-lg);
}
.site-logo { text-align: center; }
.site-logo img {
    max-height: 72px;
    width: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

/* ── Ramadan pill (desktop header widget) ────────────────────── */
.header__widget-pill.ramadan .widget-value { color: var(--color-gold); }
.header__widget-pill.ramadan:hover { border-color: var(--color-gold); color: var(--color-gold); background: rgba(201,168,76,0.06); }

/* Topbar Ramadan */
.topbar__ramadan {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-gold);
    font-weight: 700;
    font-size: 0.78rem;
}

/* ── MOBILE HEADER v7 ─────────────────────────────────────────── */
.mobile-header-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    border-bottom: 2px solid var(--color-primary);
}

/* Row 1 */
.mobile-header-bar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 10px;
    min-height: 54px;
}

/* Center logo takes remaining space, stays centered */
.mobile-logo {
    flex: 1;
    text-align: center;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-logo img {
    max-height: 40px;
    width: auto;
    max-width: 180px;
    display: block;
    object-fit: contain;
}
.mobile-logo .site-logo__text { font-size: 1.3rem; letter-spacing: -0.5px; }
.mobile-logo .site-logo__tagline { display: none; }

.mobile-header-bar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Search toggle in mobile bar */
.mobile-header-bar__actions .search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    color: var(--color-dark);
    background: var(--color-bg);
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Row 2: LIVE DATA STRIP ───────────────────────────────────── */
.mobile-live-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
    height: 36px;
    background: var(--color-black);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile-live-strip::-webkit-scrollbar { display: none; }

.mobile-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 4px;
    transition: color 0.15s;
}
.mobile-live-pill:hover { color: var(--color-white); }
.mobile-live-pill i { font-size: 0.65rem; opacity: 0.7; }
.mobile-live-pill strong { font-weight: 800; }

.mobile-live-pill.gold-pill strong  { color: var(--color-gold); }
.mobile-live-pill.forex-pill strong { color: #5ba3e8; }
.mobile-live-pill.prayer-pill strong { color: #ff6b6b; }
.mobile-live-pill.ramadan-pill strong { color: var(--color-gold); }
.mobile-live-pill.weather-pill strong { color: #7fc8f8; }

.live-strip-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.18);
    margin: 0 8px;
    flex-shrink: 0;
}

/* ── MOBILE MENU TOGGLE ───────────────────────────────────────── */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
}

/* ── MOBILE: show bar, hide desktop header ────────────────────── */
@media (max-width: 768px) {
    .site-header { display: none !important; }
    .topbar { display: none !important; }
    .mobile-header-bar { display: block; }

    /* ── Sitemap responsive ── */
    .idn-sitemap-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-sitemap-3col { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) {
    .mobile-header-bar { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    .mobile-subscribe-btn { display: none; }
}

/* ── Ramadan banner — homepage featured strip (optional) ──────── */
.ramadan-banner {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1654 40%, #4a2070 100%);
    border-bottom: 3px solid var(--color-gold);
    padding: 10px 0;
    display: none;
}
.ramadan-banner.is-active { display: block; }
.ramadan-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.ramadan-banner__left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.ramadan-banner__icon { font-size: 1.5rem; }
.ramadan-banner__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-gold);
}
.ramadan-banner__sub {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}
.ramadan-banner__link {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-gold);
    border: 1.5px solid rgba(201,168,76,0.5);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ramadan-banner__link:hover { background: var(--color-gold); color: var(--color-black); }

@media (max-width: 600px) {
    .ramadan-banner__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ramadan-banner__link { align-self: flex-start; }
}



/* ================================================================
   IDN v7 — LIVE DATA ROW (homepage)
   ================================================================ */
.idn-live-row {
    background: var(--color-dark);
    border-bottom: 2px solid var(--color-primary);
    overflow: hidden; /* clips background, not the scrollable inner */
    position: relative;
}
.idn-live-row__inner {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}
.idn-live-row__inner::-webkit-scrollbar { display: none; }

.idn-live-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 12px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 12px;
}

.idn-live-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    padding: 0 4px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s;
}
.idn-live-item:hover { color: var(--color-white); }
.idn-live-item i { font-size: 0.7rem; opacity: 0.8; }
.idn-live-item strong { font-weight: 800; color: var(--color-white); }

.idn-live-item--right { margin-left: auto; }

.idn-live-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.15);
    margin: 0 10px;
    flex-shrink: 0;
}

/* Mobile live row — scrollable strip */
@media (max-width: 768px) {
    .idn-live-row { overflow: hidden; }
    .idn-live-row__inner {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 8px;
        height: 38px;
    }
    .idn-live-row__inner::-webkit-scrollbar { display: none; }
    .idn-live-row__badge { padding: 0 10px; font-size: 0.6rem; margin-right: 10px; flex-shrink: 0; }
    .idn-live-item { font-size: 0.7rem; padding: 0 3px; }
    .idn-live-sep { margin: 0 6px; }
    .idn-live-item--right { margin-left: 12px; }
}
@media (max-width: 380px) {
    .idn-live-row__badge { padding: 0 8px; font-size: 0.56rem; margin-right: 8px; }
    .idn-live-item { font-size: 0.65rem; }
    .idn-live-sep { margin: 0 4px; }
}



/* ================================================================
   IDN v7 — KT-STYLE SQUARE BUTTON HEADER
   ================================================================ */

/* ── TOPBAR ──────────────────────────────────────────────────── */
.idn-topbar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    height: 36px;
    display: flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--color-dark);
    position: relative;
    z-index: 201;
}
.idn-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.idn-topbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-mid);
    font-size: 0.78rem;
}
.idn-topbar__arabic {
    font-family: var(--font-arabic);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
}
.idn-topbar__arabic:hover { color: var(--color-primary); }
.idn-topbar__divider { color: var(--color-border); }
.idn-topbar__date { font-weight: 500; color: var(--color-dark); }
.idn-topbar__hijri { color: var(--color-muted); }
.idn-topbar__prayer { font-weight: 600; color: var(--color-primary); }
.idn-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.idn-topbar__link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-mid);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}
.idn-topbar__link:hover { color: var(--color-primary); }
.idn-topbar__subscribe {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
.idn-topbar__subscribe:hover { background: var(--color-primary-dark); color: white; }

/* ── MAIN HEADER ─────────────────────────────────────────────── */
.idn-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.idn-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

/* ── SQUARE BUTTONS ──────────────────────────────────────────── */
.idn-header__squares {
    display: flex;
    gap: 6px;
    align-items: center;
}

.idn-sq-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 80px;
    background: #1a2744;
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.18s, transform 0.15s;
    gap: 3px;
    position: relative;
    overflow: hidden;
}
.idn-sq-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.idn-sq-btn:hover {
    background: #0f1a32;
    transform: translateY(-1px);
    color: white;
}
.idn-sq-btn__icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-gold);
}
.idn-sq-btn__label {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    line-height: 1;
}
.idn-sq-btn__value {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    line-height: 1;
}

/* Ramadan square — gold/moon theme */
.idn-sq-btn--ramadan { background: #1a1a2e; }
.idn-sq-btn--ramadan:hover { background: #0d0d1a; color: white; }
.idn-sq-btn--ramadan .idn-sq-btn__icon { color: var(--color-gold); }

/* Prayer square */
.idn-sq-btn--prayer { background: #1a2744; }
.idn-sq-btn--prayer .idn-sq-btn__icon { color: #a8c8ff; }

/* ── LOGO CENTERED ───────────────────────────────────────────── */
.idn-header__logo {
    text-align: center;
}
.idn-header__logo a { display: inline-block; }
.idn-header__logo img {
    max-height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.idn-logo-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 900;
    color: #0a0a0a;
    letter-spacing: -1.5px;
    line-height: 1;
    display: block;
    text-decoration: none;
}
.idn-logo-text span { color: #CC0000; }
.idn-logo-tagline {
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #111111;
    display: block;
    margin-top: 4px;
}

/* ── MOBILE HEADER ───────────────────────────────────────────── */
.idn-mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    border-bottom: 2px solid var(--color-primary);
}

/* Mobile topbar row */
.idn-mobile-topbar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    padding: 5px 12px;
}
.idn-mobile-topbar__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--color-mid);
}
.idn-mobile-topbar__arabic {
    font-family: var(--font-arabic);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    flex-shrink: 0;
}
.idn-mobile-topbar__divider { color: var(--color-border); }
.idn-mobile-topbar__prayer {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}
.idn-mobile-topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.idn-mobile-topbar__link {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--color-mid);
    font-size: 0.7rem;
    text-decoration: none;
    font-weight: 500;
}
.idn-mobile-topbar__link:hover { color: var(--color-primary); }
.idn-mobile-topbar__subscribe {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

/* Mobile main row: squares | logo | squares */
.idn-mobile-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 6px 8px;
    gap: 6px;
    min-height: 90px;
}

/* Mobile squares group */
.idn-mobile-squares {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* Individual mobile square */
.idn-mob-sq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 58px;
    background: #1a2744;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    gap: 3px;
    transition: background 0.15s;
    position: relative;
    overflow: hidden;
}
.idn-mob-sq::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
    pointer-events: none;
}
.idn-mob-sq:hover { background: #0f1a32; color: white; }
.idn-mob-sq__icon { font-size: 1.1rem; line-height: 1; color: var(--color-gold); }
.idn-mob-sq__label {
    font-family: var(--font-ui);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    line-height: 1;
    text-align: center;
}
.idn-mob-sq--ramadan { background: #1a1a2e; }
.idn-mob-sq--ramadan:hover { background: #0d0d1a; color: white; }
.idn-mob-sq--ramadan .idn-mob-sq__icon { color: var(--color-gold); }
.idn-mob-sq--prayer .idn-mob-sq__icon { color: #a8c8ff; }

/* Mobile logo */
.idn-mobile-logo {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.idn-mobile-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.idn-mobile-logo img {
    max-height: 44px;
    max-width: 160px;
    width: auto;
    display: block;
    object-fit: contain;
}
.idn-mobile-logo .idn-logo-text { font-size: 1.15rem; letter-spacing: -0.5px; }
.idn-mobile-logo .idn-logo-tagline { display: none; }

/* ── RESPONSIVE SHOW/HIDE ─────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hide desktop header, show mobile */
    .idn-header  { display: none !important; }
    .idn-topbar  { display: none !important; }
    .idn-mobile-header { display: block; }

    /* old v6 classes hidden */
    .site-header { display: none !important; }
    .topbar      { display: none !important; }
    .mobile-header-bar { display: none !important; }
}
@media (min-width: 768px) {
    .idn-mobile-header { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    /* old v6 mobile classes */
    .mobile-header-bar { display: none !important; }
}

/* ── DESKTOP hide old site-header / topbar (replaced by idn-header) */
@media (min-width: 769px) {
    .site-header { display: none !important; }
    .topbar      { display: none !important; }
}

/* ── Tablet adjustments ──────────────────────────────────────── */
@media (max-width: 900px) and (min-width: 769px) {
    .idn-sq-btn { width: 72px; height: 68px; }
    .idn-sq-btn__icon { font-size: 1.2rem; }
    .idn-logo-text { font-size: 1.8rem; }
    .idn-header__logo img { max-height: 60px; }
}

/* ── Very small phones ───────────────────────────────────────── */
@media (max-width: 380px) {
    .idn-mob-sq { width: 54px; height: 52px; }
    .idn-mob-sq__icon { font-size: 1rem; }
    .idn-mob-sq__label { font-size: 0.45rem; }
    .idn-mobile-logo .idn-logo-text { font-size: 1rem; }
    .idn-mobile-logo img { max-height: 36px; }
}



/* ================================================================
   IDN v7 — HOMEPAGE 2-COLUMN GRID (mobile story list fix)
   ================================================================ */

/* KT story list on mobile → 2 column card grid */
@media (max-width: 768px) {
    /* The story list rows become a 2-col grid */
    .kt-top-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid var(--color-border-light);
        padding-top: var(--space-md);
    }

    /* Each story row becomes a card */
    .kt-story-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        background: var(--color-white);
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border-light);
        overflow: hidden;
        align-items: stretch !important;
        text-decoration: none;
    }
    .kt-story-row:hover { box-shadow: var(--shadow-sm); }

    /* Image fills top of card */
    .kt-story-row__img {
        width: 100% !important;
        min-width: unset !important;
        height: 90px !important;
        border-radius: 0 !important;
        flex-shrink: 0;
    }
    .kt-story-row__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Body below image */
    .kt-story-row__body {
        padding: 7px 8px 8px;
        flex: 1;
    }
    .kt-story-row__title {
        font-size: 0.78rem !important;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }
    .kt-time { font-size: 0.62rem !important; margin-top: 4px; }

    /* Section small cards also 2-col */
    .kt-sec-smalls {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .kt-small-card__title { font-size: 0.75rem !important; }
}

/* ================================================================
   IDN v7 — SITEMAP PAGE FIX (ensure template loads correctly)
   ================================================================ */
/* Force sitemap page to use correct template */
.page-template-page-sitemap .idn-sitemap {
    display: block;
}


/* ================================================================
   IDN v7 — ENHANCED HOMEPAGE LAYOUT (Khaleej Times Style)
   Desktop redesign — mobile layout untouched
   ================================================================ */

/* ── HERO SECTION: Large featured + 5-post vertical list ── */
@media (min-width: 901px) {

  /* 3-column grid: big feature | story list | sidebar */
  .kt-top-row {
    grid-template-columns: 1fr 360px 300px !important;
    gap: 28px !important;
    padding: var(--space-xl) 0 !important;
    align-items: flex-start !important;
  }

  /* Hero main: large 16:9 image */
  .kt-big-card__img {
    aspect-ratio: 16/9 !important;
    border-radius: 4px !important;
    overflow: hidden;
  }

  .kt-big-card__title {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 10px 0 10px !important;
    letter-spacing: -0.3px;
  }

  .kt-big-card__exc {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Story list: vertical stack of 5 with smaller thumbnails */
  .kt-top-list {
    border-left: 2px solid var(--color-border-light) !important;
    padding-left: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .kt-story-row {
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    gap: 12px !important;
  }

  .kt-story-row__img {
    width: 100px !important;
    min-width: 100px !important;
    height: 72px !important;
    border-radius: 3px !important;
    flex-shrink: 0;
  }

  .kt-story-row__title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Sidebar */
  .kt-top-sidebar {
    border-left: 2px solid var(--color-border-light) !important;
    padding-left: 22px !important;
    position: sticky;
    top: 80px;
  }

  /* ── CATEGORY SECTIONS: KT-style big+smalls layout ── */
  .kt-section {
    padding: 28px 0 !important;
    border-bottom: 2px solid var(--color-border-light) !important;
  }

  .kt-sec-header {
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--color-border-light) !important;
  }

  .kt-sec-title {
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    padding-bottom: 12px !important;
    margin-bottom: -12px !important;
    border-bottom-width: 3px !important;
  }

  /* Section layout: big story (60%) + smalls stack (40%) */
  .kt-sec-body {
    grid-template-columns: 58% 1fr !important;
    gap: 28px !important;
    align-items: flex-start !important;
  }

  /* Featured story: 16:9 image */
  .kt-sec-big__img {
    aspect-ratio: 16/9 !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
  }

  .kt-sec-big__title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    -webkit-line-clamp: 3 !important;
    margin: 7px 0 8px !important;
  }

  .kt-sec-big__exc {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Small cards: vertical list on right side */
  .kt-sec-smalls {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-left: 1px solid var(--color-border-light) !important;
    padding-left: 22px !important;
  }

  .kt-small-card {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    border-radius: 0 !important;
  }

  .kt-small-card:last-child { border-bottom: none !important; }

  .kt-small-card__img {
    width: 90px !important;
    min-width: 90px !important;
    height: 66px !important;
    aspect-ratio: unset !important;
    border-radius: 3px !important;
    flex-shrink: 0;
  }

  .kt-small-card__body { flex: 1; min-width: 0; }

  .kt-small-card__title {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
  }

  /* ── SIDEBAR WIDGETS enhanced ── */
  .kt-top-sidebar .sidebar-widget {
    margin-bottom: 22px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
  }

  .kt-top-sidebar .sidebar-widget__header {
    font-size: 0.72rem !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    padding: 10px 14px !important;
  }

  /* Most Popular: numbered list style */
  .sidebar-popular__list {
    display: flex;
    flex-direction: column;
  }

  .sidebar-popular__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: background 0.15s;
  }

  .sidebar-popular__item:last-child { border-bottom: none; }
  .sidebar-popular__item:hover { background: var(--color-bg); }

  .sidebar-popular__num {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-border-light);
    line-height: 1;
    min-width: 24px;
    flex-shrink: 0;
  }

  .sidebar-popular__title {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    transition: color 0.15s;
  }

  .sidebar-popular__item:hover .sidebar-popular__title { color: var(--color-primary); }

  /* Newsletter signup in sidebar */
  .sidebar-newsletter {
    padding: 16px 14px;
  }

  .sidebar-newsletter__title {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-dark);
    margin-bottom: 6px;
  }

  .sidebar-newsletter__sub {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .sidebar-newsletter__input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    font-size: 0.8rem;
    margin-bottom: 8px;
    box-sizing: border-box;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s;
  }

  .sidebar-newsletter__input:focus { border-color: var(--color-primary); }

  .sidebar-newsletter__btn {
    width: 100%;
    padding: 9px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background 0.15s;
    text-transform: uppercase;
  }

  .sidebar-newsletter__btn:hover { background: #990000; }

  /* Wider container for KT-style density on large screens */
  @media (min-width: 1280px) {
    .kt-top-row {
      grid-template-columns: 1fr 380px 300px !important;
    }
    .kt-big-card__title {
      font-size: 1.85rem !important;
    }
    .kt-sec-big__title {
      font-size: 1.28rem !important;
    }
    .kt-sec-body {
      grid-template-columns: 60% 1fr !important;
    }
  }

} /* end @media min-width 901px */

/* ── Category section divider accent bars ── */
.kt-sec-title--uae           { color:var(--cat-uae) !important;           border-bottom-color:var(--cat-uae) !important; }
.kt-sec-title--business      { color:var(--cat-business) !important;      border-bottom-color:var(--cat-business) !important; }
.kt-sec-title--property      { color:var(--cat-property) !important;      border-bottom-color:var(--cat-property) !important; }
.kt-sec-title--tech          { color:var(--cat-tech) !important;          border-bottom-color:var(--cat-tech) !important; }
.kt-sec-title--technology    { color:var(--cat-tech) !important;          border-bottom-color:var(--cat-tech) !important; }
.kt-sec-title--life          { color:var(--cat-life) !important;          border-bottom-color:var(--cat-life) !important; }
.kt-sec-title--lifestyle     { color:var(--cat-life) !important;          border-bottom-color:var(--cat-life) !important; }
.kt-sec-title--world         { color:var(--cat-world) !important;         border-bottom-color:var(--cat-world) !important; }
.kt-sec-title--sports        { color:var(--cat-sports) !important;        border-bottom-color:var(--cat-sports) !important; }
.kt-sec-title--entertainment { color:var(--cat-entertainment) !important; border-bottom-color:var(--cat-entertainment) !important; }
.kt-sec-title--health        { color:var(--cat-health) !important;        border-bottom-color:var(--cat-health) !important; }
.kt-sec-title--guides        { color:var(--cat-guides) !important;        border-bottom-color:var(--cat-guides) !important; }
.kt-sec-title--community     { color:var(--cat-guides) !important;        border-bottom-color:var(--cat-guides) !important; }
.kt-sec-title--economy       { color:var(--cat-business) !important;      border-bottom-color:var(--cat-business) !important; }
.kt-sec-title--real-estate   { color:var(--cat-property) !important;      border-bottom-color:var(--cat-property) !important; }
.kt-sec-title--special-coverage { color:var(--cat-uae) !important;        border-bottom-color:var(--cat-uae) !important; }

/* ── Tag colors for new slugs ── */
.kt-tag--technology    { background: var(--cat-tech); }
.kt-tag--lifestyle     { background: var(--cat-life); }
.kt-tag--real-estate   { background: var(--cat-property); }
.kt-tag--economy       { background: var(--cat-business); }
.kt-tag--community     { background: var(--cat-guides); }
.kt-tag--special-coverage { background: var(--cat-uae); }


/* ================================================================
   IDN v7 — PREMIUM MOST POPULAR WIDGET
   ================================================================ */

.idn-popular-widget {
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 22px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Header */
.idn-popular-widget__header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2f5e 100%);
    padding: 13px 16px;
    border-bottom: 3px solid #C9A84C;
}

.idn-popular-widget__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(201,168,76,0.15);
    border-radius: 50%;
    font-size: 0.85rem;
    color: #C9A84C;
    flex-shrink: 0;
}

.idn-popular-widget__title {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
    flex: 1;
}

.idn-popular-widget__sub {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 2px 8px;
    border-radius: 20px;
}

/* List container */
.idn-popular-widget__list {
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Each item */
.idn-popular-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none;
    transition: background 0.15s;
    position: relative;
}

.idn-popular-item:last-child {
    border-bottom: none;
}

.idn-popular-item:hover {
    background: #fafafa;
}

.idn-popular-item:hover .idn-popular-item__title {
    color: var(--color-primary);
}

/* Rank number badge */
.idn-popular-item__rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    flex-shrink: 0;
    background: #f0f0f0;
    color: #999;
    margin-top: 2px;
}

.idn-popular-item__rank--gold {
    background: linear-gradient(135deg, #C9A84C, #e8c96a);
    color: #fff;
    box-shadow: 0 2px 6px rgba(201,168,76,0.4);
}

.idn-popular-item__rank--silver {
    background: linear-gradient(135deg, #9e9e9e, #bdbdbd);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.idn-popular-item__rank--bronze {
    background: linear-gradient(135deg, #cd7f32, #e2964a);
    color: #fff;
    box-shadow: 0 2px 6px rgba(205,127,50,0.35);
}

/* Thumbnail */
.idn-popular-item__thumb {
    width: 72px;
    min-width: 72px;
    height: 54px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-border-light);
}

.idn-popular-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.idn-popular-item:hover .idn-popular-item__thumb img {
    transform: scale(1.06);
}

.idn-popular-item__thumb-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8, #d4d4d4);
}

/* Body */
.idn-popular-item__body {
    flex: 1;
    min-width: 0;
}

.idn-popular-item__cat {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.58rem !important;
    padding: 1px 5px !important;
}

.idn-popular-item__title {
    font-family: var(--font-heading);
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin: 0 0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}

.idn-popular-item__meta {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Left accent bar on hover */
.idn-popular-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform 0.2s ease;
    transform-origin: bottom;
}

.idn-popular-item:hover::before {
    transform: scaleY(1);
}


/* ================================================================
   IDN v7 — KHALEEJ TIMES HOMEPAGE REDESIGN
   All new class names: idn-hero-*, idn-sec-*, idn-grid-*, etc.
   Mobile untouched (all rules wrapped in min-width: 768px+)
   ================================================================ */

/* ── WRAP ─────────────────────────────────────────────────── */
.idn-wrap { background: var(--color-bg); }

/* ── CATEGORY TAG (new unified class) ──────────────────────── */
.idn-cat-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  color: white;
  text-decoration: none;
  margin-bottom: 5px;
  line-height: 1.4;
}
.idn-cat-tag--uae           { background: var(--cat-uae); }
.idn-cat-tag--business      { background: var(--cat-business); }
.idn-cat-tag--property      { background: var(--cat-property); }
.idn-cat-tag--real-estate   { background: var(--cat-property); }
.idn-cat-tag--tech          { background: var(--cat-tech); }
.idn-cat-tag--technology    { background: var(--cat-tech); }
.idn-cat-tag--life          { background: var(--cat-life); }
.idn-cat-tag--lifestyle     { background: var(--cat-life); }
.idn-cat-tag--world         { background: var(--cat-world); }
.idn-cat-tag--sports        { background: var(--cat-sports); }
.idn-cat-tag--entertainment { background: var(--cat-entertainment); }
.idn-cat-tag--health        { background: var(--cat-health); }
.idn-cat-tag--guides        { background: var(--cat-guides); }
.idn-cat-tag--community     { background: var(--cat-guides); }
.idn-cat-tag--economy       { background: var(--cat-business); }

/* ── LIVE BADGE ─────────────────────────────────────────────── */
.idn-live-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary);
  color: white;
  font-family: var(--font-ui);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 2;
}
.idn-live-badge--sm { font-size: 0.54rem; padding: 2px 6px; top: 8px; left: 8px; }
.idn-live-badge--xs { font-size: 0.5rem;  padding: 2px 5px; top: 6px; left: 6px; }

/* ── META LINE ──────────────────────────────────────────────── */
.idn-meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.idn-meta--xs { font-size: 0.65rem; }

/* ── PLACEHOLDERS ───────────────────────────────────────────── */
.idn-ph-hero { width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);min-height:220px; }
.idn-ph-feat { width:100%;height:100%;background:linear-gradient(135deg,#ebebeb,#ddd);min-height:180px; }
.idn-ph-sm   { width:100%;height:100%;background:linear-gradient(135deg,#ebebeb,#ddd); }

/* ================================================================
   HERO ROW
   ================================================================ */
.idn-hero-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 300px;
  gap: 24px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--color-border-light);
  align-items: flex-start;
}

/* Hero main card */
.idn-hero-main {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
}
.idn-hero-card__img {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 3px;
  background: #111;
}
.idn-hero-card__img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 0.4s ease;
}
.idn-hero-card__img:hover img { transform: scale(1.03); }
.idn-hero-card__body { padding-top: 12px; }
.idn-hero-card__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.18;
  color: var(--color-black);
  margin: 6px 0 10px;
  letter-spacing: -0.3px;
}
.idn-hero-card__title a { color: inherit; text-decoration: none; }
.idn-hero-card__title a:hover { color: var(--color-primary); }
.idn-hero-card__exc {
  font-size: 0.9rem;
  color: var(--color-mid);
  line-height: 1.65;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 2x2 sub-grid below the big hero card */
.idn-hero-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
  width: 100%;
}
.idn-subgrid-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  min-width: 0;
  transition: box-shadow 0.2s;
}
.idn-subgrid-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.idn-subgrid-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-border-light);
  flex-shrink: 0;
}
.idn-subgrid-card__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s; }
.idn-subgrid-card:hover .idn-subgrid-card__img img { transform: scale(1.04); }
.idn-subgrid-card__body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idn-subgrid-card__title {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.idn-subgrid-card:hover .idn-subgrid-card__title { color: var(--color-primary); }

/* Latest list (middle column) */
.idn-hero-list {
  border-left: 1px solid var(--color-border-light);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.idn-list-item {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  align-items: flex-start;
}
.idn-list-item:last-child { border-bottom: none; }
.idn-list-item__img {
  width: 110px; min-width: 110px; height: 78px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-border-light);
  flex-shrink: 0;
}
.idn-list-item__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s; }
.idn-list-item:hover .idn-list-item__img img { transform: scale(1.05); }
.idn-list-item__body { flex:1; min-width:0; }
.idn-list-item__title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin: 2px 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.idn-list-item:hover .idn-list-item__title { color: var(--color-primary); }

/* Sidebar */
.idn-hero-sidebar {
  border-left: 1px solid var(--color-border-light);
  padding-left: 20px;
}

/* ================================================================
   CATEGORY SECTIONS — KT Style
   ================================================================ */
.idn-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border-light);
}

/* Section header */
.idn-sec-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}
.idn-sec-hdr__title {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 11px;
  margin-bottom: -11px;
  border-bottom: 3px solid transparent;
}
/* Color per category */
.idn-sec-hdr__title--uae           { color:var(--cat-uae);           border-bottom-color:var(--cat-uae); }
.idn-sec-hdr__title--business      { color:var(--cat-business);      border-bottom-color:var(--cat-business); }
.idn-sec-hdr__title--property      { color:var(--cat-property);      border-bottom-color:var(--cat-property); }
.idn-sec-hdr__title--tech          { color:var(--cat-tech);          border-bottom-color:var(--cat-tech); }
.idn-sec-hdr__title--technology    { color:var(--cat-tech);          border-bottom-color:var(--cat-tech); }
.idn-sec-hdr__title--life          { color:var(--cat-life);          border-bottom-color:var(--cat-life); }
.idn-sec-hdr__title--lifestyle     { color:var(--cat-life);          border-bottom-color:var(--cat-life); }
.idn-sec-hdr__title--world         { color:var(--cat-world);         border-bottom-color:var(--cat-world); }
.idn-sec-hdr__title--sports        { color:var(--cat-sports);        border-bottom-color:var(--cat-sports); }
.idn-sec-hdr__title--entertainment { color:var(--cat-entertainment); border-bottom-color:var(--cat-entertainment); }
.idn-sec-hdr__title--health        { color:var(--cat-health);        border-bottom-color:var(--cat-health); }
.idn-sec-hdr__title--guides        { color:var(--cat-guides);        border-bottom-color:var(--cat-guides); }
.idn-sec-hdr__title--community     { color:var(--cat-guides);        border-bottom-color:var(--cat-guides); }
.idn-sec-hdr__title--economy       { color:var(--cat-business);      border-bottom-color:var(--cat-business); }
.idn-sec-hdr__title--real-estate   { color:var(--cat-property);      border-bottom-color:var(--cat-property); }
.idn-sec-hdr__title--special-coverage { color:var(--cat-uae);        border-bottom-color:var(--cat-uae); }

.idn-sec-hdr__more {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
}
.idn-sec-hdr__more:hover { color: var(--color-primary); }

/* Section body: 60/40 split big LEFT + right column */
.idn-sec-body {
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* Big story */
.idn-sec-big {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.idn-sec-big__img {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 3px;
  background: #111;
  margin-bottom: 12px;
}
.idn-sec-big__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s; }
.idn-sec-big__img:hover img { transform: scale(1.03); }
.idn-sec-big__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.28;
  color: var(--color-black);
  margin: 6px 0 8px;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.idn-sec-big__title a { color: inherit; text-decoration: none; }
.idn-sec-big__title a:hover { color: var(--color-primary); }
.idn-sec-big__body {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.idn-sec-big__exc {
  font-size: 0.84rem;
  color: var(--color-mid);
  line-height: 1.6;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right column */
.idn-sec-right {
  border-left: 1px solid var(--color-border-light);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Right column: vertical thumb+title list (screenshot layout) */
.idn-sec-thumblist {
  display: flex;
  flex-direction: column;
}
.idn-sec-thumbitem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
}
.idn-sec-thumbitem:last-child { border-bottom: none; }
.idn-sec-thumbitem__img {
  width: 110px;
  min-width: 110px;
  height: 74px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-border-light);
  flex-shrink: 0;
  position: relative;
}
.idn-sec-thumbitem__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s; }
.idn-sec-thumbitem:hover .idn-sec-thumbitem__img img { transform: scale(1.05); }
.idn-sec-thumbitem__body { flex:1; min-width:0; }
.idn-sec-thumbitem__title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.idn-sec-thumbitem:hover .idn-sec-thumbitem__title { color: var(--color-primary); }


/* ================================================================
   RESPONSIVE — TABLET (768–1100px)
   ================================================================ */
@media (max-width: 1100px) and (min-width: 768px) {
  .idn-hero-row {
    grid-template-columns: 1.1fr 1fr 260px;
    gap: 18px;
  }
  .idn-hero-card__title { font-size: 1.45rem; }
  .idn-sec-body { grid-template-columns: 56% 1fr; gap: 18px; }
  .idn-sec-big__title { font-size: 1.05rem; }
}

@media (max-width: 960px) and (min-width: 768px) {
  .idn-hero-row { grid-template-columns: 1.1fr 1fr; }
  .idn-hero-sidebar { display: none; }
}

/* ================================================================
   MOBILE — Stack everything, keep existing mobile styles
   ================================================================ */
@media (max-width: 767px) {
  .idn-hero-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 0 0;
  }
  .idn-hero-main { margin-bottom: 0; }
  .idn-hero-list {
    border-left: none;
    border-top: 2px solid var(--color-border-light);
    padding-left: 0;
    padding-top: 4px;
    margin-top: 16px;
  }
  .idn-hero-sidebar { display: none; }

  .idn-section { padding: 16px 0; }

  .idn-sec-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .idn-sec-right {
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    padding-left: 0;
    padding-top: 12px;
    margin-top: 12px;
  }
  .idn-hero-subgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .idn-subgrid-card__title { font-size: 0.8rem; }
  .idn-sec-thumbitem__img { width: 85px; min-width: 85px; height: 58px; }
  .idn-sec-thumbitem__title { font-size: 0.82rem; -webkit-line-clamp: 2; }

  .idn-hero-card__title { font-size: 1.2rem; }
  .idn-list-item__img { width: 80px; min-width: 80px; height: 60px; }
  .idn-list-item__title { font-size: 0.82rem; -webkit-line-clamp: 2; }
}

/* ================================================================
   LARGE SCREENS (1280px+)
   ================================================================ */
@media (min-width: 1280px) {
  .idn-hero-row {
    grid-template-columns: 1.1fr 1fr 300px;
    gap: 28px;
  }
  .idn-hero-card__title { font-size: 2rem; }
  .idn-sec-body { grid-template-columns: 60% 1fr; gap: 28px; }
  .idn-sec-big__title { font-size: 1.3rem; }
}

/* ================================================================
   IDN v7.1 — COMPREHENSIVE FIX PATCH
   Fixes: PC layout conflicts, mobile overflow, grid alignment,
   live data squares, section separators, touch UX
   ================================================================ */

/* ── GLOBAL: prevent horizontal scroll on all viewports ───────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ── PC: ensure idn-hero-row uses v7 grid (kill old overrides) ── */
@media (min-width: 769px) {
    .idn-hero-row {
        display: grid !important;
        grid-template-columns: 1.1fr 1fr 300px;
        gap: 24px;
        padding: 20px 0 24px;
        border-bottom: 1px solid var(--color-border-light);
        align-items: flex-start;
        background: var(--color-white);
    }
    /* Tablet */
    @media (max-width: 1100px) {
        .idn-hero-row {
            grid-template-columns: 1.1fr 1fr 260px !important;
            gap: 18px !important;
        }
    }
    @media (max-width: 960px) {
        .idn-hero-row {
            grid-template-columns: 1.1fr 1fr !important;
        }
        .idn-hero-sidebar { display: none !important; }
    }
}

/* ── PC: category section body ─────────────────────────────────── */
@media (min-width: 769px) {
    .idn-sec-body {
        display: grid !important;
        grid-template-columns: 58% 1fr;
        gap: 24px;
        align-items: flex-start;
    }
}

/* ── PC: nav bar contained cleanly inside idn-header ───────────── */
.idn-header .nav-primary {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── MOBILE: full hero stack with clean separators ─────────────── */
@media (max-width: 767px) {
    /* Hero card — full width image */
    .idn-hero-card__title { font-size: 1.15rem; }
    .idn-hero-card__exc   { display: none; }

    /* Subgrid: stay 2 col */
    .idn-hero-subgrid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px;
    }
    .idn-subgrid-card__body { padding: 6px 8px 8px; }
    .idn-subgrid-card__title { font-size: 0.78rem; -webkit-line-clamp: 2; }

    /* Latest list below hero */
    .idn-hero-list {
        margin-top: 14px;
        padding-top: 6px;
        border-top: 2px solid var(--color-border-light);
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* List items horizontal */
    .idn-list-item {
        gap: 10px;
        padding: 10px 0;
    }
    .idn-list-item__img {
        width: 82px !important;
        min-width: 82px !important;
        height: 58px !important;
    }
    .idn-list-item__title {
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
    }

    /* Section: full stack */
    .idn-section { padding: 14px 0; }
    .idn-sec-body {
        display: block !important;
        grid-template-columns: none;
    }
    .idn-sec-big__title { font-size: 1.05rem; }
    .idn-sec-big__exc   { display: none; }
    .idn-sec-big__img   { aspect-ratio: 16/9; }

    .idn-sec-right {
        border-left: none !important;
        border-top: 1px solid var(--color-border-light) !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        margin-top: 10px !important;
    }

    /* Thumb items on mobile */
    .idn-sec-thumbitem { padding: 8px 0; }
    .idn-sec-thumbitem__img {
        width: 82px !important;
        min-width: 82px !important;
        height: 56px !important;
    }
    .idn-sec-thumbitem__title {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }

    /* Section header */
    .idn-sec-hdr { margin-bottom: 12px; padding-bottom: 8px; }
    .idn-sec-hdr__title { font-size: 0.9rem; }
}

/* ── MOBILE: live data row scrollable ──────────────────────────── */
@media (max-width: 767px) {
    .idn-live-row { overflow: hidden; }
    .idn-live-row__inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        height: 36px;
        padding: 0 8px;
    }
    .idn-live-row__inner::-webkit-scrollbar { display: none; }
    .idn-live-item { font-size: 0.69rem; }
    .idn-live-item--right { margin-left: 10px; }
    .idn-live-sep { margin: 0 6px; }
}

/* ── MOBILE: square button values ─────────────────────────────── */
.idn-mob-sq__value {
    font-size: 0.46rem;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    text-align: center;
    letter-spacing: 0.2px;
}

/* ── TABLET (769-960px): hero 2-col ───────────────────────────── */
@media (min-width: 769px) and (max-width: 960px) {
    .idn-hero-row {
        grid-template-columns: 1.15fr 1fr !important;
        gap: 18px !important;
    }
    .idn-hero-sidebar { display: none !important; }
    .idn-hero-card__title { font-size: 1.45rem; }
    .idn-sec-body { grid-template-columns: 56% 1fr !important; gap: 16px !important; }
}

/* ── TOUCH: improve tap targets ───────────────────────────────── */
@media (max-width: 767px) {
    .mobile-bottom-nav__item { min-height: 56px; }
    .idn-mob-sq { min-height: 54px; }
    .idn-list-item,
    .idn-sec-thumbitem { min-height: 44px; }
}

/* ── MISC: idn-wrap background ────────────────────────────────── */
.idn-wrap {
    background: var(--color-white);
    overflow: hidden;
}

/* ── AD spaces: never overflow ────────────────────────────────── */
.ad-space {
    max-width: 100%;
    overflow: hidden;
}

/* ── SINGLE article: mobile content padding ───────────────────── */
@media (max-width: 767px) {
    .article-content { font-size: 1rem; line-height: 1.78; }
    .article-header__title { font-size: 1.45rem; line-height: 1.22; }
    .single-layout { padding: 12px 0; }
}

/* ── SEARCH OVERLAY: mobile full screen ───────────────────────── */
@media (max-width: 767px) {
    .search-overlay { padding-top: 70px; }
    .search-overlay__input { font-size: 1.2rem; }
}

/* ── FOOTER: 2-col on tablet, 1-col on phone ─────────────────── */
@media (max-width: 767px) {
    .footer__main {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }
    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .footer__bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .footer__main {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-lg) !important;
    }
}

/* ── CATEGORY PAGE: grid fix ──────────────────────────────────── */
@media (max-width: 767px) {
    .category-section__grid,
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }
}

/* END v7.1 PATCH */
/* ================================================================
   IDN v7.1 — PC / DESKTOP FIX PATCH
   Fixes: nav overflow on 1024-1280px, header grid alignment,
   sq-btn value text, topbar layout, mega menu z-index
   ================================================================ */

/* ── NAV: reduce padding at 1025-1280px to prevent overflow ───── */
@media (min-width: 769px) and (max-width: 1280px) {
    .nav-primary__menu > li > a {
        padding: 13px 10px;
        font-size: 0.75rem;
        letter-spacing: 0.2px;
    }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .nav-primary__menu > li > a {
        padding: 13px 8px;
        font-size: 0.72rem;
        letter-spacing: 0;
    }
    .nav-primary__menu > li > a::after {
        left: 8px;
        right: 8px;
    }
}
/* Nav never wraps or clips */
@media (min-width: 769px) {
    .nav-primary__inner {
        overflow: visible;
        flex-wrap: nowrap;
    }
    .nav-primary__menu {
        flex-wrap: nowrap;
        overflow: hidden;
    }
}

/* ── HEADER: sq-btn values always visible and truncated neatly ── */
.idn-sq-btn__value {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-align: center;
}

/* ── HEADER GRID: 3-col squares|logo|squares, never collapses ── */
@media (min-width: 769px) {
    .idn-header__inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center;
        gap: 20px;
    }
    .idn-header__logo {
        text-align: center;
        min-width: 0;
    }
    .idn-header__squares {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
}

/* ── TOPBAR: never wraps, right items don't fall off ────────────── */
@media (min-width: 769px) {
    .idn-topbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .idn-topbar__left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    .idn-topbar__right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .idn-topbar__date,
    .idn-topbar__hijri {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── MEGA MENU: correct z-index, no clipping ───────────────────── */
@media (min-width: 769px) {
    .mega-menu {
        z-index: 500;
        box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    }
    .nav-primary {
        overflow: visible !important;
        position: relative;
        z-index: 180;
    }
    .nav-primary__menu > li {
        overflow: visible;
    }
}

/* ── HERO ROW: PC - guaranteed 3-col with correct proportions ── */
@media (min-width: 1025px) {
    .idn-hero-row {
        grid-template-columns: 1.1fr 1fr 300px !important;
        gap: 24px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .idn-hero-row {
        grid-template-columns: 1.1fr 1fr !important;
        gap: 20px !important;
    }
    .idn-hero-sidebar { display: none !important; }
}

/* ── CATEGORY SECTIONS: PC - big+right grid ────────────────────── */
@media (min-width: 1025px) {
    .idn-sec-body {
        grid-template-columns: 58% 1fr !important;
        gap: 24px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .idn-sec-body {
        grid-template-columns: 56% 1fr !important;
        gap: 18px !important;
    }
}

/* ── SINGLE ARTICLE: sidebar shows on PC ──────────────────────── */
@media (min-width: 1025px) {
    .single-layout {
        display: grid;
        grid-template-columns: 1fr var(--sidebar-width);
        gap: var(--space-xl);
        align-items: flex-start;
    }
}

/* ── BREAKING NEWS TICKER: PC height fix ──────────────────────── */
@media (min-width: 769px) {
    .breaking-news-bar {
        height: 38px;
        overflow: hidden;
    }
}

/* ── CONTAINER: proper centering on all PC widths ─────────────── */
@media (min-width: 1281px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

/* END PC FIX PATCH */
/* ================================================================
   IDN v7.1 — BOTTOM NAV REDESIGN + ICON + FOOTER + LIVE ROW FIXES
   ================================================================ */

/* ── Kill ALL old mobile-bottom-nav rules to prevent conflicts ── */
.mobile-bottom-nav { display: none !important; }

/* ── NEW PREMIUM BOTTOM NAV ─────────────────────────────────── */
.idn-bottom-nav {
    display: none; /* hidden by default, shown only on mobile */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    z-index: 600;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.10);
}

.idn-bottom-nav__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
    align-items: stretch;
}

.idn-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: #999;
    font-family: var(--font-ui);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    padding: 6px 0 4px;
    position: relative;
}

.idn-bottom-nav__item.is-active,
.idn-bottom-nav__item:hover {
    color: var(--color-primary);
}

.idn-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
    line-height: 1;
}

.idn-bottom-nav__label {
    line-height: 1;
    white-space: nowrap;
}

/* Centre search button — elevated red pill */
.idn-bottom-nav__item--search {
    color: #fff;
    padding: 0;
    position: relative;
}

.idn-bottom-nav__search-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(204,0,0,0.35);
    font-size: 1.1rem;
    color: #fff;
    margin-top: -12px; /* lifts above the bar */
    transition: background 0.15s, transform 0.15s;
}

.idn-bottom-nav__item--search:hover .idn-bottom-nav__search-ring,
.idn-bottom-nav__item--search:active .idn-bottom-nav__search-ring {
    background: var(--color-primary-dark);
    transform: scale(1.06);
}

/* Active indicator dot above icon */
.idn-bottom-nav__item.is-active .idn-bottom-nav__icon::before {
    content: '';
    position: absolute;
    top: 2px;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

/* Show ONLY on mobile, never tablet/desktop */
@media (max-width: 767px) {
    .idn-bottom-nav { display: block; }
    body { padding-bottom: 62px !important; }
}
@media (min-width: 768px) {
    .idn-bottom-nav { display: none !important; }
    body { padding-bottom: 0 !important; }
}

/* ── LIVE ROW: fix overflow clipping on mobile ─────────────── */
/* The outer container must NOT clip the scrollable inner strip */
.idn-live-row {
    overflow: visible !important;
    position: relative;
}
/* The inner strip scrolls, outer just provides background */
.idn-live-row::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.idn-live-row__inner {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.idn-live-row__inner::-webkit-scrollbar { display: none; }

/* Live items — ensure values never truncate */
.idn-live-item strong {
    white-space: nowrap;
}

/* ── FOOTER: full proper styles ────────────────────────────── */
.site-footer {
    background: var(--color-black);
    color: rgba(255,255,255,0.65);
    padding-top: 56px;
    margin-top: 0;
}

/* Kill any "Powered by WordPress" that slips through */
#wp-footer,
.wp-footer-credit,
a[href*="wordpress.org"] {
    display: none !important;
}

.footer__col-title {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer__links a {
    font-family: var(--font-ui);
    font-size: 0.83rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
    display: flex;
    align-items: center;
}

.footer__links a:hover {
    color: var(--color-white);
    padding-left: 4px;
}

.footer__brand-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-white);
    margin-bottom: 4px;
}

.footer__brand-name span { color: var(--color-primary); }

.footer__brand-tagline {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
}

.footer__brand-desc {
    font-size: 0.85rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.45);
    margin-bottom: 20px;
    max-width: 320px;
}

.footer__social {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer__social a {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.footer__social a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.footer__newsletter .newsletter-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.footer__newsletter .newsletter-form input {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.15s;
}

.footer__newsletter .newsletter-form input:focus {
    border-color: var(--color-primary);
}

.footer__newsletter .newsletter-form input::placeholder {
    color: rgba(255,255,255,0.3);
}

.footer__newsletter .newsletter-form button {
    padding: 10px 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.footer__newsletter .newsletter-form button:hover {
    background: var(--color-primary-dark);
}

/* Footer bottom bar */
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    color: rgba(255,255,255,0.3);
    flex-wrap: wrap;
    gap: 10px;
}

.footer__bottom-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer__bottom-links a {
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    transition: color 0.15s;
}

.footer__bottom-links a:hover {
    color: var(--color-white);
}

/* Footer responsive */
@media (max-width: 767px) {
    .site-footer { padding-top: 36px; }
    .footer__main {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .footer__brand { padding-right: 0; }
    .footer__brand-name { font-size: 1.6rem; }
    .footer__brand-desc { max-width: 100%; }
    .footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 0;
    }
    .footer__bottom-links {
        justify-content: center;
        gap: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer__main {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}

/* ── MOBILE TOPBAR OVERFLOW FIX ─────────────────────────────── */
@media (max-width: 768px) {
    .idn-mob-topbar {
        gap: 5px;
        overflow: hidden;
        white-space: nowrap;
    }
    .idn-mob-topbar__right {
        flex-shrink: 0;
        gap: 5px;
    }
}

/* ── TABLET: ensure correct header shows ────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .idn-mobile-header { display: none !important; }
    .idn-header        { display: block !important; }
    .idn-topbar        { display: flex !important; }
}

/* END v7.1 NAV + ICON + FOOTER PATCH */
/* ================================================================
   IDN v7.1 — FINAL DEFINITIVE BREAKPOINT OVERRIDES
   These must come last to win all specificity battles.
   Mobile = 767px and below. Tablet/Desktop = 768px and above.
   ================================================================ */

/* MOBILE ONLY (≤767px) */
@media (max-width: 767px) {
    /* Mobile header: visible & sticky */
    .idn-mobile-header {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 600 !important;
    }
    /* Desktop header: hidden */
    .idn-header  { display: none !important; }
    .idn-topbar  { display: none !important; }
    .nav-primary { display: none !important; }
    /* Old v5/v6 headers: hidden */
    .site-header, .topbar, .mobile-header-bar { display: none !important; }
    /* Mobile bottom nav: visible */
    .idn-bottom-nav { display: block !important; }
    /* Old bottom nav: hidden */
    .mobile-bottom-nav { display: none !important; }
    /* Body padding for bottom nav */
    body { padding-bottom: 62px !important; }
}

/* TABLET + DESKTOP (≥768px) */
@media (min-width: 768px) {
    /* Mobile header: hidden */
    .idn-mobile-header { display: none !important; }
    /* Desktop header: visible */
    .idn-header  { display: block !important; }
    .idn-topbar  { display: flex !important; }
    .nav-primary { display: block !important; }
    /* Mobile bottom nav: hidden */
    .idn-bottom-nav    { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    /* No bottom padding needed */
    body { padding-bottom: 0 !important; }
}

/* END FINAL OVERRIDES */
/* ================================================================
   IDN v7.1 — BOTTOM NAV: FINAL AUTHORITATIVE RULES
   Must be position:fixed at ALL times so it NEVER enters page flow
   ================================================================ */

/* Base: always fixed, always at bottom — never in document flow */
.idn-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.10) !important;
    /* HIDDEN on desktop — overridden to block on mobile below */
    display: none !important;
    pointer-events: none;
}

/* TABLET & PHONE (≤1024px): show the bottom nav */
@media (max-width: 1024px) {
    .idn-bottom-nav {
        display: block !important;
        pointer-events: all;
    }
    body {
        padding-bottom: 62px !important;
    }
}

/* DESKTOP (≥1025px): absolutely hidden, no space reserved */
@media (min-width: 1025px) {
    .idn-bottom-nav {
        display: none !important;
        pointer-events: none;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* Inner grid */
.idn-bottom-nav .idn-bottom-nav__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
    align-items: stretch;
}

/* Each tab item */
.idn-bottom-nav .idn-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: #999999;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 6px 0 4px;
    -webkit-tap-highlight-color: transparent;
}

.idn-bottom-nav .idn-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    width: 22px;
    height: 22px;
}

.idn-bottom-nav .idn-bottom-nav__label {
    line-height: 1;
    white-space: nowrap;
    font-size: 0.55rem;
}

.idn-bottom-nav .idn-bottom-nav__item.is-active,
.idn-bottom-nav .idn-bottom-nav__item:hover {
    color: #CC0000;
}

/* Centre search button — elevated red circle */
.idn-bottom-nav .idn-bottom-nav__item--search {
    position: relative;
    padding: 0;
    color: #ffffff;
}

.idn-bottom-nav .idn-bottom-nav__search-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #CC0000;
    border-radius: 50%;
    box-shadow: 0 3px 14px rgba(204,0,0,0.40);
    font-size: 1.1rem;
    color: #ffffff;
    margin-top: -10px;
    transition: background 0.15s, transform 0.15s;
}

.idn-bottom-nav .idn-bottom-nav__item--search:hover .idn-bottom-nav__search-ring,
.idn-bottom-nav .idn-bottom-nav__item--search:active .idn-bottom-nav__search-ring {
    background: #990000;
    transform: scale(1.06);
}

/* Active dot indicator */
.idn-bottom-nav .idn-bottom-nav__item.is-active .idn-bottom-nav__icon {
    position: relative;
}
.idn-bottom-nav .idn-bottom-nav__item.is-active .idn-bottom-nav__icon::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #CC0000;
    border-radius: 50%;
}

/* END BOTTOM NAV FINAL RULES */
/* ================================================================
   IDN — MOBILE BOTTOM NAV (FINAL CLEAN VERSION)
   Matches screenshot: white bar, grey icons, red FAB search center,
   red active state, clean labels. ONLY on ≤1024px. NEVER on desktop.
   ================================================================ */

/* 1. Kill every previous bottom nav rule */
.idn-bottom-nav,
.mobile-bottom-nav {
    display: none !important;
}

/* 2. The nav itself — fixed, bottom, hidden by default */
#idnAppNav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -3px 18px rgba(0,0,0,0.10);
    z-index: 99999;
    -webkit-tap-highlight-color: transparent;
}

/* 3. Show ONLY on tablet and phone — hide on desktop */
@media (max-width: 1024px) {
    #idnAppNav {
        display: block;
    }
    body {
        padding-bottom: 64px !important;
    }
}
@media (min-width: 1025px) {
    #idnAppNav {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* 4. Inner 5-column grid */
#idnAppNav .idn-app-nav-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
    align-items: center;
}

/* 5. Each tab item */
#idnAppNav .idn-app-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #aaaaaa;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 0 4px;
    height: 100%;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

#idnAppNav .idn-app-nav-item i {
    font-size: 1.15rem;
    line-height: 1;
    display: block;
}

#idnAppNav .idn-app-nav-item span {
    display: block;
    line-height: 1;
    white-space: nowrap;
}

/* Active / hover state */
#idnAppNav .idn-app-nav-item.active,
#idnAppNav .idn-app-nav-item:active {
    color: #CC0000;
}

/* 6. FAB Search button — center, elevated red circle */
#idnAppNav .idn-app-nav-item--fab {
    position: relative;
    color: transparent !important; /* no label color needed */
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#idnAppNav .idn-app-nav-fab-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #CC0000;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(204,0,0,0.38), 0 2px 6px rgba(0,0,0,0.15);
    color: #ffffff;
    font-size: 1.2rem;
    margin-top: -18px; /* lift above bar */
    transition: background 0.15s, transform 0.12s;
    flex-shrink: 0;
}

#idnAppNav .idn-app-nav-item--fab:active .idn-app-nav-fab-ring,
#idnAppNav .idn-app-nav-item--fab:hover .idn-app-nav-fab-ring {
    background: #990000;
    transform: scale(1.07);
}

/* END BOTTOM NAV FINAL */
/* ================================================================
   IDN — BOTTOM NAV COMPLETE REBUILD v2
   Pixel-perfect across all phones. Icons above labels. FAB center.
   ONLY shows on ≤1024px. Completely invisible on desktop.
   ================================================================ */

/* --- Kill every previous version --- */
#idnAppNav,
.idn-bottom-nav,
.mobile-bottom-nav {
    display: none !important;
}

/* --- THE NAV --- */
#idnBottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.09);
    z-index: 99999;
    /* Hidden by default on desktop */
    display: none;
    /* Safe area for notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Show on phones and tablets only */
@media (max-width: 1024px) {
    #idnBottomBar { display: block; }
    html body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 1025px) {
    #idnBottomBar { display: none !important; }
    html body { padding-bottom: 0 !important; }
}

/* --- 5-column inner grid --- */
#idnBottomBar .bb-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 60px;
    align-items: stretch;
    width: 100%;
}

/* --- Each tab button/link --- */
#idnBottomBar .bb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #b0b0b0;
    font-family: 'DM Sans', -apple-system, Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-sizing: border-box;
}

#idnBottomBar .bb-item i {
    font-size: 20px;
    line-height: 1;
    display: block;
    margin: 0;
}

#idnBottomBar .bb-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

/* Active state */
#idnBottomBar .bb-item.is-active { color: #CC0000; }
#idnBottomBar .bb-item:active    { color: #CC0000; }

/* --- CENTER FAB: Search --- */
#idnBottomBar .bb-fab {
    position: relative;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    color: transparent;
    height: 60px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

#idnBottomBar .bb-fab-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    width: 52px;
    height: 52px;
    background: #CC0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 14px rgba(204,0,0,0.40),
        0 2px 4px rgba(0,0,0,0.12);
    color: #fff;
    font-size: 20px;
    transition: background 0.15s, transform 0.12s;
    z-index: 2;
}

#idnBottomBar .bb-fab:active .bb-fab-circle,
#idnBottomBar .bb-fab:hover .bb-fab-circle {
    background: #aa0000;
    transform: translate(-50%, -68%) scale(1.06);
}

/* --- Responsive scaling for very small screens --- */
@media (max-width: 360px) {
    #idnBottomBar .bb-item i { font-size: 18px; }
    #idnBottomBar .bb-label  { font-size: 9px; }
    #idnBottomBar .bb-fab-circle { width: 46px; height: 46px; font-size: 18px; }
}
@media (max-width: 320px) {
    #idnBottomBar .bb-item   { gap: 2px; }
    #idnBottomBar .bb-item i { font-size: 16px; }
    #idnBottomBar .bb-label  { font-size: 8px; }
    #idnBottomBar .bb-fab-circle { width: 42px; height: 42px; font-size: 16px; }
}
/* END BOTTOM BAR REBUILD */
/* ================================================================
   ABSOLUTE FINAL: Kill bottom nav on desktop — no exceptions
   ================================================================ */
@media screen and (min-width: 1025px) {
    #idnBottomBar,
    #idnAppNav,
    .idn-bottom-nav,
    .mobile-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    body, html { padding-bottom: 0 !important; }
}
/* ================================================================
   ABSOLUTE FINAL: WP Admin bar = desktop user — kill bottom nav
   ================================================================ */
body.admin-bar #idnBottomBar,
body.admin-bar #idnAppNav,
body.admin-bar .idn-bottom-nav,
body.admin-bar .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
body.admin-bar {
    padding-bottom: 0 !important;
}
/* END ADMIN BAR KILL */
/* ================================================================
   MEGA MENU FINAL FIX — Above WP admin bar, no clipping, instant
   ================================================================ */

/* Nav container must NEVER clip its children */
.nav-primary,
.idn-header,
.nav-primary__menu,
.nav-primary__menu > li {
    overflow: visible !important;
}

/* Mega menu — z-index above everything including WP admin bar (99999) */
.mega-menu {
    z-index: 100000 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0ms linear 150ms;
}

/* On hover — instant pointer-events, fast fade in */
.nav-primary__menu > li:hover > .mega-menu,
.nav-primary__menu > li:focus-within > .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translateY(0) !important;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0ms linear 0ms !important;
}

/* Speed up ALL theme transitions */
:root {
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 220ms ease;
}

/* END MEGA MENU FIX */

/* ================================================================
   IDN HOMEPAGE — CLEAN REBUILD v2
   All idn-hp-* class names — zero conflict with existing CSS
   ================================================================ */

/* Fix parent overflow that breaks grid layout */
.idn-wrap { overflow: visible !important; }

/* ── AD BANNER ───────────────────────────────────────────────── */
.idn-ad-banner {
  text-align: center; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; border: 1px solid #e8e8e8;
  border-radius: 4px; color: #aaa; font-size: .75rem; letter-spacing: 1px;
}

/* ── RAMADAN BAR ─────────────────────────────────────────────── */
.idn-ramadan-bar { background: linear-gradient(135deg,#2d1b6b,#1a0f40); padding: 14px 0; }
.idn-ramadan-bar__inner { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
.idn-ramadan-bar__left { display:flex;align-items:center;gap:12px;font-size:1.6rem; }
.idn-ramadan-bar__left > div strong { font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:1.05rem;color:#C9A84C;display:block; }
.idn-ramadan-bar__left > div span { font-size:.78rem;color:rgba(255,255,255,.7); }
.idn-ramadan-bar__btn { display:inline-flex;align-items:center;gap:6px;border:1.5px solid #C9A84C;color:#C9A84C;padding:7px 18px;border-radius:50px;font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════
   OUTER PAGE GRID
   Left: all content  |  Right: sidebar (fixed 280px)
   Sidebar stacks below content below 900px
   ═══════════════════════════════════════════════════════════ */
.idn-hp-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 48px;
  box-sizing: border-box;
  align-items: flex-start;
}
.idn-hp-wrap > * { min-width: 0; }
.idn-hp-main { min-width: 0; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.idn-hp-sidebar {
  min-width: 0;
  width: 100%;
}
/* Sticky — stays in view as you scroll. NO internal scroll. */
.idn-hp-sidebar-inner {
  position: sticky;
  top: 20px;
  /* No max-height, no overflow — sidebar just sticks, doesn't scroll itself */
}
body.admin-bar .idn-hp-sidebar-inner { top: 52px; }

/* Sidebar content containment */
.idn-hp-sidebar-inner .sidebar,
.idn-hp-sidebar-inner .sidebar * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.idn-hp-sidebar-inner .sidebar-widget {
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.idn-hp-sidebar-inner table {
  width: 100% !important;
  table-layout: fixed !important;
  word-break: break-word !important;
}
.idn-hp-sidebar-inner img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   2 columns: [left: big story + 2×2 grid] [right: latest list]
   ═══════════════════════════════════════════════════════════ */
.idn-hp-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 2px solid #e8e8e8;
  margin-bottom: 0;
}

/* Left column wrapper */
.idn-hp-hero-left { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.idn-hp-hero__img {
  display: block; position: relative;
  aspect-ratio: 16/9; overflow: hidden;
  border-radius: 4px; background: #111;
}
.idn-hp-hero__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.idn-hp-hero__img:hover img { transform:scale(1.03); }
.idn-hp-hero__body { padding-top: 12px; }
.idn-hp-hero__title {
  font-family: 'Playfair Display',Georgia,serif;
  font-size: 1.6rem; font-weight: 900; line-height: 1.2;
  color: #0a0a0a; margin: 6px 0 10px;
}
.idn-hp-hero__title a { color:inherit;text-decoration:none; }
.idn-hp-hero__title a:hover { color:#CC0000; }
.idn-hp-hero__exc { font-size:.88rem;color:#555;line-height:1.65;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* 2×2 Subgrid — sits below big story, still in left column */
.idn-hp-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e8e8e8;
}
.idn-hp-subcard { display:flex;flex-direction:column;text-decoration:none; }
.idn-hp-subcard__img { position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#e8e8e8; }
.idn-hp-subcard__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s; }
.idn-hp-subcard:hover .idn-hp-subcard__img img { transform:scale(1.04); }
.idn-hp-subcard__cat { position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.68);color:#fff;font-size:.5rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 5px;border-radius:2px; }
.idn-hp-subcard__body { padding-top:6px; }
.idn-hp-subcard__body h3 { font-family:'Playfair Display',Georgia,serif;font-size:.8rem;font-weight:700;color:#1a1a1a;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.idn-hp-subcard:hover .idn-hp-subcard__body h3 { color:#CC0000; }

/* Latest list — right column */
.idn-hp-latestwrap {
  border-left: 1px solid #e8e8e8;
  padding-left: 20px;
  min-width: 0;
}
.idn-hp-latest-label {
  font-family:'DM Sans',Arial,sans-serif;font-size:.68rem;font-weight:900;
  letter-spacing:2px;text-transform:uppercase;color:#CC0000;
  border-bottom:2px solid #CC0000;padding-bottom:8px;margin-bottom:4px;display:block;
}
.idn-hp-litem { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0f0f0;text-decoration:none;align-items:flex-start; }
.idn-hp-litem:last-child { border-bottom:none; }
.idn-hp-litem__img { width:78px;min-width:78px;height:56px;border-radius:3px;overflow:hidden;background:#e8e8e8;flex-shrink:0; }
.idn-hp-litem__img img { width:100%;height:100%;object-fit:cover;display:block; }
.idn-hp-litem__body { flex:1;min-width:0; }
.idn-hp-litem__body h3 { font-family:'Playfair Display',Georgia,serif;font-size:.84rem;font-weight:700;color:#1a1a1a;line-height:1.35;margin:3px 0 5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.idn-hp-litem:hover .idn-hp-litem__body h3 { color:#CC0000; }

/* ═══════════════════════════════════════════════════════════
   CATEGORY SECTIONS
   Big featured story left + article list right
   ═══════════════════════════════════════════════════════════ */
.idn-hp-section { padding:22px 0;border-bottom:1px solid #e8e8e8; }

.idn-hp-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
/* Coloured underline bar below header */
.idn-hp-sec-hdr::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 1px;
  background: #e8e8e8;
}
.idn-hp-sec-hdr__name {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0a0a0a;
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 3px solid #CC0000;
  position: relative;
  z-index: 1;
}
.idn-hp-sec-hdr__name--business,.idn-hp-sec-hdr__name--economy { border-color:#0066CC; }
.idn-hp-sec-hdr__name--technology { border-color:#6600CC; }
.idn-hp-sec-hdr__name--sports     { border-color:#006633; }
.idn-hp-sec-hdr__name--entertainment { border-color:#CC0066; }
.idn-hp-sec-hdr__name--lifestyle  { border-color:#CC6600; }
.idn-hp-sec-hdr__name--world      { border-color:#333; }
.idn-hp-sec-hdr__name--real-estate{ border-color:#007755; }
.idn-hp-sec-hdr__more { font-family:'DM Sans',Arial,sans-serif;font-size:.75rem;font-weight:700;color:#CC0000;text-decoration:none; }

.idn-hp-sec-body {
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: flex-start;
}
.idn-hp-sec-body > * { min-width:0; }

/* Featured story */
.idn-hp-sec-big__img { display:block;position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:#e8e8e8; }
.idn-hp-sec-big__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.idn-hp-sec-big__img:hover img { transform:scale(1.03); }
.idn-hp-sec-big__body { padding-top:10px; }
.idn-hp-sec-big__body h2 { font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;font-weight:900;line-height:1.3;color:#0a0a0a;margin:5px 0 8px; }
.idn-hp-sec-big__body h2 a { color:inherit;text-decoration:none; }
.idn-hp-sec-big__body h2 a:hover { color:#CC0000; }
.idn-hp-sec-big__body p { font-size:.83rem;color:#555;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* Article list */
.idn-hp-sec-list { border-left:1px solid #e8e8e8;padding-left:16px;display:flex;flex-direction:column; }
.idn-hp-sec-item { display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f0f0f0;text-decoration:none;align-items:flex-start; }
.idn-hp-sec-item:last-child { border-bottom:none; }
.idn-hp-sec-item__img { width:74px;min-width:74px;height:54px;border-radius:3px;overflow:hidden;background:#e8e8e8;flex-shrink:0;position:relative; }
.idn-hp-sec-item__img img { width:100%;height:100%;object-fit:cover;display:block; }
.idn-hp-sec-item__body { flex:1;min-width:0; }
.idn-hp-sec-item__cat { font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#CC0000;display:block;margin-bottom:2px; }
.idn-hp-sec-item__body h3 { font-family:'Playfair Display',Georgia,serif;font-size:.82rem;font-weight:700;color:#1a1a1a;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.idn-hp-sec-item:hover .idn-hp-sec-item__body h3 { color:#CC0000; }

.idn-hp-ad-strip { min-height:90px;margin:8px 0 16px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border:1px solid #e8e8e8;border-radius:4px;color:#aaa;font-size:.72rem;letter-spacing:1px; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Large desktop: keep sidebar at 280px */
@media (min-width:1200px) {
  .idn-hp-wrap { padding: 20px 32px 48px; gap: 28px; }
}

/* Tablet landscape: narrow sidebar */
@media (max-width:1100px) {
  .idn-hp-wrap { grid-template-columns: minmax(0,1fr) 240px; gap:20px; padding:16px 16px 40px; }
}

/* Tablet portrait: sidebar drops below, side by side widgets */
@media (max-width:900px) {
  .idn-hp-wrap { grid-template-columns: 1fr; gap:0; }
  .idn-hp-sidebar { margin-top:28px; width:100%; }
  .idn-hp-sidebar-inner {
    position: static;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* Ad spans full width in tablet sidebar grid */
  .idn-hp-sidebar-inner > .sidebar > .ad-space:first-child,
  .idn-hp-sidebar-inner > .sidebar > .ad-space:last-child { grid-column: 1/-1; }
}

/* Mobile: single column everything */
@media (max-width:620px) {
  .idn-hp-hero { grid-template-columns: 1fr; gap:16px; }
  .idn-hp-latestwrap { border-left:none;padding-left:0;border-top:1px solid #e8e8e8;padding-top:12px;margin-top:4px; }
  .idn-hp-hero__title { font-size:1.3rem; }
  .idn-hp-sec-body { grid-template-columns:1fr; }
  .idn-hp-sec-list { border-left:none;padding-left:0;border-top:1px solid #e8e8e8;padding-top:10px;margin-top:10px; }
  .idn-hp-sidebar-inner { grid-template-columns:1fr; }
  .idn-hp-wrap { padding:12px 12px 32px; }
  .idn-hp-subgrid { grid-template-columns: 1fr 1fr; }
}

/* END IDN HOMEPAGE REBUILD v2 */

/* ================================================================
   PREMIUM ARTICLE PAGE — IDN v7
   ================================================================ */

/* Reading progress bar */
#idn-progress-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%; background: #CC0000;
  transition: width .1s linear;
}

.idn-article-wrap { background: #fff; }

/* ── ARTICLE HEADER ─────────────────────────────────────────── */
.idn-art-header {
  padding-top: 28px;
  padding-bottom: 0;
  max-width: 900px;
  margin-left: auto; margin-right: auto;
}

.idn-art-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .72rem; color: #888;
  margin-bottom: 16px;
}
.idn-art-breadcrumb a { color: #888; text-decoration: none; }
.idn-art-breadcrumb a:hover { color: #CC0000; }
.idn-art-breadcrumb span { color: #ccc; }

.idn-art-badges {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.idn-art-breaking {
  display: inline-flex; align-items: center; gap: 6px;
  background: #CC0000; color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .65rem; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.idn-art-sponsored {
  background: var(--color-gold,#C9A84C); color: #1a1a1a;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .65rem; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}

.idn-art-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem; font-weight: 900;
  line-height: 1.18; color: #0a0a0a;
  margin: 0 0 16px;
  letter-spacing: -.3px;
}

.idn-art-subtitle {
  font-family: 'Source Sans 3', Helvetica, sans-serif;
  font-size: 1.15rem; color: #444;
  line-height: 1.6; margin-bottom: 20px;
  border-left: 3px solid #CC0000;
  padding-left: 14px;
}

/* Meta row */
.idn-art-meta {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px 16px;
  padding: 16px 0;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 16px;
}
.idn-art-meta__author {
  display: flex; align-items: center; gap: 10px;
}
.idn-art-meta__avatar {
  width: 38px; height: 38px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid #e8e8e8;
}
.idn-art-meta__name {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .85rem; font-weight: 700; color: #1a1a1a;
  text-decoration: none; display: block;
}
.idn-art-meta__name:hover { color: #CC0000; }
.idn-art-meta__role { font-size: .72rem; color: #888; }
.idn-art-meta__divider { width: 1px; height: 28px; background: #e8e8e8; }
.idn-art-meta__item {
  display: flex; align-items: center; gap: 5px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .78rem; color: #666;
}
.idn-art-meta__item i { color: #999; }
.idn-art-meta__item--muted { color: #aaa; }

/* Top share bar */
.idn-art-share {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 12px 0 20px;
}
.idn-art-share__label {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .72rem; font-weight: 700;
  color: #888; text-transform: uppercase;
  letter-spacing: 1px;
}
.idn-art-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 7px 14px;
  border-radius: 5px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .78rem; font-weight: 700;
  color: #fff; text-decoration: none;
  border: none; cursor: pointer;
  transition: opacity .15s, transform .15s;
  line-height: 1;
}
.idn-art-share__btn:hover { opacity: .85; transform: translateY(-1px); }
.idn-art-share__btn--fb { background: #1877F2; }
.idn-art-share__btn--tw { background: #000; }
.idn-art-share__btn--wa { background: #25D366; }
.idn-art-share__btn--li { background: #0A66C2; }
.idn-art-share__btn--copy { background: #555; }
/* Icon-only (top bar) */
.idn-art-share:not(.idn-art-share--bottom) .idn-art-share__btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  font-size: .85rem;
}

/* ── FEATURED IMAGE ─────────────────────────────────────────── */
.idn-art-hero-img {
  margin: 0 auto 0;
  max-width: 900px;
  padding-bottom: 0;
}
.idn-art-hero-img img {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
}
.idn-art-hero-img__cap {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .75rem; color: #888;
  text-align: center; margin-top: 8px;
  font-style: italic;
}

/* ── BODY: content + sidebar ────────────────────────────────── */
.idn-art-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 60px;
  align-items: flex-start;
}
.idn-art-body > * { min-width: 0; }
.idn-art-content-col { min-width: 0; }

/* Ad strip */
.idn-art-ad-strip {
  min-height: 90px; margin: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; border: 1px solid #e8e8e8;
  border-radius: 4px; color: #aaa; font-size: .72rem; letter-spacing: 1px;
}

/* ── ARTICLE CONTENT TYPOGRAPHY ─────────────────────────────── */
.idn-art-content {
  font-family: 'Source Sans 3', Helvetica, sans-serif;
  font-size: 1.05rem; line-height: 1.85; color: #222;
  margin-bottom: 32px;
}
.idn-art-content p { margin-bottom: 1.4em; }
.idn-art-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem; font-weight: 900; color: #0a0a0a;
  margin: 1.8em 0 .7em; line-height: 1.25;
  padding-top: 8px; border-top: 2px solid #e8e8e8;
}
.idn-art-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem; font-weight: 700; color: #1a1a1a;
  margin: 1.5em 0 .6em; line-height: 1.3;
}
.idn-art-content h4 {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 1rem; font-weight: 800; color: #1a1a1a;
  text-transform: uppercase; letter-spacing: .5px;
  margin: 1.4em 0 .5em;
}
.idn-art-content blockquote {
  margin: 2em 0; padding: 20px 24px;
  border-left: 4px solid #CC0000;
  background: #fafafa;
  border-radius: 0 6px 6px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; font-style: italic;
  color: #333; line-height: 1.65;
}
.idn-art-content blockquote cite {
  display: block; margin-top: 10px;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .8rem; font-style: normal;
  color: #888; font-weight: 600;
}
.idn-art-content ul, .idn-art-content ol {
  margin: 1.2em 0 1.2em 1.5em; padding: 0;
}
.idn-art-content li { margin-bottom: .5em; }
.idn-art-content strong { font-weight: 700; color: #0a0a0a; }
.idn-art-content a { color: #CC0000; text-decoration: underline; text-underline-offset: 2px; }
.idn-art-content a:hover { color: #990000; }
.idn-art-content img {
  width: 100%; height: auto; display: block;
  border-radius: 5px; margin: 1.5em 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.idn-art-content figcaption {
  font-size: .78rem; color: #888; text-align: center;
  margin-top: -1em; margin-bottom: 1.5em; font-style: italic;
}
.idn-art-content table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0;
  font-size: .9rem;
}
.idn-art-content th {
  background: #1a1a1a; color: #fff;
  padding: 10px 14px; text-align: left;
  font-family: 'DM Sans', Arial, sans-serif; font-weight: 700;
}
.idn-art-content td {
  padding: 10px 14px; border-bottom: 1px solid #e8e8e8;
}
.idn-art-content tr:nth-child(even) td { background: #f8f8f8; }

/* Tags */
.idn-art-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 20px 0; border-top: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.idn-art-tags__label {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .72rem; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 1px;
}
.idn-art-tag {
  padding: 5px 12px; border-radius: 50px;
  background: #f0f0f0; color: #444;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .78rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.idn-art-tag:hover { background: #CC0000; color: #fff; }

/* Bottom share */
.idn-art-share--bottom {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 0; margin-bottom: 28px;
}
.idn-art-share--bottom .idn-art-share__btn { border-radius: 5px; }

/* Author box */
.idn-art-author {
  display: flex; gap: 20px; align-items: flex-start;
  background: #f8f8f8; border-radius: 10px;
  padding: 24px; margin-bottom: 28px;
  border: 1px solid #e8e8e8;
}
.idn-art-author__photo {
  width: 72px; height: 72px;
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.idn-art-author__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: #0a0a0a;
  margin-bottom: 2px;
}
.idn-art-author__role {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .75rem; color: #CC0000;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 8px;
}
.idn-art-author__bio {
  font-size: .88rem; color: #555; line-height: 1.6;
  margin-bottom: 12px;
}
.idn-art-author__links {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.idn-art-author__links a {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e8e8e8; color: #555;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; transition: background .15s, color .15s;
  text-decoration: none;
}
.idn-art-author__links a:hover { background: #CC0000; color: #fff; }
.idn-art-author__more {
  display: inline-flex; align-items: center;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .8rem; font-weight: 700;
  color: #CC0000; text-decoration: none;
  border: 1.5px solid #CC0000;
  padding: 5px 14px; border-radius: 5px;
  transition: background .15s, color .15s;
}
.idn-art-author__more:hover { background: #CC0000; color: #fff; }

/* Related articles */
.idn-art-related { margin-bottom: 32px; }
.idn-art-related__hdr {
  display: flex; align-items: center;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid #e8e8e8; position: relative;
}
.idn-art-related__hdr span {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .8rem; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #0a0a0a; padding-bottom: 10px;
  border-bottom: 3px solid #CC0000;
  position: absolute; bottom: -2px; left: 0;
}
.idn-art-related__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.idn-art-related__card { display: flex; flex-direction: column; text-decoration: none; }
.idn-art-related__img {
  aspect-ratio: 16/9; overflow: hidden;
  border-radius: 5px; background: #e8e8e8; margin-bottom: 10px;
}
.idn-art-related__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s; }
.idn-art-related__card:hover .idn-art-related__img img { transform: scale(1.04); }
.idn-art-related__body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .9rem; font-weight: 700; color: #1a1a1a;
  line-height: 1.35; margin: 4px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idn-art-related__card:hover .idn-art-related__body h3 { color: #CC0000; }

/* Post nav */
.idn-art-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 32px;
}
.idn-art-nav__item {
  display: flex; flex-direction: column; gap: 4px;
  background: #f8f8f8; border: 1px solid #e8e8e8;
  border-radius: 8px; padding: 16px;
  text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.idn-art-nav__item:hover { border-color: #CC0000; box-shadow: 0 2px 12px rgba(204,0,0,.1); }
.idn-art-nav__item--next { text-align: right; }
.idn-art-nav__dir {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: #CC0000;
}
.idn-art-nav__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .88rem; font-weight: 700; color: #1a1a1a;
  line-height: 1.3;
}

/* ── ARTICLE SIDEBAR ─────────────────────────────────────────── */
.idn-art-sidebar { min-width: 0; width: 100%; }
.idn-art-sidebar-inner {
  position: sticky; top: 20px;
}
body.admin-bar .idn-art-sidebar-inner { top: 52px; }
.idn-art-sidebar-inner .sidebar,
.idn-art-sidebar-inner .sidebar * { max-width: 100% !important; box-sizing: border-box !important; }
.idn-art-sidebar-inner .sidebar-widget { width: 100% !important; overflow: hidden !important; }
.idn-art-sidebar-inner table { width: 100% !important; table-layout: fixed !important; }
.idn-art-sidebar-inner img { max-width: 100% !important; height: auto !important; }

/* ── STICKY MOBILE SHARE ─────────────────────────────────────── */
.idn-art-sticky-share {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  display: none;
  background: #fff; border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  gap: 10px; justify-content: center; align-items: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.idn-art-sticky-share__btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity .15s;
}
.idn-art-sticky-share__btn:hover { opacity: .85; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .idn-art-body { grid-template-columns: minmax(0,1fr) 250px; gap: 28px; }
}
@media (max-width: 900px) {
  .idn-art-body { grid-template-columns: 1fr; }
  .idn-art-sidebar { display: none; } /* hide sidebar on tablet, show sticky share */
  .idn-art-sticky-share { display: flex; }
  .idn-art-related__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .idn-art-title { font-size: 2rem; }
}
@media (max-width: 620px) {
  .idn-art-header { padding-top: 16px; }
  .idn-art-title { font-size: 1.6rem; }
  .idn-art-subtitle { font-size: 1rem; }
  .idn-art-content { font-size: 1rem; }
  .idn-art-related__grid { grid-template-columns: 1fr; }
  .idn-art-nav { grid-template-columns: 1fr; }
  .idn-art-nav__item--next { text-align: left; }
  .idn-art-author { flex-direction: column; }
  .idn-art-meta { gap: 6px 10px; }
  .idn-art-meta__divider { display: none; }
  .idn-art-body { padding-top: 20px; }
}

/* Keyframes */
@keyframes fadeUp {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* END PREMIUM ARTICLE */

/* ── SINGLE ARTICLE SIDEBAR — containment fix ── */
.single-layout > aside {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.single-layout > aside .sidebar,
.single-layout > aside .sidebar * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.single-layout > aside .sidebar-widget {
  width: 100% !important;
  overflow: hidden !important;
}
.single-layout > aside table {
  width: 100% !important;
  table-layout: fixed !important;
}
.single-layout > aside img {
  max-width: 100% !important;
  height: auto !important;
}
/* Make single layout sidebar also sticky */
.single-layout > aside .sidebar {
  position: sticky;
  top: 20px;
}
body.admin-bar .single-layout > aside .sidebar { top: 52px; }

/* Remove the article page CSS we added in previous session */
#idn-progress-bar { display: none; }
.idn-article-wrap,
.idn-art-header,
.idn-art-hero-img,
.idn-art-body,
.idn-art-content-col,
.idn-art-sidebar,
.idn-art-sidebar-inner,
.idn-art-sticky-share { display: none; }

/* END SINGLE FIX */

/* ============================================================
   IDN v8 HOMEPAGE — New layout CSS
   Red & Black / Dark Navy color scheme
   ============================================================ */

/* ── Shared section wrapper ── */
.idn-hero-section,
.idn-strip-wrap,
.idn-cs { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-light); }
.idn-cs + .idn-cs { padding-top: var(--space-lg); }

/* ── Section header ── */
.idn-sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); padding-bottom: 8px; border-bottom: 2px solid var(--color-border-light); }
.idn-sec-title { font-family: var(--font-ui); font-size: 1rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; position: relative; padding-bottom: 4px; }
.idn-sec-title::after { content:''; position:absolute; bottom:-10px; left:0; width:100%; height:3px; border-radius:2px; }
.idn-sec-title--uae        { color: #CC0000; } .idn-sec-title--uae::after        { background:#CC0000; }
.idn-sec-title--world      { color: #1a1a1a; } .idn-sec-title--world::after      { background:#C9A84C; }
.idn-sec-title--business   { color: #0066CC; } .idn-sec-title--business::after   { background:#0066CC; }
.idn-sec-title--tech       { color: #6600CC; } .idn-sec-title--tech::after       { background:#6600CC; }
.idn-sec-title--lifestyle  { color: #CC6600; } .idn-sec-title--lifestyle::after  { background:#CC6600; }
.idn-sec-more { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; color: #CC0000; text-decoration: none; }
.idn-sec-more:hover { color: #990000; }

/* ── Hero grid ── */
.idn-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr 280px; gap: var(--space-lg); align-items: start; }
.idn-hero-left { display: flex; flex-direction: column; gap: var(--space-md); }
.idn-hero-main { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.idn-hero-main__img { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); min-height: 300px; }
.idn-hero-main__img img { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform 0.4s; }
.idn-hero-main:hover .idn-hero-main__img img { transform: scale(1.03); }
.idn-hero-main__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 60px var(--space-md) var(--space-md);
    background: linear-gradient(transparent, rgba(0,0,0,0.82) 40%, rgba(0,0,0,0.95));
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.idn-hero-main__title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 900; line-height: 1.25; margin: 6px 0; }
.idn-hero-main__title a { color: #fff !important; text-decoration: none; }
.idn-hero-main__title a:hover { color: rgba(255,255,255,0.85) !important; }
.idn-hero-main__exc { font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.5; margin-bottom: 6px; }
.idn-hero-main__body .idn-meta { color: rgba(255,255,255,0.65); font-size: 0.78rem; }
.idn-hero-main__body .idn-cat-tag { margin-bottom: 6px; }
.idn-hero-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.idn-hero-subcard { display: block; text-decoration: none; }
.idn-hero-subcard__img { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16/10; }
.idn-hero-subcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-hero-subcard:hover .idn-hero-subcard__img img { transform: scale(1.04); }
.idn-hero-subcard__cat { position: absolute; bottom: 4px; left: 4px; font-size: 0.55rem; font-weight: 800; padding: 2px 5px; border-radius: 2px; background: rgba(0,0,0,0.7); color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.idn-hero-subcard__body { padding: 4px 0 0; }
.idn-hero-subcard__body h3 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Latest News column ── */
.idn-hero-latest { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.idn-widget-head { padding: 10px var(--space-md); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.idn-widget-head--red  { background: var(--color-primary); }
.idn-widget-head--blue { background: #1a6b9e; }
.idn-widget-head--dark { background: #1a2744; }
.idn-widget-head i { margin-right: 5px; }
.idn-litem { display: flex; gap: 10px; padding: 10px var(--space-md); border-bottom: 1px solid var(--color-border-light); text-decoration: none; transition: background 0.15s; }
.idn-litem:last-child { border-bottom: none; }
.idn-litem:hover { background: #fff; }
.idn-litem__img { width: 68px; min-width: 68px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.idn-litem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-litem__body { flex: 1; min-width: 0; }
.idn-litem__body h3 { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 2px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Right hero widgets ── */
.idn-hero-right { display: flex; flex-direction: column; gap: var(--space-md); }
.idn-sb-widget { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.idn-widget-body { padding: var(--space-md); }
.idn-popular-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; align-items: flex-start; }
.idn-popular-row:last-child { border-bottom: none; }
.idn-pop-num { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900; min-width: 18px; line-height: 1; }
.idn-pop-num--gold   { color: #C9A84C; }
.idn-pop-num--silver { color: #888; }
.idn-pop-num--bronze { color: #CC6600; }
.idn-pop-num--plain  { color: #ccc; }
.idn-popular-row h4 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-popular-row:hover h4 { color: var(--color-primary); }

/* Weather widget */
.idn-weather-body { padding: 0; }
.idn-wx-main { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); background: linear-gradient(135deg,#1a6b9e,#0d4f7a); color: #fff; }
.idn-wx-temp { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 900; line-height: 1; }
.idn-wx-desc { font-size: 0.78rem; opacity: 0.85; margin: 2px 0; }
.idn-wx-sub  { font-size: 0.68rem; opacity: 0.65; }
.idn-wx-icon { font-size: 2.8rem; line-height: 1; }
.idn-wb-btn { display: block; text-align: center; padding: 8px; background: #1a6b9e; color: #fff; font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: background 0.15s; }
.idn-wb-btn:hover { background: #0d4f7a; color: #fff; }

/* Newsletter */
.idn-nl-desc { font-size: 0.82rem; color: var(--color-mid); line-height: 1.5; margin-bottom: var(--space-sm); }
.idn-nl-form { display: flex; flex-direction: column; gap: 6px; }
.idn-nl-form input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.82rem; font-family: var(--font-ui); outline: none; transition: border-color 0.15s; }
.idn-nl-form input:focus { border-color: var(--color-primary); }
.idn-nl-form button { background: var(--color-primary); color: #fff; border: none; padding: 9px 14px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 800; cursor: pointer; letter-spacing: 0.3px; transition: background 0.15s; }
.idn-nl-form button:hover { background: var(--color-primary-dark); }
.idn-nl-msg  { font-size: 0.78rem; min-height: 18px; margin-top: 4px; }
.idn-nl-fine { font-size: 0.68rem; color: var(--color-muted); margin-top: 4px; }

/* Self-promo small */
.idn-promo-sm { display: flex; align-items: center; gap: 10px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-left: 3px solid var(--pc,#CC0000); border-radius: var(--radius-sm); padding: 10px 12px; text-decoration: none; transition: background 0.15s; }
.idn-promo-sm:hover { background: #fff; }
.idn-promo-sm > i:first-child { font-size: 1.2rem; color: var(--pc,#CC0000); min-width: 20px; text-align: center; }
.idn-promo-sm div { flex: 1; min-width: 0; }
.idn-promo-sm strong { display: block; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 800; color: var(--color-dark); margin-bottom: 2px; }
.idn-promo-sm span { font-size: 0.7rem; color: var(--color-muted); }
.idn-promo-sm__arr { font-size: 0.65rem; color: var(--pc,#CC0000); }

/* Self-promo full strip */
.idn-promo-strip { background: #1a2744; padding: var(--space-md) 0; margin: var(--space-md) 0; }
.idn-promo-inner { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); }
.idn-promo-card { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.1); transition: background 0.15s; }
.idn-promo-card:hover { background: rgba(255,255,255,0.07); }
.idn-promo-card > i { font-size: 1.6rem; color: var(--pc,#CC0000); min-width: 28px; text-align: center; }
.idn-promo-card strong { display: block; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.idn-promo-card span { font-size: 0.68rem; color: rgba(255,255,255,0.55); }

/* ── NEW INFO STRIP (Fix 3: dark bg + red accent) ── */
.idn-info-strip { background: #111112; border-top: 3px solid #CC0000; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0; margin: var(--space-lg) 0 0; }
.idn-info-strip--bottom { margin: 0 0 var(--space-lg); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 3px solid #CC0000; }
.idn-info-inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.idn-info-card { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 18px 20px; border-right: 1px solid rgba(255,255,255,0.07); transition: background 0.18s; position: relative; }
.idn-info-card:last-child { border-right: none; }
.idn-info-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #CC0000; transform: scaleX(0); transition: transform 0.2s; transform-origin: left; }
.idn-info-card:hover { background: rgba(204,0,0,0.08); }
.idn-info-card:hover::before { transform: scaleX(1); }
.idn-info-card__icon { width: 44px; height: 44px; background: rgba(204,0,0,0.15); border: 1px solid rgba(204,0,0,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.idn-info-card__icon i { font-size: 1.1rem; color: #CC0000; }
.idn-info-card__text strong { display: block; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 800; color: #fff; margin-bottom: 3px; white-space: nowrap; }
.idn-info-card__text span { font-size: 0.7rem; color: rgba(255,255,255,0.5); white-space: nowrap; }
@media (max-width: 900px) { .idn-info-inner { grid-template-columns: repeat(2,1fr); } .idn-info-card:nth-child(2) { border-right: none; } .idn-info-card { border-bottom: 1px solid rgba(255,255,255,0.07); } }
@media (max-width: 480px) { .idn-info-inner { grid-template-columns: 1fr 1fr; } }

/* ── Strip sections (Ramadan, YML, Partner) ── */
.idn-strip-wrap { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border-light); }
.idn-strip-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.idn-strip-label { display: inline-flex; }
.sl-a { background: #1a2744; color: #fff; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 900; padding: 4px 10px; letter-spacing: 1px; }
.sl-b { background: var(--color-gold); color: #fff; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 900; padding: 4px 10px; letter-spacing: 1px; }
.sl-c { background: #CC0000; color: #fff; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 900; padding: 4px 10px; letter-spacing: 1px; }
.idn-strip-more { font-size: 0.75rem; font-weight: 700; color: #CC0000; text-decoration: none; }
.idn-strip-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.idn-strip-card { display: block; text-decoration: none; }
.idn-strip-card__img { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 6px; }
.idn-strip-card__img img { width: 100%; height: 80px; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-strip-card:hover .idn-strip-card__img img { transform: scale(1.04); }
.idn-strip-card h4 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-strip-card:hover h4 { color: var(--color-primary); }

/* You May Like 4 cards */
.idn-yml-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: start; }
.idn-yml-card { display: block; text-decoration: none; }
.idn-yml-card__img { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 6px; }
.idn-yml-card__img img { width: 100%; height: 90px; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-yml-card:hover .idn-yml-card__img img { transform: scale(1.04); }
.idn-yml-card h4 { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-yml-card:hover h4 { color: var(--color-primary); }
.idn-yml-src { font-size: 0.65rem; color: var(--color-muted); font-weight: 600; }

/* ── UAE section grid ── */
.idn-uae-grid { display: grid; grid-template-columns: 1fr 1.5fr 240px; gap: var(--space-lg); align-items: start; }
.idn-text-lead { display: block; text-decoration: none; margin-bottom: var(--space-md); }
.idn-text-lead h2 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 900; color: var(--color-dark); line-height: 1.3; margin: 0 0 6px; }
.idn-text-lead:hover h2 { color: var(--color-primary); }
.idn-text-lead p { font-size: 0.82rem; color: var(--color-mid); line-height: 1.5; margin-bottom: 4px; }
.idn-small3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-sm); }
.idn-small3__card { display: block; text-decoration: none; }
.idn-small3__img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 6px; }
.idn-small3__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-small3__card:hover .idn-small3__img img { transform: scale(1.04); }
.idn-small3__card h4 { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-small3__card:hover h4 { color: var(--color-primary); }
.idn-uae-mid { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--radius-md); }
.idn-uae-mid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.idn-uae-mid a { display: block; width: 100%; height: 100%; }
.idn-uae-mid a:hover img { transform: scale(1.03); }
.idn-tlist { display: flex; flex-direction: column; }
.idn-tlist__item { display: block; padding: 9px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; }
.idn-tlist__item:last-child { border-bottom: none; }
.idn-tlist__item h4 { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--color-dark); line-height: 1.35; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-tlist__item:hover h4 { color: var(--color-primary); }
.idn-tlist--lined .idn-tlist__item { padding: 8px 0; }

/* ── Shared 3-col grid ── */
.idn-3col { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; align-items: start; }
.idn-3col--tech { grid-template-columns: 1.4fr 1fr 0.85fr; }
.idn-3col--life { grid-template-columns: 1fr 1.4fr 1fr; }

/* Big col */
.idn-big-col { }
.idn-big-img { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-sm); aspect-ratio: 16/9; }
.idn-big-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-big-img--tall img { height: 240px; }
.idn-big-img:hover img { transform: scale(1.02); }
.idn-big-body h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 900; line-height: 1.3; margin: 6px 0; }
.idn-big-body h2 a { color: var(--color-dark); text-decoration: none; }
.idn-big-body h2 a:hover { color: var(--color-primary); }
.idn-big-body p { font-size: 0.82rem; color: var(--color-mid); line-height: 1.5; margin-bottom: 4px; }

/* Stack col */
.idn-stack-col { display: flex; flex-direction: column; gap: 16px; }
.idn-scard { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.idn-scard__img { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 8px; aspect-ratio: 4/3; }
.idn-scard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-scard:hover .idn-scard__img img { transform: scale(1.04); }
.idn-scard__body h3 { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idn-scard:hover .idn-scard__body h3 { color: var(--color-primary); }

/* Business grid */
.idn-biz-grid { display: grid; grid-template-columns: 200px 1.4fr 1fr; gap: var(--space-lg); align-items: start; }
.idn-biz-sponsored { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-md); }
.idn-sp-head { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-muted); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-light); }
.idn-sp-pipe { color: var(--color-border); margin: 0 3px; }
.idn-sp-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; align-items: flex-start; }
.idn-sp-item:last-child { border-bottom: none; }
.idn-sp-item__img { width: 52px; min-width: 52px; height: 42px; overflow: hidden; border-radius: var(--radius-sm); flex-shrink: 0; }
.idn-sp-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-sp-item__img img { width: 100%; height: 100%; object-fit: cover; }
.idn-sp-item__body h4 { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 0 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-sp-item:hover .idn-sp-item__body h4 { color: var(--color-primary); }

/* 3-card row (below Lifestyle) */
.idn-three-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-light); }
.idn-three-card { display: flex; gap: var(--space-md); text-decoration: none; align-items: flex-start; }
.idn-three-card__img { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 8px; }
.idn-three-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.idn-three-card:hover .idn-three-card__img img { transform: scale(1.04); }
.idn-three-card__body h4 { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--color-dark); line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idn-three-card:hover .idn-three-card__body h4 { color: var(--color-primary); }

/* Partner content */
.idn-partner-wrap { background: var(--color-bg); }
.idn-partner-cards { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--space-md); }
.idn-partner-card { display: block; text-decoration: none; }
.idn-partner-card .idn-strip-card__img img { height: 80px; }
.idn-partner-card h4 { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; color: var(--color-dark); line-height: 1.3; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-partner-card:hover h4 { color: var(--color-primary); }

/* Placeholder divs */
.idn-ph-hero { width: 100%; height: 280px; background: var(--color-bg); border-radius: var(--radius-md); }
.idn-ph-feat { width: 100%; height: 200px; background: var(--color-bg); border-radius: var(--radius-md); }
.idn-ph-sm   { width: 100%; height: 90px; background: var(--color-bg); border-radius: var(--radius-sm); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .idn-hero-grid { grid-template-columns: 1fr 1fr; }
  .idn-hero-right { display: none; }
  .idn-uae-grid { grid-template-columns: 1fr 1fr; }
  .idn-uae-right { display: none; }
  .idn-biz-grid { grid-template-columns: 1fr 1fr; }
  .idn-biz-sponsored { display: none; }
  .idn-3col,
  .idn-3col--tech { grid-template-columns: 1.2fr 1fr; }
  .idn-3col > div:last-child,
  .idn-3col--tech > div:last-child { display: none; }
  .idn-3col--life { grid-template-columns: 1fr 1.2fr; }
  .idn-3col--life > div:last-child { display: none; }
  .idn-strip-6,
  .idn-partner-cards { grid-template-columns: repeat(3,1fr); }
  .idn-promo-inner { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .idn-hero-grid { grid-template-columns: 1fr; }
  .idn-hero-right,
  .idn-hero-latest { display: none; }
  .idn-uae-grid,
  .idn-biz-grid { grid-template-columns: 1fr; }
  .idn-uae-mid,
  .idn-uae-right { display: none; }
  .idn-3col,
  .idn-3col--tech,
  .idn-3col--life { grid-template-columns: 1fr; }
  .idn-3col > div:last-child,
  .idn-3col--tech > div:last-child,
  .idn-3col--life > div:last-child { display: none; }
  .idn-yml-4 { grid-template-columns: repeat(2,1fr); }
  .idn-strip-6,
  .idn-partner-cards { grid-template-columns: repeat(2,1fr); }
  .idn-three-row { grid-template-columns: 1fr; }
  .idn-small3 { grid-template-columns: 1fr 1fr; }
  .idn-promo-inner { grid-template-columns: 1fr; }
  .idn-hero-subgrid { grid-template-columns: repeat(2,1fr); }
}

/* ── END IDN v8 HOMEPAGE CSS ── */

/* ── MOBILE: hero text below image ── */
@media (max-width: 767px) {
    .idn-hero-main__body {
        position: relative !important;
        background: none !important;
        padding: 10px 0 6px !important;
        border-radius: 0 !important;
    }
    .idn-hero-main__title a { color: var(--color-dark) !important; }
    .idn-hero-main__exc { color: var(--color-mid) !important; display: none; }
    .idn-hero-main__body .idn-meta { color: var(--color-muted) !important; }
    .idn-hero-main__img img { height: 220px !important; }
}
.idn-big-exc { font-size: 0.85rem; color: var(--color-mid); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }

/* ═══ LAYOUT OVERHAUL v2 ═══ */
.idn-scard__body { flex: 1; display: flex; flex-direction: column; padding: 8px 0 0; }
.idn-scard__body h3 { flex: 1; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; line-height: 1.35; color: var(--color-dark); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idn-scard:hover .idn-scard__body h3 { color: var(--color-primary); }
.idn-big-body h2 a { color: inherit; text-decoration: none; }
.idn-big-body h2 a:hover { color: var(--color-primary); }
.idn-big-exc { font-size: 0.87rem; color: var(--color-mid); line-height: 1.6; margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idn-hero-subcard__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; line-height: 1.35; font-weight: 700; color: var(--color-dark); margin: 0 0 3px; }
.idn-hero-subcard:hover .idn-hero-subcard__body h3 { color: var(--color-primary); }
.idn-ph-feat { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #1a2744 0%, #2d4070 100%); border-radius: var(--radius-md); }
.idn-stack-col:empty { display: none; }
.idn-cs + .idn-cs { border-top: 1px solid var(--color-border-light); }
/* Info strip responsive - see main block above */
/* Section 3col responsive */
@media (max-width: 900px) { .idn-3col { grid-template-columns: 1fr 1fr; } .idn-stack-col:last-child { display: none; } }
@media (max-width: 600px) { .idn-3col { grid-template-columns: 1fr; } }

/* ── Ramadan/strip card images ── */
.idn-strip-card__img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 6px; background: #f0f0f0; }
.idn-strip-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── YML card images ── */
.idn-yml-card__img { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 8px; background: #f0f0f0; }
.idn-yml-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ═══════════════════════════════════════════
   IDN PROFESSIONAL LAYOUT — Final fixes
   ═══════════════════════════════════════════ */

/* Ensure placeholder images are always branded, never blank white */
.idn-ph-sm, .idn-ph-feat, .idn-ph-hero, .idn-ph-thumb {
    background: linear-gradient(135deg, #0d1b2e 0%, #1a2f4a 100%) !important;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 60px;
    position: relative;
}
.idn-ph-sm::after, .idn-ph-feat::after, .idn-ph-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Ctext x='50%25' y='60%25' text-anchor='middle' font-family='sans-serif' font-size='14' font-weight='900' fill='rgba(255,255,255,0.12)'%3EIDN%3C/text%3E%3C/svg%3E") center/contain no-repeat;
}

/* idn-three-card equal height */
.idn-three-row { align-items: start; }
.idn-three-card { height: 100%; display: flex; flex-direction: column; }

/* idn-yml-card equal height */
.idn-yml-card { display: flex; flex-direction: column; text-decoration: none; }
.idn-yml-card h4 { flex: 1; }

/* idn-strip-card */
.idn-strip-card { display: flex; flex-direction: column; text-decoration: none; }
.idn-strip-card h4 { flex: 1; }

/* Small3 card */
.idn-small3__card { display: block; text-decoration: none; }

/* Remove extra nested container inside business info strip */
.idn-cs .idn-info-strip .container { padding: 0; max-width: 100%; }

/* scard: no orphan bottom gap */
.idn-stack-col .idn-scard:last-child { flex: 1; }

/* idn-biz-grid: ensure partner col has min width */
@media (max-width: 1100px) {
    .idn-biz-grid { grid-template-columns: 180px 1.2fr 1fr; gap: var(--space-md); }
}
@media (max-width: 900px) {
    .idn-uae-grid { grid-template-columns: 1fr; }
    .idn-uae-mid { display: none; }
    .idn-biz-grid { grid-template-columns: 1fr; }
    .idn-biz-sponsored { display: none; }
    .idn-strip-6 { grid-template-columns: repeat(3, 1fr); }
    .idn-yml-4 { grid-template-columns: repeat(2, 1fr); }
    .idn-three-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .idn-strip-6 { grid-template-columns: repeat(2, 1fr); }
    .idn-yml-4 { grid-template-columns: repeat(2, 1fr); }
    .idn-three-row { grid-template-columns: repeat(2, 1fr); }
    .idn-small3 { grid-template-columns: 1fr 1fr; }
}

/* ── Inline info strip (inside sections, no outer container needed) ── */
.idn-info-strip--inline {
    margin: var(--space-lg) 0 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.idn-info-strip--inline .idn-info-card {
    padding: 14px 16px;
}


/* ═══════════════════════════════════════════════════
   INFO STRIP — FINAL CONSOLIDATED (overrides all above)
   ═══════════════════════════════════════════════════ */
.idn-info-strip {
    background: #111112 !important;
    border-top: 3px solid #CC0000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    display: block !important;
}
.idn-info-strip .container {
    padding: 0 24px !important;
    max-width: 1280px !important;
}
.idn-info-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
}
.idn-info-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 20px 22px !important;
    text-decoration: none !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    transition: background 0.18s !important;
    position: relative !important;
    min-width: 0 !important;
}
.idn-info-card:last-child { border-right: none !important; }
.idn-info-card:hover { background: rgba(204,0,0,0.1) !important; }
.idn-info-card__icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    background: rgba(204,0,0,0.18) !important;
    border: 1px solid rgba(204,0,0,0.35) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.idn-info-card__icon i { font-size: 1.1rem !important; color: #CC0000 !important; }
.idn-info-card__text { min-width: 0; flex: 1; }
.idn-info-card__text strong {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.idn-info-card__text span {
    display: block !important;
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.55) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Inline variant (inside sections) */
.idn-info-strip--inline {
    margin: 24px 0 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.idn-info-strip--inline .idn-info-card { padding: 16px 18px !important; }
/* Responsive */
@media (max-width: 1024px) {
    .idn-info-card { padding: 16px 16px !important; gap: 10px !important; }
    .idn-info-card__text strong { font-size: 0.8rem !important; }
}
@media (max-width: 768px) {
    .idn-info-inner { grid-template-columns: 1fr 1fr !important; }
    .idn-info-card:nth-child(2) { border-right: none !important; }
    .idn-info-card:nth-child(1),
    .idn-info-card:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
}
@media (max-width: 500px) {
    .idn-info-inner { grid-template-columns: 1fr !important; }
    .idn-info-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
}


/* ═══════════════════════════════════════════════════
   PLACEHOLDER IMAGES — FINAL (overrides all above)
   These must fill their aspect-ratio parent completely
   ═══════════════════════════════════════════════════ */
.idn-ph-sm,
.idn-ph-feat,
.idn-ph-hero,
.idn-ph-thumb {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 80px !important;
    background: linear-gradient(135deg, #0d1b2e 0%, #1a2f4a 60%, #112236 100%) !important;
    position: relative !important;
    border-radius: inherit !important;
}
.idn-ph-sm::after,
.idn-ph-feat::after,
.idn-ph-hero::after,
.idn-ph-thumb::after {
    content: 'IDN' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: Georgia, serif !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,0.1) !important;
    letter-spacing: 4px !important;
    pointer-events: none !important;
}

/* Ensure aspect-ratio containers clip placeholder correctly */
.idn-scard__img,
.idn-big-img,
.idn-hero-subcard__img,
.idn-three-card__img,
.idn-yml-card__img,
.idn-strip-card__img,
.idn-small3__img,
.idn-litem__img {
    overflow: hidden !important;
    background: #0d1b2e !important;
}

/* Stack columns: remove empty gap at bottom */
.idn-stack-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.idn-stack-col .idn-scard {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
.idn-stack-col .idn-scard .idn-scard__img {
    flex-shrink: 0 !important;
}
.idn-stack-col .idn-scard .idn-scard__body {
    flex: 1 !important;
}

/* Hero subcard: ensure uniform height */
.idn-hero-subgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: start !important;
}
.idn-hero-subcard {
    display: flex !important;
    flex-direction: column !important;
}
.idn-hero-subcard__img {
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
    border-radius: var(--radius-sm) !important;
    background: #0d1b2e !important;
}
.idn-hero-subcard__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* idn-big-img: ensure placeholder fills the aspect-ratio container */
.idn-big-img {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-sm) !important;
    aspect-ratio: 16/9 !important;
    background: #0d1b2e !important;
}
.idn-big-img img,
.idn-big-img .idn-ph-feat {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* idn-uae-mid: proper aspect ratio */
.idn-uae-mid {
    aspect-ratio: 3/2 !important;
    overflow: hidden !important;
    border-radius: var(--radius-md) !important;
    background: #0d1b2e !important;
    position: relative !important;
}
.idn-uae-mid a { display: block; width: 100%; height: 100%; }
.idn-uae-mid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.idn-uae-mid .idn-ph-hero {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* scard image: proper aspect ratio filling */
.idn-scard__img {
    overflow: hidden !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 8px !important;
    aspect-ratio: 4/3 !important;
    background: #0d1b2e !important;
    position: relative !important;
}
.idn-scard__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.idn-scard__img .idn-ph-sm {
    position: absolute !important;
    inset: 0 !important;
}


/* ═══════════════════════════════════════════════════
   HERO IMAGE PLACEHOLDER FIX
   When no featured image, placeholder must have real height
   ═══════════════════════════════════════════════════ */
.idn-hero-main__img {
    min-height: 320px !important;
    background: #0d1b2e !important;
}
.idn-hero-main__img .idn-ph-hero {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    min-height: 320px !important;
    display: block !important;
    background: linear-gradient(135deg, #0d1b2e 0%, #1a3050 50%, #0a1628 100%) !important;
}
.idn-hero-main__img img {
    width: 100% !important;
    height: 440px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Big section image placeholder — must not collapse */
.idn-big-img .idn-ph-feat {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    display: block !important;
    background: linear-gradient(135deg, #0d1b2e 0%, #1a3050 50%, #0a1628 100%) !important;
}

/* UAE mid image placeholder */
.idn-uae-mid .idn-ph-hero {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    display: block !important;
    background: linear-gradient(135deg, #0d1b2e 0%, #1a3050 50%, #0a1628 100%) !important;
}

/* Scard placeholder — must fill 4:3 box without collapsing */
.idn-scard__img .idn-ph-sm {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    min-height: 80px !important;
    display: block !important;
    background: linear-gradient(135deg, #0d1b2e 0%, #1a3050 100%) !important;
}

/* All placeholders: IDN watermark via pseudo */
.idn-ph-hero::after,
.idn-ph-feat::after,
.idn-ph-sm::after,
.idn-ph-thumb::after {
    content: 'IDN' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: Georgia, serif !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,0.12) !important;
    letter-spacing: 4px !important;
    pointer-events: none !important;
}

/* Latest news panel: fill full height to match sidebar */
.idn-hero-grid {
    align-items: stretch !important;
}
.idn-hero-latest {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}
.idn-hero-latest .idn-litem:last-child {
    border-bottom: none !important;
}
/* Litem: slightly more compact to fit more items */
.idn-litem {
    padding: 8px var(--space-md) !important;
}
.idn-litem__img {
    width: 62px !important;
    min-width: 62px !important;
    height: 50px !important;
}