/*
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.5.1 — Fixed category section spacing issues.
Version: 4.7.0
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: 767px) {
  /* ---- 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;
  }
  img, video, iframe, embed, object { 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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    /* 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: 767px) {
    .post-navigation { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE: Make post-card always horizontal in hero sidebar
   on mobile without breaking desktop
   ============================================================ */
@media (max-width: 767px) {
    /* 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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    /* Re-enable only inside mobile-header-bar */
    .mobile-header-bar .mobile-header-utils {
        display: flex !important;
    }
}

/* ---- Bigger hero on mobile ---- */
@media (max-width: 767px) {
    .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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    .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: 767px) {
    .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: 767px) {
    #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: 767px) {
    .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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .category-section { padding: 16px 0; }
}

/* 10. Single article mobile */
@media (max-width: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    /* 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: 767px) {

    /* 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: 767px) {
    .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: 767px) {
    .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: 767px) {
  .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    .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: 767px) {
    /* 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: 767px) {
    .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: #CC0000; border-top: none; border-bottom: none; 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.25); 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(0,0,0,0.12); }
.idn-info-card:hover::before { transform: scaleX(1); }
.idn-info-card__icon { width: 44px; height: 44px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.idn-info-card__icon i { font-size: 1.1rem; color: #fff; }
.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.8); 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.25); } }
@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: #CC0000; 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.2fr 1fr 1fr; }
.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: 260px 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-biz-latest { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 10px; }
.idn-biz-latest .idn-tlist__item { padding: 9px 0; border-bottom: 1px solid var(--color-border-light); display: block; text-decoration: none; }
.idn-biz-latest .idn-tlist__item:last-child { border-bottom: none; }
.idn-biz-latest .idn-tlist__item 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-biz-latest .idn-tlist__item:hover h4 { color: var(--color-primary); }

/* Latest Business/Tech feed items */
.idn-biz-litem {
    display: flex; flex-direction: row; gap: 10px; align-items: flex-start;
    padding: 9px 0; border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
}
.idn-biz-litem:last-child { border-bottom: none; padding-bottom: 0; }
.idn-biz-litem:hover .idn-biz-litem__body h4 { color: var(--color-primary); }
.idn-biz-litem__img {
    width: 68px; min-width: 68px; max-width: 68px;
    height: 52px; flex-shrink: 0;
    border-radius: 3px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.idn-biz-litem__body { flex: 1; min-width: 0; }
.idn-biz-litem__body .idn-cat-tag {
    display: inline-block; margin-bottom: 3px;
    font-size: 0.56rem !important; padding: 1px 5px !important;
    line-height: 1.5 !important;
}
.idn-biz-litem__body 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: 3;
    -webkit-box-orient: vertical; overflow: hidden;
    transition: color .15s;
    word-break: break-word;
}
.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-biz-latest { 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: 767px) {
  .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: last child should NOT stretch to fill empty column space */
.idn-stack-col .idn-scard:last-child { flex: 0 0 auto; }

/* idn-biz-grid: ensure partner col has min width */
@media (max-width: 1100px) {
    .idn-biz-grid { grid-template-columns: 220px 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-biz-latest { 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: #CC0000 !important;
    border-top: none !important;
    border-bottom: none !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.25) !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(0,0,0,0.12) !important; }
.idn-info-card__icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.25) !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: #fff !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.85) !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: 767px) {
    .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: 0 0 auto !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: 0 0 auto !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;
}

/* Menu button — hidden everywhere, menu accessed via bottom nav */
#idn-mob-menu-btn { display: none !important; }
.imh-menu-btn { display: none !important; }

/* ============================================================
   FIX v4.1.2 — Missing mobile menu close button binding
   ============================================================ */
#mobileMenuClose {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

/* ══════════════════════════════════════════════
   IDN HOUSE / INTERNAL PROMO BANNERS
   Replaces empty ad slots until AdSense is live
   ══════════════════════════════════════════════ */

/* — Leaderboard (728×90 replacement) — */
.idn-house-leader {
    display:flex;align-items:center;gap:16px;
    width:100%;padding:14px 20px;
    background:#fff;border:1.5px solid #eee;
    border-left:4px solid var(--hc,#CC0000);
    border-radius:6px;text-decoration:none;
    transition:box-shadow .2s,border-color .2s;
    box-sizing:border-box;
}
.idn-house-leader:hover { box-shadow:0 4px 18px rgba(0,0,0,.08); border-color:var(--hc,#CC0000); }
.idn-house-leader__icon {
    width:44px;height:44px;min-width:44px;border-radius:50%;
    background:color-mix(in srgb,var(--hc,#CC0000) 12%,#fff);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:var(--hc,#CC0000);
}
.idn-house-leader__body { flex:1;min-width:0; }
.idn-house-leader__body strong { display:block;font-size:.88rem;font-weight:800;color:#111;margin-bottom:2px;font-family:var(--font-heading,'Playfair Display',serif); }
.idn-house-leader__body span  { font-size:.75rem;color:#666;line-height:1.4; }
.idn-house-leader__cta {
    white-space:nowrap;padding:8px 16px;
    background:var(--hc,#CC0000);color:#fff;
    border-radius:4px;font-size:.78rem;font-weight:700;
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-ui,sans-serif);
    transition:opacity .15s;
}
.idn-house-leader:hover .idn-house-leader__cta { opacity:.88; }

/* — Rectangle (300×250 replacement) — */
.idn-house-rect {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;min-height:250px;padding:24px 20px;
    background:var(--hbg,#fff5f5);
    border:1.5px solid color-mix(in srgb,var(--hc,#CC0000) 20%,#eee);
    border-top:4px solid var(--hc,#CC0000);
    border-radius:6px;text-decoration:none;text-align:center;
    transition:box-shadow .2s;box-sizing:border-box;
}
.idn-house-rect:hover { box-shadow:0 6px 24px rgba(0,0,0,.09); }
.idn-house-rect__icon {
    width:56px;height:56px;border-radius:50%;
    background:color-mix(in srgb,var(--hc,#CC0000) 14%,#fff);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:var(--hc,#CC0000);
    margin-bottom:14px;
}
.idn-house-rect__body strong { display:block;font-size:1rem;font-weight:800;color:#111;margin-bottom:8px;font-family:var(--font-heading,'Playfair Display',serif); }
.idn-house-rect__body p { font-size:.78rem;color:#555;line-height:1.55;margin:0 0 16px; }
.idn-house-rect__cta {
    padding:10px 22px;background:var(--hc,#CC0000);color:#fff;
    border-radius:4px;font-size:.8rem;font-weight:700;
    font-family:var(--font-ui,sans-serif);
    transition:opacity .15s;
}
.idn-house-rect:hover .idn-house-rect__cta { opacity:.88; }

@media(max-width:600px){
    .idn-house-leader { flex-wrap:wrap; }
    .idn-house-leader__cta { width:100%;justify-content:center; }
}

/* ── Partner Programme Fallback Items ── */
.idn-sp-fallback {
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:5px;
    text-decoration:none;background:#f8f8f8;
    border:1px solid #eee;border-left:3px solid #CC0000;
    margin-bottom:8px;transition:background .15s;
}
.idn-sp-fallback:hover { background:#fff3f3; }
.idn-sp-fallback--nl  { border-left-color:#CC0000; }
.idn-sp-fallback--gold { border-left-color:#b8860b; }
.idn-sp-fallback--forex { border-left-color:#006633; }
.idn-sp-fallback__icon {
    width:32px;height:32px;min-width:32px;border-radius:50%;
    background:rgba(204,0,0,0.1);display:flex;align-items:center;
    justify-content:center;font-size:.85rem;color:#CC0000;
}
.idn-sp-fallback--gold .idn-sp-fallback__icon  { background:rgba(184,134,11,.1); color:#b8860b; }
.idn-sp-fallback--forex .idn-sp-fallback__icon { background:rgba(0,102,51,.1);   color:#006633; }
.idn-sp-fallback__body { flex:1;min-width:0; }
.idn-sp-fallback__body strong { display:block;font-size:.78rem;font-weight:800;color:#111;margin-bottom:1px; }
.idn-sp-fallback__body span  { font-size:.7rem;color:#666;line-height:1.35; }
.idn-sp-fallback__cta {
    font-size:.68rem;font-weight:700;color:#CC0000;white-space:nowrap;
    font-family:var(--font-ui,sans-serif);letter-spacing:.3px;
}
.idn-sp-fallback--gold  .idn-sp-fallback__cta { color:#b8860b; }
.idn-sp-fallback--forex .idn-sp-fallback__cta { color:#006633; }

/* ══════════════════════════════════════════════
   GOLD PRICE PAGE — Responsive Hero
   ══════════════════════════════════════════════ */
.gp-hero {
    background: linear-gradient(135deg, var(--color-gold, #c8a04a), #a07830);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-xl, 32px);
    margin-bottom: var(--space-xl, 32px);
    color: white;
}
.gp-hero__top {
    display: flex;
    align-items: center;
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
    flex-wrap: wrap;
}
.gp-hero__icon { font-size: 2.5rem; flex-shrink: 0; }
.gp-hero__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 2rem; font-weight: 900; margin: 0; color: white;
}
.gp-hero__sub { opacity: 0.85; margin: 4px 0 0; font-size: 0.9rem; }
.gp-hero__price {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.gp-hero__num {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 3.5rem; font-weight: 900; line-height: 1;
}
.gp-hero__unit { font-size: 1rem; opacity: 0.8; }
.gp-hero__updated { font-size: 0.78rem; opacity: 0.65; margin-top: 8px; }

/* Gold table mobile */
.gold-page-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui, sans-serif); }
.gold-page-table th {
    padding: 12px 16px; text-align: left; font-size: 0.75rem;
    font-weight: 700; text-transform: uppercase;
    color: var(--color-muted); background: var(--color-bg);
}
.gold-page-table th:not(:first-child) { text-align: right; }
.gold-page-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border-light); }
.gold-page-table td:first-child { font-weight: 600; color: var(--color-dark); }
.gold-page-table td:not(:first-child) { text-align: right; }
.gold-page-table td:nth-child(2) { color: var(--color-gold, #c8a04a); font-weight: 700; font-size: 1.05rem; }
.gold-page-table td:nth-child(3) { color: var(--color-muted); font-size: 0.88rem; }

/* ══════════════════════════════════════════════
   MOBILE FIXES — All promo + house banners
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Gold hero */
    .gp-hero { padding: 20px 16px; }
    .gp-hero__title { font-size: 1.4rem; }
    .gp-hero__num { font-size: 2.4rem; }
    .gp-hero__unit { font-size: 0.85rem; }

    /* Gold table — hide USD column on small screens */
    .gold-page-table th:last-child,
    .gold-page-table td:last-child { display: none; }
    .gold-page-table th, .gold-page-table td { padding: 11px 12px; }

    /* House leaderboard banner */
    .idn-house-leader {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    .idn-house-leader__icon { display: none; }
    .idn-house-leader__body strong { font-size: .82rem; }
    .idn-house-leader__body span  { font-size: .72rem; }
    .idn-house-leader__cta {
        width: 100%; justify-content: center;
        padding: 10px; font-size: .8rem;
    }

    /* House rectangle banner */
    .idn-house-rect {
        min-height: 180px;
        padding: 20px 16px;
    }
    .idn-house-rect__icon { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 10px; }
    .idn-house-rect__body strong { font-size: .9rem; }
    .idn-house-rect__body p { font-size: .75rem; }

    /* Promo strip — 2 columns on tablet, 1 on phone */
    .idn-promo-inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .idn-promo-card { padding: 8px 10px; gap: 8px; }
    .idn-promo-card > i { font-size: 1.2rem; }
    .idn-promo-card strong { font-size: .72rem; }
    .idn-promo-card span { font-size: .62rem; }

    /* Partner Programme fallback items */
    .idn-sp-fallback { padding: 8px 10px; gap: 8px; }
    .idn-sp-fallback__body strong { font-size: .74rem; }
    .idn-sp-fallback__body span { font-size: .66rem; }

    /* Section promo banners inside big-col — give them breathing room */
    .idn-big-body .idn-house-leader { margin-top: 12px; }
}

@media (max-width: 480px) {
    /* Stack promo strip to 1 column */
    .idn-promo-inner { grid-template-columns: 1fr; }

    /* Gold hero full width */
    .gp-hero__top { gap: 10px; }
    .gp-hero__icon { font-size: 1.8rem; }
    .gp-hero__num  { font-size: 2rem; }

    /* House banners take full width cleanly */
    .idn-house-leader { border-left-width: 3px; }
    .idn-house-rect   { min-height: 160px; }
}

/* ══════════════════════════════════════════════
   IDN FILL SLOTS — Article cards for ad spaces
   ══════════════════════════════════════════════ */

.idn-slot { width:100%; box-sizing:border-box; margin:4px 0 12px; }

.idn-slot__label { margin-bottom:10px; }
.idn-slot__label-text {
    font-family:var(--font-ui,sans-serif);
    font-size:0.67rem; font-weight:800;
    letter-spacing:1.3px; text-transform:uppercase;
    color:var(--color-muted,#888);
    padding-bottom:5px;
    border-bottom:2px solid var(--color-primary,#CC0000);
    display:inline-block;
}

/* ── Leaderboard: 2 cards side by side ── */
.idn-slot--leader .idn-slot__row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.idn-slot-hcard {
    display:flex;
    flex-direction:column;
    text-decoration:none;
}
.idn-slot-hcard:hover .idn-slot-hcard__body h4 { color:var(--color-primary,#CC0000); }

/* Image with category badge overlay */
.idn-slot-hcard__img {
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#e8e8e8;
    border-radius:var(--radius-sm,4px);
    margin-bottom:8px;
}
.idn-slot-hcard__img img {
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .3s;
}
.idn-slot-hcard:hover .idn-slot-hcard__img img { transform:scale(1.04); }
.idn-slot-hcard__img .idn-ph-sm { width:100%; height:100%; min-height:80px; }

.idn-slot-hcard__cat {
    position:absolute; bottom:7px; left:7px;
}

/* Title + meta below image */
.idn-slot-hcard__body h4 {
    font-family:var(--font-heading,'Playfair Display',serif);
    font-size:0.88rem; font-weight:700;
    color:var(--color-dark,#111);
    line-height:1.35; margin:0 0 5px;
    display:-webkit-box;
    -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .15s;
}

/* ── Sidebar: 1 featured vertical + 2 small horizontal ── */
.idn-slot--sidebar .idn-slot__stack {
    display:flex; flex-direction:column; gap:12px;
}

.idn-slot-vcard { text-decoration:none; display:block; }

/* Featured card — image top, title below */
.idn-slot-vcard--featured .idn-slot-vcard__img {
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden; background:#e8e8e8;
    border-radius:var(--radius-sm,4px);
    margin-bottom:8px;
}
.idn-slot-vcard--featured .idn-slot-vcard__img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .3s;
}
.idn-slot-vcard--featured:hover .idn-slot-vcard__img img { transform:scale(1.03); }
.idn-slot-vcard__cat {
    position:absolute; bottom:7px; left:7px;
}
.idn-slot-vcard__body--feat h4 {
    font-family:var(--font-heading,'Playfair Display',serif);
    font-size:0.88rem; font-weight:700;
    color:var(--color-dark,#111);
    line-height:1.35; margin:0 0 4px;
    display:-webkit-box;
    -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .15s;
}
.idn-slot-vcard--featured:hover .idn-slot-vcard__body--feat h4 { color:var(--color-primary,#CC0000); }

/* Small horizontal cards */
.idn-slot-vcard--small {
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding-top:10px;
    border-top:1px solid var(--color-border-light,#eee);
}
.idn-slot-vcard__thumb {
    width:72px; min-width:72px; height:54px;
    border-radius:3px; overflow:hidden; background:#e8e8e8; flex-shrink:0;
}
.idn-slot-vcard__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.idn-slot-vcard__body--sm { flex:1; min-width:0; }
.idn-slot-vcard__body--sm h4 {
    font-family:var(--font-heading,'Playfair Display',serif);
    font-size:0.78rem; font-weight:700;
    color:var(--color-dark,#111);
    line-height:1.3; margin:0 0 3px;
    display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .15s;
}
.idn-slot-vcard--small:hover .idn-slot-vcard__body--sm h4 { color:var(--color-primary,#CC0000); }

/* ── Responsive ── */
@media (max-width:600px) {
    .idn-slot--leader .idn-slot__row { grid-template-columns:1fr; gap:10px; }
}

/* ── Sidebar Feature Cards (Prayer Times / Gold Price) ── */
.idn-sidebar-feature-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px; margin-top: 10px;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    border: 1px solid var(--color-border-light, #eee);
    background: #fff;
    transition: box-shadow .2s, transform .15s;
}
.idn-sidebar-feature-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}
.idn-sidebar-feature-card--prayer { border-left: 3px solid #1a2744; }
.idn-sidebar-feature-card--gold   { border-left: 3px solid #b8860b; }

.idn-sfc__icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.idn-sidebar-feature-card--prayer .idn-sfc__icon { background: rgba(26,39,68,.1); color: #1a2744; }
.idn-sidebar-feature-card--gold   .idn-sfc__icon { background: rgba(184,134,11,.1); color: #b8860b; }

.idn-sfc__body { flex: 1; min-width: 0; }
.idn-sfc__body strong {
    display: block; font-size: 0.78rem; font-weight: 800;
    color: #111; margin-bottom: 2px;
    font-family: var(--font-ui, sans-serif);
}
.idn-sfc__body span { font-size: 0.68rem; color: #888; line-height: 1.3; }

.idn-sfc__arr { font-size: 0.65rem; color: #bbb; flex-shrink: 0; }
.idn-sidebar-feature-card--prayer:hover .idn-sfc__arr { color: #1a2744; }
.idn-sidebar-feature-card--gold:hover   .idn-sfc__arr { color: #b8860b; }

/* ══════════════════════════════════════════════════════
   PREMIUM INFO STRIP
   ══════════════════════════════════════════════════════ */
.idn-premium-strip {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d0000 50%, #1a0a0a 100%);
    border-top: 3px solid #CC0000;
    border-bottom: 1px solid rgba(204,0,0,0.2);
    padding: 0;
    margin: 28px 0 0;
    position: relative;
    overflow: hidden;
}
.idn-premium-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(204,0,0,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.idn-premium-strip__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
}

/* Divider */
.idn-pstrip-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent);
    margin: 10px 0;
}

/* Card */
.idn-pstrip-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    text-decoration: none;
    position: relative;
    transition: background 0.2s;
    overflow: hidden;
}
.idn-pstrip-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: #CC0000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.idn-pstrip-card:hover { background: rgba(204,0,0,0.08); }
.idn-pstrip-card:hover::after { transform: scaleX(1); }
.idn-pstrip-card:hover .idn-pstrip-card__arr { opacity: 1; transform: translateX(3px); }

/* Icon */
.idn-pstrip-card__icon {
    width: 48px; height: 48px; min-width: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
}
.idn-pstrip-card__icon--gold   { background: linear-gradient(135deg, #b8860b, #d4a017); color: #fff; box-shadow: 0 4px 12px rgba(184,134,11,0.35); }
.idn-pstrip-card__icon--prayer { background: linear-gradient(135deg, #1a2744, #2d3f6e); color: #fff; box-shadow: 0 4px 12px rgba(26,39,68,0.5); }
.idn-pstrip-card__icon--forex  { background: linear-gradient(135deg, #006633, #009944); color: #fff; box-shadow: 0 4px 12px rgba(0,102,51,0.35); }
.idn-pstrip-card__icon--news   { background: linear-gradient(135deg, #CC0000, #ff2200); color: #fff; box-shadow: 0 4px 12px rgba(204,0,0,0.4); }

/* Body */
.idn-pstrip-card__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.idn-pstrip-card__label {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}
.idn-pstrip-card__value {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 0.95rem; font-weight: 800;
    color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.idn-pstrip-card__sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Arrow */
.idn-pstrip-card__arr {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

/* CTA variant */
.idn-pstrip-card--cta .idn-pstrip-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: #CC0000; color: #fff;
    font-size: 0.7rem; font-weight: 800;
    padding: 6px 12px; border-radius: 4px;
    white-space: nowrap; flex-shrink: 0;
    transition: background 0.15s;
    font-family: var(--font-ui, sans-serif);
    letter-spacing: 0.5px;
}
.idn-pstrip-card--cta:hover .idn-pstrip-card__cta { background: #aa0000; }

/* Responsive */
@media (max-width: 900px) {
    .idn-premium-strip__grid { grid-template-columns: 1fr 1fr; }
    .idn-pstrip-divider { display: none; }
    .idn-pstrip-card { border-bottom: 1px solid rgba(255,255,255,0.07); }
    .idn-pstrip-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }
}
@media (max-width: 480px) {
    .idn-premium-strip__grid { grid-template-columns: 1fr; }
    .idn-pstrip-card:nth-child(odd) { border-right: none; }
    .idn-pstrip-card { padding: 16px 20px; }
    .idn-pstrip-card__icon { width: 40px; height: 40px; min-width: 40px; font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM ARTICLE PAGE — Complete Redesign
   ══════════════════════════════════════════════════════════════ */

/* Layout */
.art-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* ── Reading progress bar (handled inline) ── */

/* ── Sticky share rail ── */
.art-share-rail {
    position: fixed;
    left: max(16px, calc((100vw - 1280px) / 2 - 60px));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
}
.art-share-rail__label {
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-muted);
    writing-mode: vertical-lr;
    margin-bottom: 4px;
}
.art-share-rail__btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 0.85rem;
    border: none; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    color: #fff;
}
.art-share-rail__btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.art-share-rail__btn--fb { background: #1877f2; }
.art-share-rail__btn--tw { background: #000; }
.art-share-rail__btn--wa { background: #25d366; }
.art-share-rail__btn--li { background: #0a66c2; }
.art-share-rail__btn--copy { background: var(--color-primary); }

/* ── Article main ── */
.art-main { min-width: 0; }

/* ── Header ── */
.art-header { margin-bottom: var(--space-lg); }

.art-header__eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}

.art-cat {
    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: 4px 10px;
    border-radius: 3px; text-decoration: none;
    transition: opacity 0.15s;
}
.art-cat:hover { opacity: 0.85; }
.art-cat--uae       { background: #CC0000; color: #fff; }
.art-cat--world     { background: #1a2744; color: #fff; }
.art-cat--business  { background: #0066CC; color: #fff; }
.art-cat--tech      { background: #6600CC; color: #fff; }
.art-cat--lifestyle { background: #CC6600; color: #fff; }
.art-cat--guides    { background: #333; color: #fff; }

.art-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-ui); font-size: 0.65rem;
    font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 3px;
}
.art-badge--breaking {
    background: #CC0000; color: #fff;
    animation: badge-pulse 2s ease-in-out infinite;
}
.art-badge__dot {
    width: 6px; height: 6px; background: #fff;
    border-radius: 50%; animation: pulse 1.4s ease-in-out infinite;
}
.art-badge--sponsored { background: var(--color-gold); color: #111; }

@keyframes badge-pulse { 0%,100%{opacity:1}50%{opacity:.8} }

.art-header__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.art-header__deck {
    font-size: 1.1rem;
    color: var(--color-mid);
    line-height: 1.6;
    margin: 0 0 20px;
    font-weight: 400;
    border-left: 3px solid var(--color-primary);
    padding-left: 16px;
}

/* ── Meta bar ── */
.art-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}
.art-meta__author { display: flex; align-items: center; gap: 10px; }
.art-meta__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid var(--color-border-light);
    object-fit: cover; flex-shrink: 0;
}
.art-meta__author-name {
    font-family: var(--font-ui); font-size: 0.82rem;
    font-weight: 800; color: var(--color-dark); text-decoration: none;
    display: block;
}
.art-meta__author-name:hover { color: var(--color-primary); }
.art-meta__author-role { font-size: 0.7rem; color: var(--color-muted); }
.art-meta__divider { width: 1px; height: 30px; background: var(--color-border-light); }
.art-meta__details {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; font-family: var(--font-ui);
    font-size: 0.75rem; color: var(--color-muted);
}
.art-meta__details span { display: flex; align-items: center; gap: 5px; }
.art-meta__details i { font-size: 0.7rem; }
.art-meta__updated { color: var(--color-primary); }

/* ── Hero image ── */
.art-hero-img {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.art-hero-img__img {
    width: 100%; height: auto;
    max-height: 520px; object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.art-hero-img:hover .art-hero-img__img { transform: scale(1.01); }
.art-hero-img__caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: rgba(255,255,255,0.85); font-size: 0.72rem;
    padding: 20px 14px 10px; font-style: italic;
}
.art-hero-img__caption i { margin-right: 4px; opacity: 0.7; }

/* ── Ad slots ── */
.art-ad-slot { margin: var(--space-lg) 0; }

/* ── Article body ── */
.art-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1a1a1a;
    font-family: Georgia, 'Times New Roman', serif;
}
.art-body p { margin-bottom: 1.4em; }
.art-body h2 {
    font-family: var(--font-heading); font-size: 1.4rem;
    font-weight: 900; color: var(--color-dark);
    margin: 2em 0 0.6em; line-height: 1.3;
    border-left: 4px solid var(--color-primary);
    padding-left: 12px;
}
.art-body h3 {
    font-family: var(--font-heading); font-size: 1.15rem;
    font-weight: 800; color: var(--color-dark);
    margin: 1.8em 0 0.5em;
}
.art-body blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 2em 0; padding: 16px 20px;
    background: #fafafa; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 1.1rem; font-style: italic; color: #333;
}
.art-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.art-body ul, .art-body ol { padding-left: 1.5em; margin-bottom: 1.4em; }
.art-body li { margin-bottom: 0.4em; }
.art-body img { max-width: 100%; border-radius: var(--radius-sm); height: auto; }
.art-body strong { font-weight: 700; color: var(--color-dark); }

/* ── Tags ── */
.art-tags {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin: var(--space-lg) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}
.art-tags__label {
    font-family: var(--font-ui); font-size: 0.7rem;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--color-muted);
    flex-shrink: 0;
}
.art-tag {
    background: var(--color-bg); border: 1px solid var(--color-border-light);
    color: var(--color-mid); font-family: var(--font-ui);
    font-size: 0.72rem; font-weight: 600;
    padding: 4px 10px; border-radius: 20px;
    text-decoration: none; transition: all 0.15s;
}
.art-tag:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Inline share bar ── */
.art-share-bar {
    display: flex; align-items: center; gap: 12px;
    padding: var(--space-md) 0; margin: var(--space-md) 0;
    flex-wrap: wrap;
}
.art-share-bar__label {
    font-family: var(--font-ui); font-size: 0.75rem;
    font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--color-dark);
    flex-shrink: 0;
}
.art-share-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.art-share-bar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 4px;
    font-family: var(--font-ui); font-size: 0.75rem;
    font-weight: 700; text-decoration: none;
    border: none; cursor: pointer; transition: opacity 0.15s;
    color: #fff;
}
.art-share-bar__btn:hover { opacity: 0.88; }
.art-share-bar__btn--fb { background: #1877f2; }
.art-share-bar__btn--wa { background: #25d366; }
.art-share-bar__btn--tw { background: #000; }
.art-share-bar__btn--copy { background: var(--color-primary); }

/* ── Author box ── */
.art-author-box {
    display: flex; gap: 20px; align-items: flex-start;
    padding: var(--space-lg);
    background: linear-gradient(135deg, #fafafa, #f5f5f5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    margin: var(--space-xl) 0;
}
.art-author-box__photo {
    width: 80px; height: 80px; border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover; flex-shrink: 0;
}
.art-author-box__info { flex: 1; min-width: 0; }
.art-author-box__label {
    font-family: var(--font-ui); font-size: 0.62rem;
    font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--color-muted);
    margin-bottom: 4px;
}
.art-author-box__name {
    font-family: var(--font-heading); font-size: 1.1rem;
    font-weight: 900; color: var(--color-dark); margin-bottom: 2px;
}
.art-author-box__role { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 8px; }
.art-author-box__bio { font-size: 0.82rem; color: var(--color-mid); line-height: 1.55; margin-bottom: 12px; }
.art-author-box__footer { display: flex; align-items: center; gap: 12px; }
.art-author-box__social { display: flex; gap: 8px; }
.art-author-box__social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; text-decoration: none;
    transition: background 0.15s;
}
.art-author-box__social a:hover { background: var(--color-primary); }
.art-author-box__more {
    font-family: var(--font-ui); font-size: 0.75rem;
    font-weight: 700; color: var(--color-primary);
    text-decoration: none;
}
.art-author-box__more:hover { text-decoration: underline; }

/* ── Related articles ── */
.art-related { margin: var(--space-xl) 0; }
.art-related__hdr {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: var(--space-md);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}
.art-related__label {
    font-family: var(--font-ui); font-size: 0.85rem;
    font-weight: 900; letter-spacing: 1px;
    text-transform: uppercase; color: var(--color-dark);
}
.art-related__more {
    font-family: var(--font-ui); font-size: 0.72rem;
    font-weight: 700; color: var(--color-primary);
    text-decoration: none;
}
.art-related__grid {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
.art-related-card { text-decoration: none; display: block; }
.art-related-card__img {
    position: relative; aspect-ratio: 16/10;
    overflow: hidden; border-radius: var(--radius-sm);
    margin-bottom: 8px; background: #e8e8e8;
}
.art-related-card__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s; }
.art-related-card:hover .art-related-card__img img { transform: scale(1.04); }
.art-related-card__cat { position: absolute; bottom: 6px; left: 6px; font-size: 0.56rem !important; padding: 2px 6px !important; }
.art-related-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;
    transition: color 0.15s;
}
.art-related-card:hover .art-related-card__body h4 { color: var(--color-primary); }
.art-related-card__meta { font-size: 0.7rem; color: var(--color-muted); }

/* ── Prev/Next nav ── */
.art-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; margin: var(--space-xl) 0;
}
.art-nav__card {
    display: flex; flex-direction: column; gap: 6px;
    padding: var(--space-md); border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.art-nav__card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(204,0,0,0.08); }
.art-nav__card--next { text-align: right; }
.art-nav__dir {
    font-family: var(--font-ui); font-size: 0.65rem;
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--color-primary);
    display: flex; align-items: center; gap: 6px;
}
.art-nav__card--next .art-nav__dir { justify-content: flex-end; }
.art-nav__title {
    font-family: var(--font-heading); font-size: 0.85rem;
    font-weight: 700; color: var(--color-dark); line-height: 1.3;
}

/* ══ SIDEBAR WIDGETS ══ */
.art-sidebar { position: relative; }
.art-sidebar__sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: visible;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.art-sidebar__sticky::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.art-sidebar__ad { }

.art-widget {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.art-widget__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    font-family: var(--font-ui); font-size: 0.72rem;
    font-weight: 900; letter-spacing: 0.8px;
    text-transform: uppercase; color: #fff;
}
.art-widget__head i { font-size: 0.85rem; }
.art-widget__head--red   { background: var(--color-primary); }
.art-widget__head--gold  { background: linear-gradient(135deg, #b8860b, #c9a84c); }
.art-widget__head--blue  { background: linear-gradient(135deg, #1a6b9e, #0d4f7a); }
.art-widget__head--green { background: linear-gradient(135deg, #006633, #009944); }
.art-widget__head--dark  { background: #1a2744; }

.art-widget__body { padding: 12px 14px; }

.art-widget__btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; border-radius: 4px;
    font-family: var(--font-ui); font-size: 0.72rem;
    font-weight: 800; text-decoration: none; border: none; cursor: pointer;
    transition: opacity 0.15s; width: 100%; text-align: center;
    margin-top: 10px;
}
.art-widget__btn:hover { opacity: 0.88; }
.art-widget__btn--red   { background: var(--color-primary); color: #fff; }
.art-widget__btn--gold  { background: linear-gradient(135deg,#b8860b,#c9a84c); color: #fff; }
.art-widget__btn--blue  { background: #1a6b9e; color: #fff; }
.art-widget__btn--green { background: #006633; color: #fff; }

/* Prayer rows */
.art-prayer-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.8rem;
}
.art-prayer-row:last-of-type { border-bottom: none; }
.art-prayer-row__name { display: flex; align-items: center; gap: 8px; color: var(--color-dark); font-weight: 600; }
.art-prayer-row__time { font-weight: 800; color: var(--color-primary); font-size: 0.82rem; }

/* Gold widget */
.art-widget__body--gold { padding: 0; }
.art-gold-hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 10px;
    background: linear-gradient(135deg, #2a1a00, #3d2800);
    border-bottom: 1px solid rgba(201,168,76,0.2);
}
.art-gold-hero__label { font-size: 0.62rem; color: rgba(255,255,255,0.55); font-family: var(--font-ui); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }
.art-gold-hero__price { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 900; color: #c9a84c; line-height: 1; }
.art-gold-hero__unit  { font-size: 0.65rem; color: rgba(255,255,255,0.45); margin-top: 3px; }
.art-gold-hero__icon  { font-size: 2rem; color: rgba(201,168,76,0.3); }
.art-gold-table { padding: 4px 14px 8px; }
.art-gold-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-ui); font-size: 0.78rem;
}
.art-gold-row:last-child { border-bottom: none; }
.art-gold-row span:first-child { color: var(--color-mid); }
.art-gold-row span:last-child { font-weight: 700; color: #b8860b; }
.art-gold-row--updated span { font-size: 0.65rem !important; color: var(--color-muted) !important; font-weight: 400 !important; }

/* Weather widget */
.art-widget__body--weather { padding: 0; }
.art-weather-main {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 14px;
    background: linear-gradient(135deg, #1a6b9e, #0d4f7a);
}
.art-weather-location { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); font-family: var(--font-ui); margin-bottom: 4px; }
.art-weather-temp { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 900; color: #fff; line-height: 1; }
.art-weather-desc { font-size: 0.8rem; color: rgba(255,255,255,0.8); margin: 4px 0; }
.art-weather-details { display: flex; gap: 10px; font-size: 0.7rem; color: rgba(255,255,255,0.65); margin-top: 4px; }
.art-weather-details span { display: flex; align-items: center; gap: 4px; }
.art-weather-icon { font-size: 3rem; line-height: 1; }

/* Forex widget */
.art-forex-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-ui); font-size: 0.78rem;
}
.art-forex-row:last-child { border-bottom: none; }
.art-forex-row__currency { display: flex; align-items: center; gap: 6px; }
.art-forex-row__code { font-weight: 800; color: var(--color-dark); }
.art-forex-row__name { color: var(--color-muted); font-size: 0.68rem; }
.art-forex-row__rate { font-weight: 700; color: #006633; font-size: 0.78rem; }

/* Newsletter widget */
.art-widget__nl-text { font-size: 0.8rem; color: var(--color-mid); line-height: 1.5; margin-bottom: 10px; }
.art-widget__nl-input {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--color-border-light);
    border-radius: 4px; font-size: 0.8rem;
    font-family: var(--font-ui);
    transition: border-color 0.15s; box-sizing: border-box;
}
.art-widget__nl-input:focus { outline: none; border-color: var(--color-primary); }

/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
    .art-wrap { grid-template-columns: 1fr 260px; gap: 28px; }
    .art-share-rail { display: none; }
    .art-related__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px) {
    .art-wrap { grid-template-columns: 1fr; }
    .art-sidebar { display: none; }
    .art-header__title { font-size: 1.6rem; }
    .art-related__grid { grid-template-columns: repeat(2,1fr); }
    .art-nav { grid-template-columns: 1fr; }
    .art-share-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .art-related__grid { grid-template-columns: 1fr; }
    .art-author-box { flex-direction: column; }
    .art-meta { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE ARTICLE PAGE — Premium v3
   ═══════════════════════════════════════════════════════════════ */

/* Layout */
.sp-wrap {
    display: grid;
    grid-template-columns: 52px minmax(0,740px) 300px;
    gap: 0 40px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    align-items: start;
    overflow: visible;
}
/* aside stretches to full grid row height for rollover JS */
.sp-wrap > .sp-sidebar {
    align-self: start;
}

/* ── Left Share Rail ── */
.sp-rail {
    position: sticky;
    top: 90px;
    align-self: start;
}
.sp-rail__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.sp-rail__label {
    font-family: var(--font-ui,sans-serif);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #bbb;
    margin-bottom: 4px;
}
.sp-rail__btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; color: #fff;
    text-decoration: none; border: none; cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.sp-rail__btn:hover { transform: translateY(-2px); opacity: .88; }
.sp-rail__btn--fb   { background: #1877F2; }
.sp-rail__btn--wa   { background: #25D366; }
.sp-rail__btn--tw   { background: #000; }
.sp-rail__btn--li   { background: #0A66C2; }
.sp-rail__btn--copy { background: #666; }
.sp-rail__progress-wrap {
    position: relative;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    margin-top: 4px;
}
.sp-rail__svg { width: 38px; height: 38px; }
.sp-rail__pct {
    position: absolute;
    font-size: .5rem;
    font-weight: 800;
    color: #CC0000;
}

/* ── Article ── */
.sp-article { min-width: 0; }

/* Header */
.sp-header { margin-bottom: 24px; }
.sp-header__eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
.sp-cat {
    display: inline-block;
    font-family: var(--font-ui,sans-serif);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 3px;
    text-decoration: none; color: #fff;
    transition: opacity .15s;
}
.sp-cat:hover { opacity: .85; }
.sp-cat--uae         { background: #CC0000; }
.sp-cat--world       { background: #1a2744; }
.sp-cat--business    { background: #0066CC; }
.sp-cat--tech,
.sp-cat--technology  { background: #6600CC; }
.sp-cat--lifestyle   { background: #CC6600; }
.sp-cat--sport       { background: #007755; }
.sp-cat--travel      { background: #CC0000; }
.sp-cat--guides      { background: #555; }

.sp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-ui,sans-serif);
    font-size: .65rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 3px;
}
.sp-badge--breaking { background: #CC0000; color: #fff; animation: badge-pulse 2s ease-in-out infinite; }
.sp-badge--sponsored { background: #888; color: #fff; }
.sp-badge__dot { width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes badge-pulse { 0%,100%{opacity:1;} 50%{opacity:.75;} }
@keyframes dot-pulse   { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.4);} }

.sp-header__title {
    font-family: var(--font-heading,'Playfair Display',Georgia,serif);
    font-size: 2.15rem; font-weight: 900;
    line-height: 1.2; color: #111;
    margin: 0 0 16px;
    letter-spacing: -.02em;
}
.sp-header__deck {
    font-size: 1.1rem; color: #444;
    line-height: 1.6; margin: 0 0 20px;
    font-family: var(--font-body,'Georgia',serif);
    border-left: 3px solid #CC0000;
    padding-left: 16px;
}

/* Meta bar */
.sp-meta {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}
.sp-meta__author { display: flex; align-items: center; gap: 10px; }
.sp-meta__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 2px solid #eee;
}
.sp-meta__aname {
    display: block; font-size: .82rem; font-weight: 700;
    color: #111; text-decoration: none;
    font-family: var(--font-ui,sans-serif);
}
.sp-meta__aname:hover { color: #CC0000; }
.sp-meta__arole { font-size: .7rem; color: #888; }
.sp-meta__divider { width: 1px; height: 32px; background: #e8e8e8; }
.sp-meta__items {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-ui,sans-serif);
    font-size: .74rem; color: #777;
}
.sp-meta__items i { color: #bbb; margin-right: 3px; }

/* Hero image */
.sp-hero-img {
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.sp-hero-img__img {
    width: 100%; height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.sp-hero-img__cap {
    padding: 8px 14px;
    font-size: .72rem; color: #888;
    background: #fafafa;
    border-top: 1px solid #eee;
    font-family: var(--font-ui,sans-serif);
}
.sp-hero-img__cap i { margin-right: 4px; color: #bbb; }

/* Ad slots */
.sp-ad-slot { margin: 24px 0; }

/* Article body typography */
.sp-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #1a1a1a;
}
.sp-body p     { margin: 0 0 1.4em; }
.sp-body h2    { font-family: var(--font-heading,'Playfair Display',Georgia,serif); font-size: 1.5rem; font-weight: 900; margin: 1.8em 0 .7em; color: #111; }
.sp-body h3    { font-family: var(--font-heading,'Playfair Display',Georgia,serif); font-size: 1.2rem; font-weight: 800; margin: 1.5em 0 .6em; color: #222; }
.sp-body h4    { font-size: 1rem; font-weight: 700; margin: 1.2em 0 .5em; color: #333; }
.sp-body a     { color: #CC0000; text-decoration: underline; text-decoration-color: rgba(204,0,0,.35); text-underline-offset: 2px; }
.sp-body a:hover { text-decoration-color: #CC0000; }
.sp-body blockquote {
    border-left: 4px solid #CC0000;
    margin: 1.5em 0; padding: 12px 20px;
    background: #fff8f8;
    font-style: italic; color: #444;
    border-radius: 0 6px 6px 0;
}
.sp-body ul, .sp-body ol { padding-left: 24px; margin: 0 0 1.4em; }
.sp-body li    { margin-bottom: .5em; }
.sp-body img   { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.sp-body figure { margin: 1.5em 0; }
.sp-body figcaption { font-size: .78rem; color: #888; text-align: center; margin-top: 6px; font-family: var(--font-ui,sans-serif); }
.sp-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9rem; }
.sp-body th    { background: #f5f5f5; padding: 10px 14px; text-align: left; font-weight: 700; border-bottom: 2px solid #ddd; }
.sp-body td    { padding: 9px 14px; border-bottom: 1px solid #eee; }
.sp-body tr:hover td { background: #fafafa; }

/* Tags */
.sp-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 28px 0; }
.sp-tags__label { font-size: .75rem; color: #bbb; }
.sp-tag {
    display: inline-block; padding: 4px 12px;
    background: #f5f5f5; color: #555;
    border-radius: 30px;
    font-size: .72rem; font-weight: 600;
    text-decoration: none; transition: background .15s, color .15s;
    font-family: var(--font-ui,sans-serif);
}
.sp-tag:hover { background: #CC0000; color: #fff; }

/* Share bar */
.sp-share-bar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 28px 0;
}
.sp-share-bar__label {
    font-family: var(--font-ui,sans-serif);
    font-size: .72rem; font-weight: 800;
    color: #999; text-transform: uppercase; letter-spacing: 1px;
    white-space: nowrap;
}
.sp-share-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-share-bar__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 4px;
    font-size: .75rem; font-weight: 700;
    text-decoration: none; color: #fff; border: none; cursor: pointer;
    font-family: var(--font-ui,sans-serif);
    transition: opacity .15s, transform .15s;
}
.sp-share-bar__btn:hover { opacity: .88; transform: translateY(-1px); }
.sp-share-bar__btn--fb   { background: #1877F2; }
.sp-share-bar__btn--wa   { background: #25D366; }
.sp-share-bar__btn--tw   { background: #111; }
.sp-share-bar__btn--copy { background: #555; }

/* Author box */
.sp-author {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 24px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-left: 4px solid #CC0000;
    border-radius: 8px;
    margin: 32px 0;
}
.sp-author__photo {
    width: 70px; height: 70px; border-radius: 50%;
    object-fit: cover; border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    flex-shrink: 0;
}
.sp-author__info { flex: 1; min-width: 0; }
.sp-author__written { font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #CC0000; margin-bottom: 4px; font-family: var(--font-ui,sans-serif); }
.sp-author__name { font-size: 1.05rem; font-weight: 800; color: #111; margin-bottom: 2px; font-family: var(--font-heading,'Playfair Display',serif); }
.sp-author__role { font-size: .72rem; color: #888; margin-bottom: 8px; font-family: var(--font-ui,sans-serif); }
.sp-author__bio { font-size: .82rem; color: #555; line-height: 1.55; margin: 8px 0; }
.sp-author__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sp-author__social { display: flex; gap: 8px; }
.sp-author__social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: #eee; display: flex; align-items: center; justify-content: center;
    color: #555; font-size: .78rem; text-decoration: none;
    transition: background .15s, color .15s;
}
.sp-author__social a:hover { background: #CC0000; color: #fff; }
.sp-author__more {
    font-size: .75rem; font-weight: 700; color: #CC0000;
    text-decoration: none; font-family: var(--font-ui,sans-serif);
}
.sp-author__more:hover { text-decoration: underline; }

/* Related articles */
.sp-related { margin: 36px 0; }
.sp-related__hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
.sp-related__title {
    font-family: var(--font-ui,sans-serif);
    font-size: .78rem; font-weight: 900;
    letter-spacing: 1px; text-transform: uppercase; color: #111;
}
.sp-related__more { font-size: .72rem; font-weight: 700; color: #CC0000; text-decoration: none; }
.sp-related__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sp-rel-card { display: flex; flex-direction: column; text-decoration: none; }
.sp-rel-card__img {
    position: relative; aspect-ratio: 16/9;
    border-radius: 6px; overflow: hidden; background: #eee; margin-bottom: 10px;
}
.sp-rel-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sp-rel-card:hover .sp-rel-card__img img { transform: scale(1.04); }
.sp-rel-card__cat { position: absolute; bottom: 6px; left: 6px; font-size: .58rem !important; padding: 2px 6px !important; }
.sp-rel-card__body h4 {
    font-family: var(--font-heading,'Playfair Display',serif);
    font-size: .82rem; font-weight: 700; color: #111;
    line-height: 1.3; margin: 0 0 5px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .15s;
}
.sp-rel-card:hover .sp-rel-card__body h4 { color: #CC0000; }
.sp-rel-card__meta { font-size: .68rem; color: #aaa; font-family: var(--font-ui,sans-serif); }

/* Prev/Next nav */
.sp-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin: 32px 0;
}
.sp-nav__card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 20px;
    border: 1px solid #eee; border-radius: 8px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}
.sp-nav__card:hover { border-color: #CC0000; box-shadow: 0 4px 16px rgba(204,0,0,.08); }
.sp-nav__card--next { text-align: right; }
.sp-nav__dir {
    font-family: var(--font-ui,sans-serif);
    font-size: .65rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; color: #CC0000;
}
.sp-nav__title { font-size: .82rem; font-weight: 700; color: #333; line-height: 1.35; font-family: var(--font-heading,'Playfair Display',serif); }

/* ── Sidebar ── */
.sp-sidebar {
    min-width: 0;
    align-self: start; /* must be start for sticky to work correctly */
}
.sp-sidebar__sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar widget */
.sp-sw {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.sp-sw__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    font-family: var(--font-ui,sans-serif);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase; color: #fff;
}
.sp-sw__head i { font-size: .9rem; }
.sp-sw__head--red   { background: #CC0000; }
.sp-sw__head--gold  { background: linear-gradient(135deg,#b8860b,#d4a017); }
.sp-sw__head--blue  { background: linear-gradient(135deg,#1a6b9e,#0d4f7a); }
.sp-sw__head--green { background: linear-gradient(135deg,#006633,#009944); }
.sp-sw__head--dark  { background: #1a2744; }
.sp-sw__body { padding: 14px 16px; }
.sp-sw__body--noPad { padding: 0; }
.sp-sw__btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 14px; border-radius: 5px;
    font-size: .72rem; font-weight: 800;
    text-decoration: none; color: #fff; border: none; cursor: pointer;
    font-family: var(--font-ui,sans-serif);
    letter-spacing: .4px; transition: opacity .15s;
    margin-top: 12px; width: 100%; box-sizing: border-box;
}
.sp-sw__btn:hover { opacity: .88; }
.sp-sw__btn--red   { background: #CC0000; }
.sp-sw__btn--gold  { background: linear-gradient(135deg,#b8860b,#d4a017); }
.sp-sw__btn--blue  { background: linear-gradient(135deg,#1a6b9e,#0d4f7a); }
.sp-sw__btn--green { background: linear-gradient(135deg,#006633,#009944); }
.sp-sw__btn--full  { margin-top: 0; }

/* Prayer times */
.sp-prayer-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--font-ui,sans-serif);
}
.sp-prayer-row:last-of-type { border-bottom: none; }
.sp-prayer-row__name { font-size: .8rem; color: #333; display: flex; align-items: center; gap: 8px; }
.sp-prayer-row__time { font-size: .82rem; font-weight: 800; color: #CC0000; }

/* Gold widget */
.sp-sw__body--gold { padding: 0; }
.sp-gold-hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg,#1a1000,#2d1a00);
}
.sp-gold-hero__label { font-size: .6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; font-family: var(--font-ui,sans-serif); }
.sp-gold-hero__price { font-family: var(--font-heading,'Playfair Display',serif); font-size: 1.6rem; font-weight: 900; color: #d4a017; line-height: 1; }
.sp-gold-hero__unit  { font-size: .65rem; color: rgba(255,255,255,.4); margin-top: 4px; font-family: var(--font-ui,sans-serif); }
.sp-gold-hero__icon  { font-size: 2rem; color: rgba(212,160,23,.4); }
.sp-gold-table { padding: 0 16px; }
.sp-gold-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5;
    font-family: var(--font-ui,sans-serif); font-size: .78rem;
}
.sp-gold-row span:first-child { color: #555; }
.sp-gold-row span:last-child  { font-weight: 700; color: #b8860b; }
.sp-gold-row--updated span:last-child { font-size: .65rem; color: #aaa; font-weight: 400; }
.sp-gold-row:last-child { border-bottom: none; }
.sp-sw__body--gold .sp-sw__btn { margin: 0 16px 14px; width: calc(100% - 32px); box-sizing: border-box; }

/* Weather widget */
.sp-sw__body--weather { padding: 0; }
.sp-weather-main {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg,#1a6b9e,#0d4f7a);
}
.sp-weather-loc  { font-size: .62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; font-family: var(--font-ui,sans-serif); }
.sp-weather-temp { font-family: var(--font-heading,'Playfair Display',serif); font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
.sp-weather-desc { font-size: .72rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.sp-weather-meta { display: flex; gap: 12px; margin-top: 6px; font-size: .65rem; color: rgba(255,255,255,.6); font-family: var(--font-ui,sans-serif); }
.sp-weather-icon { font-size: 2.4rem; line-height: 1; }
.sp-sw__body--weather .sp-sw__btn { margin: 0 14px 12px; width: calc(100% - 28px); }

/* Newsletter */
.sp-sw__nl-text  { font-size: .78rem; color: #555; line-height: 1.5; margin: 0 0 10px; }
.sp-sw__nl-input {
    width: 100%; padding: 9px 12px; border: 1px solid #ddd;
    border-radius: 5px; font-size: .8rem; box-sizing: border-box;
    font-family: var(--font-ui,sans-serif);
    transition: border-color .15s;
}
.sp-sw__nl-input:focus { outline: none; border-color: #CC0000; }
.sp-sw__nl-msg  { font-size: .72rem; color: #CC0000; display: none; margin-top: 6px; }
.sp-sw__nl-note { font-size: .62rem; color: #bbb; text-align: center; margin: 6px 0 0; }

/* Forex widget */
.sp-forex-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px; border-bottom: 1px solid #f5f5f5;
    font-family: var(--font-ui,sans-serif);
}
.sp-forex-row:last-of-type { border-bottom: none; }
.sp-forex-row__left  { display: flex; align-items: center; gap: 8px; }
.sp-forex-row__code  { font-size: .78rem; font-weight: 800; color: #111; min-width: 36px; }
.sp-forex-row__name  { font-size: .68rem; color: #aaa; }
.sp-forex-row__rate  { font-size: .78rem; font-weight: 700; color: #006633; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sp-wrap { grid-template-columns: 44px minmax(0,1fr) 260px; gap: 0 24px; padding: 24px 20px 40px; }
}
@media (max-width: 860px) {
    .sp-wrap { grid-template-columns: 40px minmax(0,1fr); }
    .sp-sidebar { display: none; }
    .sp-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sp-wrap { grid-template-columns: 1fr; padding: 16px 16px 32px; }
    .sp-rail  { display: none; }
    .sp-header__title { font-size: 1.5rem; }
    .sp-related__grid { grid-template-columns: 1fr; }
    .sp-nav   { grid-template-columns: 1fr; }
    .sp-author { flex-direction: column; }
    .sp-meta  { gap: 10px; }
    .sp-meta__divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE GRID ALIGNMENT — Complete Fix
   Consistent spacing, equal heights, uniform aspect ratios
   ══════════════════════════════════════════════════════════════ */

/* ── Universal container alignment ── */
.idn-cs,
.idn-hero-section,
.idn-strip-wrap {
    padding: 28px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.idn-cs + .idn-cs { border-top: none; }

/* ── Standardise all section grids to same max-width ── */
.idn-hero-section .container,
.idn-strip-wrap .container,
.idn-cs .container {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ════════════════════════
   HERO SECTION
   ════════════════════════ */
.idn-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 280px;
    gap: 24px;
    align-items: start;
}

/* Hero main card — fixed image height */
.idn-hero-main__img { min-height: unset; aspect-ratio: 16/9; }
.idn-hero-main__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sub-grid cards — uniform aspect ratio */
.idn-hero-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.idn-hero-subcard { display: flex; flex-direction: column; }
.idn-hero-subcard__img { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-sm); flex-shrink: 0; }
.idn-hero-subcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Latest news list */
.idn-hero-latest { display: flex; flex-direction: column; }
.idn-litem__img { width: 64px; min-width: 64px; height: 48px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.idn-litem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-litem__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ════════════════════════
   STRIP CARDS (Ramadan, You May Like, Partner Content)
   ════════════════════════ */
.idn-strip-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; align-items: start; }

.idn-strip-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}
.idn-strip-card__img {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: #e8e8e8;
}
.idn-strip-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-strip-card h4 {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 6px 0 3px;
}

/* ════════════════════════
   UAE SECTION
   ════════════════════════ */
.idn-uae-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 240px;
    gap: 24px;
    align-items: start;
}
.idn-uae-left { display: flex; flex-direction: column; }
.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; }

/* UAE You May Like cards */
.idn-slot--leader .idn-slot__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
.idn-slot-hcard {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.idn-slot-hcard__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: #e8e8e8;
}
.idn-slot-hcard__img img { width: 100%; height: 100%; object-fit: cover; }
.idn-slot-hcard__body { flex: 1; display: flex; flex-direction: column; padding: 8px 0 0; }
.idn-slot-hcard__body h4 {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0 0 4px;
}

/* ════════════════════════
   WORLD / BIZ / TECH / LIFESTYLE — 3-col sections
   ════════════════════════ */
.idn-3col {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.idn-3col--tech  { grid-template-columns: 1.2fr 1fr 1fr; }
.idn-3col--life  { grid-template-columns: 1fr 1.4fr 1fr; }

/* Big featured image — consistent aspect ratio */
.idn-big-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    aspect-ratio: 16/9;
    background: #e8e8e8;
    flex-shrink: 0;
}
.idn-big-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-big-img--tall { aspect-ratio: 4/3; }

/* Big col body — clamp title so it doesn't push height */
.idn-big-body { display: flex; flex-direction: column; }
.idn-big-body h2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 6px 0 4px;
}
.idn-big-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Stack col — equal height cards */
.idn-stack-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}
.idn-scard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    flex: 1;
}
.idn-scard__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    flex-shrink: 0;
    background: #e8e8e8;
}
.idn-scard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idn-scard__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.idn-scard__body h3 {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.35;
    margin: 0 0 4px;
}

/* ════════════════════════
   BUSINESS SECTION GRID
   ════════════════════════ */
.idn-biz-grid {
    display: grid;
    grid-template-columns: 240px 1.4fr 1fr;
    gap: 24px;
    align-items: start;
}
.idn-biz-latest { display: flex; flex-direction: column; }
.idn-biz-litem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    flex-shrink: 0;
}
.idn-biz-litem:last-child { border-bottom: none; }

/* ════════════════════════
   SIDEBAR WIDGETS — consistent spacing
   ════════════════════════ */
.sidebar-widget { margin-bottom: 20px; }
.sidebar-widget:last-child { margin-bottom: 0; }

/* ════════════════════════
   SLOT SIDEBAR CARDS — vertical stack
   ════════════════════════ */
.idn-slot--sidebar .idn-slot__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.idn-slot-vcard--featured .idn-slot-vcard__img {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: #e8e8e8;
}
.idn-slot-vcard--featured .idn-slot-vcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════════════
   GLOBAL — prevent images ever distorting
   ════════════════════════ */
.idn-ph-sm,
.idn-ph-feat,
.idn-ph-hero {
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: linear-gradient(135deg, #1a2744, #2d3f5e);
    display: block;
}

/* Ensure all placeholder divs fill their container */
.idn-big-img .idn-ph-feat,
.idn-big-img .idn-ph-hero { min-height: unset; height: 100%; }

/* ════════════════════════
   CONSISTENT SECTION SPACING
   ════════════════════════ */
.idn-sec-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-border-light);
    position: relative;
}

/* Prevent "You May Like" slot from disrupting column flow */
.idn-big-body .idn-slot { margin-top: 12px; }
.idn-big-body .idn-slot--leader .idn-slot__row { grid-template-columns: 1fr 1fr; gap: 10px; }

/* ════════════════════════
   RESPONSIVE — tablet
   ════════════════════════ */
@media (max-width: 1024px) {
    .idn-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-uae-grid  { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-biz-grid  { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-3col, .idn-3col--tech { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-3col > .idn-stack-col:last-child,
    .idn-3col--tech > div:last-child { display: none; }
    .idn-strip-6 { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 767px) {
    .idn-hero-grid,
    .idn-uae-grid,
    .idn-biz-grid,
    .idn-3col,
    .idn-3col--tech,
    .idn-3col--life { grid-template-columns: 1fr; gap: 16px; }
    .idn-strip-6 { grid-template-columns: repeat(2,1fr); }
    .idn-slot--leader .idn-slot__row { grid-template-columns: 1fr; }
    .idn-big-body .idn-slot--leader .idn-slot__row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .idn-strip-6 { grid-template-columns: repeat(2,1fr); }
    .idn-3col--life { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM FEED WIDGET — Business & Tech sidebar columns
   ══════════════════════════════════════════════════════════════ */

.idn-pf-widget {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border-light, #eee);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* Header */
.idn-pf-widget__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1a2744, #243660);
    border-bottom: 2px solid #0066CC;
}
.idn-pf-widget__dot { display: none; }
.idn-pf-widget__title {
    flex: 1;
    font-family: var(--font-ui, sans-serif);
    font-size: 0.65rem; font-weight: 900;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #fff;
}
.idn-pf-widget--tech .idn-pf-widget__head,
.idn-pf-widget__head--tech { background: linear-gradient(135deg, #2a0a4a, #3d1566) !important; border-bottom-color: #6600CC !important; }
.idn-pf-widget__more {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.62rem; font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-decoration: none; white-space: nowrap;
    background: rgba(255,255,255,0.12);
    padding: 3px 8px; border-radius: 10px;
}
.idn-pf-widget__more:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Item card */
.idn-pf-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    overflow: hidden;
    min-height: 88px;
}
.idn-pf-item:last-child { border-bottom: none; }
.idn-pf-item:hover { background: #fafafa; }

/* Thumbnail — fixed width, full height of row */
.idn-pf-item__img {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 88px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: #1a2744;
    position: relative;
    display: block !important;
}
.idn-pf-item__img img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.3s;
}
.idn-pf-item:hover .idn-pf-item__img img { transform: scale(1.05); }
.idn-pf-item__ph {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a2744, #2d3f5e);
}

/* Body */
.idn-pf-item__body {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}
.idn-pf-item__cat {
    font-size: 0.54rem !important;
    padding: 1px 5px !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: fit-content;
    margin-bottom: 2px;
}
.idn-pf-item__body h4 {
    font-family: var(--font-heading, 'Playfair Display', serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #111) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s;
}
.idn-pf-item:hover .idn-pf-item__body h4 { color: var(--color-primary, #CC0000) !important; }
.idn-pf-item__meta {
    font-family: var(--font-ui, sans-serif) !important;
    font-size: 0.62rem !important;
    color: #aaa !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 2px;
}
.idn-pf-item__meta i { font-size: 0.58rem; }

/* Mobile */
@media (max-width: 767px) {
    .idn-pf-item__img { width: 75px !important; min-width: 75px !important; max-width: 75px !important; height: 80px !important; }
    .idn-pf-item { min-height: 80px; }
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY CARD — Title sits on top of image with gradient
   Used in World, Business, Tech, Lifestyle featured cards
   ══════════════════════════════════════════════════════════════ */

.idn-overlay-card {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #1a2744;
}
.idn-overlay-card--tall { aspect-ratio: 3/2; }

.idn-overlay-card__img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
}
.idn-overlay-card__img img,
.idn-overlay-card__img .idn-ph-feat,
.idn-overlay-card__img .idn-ph-hero,
.idn-overlay-card__img div {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.idn-overlay-card:hover .idn-overlay-card__img img { transform: scale(1.04); }

/* Gradient overlay */
.idn-overlay-card__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 48px 18px 18px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.6) 50%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.idn-overlay-card__body .idn-cat-tag {
    font-size: 0.6rem !important;
    padding: 2px 7px !important;
    align-self: flex-start;
}

.idn-overlay-card__body h2 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: opacity 0.15s;
}
.idn-overlay-card:hover .idn-overlay-card__body h2 { opacity: 0.9; }

.idn-overlay-card__meta {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.65);
}

/* Responsive */
@media (max-width: 767px) {
    .idn-overlay-card__body h2 { font-size: 0.9rem; }
    .idn-overlay-card__body { padding: 36px 14px 14px; }
}

/* Single standalone feed card in section big-col */
.idn-pf-item--single {
    border: 1px solid var(--color-border-light, #eee) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    min-height: 100px !important;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.idn-pf-item--single .idn-pf-item__img {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: 100px !important;
}
.idn-pf-item--single .idn-pf-item__body h4 {
    font-size: 0.84rem !important;
    -webkit-line-clamp: 3 !important;
}

/* ── Single category card (fills empty slot in World/Business/Tech) ── */
.idn-pf-item--single {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-light, #eee);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    min-height: 88px;
    transition: box-shadow 0.2s;
    margin-top: 4px;
}
.idn-pf-item--single:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}
.idn-pf-item--single .idn-pf-item__img {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 88px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: #1a2744;
    position: relative !important;
    display: block !important;
}
.idn-pf-item--single .idn-pf-item__img img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.3s;
}
.idn-pf-item--single:hover .idn-pf-item__img img { transform: scale(1.04); }
.idn-pf-item--single .idn-pf-item__ph {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a2744, #2d3f5e);
}
.idn-pf-item--single .idn-pf-item__body {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}
.idn-pf-item--single .idn-pf-item__body h4 {
    font-family: var(--font-heading, 'Playfair Display', serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #111) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s;
}
.idn-pf-item--single:hover .idn-pf-item__body h4 { color: var(--color-primary, #CC0000) !important; }

/* Ensure slot leaderboard images show inside idn-big-col */
.idn-big-col .idn-slot--leader .idn-slot__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.idn-big-col .idn-slot-hcard__img {
    aspect-ratio: 16/9;
    width: 100% !important;
    min-width: unset !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
}
.idn-big-col .idn-slot-hcard__img img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
.idn-big-col .idn-slot-hcard {
    flex-direction: column !important;
}

/* Overlay card when used as extra card inside big-col */
.idn-big-col .idn-overlay-card {
    margin-top: 12px;
}

/* ── Sidebar Latest Articles (fills empty space on long reads) ── */
.sp-sidebar-latest {
    background: #fff;
    border: 1px solid var(--color-border-light, #eee);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-sidebar-latest__head {
    padding: 10px 14px;
    background: #1a2744;
    color: #fff;
    font-family: var(--font-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.sp-sidebar-latest__item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background .15s;
}
.sp-sidebar-latest__item:last-child { border-bottom: none; }
.sp-sidebar-latest__item:hover { background: #fafafa; }
.sp-sidebar-latest__img {
    width: 58px; min-width: 58px; height: 44px;
    border-radius: 3px; overflow: hidden;
    background: #e8e8e8; flex-shrink: 0;
    position: relative;
}
.sp-sidebar-latest__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.sp-sidebar-latest__ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#1a2744,#2d3f5e);
}
.sp-sidebar-latest__body { flex: 1; min-width: 0; }
.sp-sidebar-latest__body h4 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 0.74rem; font-weight: 700;
    color: var(--color-dark, #111);
    line-height: 1.3; margin: 3px 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .15s;
}
.sp-sidebar-latest__item:hover .sp-sidebar-latest__body h4 { color: var(--color-primary, #CC0000); }
.sp-sidebar-latest__meta { font-size: 0.62rem; color: #aaa; }

/* ── Sidebar Latest & Popular widgets ── */
.sp-sw__head--dark { background: #1a2744; }

.sp-sw-litem {
    display: flex; gap: 10px; align-items: center;
    padding: 9px 12px; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; transition: background .15s;
}
.sp-sw-litem:hover { background: #fafafa; }
.sp-sw-litem__img {
    width: 60px; min-width: 60px; height: 46px;
    border-radius: 4px; overflow: hidden;
    background: #e8e8e8; flex-shrink: 0; position: relative;
}
.sp-sw-litem__img img { width:100%;height:100%;object-fit:cover;display:block; }
.sp-sw-litem__ph { width:100%;height:100%;background:linear-gradient(135deg,#1a2744,#2d3f5e); }
.sp-sw-litem__body { flex:1; min-width:0; }
.sp-sw-litem__body h4 {
    font-family: var(--font-heading); font-size: 0.76rem;
    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;
    transition: color .15s;
}
.sp-sw-litem:hover .sp-sw-litem__body h4 { color: var(--color-primary); }
.sp-sw-litem__meta { font-size: 0.62rem; color: #aaa; }

/* Popular list */
.sp-sw-popitem {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; transition: background .15s;
}
.sp-sw-popitem:last-child { border-bottom: none; }
.sp-sw-popitem:hover { background: #fafafa; }
.sp-sw-popitem__num {
    font-family: var(--font-heading); font-size: 1.3rem;
    font-weight: 900; color: #e0e0e0; min-width: 22px;
    line-height: 1; flex-shrink: 0;
}
.sp-sw-popitem__img {
    width: 54px; min-width: 54px; height: 42px;
    border-radius: 4px; overflow: hidden;
    background: #e8e8e8; flex-shrink: 0;
}
.sp-sw-popitem__img img { width:100%;height:100%;object-fit:cover;display:block; }
.sp-sw-popitem__body { flex:1; min-width:0; }
.sp-sw-popitem__body h4 {
    font-family: var(--font-heading); font-size: 0.74rem;
    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;
    transition: color .15s;
}
.sp-sw-popitem:hover .sp-sw-popitem__body h4 { color: var(--color-primary); }

/* ════════════════════════════════════════════════════════════
   PREMIUM SIDEBAR v2 — InsideDubaiNow
   ════════════════════════════════════════════════════════════ */

.psb { display:flex; flex-direction:column; gap:20px; }
.psb-ad { width:100%; }

/* ── Widget base ── */
.psb-widget {
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 16px rgba(0,0,0,0.06);
    border:1px solid rgba(0,0,0,0.05);
}

/* ── Widget head ── */
.psb-widget__head {
    display:flex; align-items:center; gap:8px;
    padding:11px 15px;
    font-family:var(--font-ui); font-size:0.65rem;
    font-weight:900; letter-spacing:1.5px;
    text-transform:uppercase; color:#fff;
}
.psb-widget__head span { flex:1; }
.psb-widget__head-more {
    font-size:0.62rem; font-weight:700;
    color:rgba(255,255,255,0.65);
    background:rgba(255,255,255,0.12);
    padding:3px 8px; border-radius:10px;
    text-decoration:none; white-space:nowrap;
}
.psb-widget__head-more:hover { background:rgba(255,255,255,0.22); color:#fff; }
.psb-widget__head--red   { background:var(--color-primary,#CC0000); }
.psb-widget__head--green { background:linear-gradient(135deg,#005f2e,#008a44); }
.psb-widget__head--fire  { background:linear-gradient(135deg,#b02000,#d94400); }

/* ── Widget btn ── */
.psb-widget__btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:0 12px 12px; padding:9px 14px; border-radius:6px;
    font-family:var(--font-ui); font-size:0.72rem; font-weight:800;
    text-decoration:none; border:none; cursor:pointer;
    transition:opacity .15s;
}
.psb-widget__btn:hover { opacity:.88; }
.psb-widget__btn--red  { background:var(--color-primary); color:#fff; }
.psb-widget__btn--gold { background:linear-gradient(135deg,#b8860b,#c9a84c); color:#fff; }
.psb-widget__btn--blue { background:#0d5a8e; color:#fff; }

/* ══ PRAYER WIDGET ══ */
.psb-widget--prayer { background:#0a1428; }
.psb-widget__crown {
    display:flex; align-items:center; gap:12px;
    padding:16px 15px 12px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.psb-widget__crown-icon {
    width:42px; height:42px; border-radius:50%;
    background:rgba(204,0,0,0.2);
    border:1px solid rgba(204,0,0,0.3);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:#ff6666; flex-shrink:0;
}
.psb-widget__crown-title {
    font-family:var(--font-heading); font-size:1rem;
    font-weight:900; color:#fff; line-height:1;
}
.psb-widget__crown-sub { font-size:0.65rem; color:rgba(255,255,255,0.4); margin-top:3px; }
.psb-widget__crown-live {
    margin-left:auto; display:flex; align-items:center; gap:5px;
    font-size:0.6rem; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.psb-live-dot {
    width:6px; height:6px; border-radius:50%;
    background:#4caf50; animation:psb-pulse 1.8s ease-in-out infinite;
}
@keyframes psb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.8)} }

.psb-prayer-grid {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:0; border-bottom:1px solid rgba(255,255,255,0.06);
}
.psb-prayer-cell {
    padding:12px 10px; text-align:center;
    border-right:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.04);
    transition:background .15s;
}
.psb-prayer-cell:nth-child(3n) { border-right:none; }
.psb-prayer-cell--next { background:rgba(204,0,0,0.12) !important; }
.psb-prayer-cell__icon {
    width:32px; height:32px; border-radius:50%;
    margin:0 auto 6px; display:flex;
    align-items:center; justify-content:center; font-size:0.85rem;
}
.psb-prayer-cell__name {
    font-family:var(--font-ui); font-size:0.6rem;
    font-weight:700; letter-spacing:.5px;
    text-transform:uppercase; color:rgba(255,255,255,0.45);
    margin-bottom:4px;
}
.psb-prayer-cell__time {
    font-family:var(--font-heading); font-size:0.82rem;
    font-weight:900; color:#fff;
}
.psb-prayer-cell--next .psb-prayer-cell__time { color:#ff6666; }
.psb-widget--prayer .psb-widget__btn--red { background:rgba(204,0,0,0.8); margin-top:12px; border:1px solid rgba(204,0,0,0.5); }

/* ══ GOLD WIDGET ══ */
.psb-widget--gold { background:linear-gradient(160deg,#1a0e00,#2d1a00); }
.psb-gold-hero {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 15px 12px;
    border-bottom:1px solid rgba(201,168,76,0.15);
}
.psb-gold-hero__label {
    font-size:0.6rem; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:rgba(201,168,76,0.6); margin-bottom:4px;
}
.psb-gold-hero__price {
    font-family:var(--font-heading); font-size:2.2rem;
    font-weight:900; color:#c9a84c; line-height:1;
}
.psb-gold-hero__unit { font-size:0.65rem; color:rgba(255,255,255,0.3); margin-top:4px; }
.psb-gold-hero__icon { font-size:2.5rem; color:rgba(201,168,76,0.15); }
.psb-gold-rows { padding:4px 15px 8px; }
.psb-gold-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04);
    font-family:var(--font-ui); font-size:0.78rem;
}
.psb-gold-row:last-child { border-bottom:none; }
.psb-gold-row span:first-child { color:rgba(255,255,255,0.45); }
.psb-gold-row span:last-child { font-weight:700; color:#c9a84c; }
.psb-gold-row--updated span { font-size:0.62rem !important; color:rgba(255,255,255,0.25) !important; font-weight:400 !important; }
.psb-widget--gold .psb-widget__btn--gold { margin-top:4px; }

/* ══ WEATHER WIDGET ══ */
.psb-widget--weather { background:linear-gradient(160deg,#0d4f7a,#1a6b9e); }
.psb-weather-main {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 15px 14px;
}
.psb-weather-main__loc {
    font-size:0.62rem; text-transform:uppercase; letter-spacing:1px;
    color:rgba(255,255,255,0.5); margin-bottom:6px;
}
.psb-weather-main__temp {
    font-family:var(--font-heading); font-size:2.8rem;
    font-weight:900; color:#fff; line-height:1;
}
.psb-weather-main__desc { font-size:0.78rem; color:rgba(255,255,255,0.7); margin:4px 0 6px; }
.psb-weather-main__details {
    display:flex; gap:12px; font-size:0.68rem;
    color:rgba(255,255,255,0.5);
}
.psb-weather-main__details span { display:flex; align-items:center; gap:4px; }
.psb-weather-main__icon { font-size:3.5rem; line-height:1; }
.psb-widget--weather .psb-widget__btn--blue { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); margin-top:0; }
.psb-widget--weather .psb-widget__btn--blue:hover { background:rgba(255,255,255,0.18); }

/* ══ FOREX WIDGET ══ */
.psb-forex-rows { padding:4px 0 4px; }
.psb-forex-row {
    display:flex; align-items:center; gap:8px;
    padding:8px 15px; border-bottom:1px solid #f0f0f0;
    font-family:var(--font-ui); font-size:0.78rem;
}
.psb-forex-row:last-child { border-bottom:none; }
.psb-forex-row__flag { font-size:1.1rem; width:22px; text-align:center; flex-shrink:0; }
.psb-forex-row__code { font-weight:800; color:var(--color-dark); min-width:32px; }
.psb-forex-row__name { color:var(--color-muted); font-size:0.68rem; flex:1; }
.psb-forex-row__rate { font-weight:700; color:#005f2e; }

/* ══ TRENDING WIDGET ══ */
.psb-trend-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid #f0f0f0;
    text-decoration:none; transition:background .15s;
}
.psb-trend-item:last-child { border-bottom:none; }
.psb-trend-item:hover { background:#fafafa; }
.psb-trend-item__num {
    font-family:var(--font-heading); font-size:1.2rem;
    font-weight:900; min-width:24px; flex-shrink:0; line-height:1;
}
.psb-trend-item__num--gold   { color:#c9a84c; }
.psb-trend-item__num--silver { color:#9b9b9b; }
.psb-trend-item__num--bronze { color:#cd7f32; }
.psb-trend-item__num--plain  { color:#ddd; }
.psb-trend-item__img {
    width:60px; min-width:60px; height:46px;
    border-radius:5px; overflow:hidden; flex-shrink:0;
}
.psb-trend-item__img img { width:100%;height:100%;object-fit:cover;display:block; }
.psb-trend-item__ph { width:100%;height:100%;background:linear-gradient(135deg,#1a2744,#2d3f5e); }
.psb-trend-item__body { flex:1; min-width:0; }
.psb-trend-item__body h4 {
    font-family:var(--font-heading); font-size:0.78rem;
    font-weight:700; color:var(--color-dark); line-height:1.3;
    margin:3px 0 2px; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .15s;
}
.psb-trend-item:hover .psb-trend-item__body h4 { color:var(--color-primary); }
.psb-trend-item__meta { font-size:0.62rem; color:var(--color-muted); }

/* ══ LATEST NEWS WIDGET ══ */
.psb-news-item {
    display:flex; gap:10px; align-items:center;
    padding:10px 14px; border-bottom:1px solid #f0f0f0;
    text-decoration:none; transition:background .15s;
}
.psb-news-item:last-child { border-bottom:none; }
.psb-news-item:hover { background:#fafafa; }
.psb-news-item__img {
    width:62px; min-width:62px; height:48px;
    border-radius:5px; overflow:hidden; flex-shrink:0;
}
.psb-news-item__img img { width:100%;height:100%;object-fit:cover;display:block; }
.psb-news-item__body { flex:1; min-width:0; }
.psb-news-item__body 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;
    transition:color .15s;
}
.psb-news-item:hover .psb-news-item__body h4 { color:var(--color-primary); }
.psb-news-item__meta { font-size:0.62rem; color:var(--color-muted); }

/* ══ NEWSLETTER WIDGET ══ */
.psb-widget--newsletter {
    background:linear-gradient(160deg,#1a2744,#0d1c38);
    padding:20px 15px 16px;
}
.psb-nl-top { text-align:center; margin-bottom:16px; }
.psb-nl-icon {
    width:52px; height:52px; 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;
    font-size:1.3rem; color:#ff6666; margin:0 auto 10px;
}
.psb-nl-title {
    font-family:var(--font-heading); font-size:1.05rem;
    font-weight:900; color:#fff; margin-bottom:3px;
}
.psb-nl-sub { font-size:0.72rem; color:rgba(255,255,255,0.45); }
.psb-nl-form { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.psb-nl-input {
    width:100%; padding:10px 12px; border-radius:6px;
    border:1.5px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.07); color:#fff;
    font-size:0.82rem; font-family:var(--font-ui);
    box-sizing:border-box; outline:none; transition:border-color .15s;
}
.psb-nl-input::placeholder { color:rgba(255,255,255,0.3); }
.psb-nl-input:focus { border-color:rgba(204,0,0,0.5); }
.psb-widget--newsletter .psb-widget__btn { margin:0; }
.psb-nl-note { font-size:0.62rem; color:rgba(255,255,255,0.25); text-align:center; margin-top:6px; }

/* ══════════════════════════════════════════════════════════════════
   ULTRA-PREMIUM REDESIGN — Sidebar + Nav Dropdown + Global Polish
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   PREMIUM SIDEBAR
   ───────────────────────────────────────── */
.psb { display:flex; flex-direction:column; gap:18px; }

.psb-widget {
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 2px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.06);
    transition:box-shadow 0.2s;
}
.psb-widget:hover { box-shadow:0 6px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05); }

/* Widget head */
.psb-widget__head {
    display:flex; align-items:center; gap:8px;
    padding:12px 16px;
    font-family:var(--font-ui); font-size:0.65rem;
    font-weight:900; letter-spacing:1.8px; text-transform:uppercase;
    color:#fff; position:relative; overflow:hidden;
}
.psb-widget__head::after {
    content:''; position:absolute; top:0; right:0;
    width:80px; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06));
}
.psb-widget__head i { font-size:0.9rem; }
.psb-widget__head span { flex:1; }
.psb-widget__head-more {
    font-size:0.62rem; font-weight:700; color:rgba(255,255,255,0.7);
    background:rgba(255,255,255,0.12); padding:3px 8px; border-radius:20px;
    text-decoration:none; transition:all 0.15s; white-space:nowrap;
}
.psb-widget__head-more:hover { background:rgba(255,255,255,0.25); color:#fff; }
.psb-widget__head--red   { background:linear-gradient(135deg,#CC0000,#aa0000); }
.psb-widget__head--gold  { background:linear-gradient(135deg,#8B6914,#c9a84c); }
.psb-widget__head--blue  { background:linear-gradient(135deg,#0d4f7a,#1a7ab8); }
.psb-widget__head--green { background:linear-gradient(135deg,#0a4a2a,#0d7a40); }
.psb-widget__head--fire  { background:linear-gradient(135deg,#8B1A00,#CC3300); }
.psb-widget__head--dark  { background:linear-gradient(135deg,#1a2744,#243660); }

/* Widget CTA button */
.psb-widget__btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:0 12px 12px; padding:9px 14px; border-radius:8px;
    font-family:var(--font-ui); font-size:0.72rem; font-weight:800;
    text-decoration:none; border:none; cursor:pointer;
    transition:all 0.18s; letter-spacing:0.5px;
}
.psb-widget__btn--red  { background:linear-gradient(135deg,#CC0000,#aa0000); color:#fff; }
.psb-widget__btn--gold { background:linear-gradient(135deg,#8B6914,#c9a84c); color:#fff; }
.psb-widget__btn--blue { background:linear-gradient(135deg,#0d4f7a,#1a7ab8); color:#fff; }
.psb-widget__btn:hover { opacity:0.88; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

/* ── PRAYER WIDGET ── */
.psb-widget--prayer { background:linear-gradient(160deg,#0d1c38 0%,#1a2744 50%,#0a1428 100%); }
.psb-widget__crown {
    display:flex; align-items:center; gap:12px;
    padding:18px 16px 14px;
}
.psb-widget__crown-icon {
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:rgba(255,200,100,0.9); flex-shrink:0;
}
.psb-widget__crown-title {
    font-family:var(--font-heading); font-size:1rem; font-weight:900; color:#fff;
}
.psb-widget__crown-sub { font-size:0.68rem; color:rgba(255,255,255,0.45); margin-top:2px; }
.psb-widget__crown-live {
    margin-left:auto; display:flex; align-items:center; gap:5px;
    font-family:var(--font-ui); font-size:0.6rem; font-weight:800;
    letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.psb-live-dot {
    width:6px; height:6px; border-radius:50%; background:#4CAF50;
    animation:psb-blink 1.6s ease-in-out infinite;
}
@keyframes psb-blink { 0%,100%{opacity:1}50%{opacity:0.3} }
.psb-prayer-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:0; padding:0 10px 10px;
}
.psb-prayer-cell {
    display:flex; flex-direction:column; align-items:center;
    padding:10px 6px; border-radius:10px; margin:3px;
    background:rgba(255,255,255,0.04);
    transition:background 0.15s;
}
.psb-prayer-cell.is-next { background:rgba(204,0,0,0.2); border:1px solid rgba(204,0,0,0.4); }
.psb-prayer-cell__icon {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.8rem; margin-bottom:6px;
}
.psb-prayer-cell__name { font-size:0.6rem; font-weight:700; letter-spacing:0.5px; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-bottom:3px; }
.psb-prayer-cell__time { font-family:var(--font-heading); font-size:0.88rem; font-weight:800; color:#fff; }
.psb-prayer-cell.is-next .psb-prayer-cell__time { color:#ff8888; }
.psb-widget--prayer .psb-widget__btn--red { margin-top:2px; background:rgba(204,0,0,0.8); border:1px solid rgba(204,0,0,0.5); }

/* ── GOLD WIDGET ── */
.psb-widget--gold { background:linear-gradient(160deg,#1a0e00,#2d1a00,#3d2800); }
.psb-gold-hero {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 16px 12px;
}
.psb-gold-hero__label { font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(201,168,76,0.6); margin-bottom:4px; }
.psb-gold-hero__price { font-family:var(--font-heading); font-size:2.2rem; font-weight:900; color:#c9a84c; line-height:1; }
.psb-gold-hero__unit { font-size:0.65rem; color:rgba(255,255,255,0.35); margin-top:4px; }
.psb-gold-hero__icon { font-size:2.8rem; color:rgba(201,168,76,0.15); }
.psb-gold-rows { padding:0 16px 8px; }
.psb-gold-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06);
    font-family:var(--font-ui); font-size:0.78rem;
}
.psb-gold-row span:first-child { color:rgba(255,255,255,0.45); }
.psb-gold-row span:last-child { font-weight:700; color:#c9a84c; }
.psb-gold-row--updated { border-bottom:none; }
.psb-gold-row--updated span { font-size:0.62rem !important; color:rgba(255,255,255,0.25) !important; font-weight:400 !important; }

/* ── WEATHER WIDGET ── */
.psb-widget--weather { background:linear-gradient(160deg,#082a44,#0d3d63,#0a2a44); }
.psb-weather-main {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 16px 12px;
}
.psb-weather-main__loc { font-size:0.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:6px; }
.psb-weather-main__temp { font-family:var(--font-heading); font-size:2.4rem; font-weight:900; color:#fff; line-height:1; }
.psb-weather-main__desc { font-size:0.78rem; color:rgba(255,255,255,0.6); margin:4px 0; }
.psb-weather-main__details { display:flex; gap:12px; font-size:0.68rem; color:rgba(255,255,255,0.45); margin-top:4px; }
.psb-weather-main__details span { display:flex; align-items:center; gap:4px; }
.psb-weather-main__icon { font-size:3.2rem; line-height:1; }
.psb-widget--weather .psb-widget__btn--blue { background:rgba(26,122,184,0.5); border:1px solid rgba(255,255,255,0.1); }

/* ── FOREX WIDGET ── */
.psb-widget--forex { }
.psb-widget__head--green { background:linear-gradient(135deg,#0a4a2a,#0d7a40); }
.psb-forex-rows { padding:4px 0; }
.psb-forex-row {
    display:flex; align-items:center; gap:8px;
    padding:9px 16px; border-bottom:1px solid #f5f5f5;
    font-family:var(--font-ui); font-size:0.78rem;
    transition:background 0.12s;
}
.psb-forex-row:last-child { border-bottom:none; }
.psb-forex-row:hover { background:#fafafa; }
.psb-forex-row__flag { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.psb-forex-row__code { font-weight:800; color:var(--color-dark); min-width:32px; }
.psb-forex-row__name { flex:1; color:var(--color-muted); font-size:0.68rem; }
.psb-forex-row__rate { font-weight:700; color:#0a4a2a; font-size:0.8rem; }

/* ── TRENDING WIDGET ── */
.psb-trend-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid #f5f5f5;
    text-decoration:none; transition:background 0.12s;
}
.psb-trend-item:last-child { border-bottom:none; }
.psb-trend-item:hover { background:#fafafa; }
.psb-trend-item__num {
    font-family:var(--font-heading); font-size:1.4rem; font-weight:900;
    min-width:28px; text-align:center; line-height:1;
}
.psb-trend-item__num--gold   { color:#c9a84c; }
.psb-trend-item__num--silver { color:#9e9e9e; }
.psb-trend-item__num--bronze { color:#c97a4c; }
.psb-trend-item__num--plain  { color:#e0e0e0; }
.psb-trend-item__img {
    width:54px; min-width:54px; height:42px;
    border-radius:6px; overflow:hidden; background:#e8e8e8; flex-shrink:0;
}
.psb-trend-item__img img { width:100%; height:100%; object-fit:cover; display:block; }
.psb-trend-item__ph { width:100%; height:100%; background:linear-gradient(135deg,#1a2744,#2d3f5e); }
.psb-trend-item__body { flex:1; min-width:0; }
.psb-trend-item__body h4 {
    font-family:var(--font-heading); font-size:0.76rem; font-weight:700;
    color:var(--color-dark); line-height:1.3; margin:3px 0 2px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color 0.12s;
}
.psb-trend-item:hover .psb-trend-item__body h4 { color:var(--color-primary); }
.psb-trend-item__meta { font-size:0.62rem; color:var(--color-muted); }

/* ── LATEST NEWS ITEMS ── */
.psb-news-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid #f5f5f5;
    text-decoration:none; transition:background 0.12s;
}
.psb-news-item:last-child { border-bottom:none; }
.psb-news-item:hover { background:#fafafa; }
.psb-news-item__img {
    width:60px; min-width:60px; height:46px;
    border-radius:6px; overflow:hidden; background:#e8e8e8; flex-shrink:0; position:relative;
}
.psb-news-item__img img { width:100%; height:100%; object-fit:cover; display:block; }
.psb-news-item__body { flex:1; min-width:0; }
.psb-news-item__body 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;
    transition:color 0.12s;
}
.psb-news-item:hover .psb-news-item__body h4 { color:var(--color-primary); }
.psb-news-item__meta { font-size:0.62rem; color:var(--color-muted); }

/* ── NEWSLETTER WIDGET ── */
.psb-widget--newsletter {
    background:linear-gradient(160deg,#1a2744,#0d1c38);
    padding:20px 16px;
}
.psb-nl-top { text-align:center; margin-bottom:16px; }
.psb-nl-icon {
    width:52px; height:52px; border-radius:50%;
    background:rgba(204,0,0,0.2); border:1px solid rgba(204,0,0,0.3);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:#ff8888; margin:0 auto 10px;
}
.psb-nl-title { font-family:var(--font-heading); font-size:1.1rem; font-weight:900; color:#fff; margin-bottom:4px; }
.psb-nl-sub { font-size:0.72rem; color:rgba(255,255,255,0.45); }
.psb-nl-form { display:flex; flex-direction:column; gap:8px; }
.psb-nl-input {
    width:100%; padding:10px 14px; border-radius:8px;
    border:1.5px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.07); color:#fff;
    font-family:var(--font-ui); font-size:0.82rem;
    box-sizing:border-box; transition:border-color 0.15s;
}
.psb-nl-input::placeholder { color:rgba(255,255,255,0.3); }
.psb-nl-input:focus { outline:none; border-color:rgba(204,0,0,0.6); }
.psb-widget--newsletter .psb-widget__btn--red { margin:0; }
.psb-nl-note { font-size:0.62rem; text-align:center; color:rgba(255,255,255,0.25); margin-top:6px; }

/* ─────────────────────────────────────────
   PREMIUM NAV MEGA DROPDOWN
   ───────────────────────────────────────── */
.mega-menu {
    display:none;
    position:absolute;
    top:calc(100% + 0px);
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border-radius:0 0 16px 16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
    border-top:3px solid var(--color-primary);
    z-index:500;
    min-width:480px;
    overflow:hidden;
    animation:megaFadeIn 0.18s ease;
}
@keyframes megaFadeIn { from{opacity:0;transform:translateX(-50%) translateY(-6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.nav-primary__menu > li:hover > .mega-menu { display:block; }

.mega-menu__inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
}
.mega-menu__links {
    padding:20px;
    border-right:1px solid #f5f5f5;
    background:#fff;
}
.mega-menu__links-title {
    font-family:var(--font-ui); font-size:0.58rem; font-weight:900;
    letter-spacing:2px; text-transform:uppercase; color:var(--color-primary);
    margin-bottom:12px; padding-bottom:8px;
    border-bottom:1px solid #f0f0f0;
}
.mega-menu__link {
    display:flex; align-items:center; gap:8px;
    padding:7px 0; text-decoration:none;
    font-family:var(--font-ui); font-size:0.8rem; font-weight:600;
    color:var(--color-mid); transition:all 0.12s;
    border-bottom:1px solid #fafafa;
}
.mega-menu__link:last-child { border-bottom:none; }
.mega-menu__link:hover { color:var(--color-primary); padding-left:4px; }
.mega-menu__link i { font-size:0.65rem; color:var(--color-muted); width:14px; }

.mega-menu__posts {
    padding:14px;
    background:#fafafa;
}
.mega-menu__posts-title {
    font-family:var(--font-ui); font-size:0.58rem; font-weight:900;
    letter-spacing:2px; text-transform:uppercase; color:var(--color-muted);
    margin-bottom:10px;
}
.mega-menu__post {
    display:flex; gap:9px; align-items:center;
    padding:7px 0; border-bottom:1px solid #f0f0f0;
    text-decoration:none; transition:background 0.12s;
}
.mega-menu__post:last-child { border-bottom:none; }
.mega-menu__post-img {
    width:46px; min-width:46px; height:36px;
    border-radius:5px; overflow:hidden; background:#e8e8e8; flex-shrink:0;
}
.mega-menu__post-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mega-menu__post-ph { width:100%; height:100%; background:linear-gradient(135deg,#1a2744,#2d3f5e); }
.mega-menu__post-title {
    font-family:var(--font-heading); font-size:0.72rem; font-weight:700;
    color:var(--color-dark); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color 0.12s;
}
.mega-menu__post:hover .mega-menu__post-title { color:var(--color-primary); }

.mega-menu__footer {
    padding:10px 20px;
    background:linear-gradient(135deg,#1a2744,#243660);
    display:flex; align-items:center; justify-content:space-between;
}
.mega-menu__footer a {
    font-family:var(--font-ui); font-size:0.7rem; font-weight:700;
    color:rgba(255,255,255,0.75); text-decoration:none;
    display:flex; align-items:center; gap:5px;
}
.mega-menu__footer a:hover { color:#fff; }
.mega-menu__footer-cat {
    font-size:0.6rem; font-weight:900; letter-spacing:1px;
    text-transform:uppercase; color:rgba(255,255,255,0.4);
}

/* ─────────────────────────────────────────
   GLOBAL PREMIUM POLISH
   ───────────────────────────────────────── */

/* Section headers — sharper */
.idn-sec-hdr {
    border-bottom:none !important;
    margin-bottom:18px !important;
}
.idn-sec-title {
    font-family:var(--font-heading);
    font-size:1rem; font-weight:900;
    letter-spacing:-0.02em;
    text-decoration:none;
    position:relative;
    padding-bottom:8px;
}
.idn-sec-title::after {
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:100%; height:3px;
    border-radius:2px;
}
.idn-sec-title--uae::after       { background:linear-gradient(90deg,#CC0000,transparent); }
.idn-sec-title--world::after     { background:linear-gradient(90deg,#c9a84c,transparent); }
.idn-sec-title--business::after  { background:linear-gradient(90deg,#0066CC,transparent); }
.idn-sec-title--tech::after      { background:linear-gradient(90deg,#6600CC,transparent); }
.idn-sec-title--lifestyle::after { background:linear-gradient(90deg,#CC6600,transparent); }

/* Cards — refined shadows */
.idn-scard, .art-related-card, .idn-pf-item--single {
    transition:transform 0.2s, box-shadow 0.2s;
}
.idn-scard:hover { transform:translateY(-2px); }

/* Article body — premium serif */
.art-body {
    font-size:1.08rem;
    line-height:1.85;
    letter-spacing:0.01em;
}
.art-body p:first-of-type::first-letter {
    float:left;
    font-family:var(--font-heading);
    font-size:4rem;
    line-height:0.8;
    padding:6px 8px 0 0;
    color:var(--color-primary);
    font-weight:900;
}

/* Reading progress bar — thicker */
#rp-bar { height:4px !important; }

/* Smooth hover on nav */
.nav-primary__menu > li > a {
    position:relative;
    letter-spacing:0.02em;
}
.nav-primary__menu > li > a::after {
    content:'';
    position:absolute;
    bottom:0; left:50%; right:50%;
    height:2px;
    background:var(--color-primary);
    transition:left 0.2s, right 0.2s;
}
.nav-primary__menu > li:hover > a::after,
.nav-primary__menu > li.current-menu-item > a::after {
    left:0; right:0;
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY PAGES (Gold / Prayer / Forex) — Layout + Sidebar Fix
   + Complete Mobile & Tablet Responsive Design
   ══════════════════════════════════════════════════════════════════ */

/* ─── UTILITY PAGE LAYOUT ─── */
.idn-lp {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    align-items: start;
    box-sizing: border-box;
}

/* Make sidebar in these pages use the psb widget system properly */
.idn-lp > aside {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* psb widgets inside these pages */
.idn-lp .psb-widget { width: 100%; box-sizing: border-box; overflow: hidden; }
.idn-lp aside .psb { width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   GLOBAL MOBILE + TABLET RESPONSIVE — Complete System
   ══════════════════════════════════════════════════════════════════ */

/* ── TABLET (768px – 1024px) ── */
@media (max-width: 1024px) {

    /* Utility pages */
    .idn-lp {
        grid-template-columns: 1fr 260px;
        gap: 24px;
        padding: 28px 20px;
    }

    /* Article reading page */
    .sp-wrap {
        grid-template-columns: 40px 1fr 240px;
        gap: 0 24px;
        padding: 24px 20px 40px;
    }

    /* Homepage sections */
    .idn-hero-grid   { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-uae-grid    { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-biz-grid    { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-3col        { grid-template-columns: 1fr 1fr; gap: 20px; }
    .idn-3col--tech  { grid-template-columns: 1fr 1fr; }
    .idn-strip-6     { grid-template-columns: repeat(3,1fr); }
    .idn-hero-grid > div:last-child { display: none; }

    /* Nav */
    .nav-primary__menu > li > a { padding: 0 10px; font-size: 0.78rem; }

    /* Section header */
    .idn-sec-hdr { margin-bottom: 14px; }
}

/* ── MOBILE (max 767px) ── */
@media (max-width: 767px) {

    /* ── Base typography ── */
    body { font-size: 15px; }

    /* ── Container ── */
    .container { padding: 0 16px; }

    /* ── Utility pages — single column ── */
    .idn-lp {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 20px 16px;
    }
    .idn-lp > aside {
        position: static;
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* ── Article reading page ── */
    .sp-wrap {
        grid-template-columns: 1fr;
        padding: 16px 16px 32px;
        gap: 0;
    }
    .sp-rail    { display: none; }
    .sp-sidebar { display: none; }
    .art-share-rail { display: none; }
    .art-wrap { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
    .art-sidebar { display: none; }

    /* ── Article header ── */
    .art-header__title,
    .sp-title { font-size: 1.45rem; line-height: 1.25; }
    .art-header__deck { font-size: 0.95rem; }
    .art-meta { flex-wrap: wrap; gap: 8px; }
    .art-meta__divider { display: none; }

    /* ── Article body ── */
    .art-body { font-size: 1rem; line-height: 1.75; }
    .art-body p:first-of-type::first-letter { font-size: 3rem; }

    /* ── Related articles — 2 col on mobile ── */
    .art-related__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .art-nav { grid-template-columns: 1fr; }

    /* ── Homepage ── */
    .idn-hero-grid,
    .idn-uae-grid,
    .idn-biz-grid,
    .idn-3col,
    .idn-3col--tech,
    .idn-3col--life { grid-template-columns: 1fr; gap: 16px; }

    /* Hide 3rd column on mobile */
    .idn-3col > div:nth-child(3),
    .idn-hero-grid > div:last-child { display: none; }

    .idn-strip-6 { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ── Overlay cards — shorter on mobile ── */
    .idn-overlay-card { aspect-ratio: 16/10; }
    .idn-overlay-card__body h2 { font-size: 0.92rem; }
    .idn-overlay-card__body { padding: 32px 12px 12px; }

    /* ── Slot cards ── */
    .idn-slot--leader .idn-slot__row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .idn-scard__img { aspect-ratio: 16/9; }

    /* ── Section headers ── */
    .idn-cs { padding: 20px 0; }
    .idn-sec-hdr { margin-bottom: 12px; }
    .idn-sec-title { font-size: 0.9rem; }

    /* ── Prayer page cards — 2 col ── */
    .pt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pt-card { padding: 14px 8px; }
    .pt-card__time { font-size: 1.2rem; }
    .pt-hero { padding: 22px 18px; }
    .pt-hero__title { font-size: 1.4rem; }
    .pt-next-pill__val { font-size: 1.1rem; }

    /* ── Gold cards — 2 col ── */
    .gp-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gp-hero { padding: 22px 18px; }
    .gp-hero__num { font-size: 2.4rem; }
    .gp-hero__title { font-size: 1.4rem; }

    /* ── Forex quick cards — 2 col ── */
    .fx-quick { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fx-hero { padding: 22px 18px; }
    .fx-hero__title { font-size: 1.4rem; }
    .fx-hero__pegs { gap: 8px; }
    .fx-hero__peg-val { font-size: 1.2rem; }

    /* ── Forex table — hide middle column ── */
    .fx-table th:nth-child(2),
    .fx-table td:nth-child(2) { display: none; }

    /* ── Gold table — hide USD col ── */
    .gp-table th:nth-child(3),
    .gp-table td:nth-child(3) { display: none; }

    /* ── YMAL grid — 1 col on small mobile ── */
    .idn-lp-ymal__grid { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ── Sidebar — full width horizontal ── */
    .idn-lp > aside .psb-widget { border-radius: 10px; }
    .psb-prayer-grid { grid-template-columns: repeat(3,1fr); }

    /* ── Hero section ── */
    .idn-hero-main__img img { height: 260px; }
    .idn-hero-main__title { font-size: 1.1rem; }

    /* ── pf-widget cards ── */
    .idn-pf-item__img { width: 76px !important; min-width: 76px !important; height: 80px !important; }
    .idn-pf-item__body h4 { font-size: 0.76rem !important; }
    .idn-pf-item--single .idn-pf-item__img { width: 80px !important; min-width: 80px !important; height: 70px !important; }

    /* ── Nav mega menu — disabled on mobile ── */
    .mega-menu { display: none !important; }

    /* ── Homepage section spacing ── */
    .idn-cs { padding: 20px 0; }

    /* ── Strip cards ── */
    .idn-strip-card__img img { height: 90px; }
    .idn-strip-card h4 { font-size: 0.72rem; }
}

/* ── SMALL PHONES (max 480px) ── */
@media (max-width: 480px) {
    .idn-lp { padding: 16px 12px; }
    .container { padding: 0 12px; }

    .pt-grid { grid-template-columns: 1fr 1fr; }
    .pt-card__time { font-size: 1.05rem; }
    .pt-card__name { font-size: 0.82rem; }

    .gp-cards { grid-template-columns: 1fr 1fr; }
    .gp-card__aed { font-size: 1.05rem; }

    .fx-quick { grid-template-columns: 1fr 1fr; }

    .idn-lp-ymal__grid { grid-template-columns: 1fr; gap: 12px; }
    .art-related__grid { grid-template-columns: 1fr; }

    .idn-strip-6 { grid-template-columns: 1fr 1fr; gap: 8px; }

    .sp-title, .art-header__title { font-size: 1.3rem; }

    /* Sidebar widgets on mobile — compact */
    .psb-prayer-grid { grid-template-columns: repeat(2,1fr); }
    .psb-gold-hero__price { font-size: 1.8rem; }
    .psb-weather-main__temp { font-size: 2rem; }
}

/* ── Sidebar used inside utility pages on DESKTOP ── */
@media (min-width: 768px) {
    .idn-lp > aside {
        position: sticky;
        top: 90px;
        overflow: visible;
    }
}

/* ── Reading page sidebar on tablet ── */
@media (max-width: 1024px) and (min-width: 768px) {
    .sp-sidebar { display: block; }
    .sp-sidebar__sticky { top: 80px; }
}

/* Fix: psb widgets must not overflow their container */
.psb-widget, .psb-widget * { box-sizing: border-box; max-width: 100%; }
.psb-prayer-grid { width: 100%; }
.psb-gold-rows, .psb-forex-rows { overflow: hidden; }
.psb-nl-input { max-width: 100%; }
.psb-widget--newsletter { overflow: hidden; }

/* Fix sidebar icon overflow in utility pages */
.idn-lp .psb-gold-hero__icon { font-size: 2rem; }
.idn-lp .psb-weather-main__icon { font-size: 2.5rem; }

/* idn-mob-nav removed — replaced by #idnBottomBar */

/* Add padding to body on mobile so content isn't hidden behind nav */
@media (max-width: 767px) {
    /* body padding-bottom handled by #idnBottomBar JS (data-mobile attr) */

    /* Ensure footer doesn't sit behind mobile nav */
    .site-footer { margin-bottom: 0; padding-bottom: 16px; }

    /* Mobile article - show share bar inline instead of rail */
    .art-share-bar { display: flex; }
    .art-share-bar__btns { flex-wrap: wrap; gap: 6px; }
    .art-share-bar__btn { padding: 7px 10px; font-size: 0.7rem; }

    /* Mobile section titles */
    .idn-sec-title::after { width: 40px; }

    /* Mobile prayer page */
    .pt-hero__row { gap: 12px; }
    .pt-hero__icon-wrap { width: 48px; height: 48px; font-size: 1.2rem; }

    /* Mobile feed items */
    .idn-lp-feed-item__img { width: 60px; min-width: 60px; height: 46px; }
    .idn-lp-feed-item h4 { font-size: 0.8rem; }

    /* Mobile: newsletter input full width */
    .psb-nl-form { flex-direction: column; }

    /* Mobile: hide sidebar ad slot */
    .psb-ad { display: none; }

    /* Mobile: compact gold hero */
    .psb-gold-hero { padding: 14px 12px 10px; }
    .psb-gold-hero__price { font-size: 1.8rem; }

    /* Mobile: reading page nav */
    .art-nav { grid-template-columns: 1fr; }

    /* Mobile: related grid */
    .art-related__grid { grid-template-columns: 1fr 1fr; }

    /* Ensure images don't overflow */
    img { max-width: 100%; height: auto; }
    .idn-overlay-card__img img { height: 100%; }
}

@media (max-width: 480px) {
    .art-related__grid { grid-template-columns: 1fr; }
    .idn-lp-ymal__grid { grid-template-columns: 1fr; }
    .psb-prayer-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   COMPLETE MOBILE FIX — All pages aligned, clean, professional
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Reset everything to proper box model ── */
    *, *::before, *::after { box-sizing: border-box; }
    body { overflow-x: hidden; padding-bottom: 65px; }

    /* ── Container always full width with safe padding ── */
    .container,
    .idn-cs .container,
    .idn-hero-section .container { 
        width: 100%; 
        max-width: 100%; 
        padding: 0 14px; 
        margin: 0; 
    }

    /* ── HOMEPAGE SECTIONS ── */
    .idn-cs { padding: 18px 0; }
    
    /* All section grids → single column */
    .idn-hero-grid,
    .idn-uae-grid,
    .idn-biz-grid,
    .idn-3col,
    .idn-3col--tech,
    .idn-3col--life { 
        grid-template-columns: 1fr !important; 
        gap: 16px !important; 
    }

    /* Hide 3rd+ columns that aren't needed on mobile */
    .idn-hero-grid > div:nth-child(3),
    .idn-3col > div:nth-child(3),
    .idn-3col--tech > div:nth-child(3),
    .idn-3col--life > div:nth-child(3) { display: none !important; }

    /* Strip cards 2 per row */
    .idn-strip-6 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* Stack col cards — reduce image */
    .idn-scard__img { aspect-ratio: 16/9; }
    .idn-stack-col { gap: 12px; }

    /* PF widget — keep but compact */
    .idn-pf-widget { border-radius: 8px; }
    .idn-pf-item__img { 
        width: 78px !important; min-width: 78px !important; 
        height: 78px !important; 
    }
    .idn-pf-item--single .idn-pf-item__img { 
        width: 78px !important; min-width: 78px !important; 
        height: 72px !important; 
    }

    /* Section header */
    .idn-sec-hdr { margin-bottom: 12px; }
    .idn-sec-title { font-size: 0.88rem; }
    .idn-sec-more { font-size: 0.7rem; }

    /* Overlay card — shorter on mobile */
    .idn-overlay-card { aspect-ratio: 16/9; }
    .idn-overlay-card--tall { aspect-ratio: 4/3; }
    .idn-overlay-card__body { padding: 36px 12px 12px; }
    .idn-overlay-card__body h2 { font-size: 0.9rem; }

    /* UAE section — slot cards 2 col */
    .idn-slot--leader .idn-slot__row { 
        grid-template-columns: 1fr 1fr !important; 
        gap: 10px !important; 
    }

    /* Business/World section — widget becomes full width */
    .idn-pf-widget--tech,
    .idn-pf-widget { width: 100%; }

    /* ── UTILITY PAGES (Gold/Prayer/Forex) ── */
    .idn-lp {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 16px 14px !important;
    }
    .idn-lp > aside {
        position: static !important;
        margin-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Prayer cards 2 col */
    .pt-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .pt-hero { padding: 20px 16px !important; }
    .pt-hero__title { font-size: 1.4rem !important; }
    .pt-hero__icon-wrap { width: 48px; height: 48px; font-size: 1.2rem; }
    .pt-next-pill__val { font-size: 1.1rem !important; }
    .pt-card { padding: 14px 8px !important; }
    .pt-card__time { font-size: 1.15rem !important; }
    .pt-card__name { font-size: 0.85rem !important; }

    /* Gold cards 2 col */
    .gp-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .gp-hero { padding: 20px 16px !important; }
    .gp-hero__num { font-size: 2.4rem !important; }
    .gp-hero__title { font-size: 1.4rem !important; }
    .gp-table th:nth-child(3), .gp-table td:nth-child(3) { display: none; }

    /* Forex quick cards 2 col */
    .fx-quick { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .fx-hero { padding: 20px 16px !important; }
    .fx-hero__title { font-size: 1.4rem !important; }
    .fx-hero__pegs { flex-direction: column; gap: 8px !important; }
    .fx-hero__peg { min-width: unset; }
    .fx-hero__peg-val { font-size: 1.3rem !important; }
    .fx-table th:nth-child(2), .fx-table td:nth-child(2) { display: none; }

    /* YMAL grid 1 col on small screens */
    .idn-lp-ymal__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* ── ARTICLE READING PAGE ── */
    .sp-wrap {
        grid-template-columns: 1fr !important;
        padding: 14px 14px 24px !important;
        gap: 0 !important;
    }
    .sp-rail { display: none !important; }
    .sp-sidebar { display: none !important; }
    
    /* Article header */
    .sp-article h1,
    .art-header__title { font-size: 1.4rem !important; line-height: 1.25 !important; }
    .art-header__deck { font-size: 0.92rem !important; }
    .art-meta { flex-wrap: wrap; gap: 8px; }
    .art-meta__divider { display: none; }

    /* Article body */
    .art-body { font-size: 0.97rem !important; line-height: 1.78 !important; }
    .art-body p:first-of-type::first-letter { font-size: 2.8rem !important; }

    /* Related articles 1 col */
    .art-related__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .art-nav { grid-template-columns: 1fr !important; }

    /* Share bar */
    .art-share-rail { display: none !important; }
    .art-share-bar { flex-direction: column; align-items: flex-start; }
    .art-share-bar__btns { flex-wrap: wrap; gap: 6px; }
    .art-share-bar__btn { padding: 7px 10px !important; font-size: 0.7rem !important; }

    /* Author box */
    .art-author-box { flex-direction: column; }
    .art-author-box__photo { width: 60px; height: 60px; }

    /* ── PSB SIDEBAR (shown below article on mobile) ── */
    .idn-lp > aside .psb-widget,
    .psb-widget { overflow: hidden; width: 100%; }
    .psb-prayer-grid { grid-template-columns: repeat(3,1fr) !important; }
    .psb-gold-hero__price { font-size: 1.8rem !important; }
    .psb-weather-main__temp { font-size: 2rem !important; }
    .psb-ad { display: none; }

    /* ── HERO IMAGE ── */
    .idn-hero-main__img img { height: 220px !important; }

    /* ── GLOBAL ALIGNMENT ── */
    img { max-width: 100%; height: auto; display: block; }
    
    /* Fix any overflow from absolute positioned things */
    .idn-overlay-card__img img { 
        position: absolute; top:0; left:0; 
        width:100% !important; height:100% !important; 
    }

    /* Disable mega menu on mobile */
    .mega-menu { display: none !important; }

    /* Homepage biz/tech latest widget — full width */
    .idn-biz-grid > div:first-child { display: none; }
}

/* ── VERY SMALL PHONES (max 420px) ── */
@media (max-width: 420px) {
    .container, .idn-lp { padding: 0 12px !important; }
    .pt-grid { grid-template-columns: 1fr 1fr !important; }
    .gp-cards { grid-template-columns: 1fr 1fr !important; }
    .fx-quick { grid-template-columns: 1fr 1fr !important; }
    .idn-lp-ymal__grid { grid-template-columns: 1fr !important; }
    .art-related__grid { grid-template-columns: 1fr !important; }
    .idn-strip-6 { grid-template-columns: 1fr 1fr !important; }
    .psb-prayer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
    .art-header__title { font-size: 1.25rem !important; }
    .idn-overlay-card__body h2 { font-size: 0.85rem !important; }
}

/* ── TABLET (768–1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .idn-lp { grid-template-columns: 1fr 260px !important; padding: 28px 20px !important; }
    .idn-hero-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-hero-grid > div:last-child { display: none; }
    .idn-uae-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-biz-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-3col, .idn-3col--tech { grid-template-columns: 1fr 1fr !important; }
    .idn-3col > div:nth-child(3), .idn-3col--tech > div:nth-child(3) { display: none; }
    .idn-strip-6 { grid-template-columns: repeat(3,1fr) !important; }
    .sp-wrap { grid-template-columns: 44px 1fr 240px !important; }
    .pt-grid { grid-template-columns: repeat(3,1fr) !important; }
    .gp-cards { grid-template-columns: repeat(2,1fr) !important; }
    .fx-quick { grid-template-columns: repeat(2,1fr) !important; }
    .idn-lp-ymal__grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE COMPLETE FIX v2 — Every page, properly aligned
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── BASE ── */
    html, body { overflow-x: hidden; width: 100%; }
    *, *::before, *::after { box-sizing: border-box; }
    body { padding-bottom: 68px; }

    /* ── ALL CONTAINERS — consistent padding ── */
    .container,
    .idn-cs .container { padding: 0 14px !important; width: 100% !important; max-width: 100% !important; }

    /* ── HOMEPAGE ── */
    .idn-cs { padding: 16px 0 !important; }
    .idn-sec-hdr { margin-bottom: 12px !important; }
    .idn-sec-title { font-size: 0.9rem !important; }

    /* All grids → single column */
    .idn-hero-grid,
    .idn-uae-grid,
    .idn-biz-grid,
    .idn-3col,
    .idn-3col--tech,
    .idn-3col--life {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Hide sidebar/extra columns */
    .idn-hero-grid > .idn-hero-latest,
    .idn-hero-grid > div:nth-child(3),
    .idn-3col > div:nth-child(3),
    .idn-biz-grid > div:first-child { display: none !important; }

    /* Strip 2 per row */
    .idn-strip-6 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .idn-strip-card__img { aspect-ratio: 4/3 !important; height: auto !important; }
    .idn-strip-card__img img { height: 100% !important; }

    /* Overlay cards */
    .idn-overlay-card { aspect-ratio: 16/9 !important; }
    .idn-overlay-card__body { padding: 36px 12px 12px !important; }
    .idn-overlay-card__body h2 { font-size: 0.92rem !important; }

    /* Stack cols */
    .idn-stack-col { gap: 12px !important; }
    .idn-scard__img { aspect-ratio: 16/9 !important; }
    .idn-pf-widget { width: 100% !important; }

    /* UAE slot 2 col */
    .idn-slot--leader .idn-slot__row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .idn-slot-hcard__img { aspect-ratio: 16/9 !important; }

    /* PF items */
    .idn-pf-item__img { width: 76px !important; min-width: 76px !important; height: 76px !important; }
    .idn-pf-item--single .idn-pf-item__img { width: 76px !important; min-width: 76px !important; height: 68px !important; }

    /* Related/YMAL 2 col */
    .idn-lp-ymal__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .art-related__grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .art-nav { grid-template-columns: 1fr !important; }

    /* ── ARTICLE PAGE ── */
    .sp-wrap { grid-template-columns: 1fr !important; padding: 14px !important; gap: 0 !important; }
    .sp-rail, .sp-sidebar, .art-share-rail, .art-sidebar { display: none !important; }
    .art-header__title { font-size: 1.4rem !important; line-height: 1.25 !important; }
    .art-header__deck { font-size: 0.9rem !important; }
    .art-meta { flex-wrap: wrap !important; gap: 8px !important; }
    .art-meta__divider { display: none !important; }
    .art-body { font-size: 0.97rem !important; line-height: 1.78 !important; }
    .art-body p:first-of-type::first-letter { font-size: 2.5rem !important; }
    .art-author-box { flex-direction: column !important; }
    .art-share-bar { flex-direction: column !important; align-items: flex-start !important; }
    .art-share-bar__btns { flex-wrap: wrap !important; gap: 6px !important; }

    /* ── UTILITY PAGES (Gold/Prayer/Forex) ── */
    .idn-lp { grid-template-columns: 1fr !important; gap: 0 !important; padding: 16px 14px !important; }
    .idn-lp > aside { position: static !important; margin-top: 28px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }

    /* Prayer */
    .pt-hero { padding: 20px 16px !important; border-radius: 10px !important; }
    .pt-hero__title { font-size: 1.4rem !important; }
    .pt-hero__icon-wrap { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
    .pt-next-pill { padding: 12px 14px !important; }
    .pt-next-pill__val { font-size: 1.1rem !important; }
    .pt-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }
    .pt-card { padding: 12px 6px !important; border-radius: 8px !important; }
    .pt-card__icon { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }
    .pt-card__name { font-size: 0.78rem !important; }
    .pt-card__time { font-size: 1.05rem !important; }

    /* Gold */
    .gp-hero { padding: 20px 16px !important; border-radius: 10px !important; }
    .gp-hero__title { font-size: 1.4rem !important; }
    .gp-hero__num { font-size: 2.2rem !important; }
    .gp-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .gp-card { padding: 14px 10px !important; border-radius: 8px !important; }
    .gp-card__aed { font-size: 1.1rem !important; }
    .gp-table th:nth-child(3), .gp-table td:nth-child(3) { display: none !important; }

    /* Forex */
    .fx-hero { padding: 20px 16px !important; border-radius: 10px !important; }
    .fx-hero__title { font-size: 1.4rem !important; }
    .fx-quick { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .fx-qcard { padding: 12px 8px !important; border-radius: 8px !important; }
    .fx-hero__pegs { flex-direction: column !important; gap: 8px !important; }
    .fx-hero__peg { min-width: unset !important; }
    .fx-hero__peg-val { font-size: 1.3rem !important; }
    .fx-table th:nth-child(2), .fx-table td:nth-child(2) { display: none !important; }

    /* ── SIDEBAR WIDGETS (shown below on mobile) ── */
    .psb-widget { width: 100% !important; overflow: hidden !important; }
    .psb-prayer-grid { grid-template-columns: repeat(3,1fr) !important; }
    .psb-prayer-cell { padding: 8px 4px !important; }
    .psb-gold-hero__price { font-size: 1.6rem !important; }
    .psb-weather-main__temp { font-size: 2rem !important; }
    .psb-weather-main__icon { font-size: 2.5rem !important; }
    .psb-ad { display: none !important; }

    /* ── MEGA MENU disabled ── */
    .mega-menu { display: none !important; }

    /* ── IMAGES always contained ── */
    img { max-width: 100% !important; height: auto; }
}

/* ── VERY SMALL (< 380px) ── */
@media (max-width: 380px) {
    .pt-grid { grid-template-columns: 1fr 1fr !important; }
    .pt-card__time { font-size: 0.95rem !important; }
    .gp-cards { grid-template-columns: 1fr 1fr !important; }
    .idn-lp-ymal__grid { grid-template-columns: 1fr !important; }
    .art-related__grid { grid-template-columns: 1fr !important; }
    .idn-strip-6 { grid-template-columns: 1fr 1fr !important; }
    .art-header__title { font-size: 1.2rem !important; }
}

/* ── TABLET (768–1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .idn-lp { grid-template-columns: 1fr 260px !important; padding: 24px 20px !important; }
    .idn-hero-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-hero-grid > div:last-child { display: none !important; }
    .idn-uae-grid, .idn-biz-grid { grid-template-columns: 1fr 1fr !important; }
    .idn-3col, .idn-3col--tech { grid-template-columns: 1fr 1fr !important; }
    .idn-3col > div:nth-child(3) { display: none !important; }
    .idn-strip-6 { grid-template-columns: repeat(3,1fr) !important; }
    .sp-wrap { grid-template-columns: 40px 1fr 240px !important; }
    .pt-grid { grid-template-columns: repeat(3,1fr) !important; }
    .gp-cards { grid-template-columns: repeat(2,1fr) !important; }
    .fx-quick { grid-template-columns: repeat(2,1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════
   NEW PREMIUM MOBILE HEADER (imh-*)
   ══════════════════════════════════════════════════════════════ */

.idn-mobile-header { display: none; }

@media (max-width: 767px) {

    .idn-header, .idn-topbar, .nav-primary { display: none !important; }
    .idn-mobile-header { display: block !important; position: sticky; top: 0; z-index: 300; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.1); border-bottom: 2px solid var(--color-primary); }

    /* Top bar */
    .imh-topbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; background: #1a2744; font-family: var(--font-ui); }
    .imh-topbar__prayer { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 5px; }
    .imh-topbar__prayer i { color: rgba(255,200,100,.9); }
    .imh-topbar__right { display: flex; align-items: center; gap: 6px; }
    .imh-topbar__sub { display: flex; align-items: center; gap: 4px; background: var(--color-primary); color: #fff; font-size: .65rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-decoration: none; }
    .imh-topbar__search, .imh-topbar__menu { background: none; border: none; cursor: pointer; color: #555; font-size: 1rem; padding: 4px 6px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: color .15s, background .15s; }
    #idn-mob-ar-btn:hover, #idn-mob-ar-btn.is-active { background: var(--color-primary); color: #fff !important; border-color: var(--color-primary); }
    .imh-topbar__search:hover, .imh-topbar__menu:hover { color: var(--color-primary); background: #f5f5f5; }
    .imh-topbar__menu { font-size: 1.1rem; }

    /* ── MOBILE HEADER: 2-row layout ──
       Row 1: Logo — full width, centred, always clear
       Row 2: All 4 tiles — equal width, icon+label+value
    ── */
    .imh-main { display: flex; flex-direction: column; background: #fff; padding: 0; gap: 0; width: 100%; }
    .imh-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 12px 8px; gap: 3px; width: 100%; border-bottom: 1px solid #eee; order: 1; background: #fff; }
    .imh-logo a { text-decoration: none; display: flex; align-items: center; justify-content: center; }
    .imh-logo img { max-height: 40px; max-width: 160px; object-fit: contain; }
    .imh-logo__text { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 900; color: #0a0a0a; letter-spacing: -.6px; white-space: nowrap; text-align: center; line-height: 1; display: block; }
    .imh-logo__text span { color: #CC0000; }
    .imh-logo__tag { font-size: .72rem; font-weight: 700; letter-spacing: 2px; color: #888; text-align: center; white-space: nowrap; line-height: 1.3; display: block; text-transform: uppercase; }
    /* Tile row: all 4 tiles fill the full width */
    .imh-tiles { display: flex; gap: 0; order: 2; }
    .imh-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 8px 3px; gap: 3px; background: #1a2744; color: #fff; text-decoration: none; min-width: 0; overflow: hidden; border-right: 1px solid rgba(255,255,255,.08); }
    .imh-tile i { font-size: 1rem; line-height: 1; }
    .imh-tile__label { font-size: .42rem; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; opacity: .55; line-height: 1; white-space: nowrap; }
    .imh-tile__val { font-size: .65rem; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
    .imh-tile--gold i { color: #c9a84c; }
    .imh-tile--forex i { color: #5a9e6f; }
    .imh-tile--prayer i { color: #6b8cba; }
    .imh-tile--ramadan { background: #1a1432; }
    .imh-tile--ramadan i { color: #a78bfa; }

    /* Scrollable nav */
    .imh-nav { display: flex; overflow-x: auto; scrollbar-width: none; background: #fff; border-top: 1px solid #f0f0f0; padding: 0 4px; }
    .imh-nav::-webkit-scrollbar { display: none; }
    .imh-nav__item { flex-shrink: 0; padding: 8px 12px; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; color: #555; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all .15s; }
    .imh-nav__item:hover, .imh-nav__item.current { color: var(--color-primary); border-bottom-color: var(--color-primary); }

    /* Menu button — top right */
    .imh-menu-btn { display: none; }

    /* ══════════════════════════════════════════
       PREMIUM MOBILE DRAWER (imh-drawer-*)
    ══════════════════════════════════════════ */
    .imh-drawer {
        position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
        background: #fff; z-index: 600; overflow-y: auto;
        transition: right .28s cubic-bezier(.4,0,.2,1);
        box-shadow: -8px 0 32px rgba(0,0,0,.15);
        display: flex; flex-direction: column;
    }
    .imh-drawer.is-open { right: 0; }

    /* Drawer header */
    .imh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: linear-gradient(135deg,#1a2744,#243660); }
    .imh-drawer__logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 900; color: #fff; }
    .imh-drawer__logo span { color: #ff6b6b; }
    .imh-drawer__close { background: rgba(255,255,255,.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
    .imh-drawer__close:hover { background: rgba(255,255,255,.2); }

    /* Quick links */
    .imh-drawer__quick { display: flex; gap: 8px; padding: 12px 14px; background: #f8f9fa; border-bottom: 1px solid #eee; }
    .imh-drawer__ql { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; border-radius: 8px; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; text-decoration: none; transition: opacity .15s; }
    .imh-drawer__ql--outline { background: #fff; border: 1.5px solid #e0e0e0; color: #1a1a1a; }
    .imh-drawer__ql--solid { background: var(--color-primary); color: #fff; border: none; }
    .imh-drawer__ql:hover { opacity: .88; }

    /* Live data strip */
    .imh-drawer__data { display: flex; align-items: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid #f0f0f0; gap: 0; }
    .imh-drawer__data-item { flex: 1; display: flex; align-items: center; gap: 7px; text-decoration: none; }
    .imh-drawer__data-item i { font-size: .9rem; flex-shrink: 0; }
    .imh-drawer__data-label { font-family: var(--font-ui); font-size: .58rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #aaa; }
    .imh-drawer__data-val { font-family: var(--font-ui); font-size: .78rem; font-weight: 800; color: #1a1a1a; }
    .imh-drawer__data-sep { width: 1px; height: 28px; background: #eee; flex-shrink: 0; margin: 0 6px; }

    /* Nav sections */
    .imh-drawer__nav { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
    .imh-drawer__nav-title { font-family: var(--font-ui); font-size: .58rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #aaa; padding: 8px 16px 4px; }
    .imh-drawer__nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none; color: #1a1a1a; font-family: var(--font-ui); font-size: .88rem; font-weight: 600; transition: background .12s; border-bottom: 1px solid #f8f8f8; }
    .imh-drawer__nav-item:last-child { border-bottom: none; }
    .imh-drawer__nav-item:hover { background: #fafafa; color: var(--color-primary); }
    .imh-drawer__nav-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
    .imh-drawer__nav-arrow { margin-left: auto; font-size: .6rem; color: #ccc; }
    .imh-drawer__nav--tools { border-bottom: none; }

    /* Footer */
    .imh-drawer__foot { margin-top: auto; padding: 14px 16px; background: #f8f9fa; border-top: 1px solid #eee; display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: .65rem; color: #aaa; }

    /* Overlay */
    .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 500; backdrop-filter: blur(2px); }
    .mobile-menu-overlay.is-visible { display: block; }
}

@media (min-width: 768px) {
    .idn-mobile-header { display: none !important; }
    .imh-drawer, .mobile-menu-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE: Strip cards as horizontal thumbnail list
   + Promo strip auto-carousel
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Strip 6 cards → horizontal thumbnail list ── */
    .idn-strip-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .idn-strip-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .idn-strip-card:last-child { border-bottom: none !important; }
    .idn-strip-card__img {
        width: 80px !important;
        min-width: 80px !important;
        height: 60px !important;
        aspect-ratio: unset !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }
    .idn-strip-card__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .idn-strip-card h4 {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 2 !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    .idn-strip-card__meta { font-size: 0.65rem !important; }


}





/* ══════════════════════════════════════════════════════════════════
   MOBILE HEADER — SINGLE DEFINITIVE BLOCK
   Applies to all phones ≤767px. One block, no conflicts.
   5-column grid: GOLD | FOREX | LOGO | PRAYER | RAMADAN
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── MOBILE HEADER: definitive 2-row overrides ── */
    .imh-main { display: flex !important; flex-direction: column !important; background: #fff !important; padding: 0 !important; gap: 0 !important; min-height: auto !important; width: 100% !important; }
    .imh-tile--forex   { display: flex !important; }
    .imh-tile--ramadan { display: flex !important; background: #1a1432 !important; }
    .imh-logo { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 10px 12px 8px !important; gap: 3px !important; width: 100% !important; border-bottom: 1px solid #eee !important; background: #fff !important; }
    .imh-logo a { text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .imh-logo__text { font-family: var(--font-heading), Georgia, serif !important; font-size: 1.7rem !important; font-weight: 900 !important; color: #0a0a0a !important; letter-spacing: -.5px !important; white-space: nowrap !important; text-align: center !important; line-height: 1 !important; display: block !important; }
    .imh-logo__text span { color: #CC0000 !important; }
    .imh-logo img { max-height: 40px !important; max-width: 160px !important; object-fit: contain !important; }
    .imh-logo__tag { display: block !important; font-size: .72rem !important; font-weight: 700 !important; color: #888 !important; letter-spacing: 2px !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: center !important; line-height: 1.3 !important; }
    .imh-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; flex: 1 !important; padding: 8px 3px !important; gap: 3px !important; background: #1a2744 !important; color: #fff !important; text-decoration: none !important; min-width: 0 !important; overflow: hidden !important; border-right: 1px solid rgba(255,255,255,.08) !important; }
    .imh-tile i { font-size: 1rem !important; line-height: 1 !important; }
    .imh-tile__label { font-size: .42rem !important; font-weight: 900 !important; letter-spacing: .8px !important; text-transform: uppercase !important; opacity: .55 !important; line-height: 1 !important; white-space: nowrap !important; }
    .imh-tile__val { font-size: .65rem !important; font-weight: 800 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: block !important; }
    .imh-tile--gold i { color: #c9a84c !important; }
    .imh-tile--forex i { color: #5a9e6f !important; }
    .imh-tile--prayer i { color: #6b8cba !important; }
    .imh-tile--ramadan i { color: #a78bfa !important; }

    /* ── TOPBAR ── */
    .imh-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 10px !important;
        gap: 6px !important;
        background: #1a2744 !important;
        overflow: hidden !important;
    }
    .imh-topbar__prayer {
        flex: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 0.65rem !important;
        color: rgba(255,255,255,.85) !important;
    }
    .imh-topbar__right {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }
    .imh-topbar__menu {
        color: #fff !important;
        background: rgba(255,255,255,.12) !important;
        border-radius: 6px !important;
    }
    .imh-topbar__menu:hover { background: rgba(255,255,255,.22) !important; }
}

/* ── 390px phones (iPhone 14/15 etc.) ── */
@media (max-width: 390px) {
    .imh-main { gap: 2px !important; padding: 5px 3px !important; }
    .imh-tile i { font-size: 0.82rem !important; }
    .imh-tile__label { font-size: 0.42rem !important; }
    .imh-tile__val { font-size: 0.58rem !important; }
    .imh-logo__text { font-size: 1.5rem !important; white-space: nowrap !important; }
    .imh-logo__tag { font-size: 0.56rem !important; }
}

/* ── 360px phones (Galaxy A series etc.) ── */
@media (max-width: 360px) {
    .imh-main {
        grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr !important;
        gap: 2px !important;
        padding: 4px 2px !important;
        min-height: 62px !important;
    }
    .imh-tile i { font-size: 0.78rem !important; }
    .imh-tile__label { font-size: 0.4rem !important; }
    .imh-tile__val { font-size: 0.54rem !important; }
    .imh-logo__text { font-size: 1.4rem !important; white-space: nowrap !important; }
    .imh-logo__tag { font-size: 0.52rem !important; }
}

/* ── 320px phones (iPhone SE 1st gen) ── */
@media (max-width: 320px) {
    .imh-main {
        grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr !important;
        gap: 1px !important;
        padding: 4px 2px !important;
    }
    .imh-tile i { font-size: 0.72rem !important; }
    .imh-tile__label { font-size: 0.38rem !important; }
    .imh-tile__val { font-size: 0.5rem !important; }
    .imh-logo__text { font-size: 1.3rem !important; white-space: nowrap !important; }
    .imh-logo__tag { font-size: 0.48rem !important; }
}

/* ── Promo strip mobile — show only first 2 cards ── */
@media (max-width: 767px) {
    .idn-promo-strip { padding: 0 !important; overflow: hidden !important; }
    .idn-promo-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        transform: none !important;
    }
    /* Show only first 2 cards, hide cards 3 and 4 */
    .idn-promo-card:nth-child(1),
    .idn-promo-card:nth-child(2) { display: flex !important; }
    .idn-promo-card:nth-child(3),
    .idn-promo-card:nth-child(4) { display: none !important; }
    .idn-promo-card {
        padding: 10px 10px !important;
        gap: 8px !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }
    .idn-promo-card:nth-child(2) { border-right: none !important; }
    .idn-promo-card > i { font-size: 1.3rem !important; }
    .idn-promo-card strong { font-size: 0.74rem !important; }
    .idn-promo-card span { font-size: 0.62rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   TABLET LAYOUT — 768px to 1023px
   Shows simplified header: no mega-menu, hamburger opens drawer
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Layout-breaking rules removed — desktop master override handles this range.
       Only keeping safe cosmetic rules below. */
    body { padding-bottom: 0 !important; }
    .breaking-news-bar__inner { padding: 0 16px !important; }
    .sp-rail { display: none !important; }
    .sp-article { margin-left: 0 !important; }
    .art-share-bar { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM MOBILE CATEGORY PAGES
   UAE · Business · Tech · Lifestyle · World
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Category hero banner ── */
    .container > div[style*="background:var(--color-primary)"],
    .container > div[style*="background: var(--color-primary)"] {
        padding: 20px 0 !important;
    }

    /* ── Hide sidebar on mobile — content full width ── */
    .layout-content-sidebar {
        display: block !important;
        padding-bottom: 24px !important;
    }
    .layout-content-sidebar > aside {
        display: none !important;
    }

    /* ── FEATURED first post — full width hero card ── */
    .layout-content-sidebar > div > div:first-child > .post-card {
        flex-direction: column !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 -12px !important;
        width: calc(100% + 24px) !important;
    }
    .layout-content-sidebar > div > div:first-child > .post-card .post-card__thumb {
        aspect-ratio: 16/9 !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
    .layout-content-sidebar > div > div:first-child > .post-card .post-card__title {
        font-size: 1.2rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
    }
    .layout-content-sidebar > div > div:first-child > .post-card .post-card__body {
        padding: 14px 16px !important;
        border-left: 4px solid var(--color-primary) !important;
    }

    /* ── Grid — 1 column on mobile for readability ── */
    .idn-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        background: #f0f0f0 !important;
        border-radius: 0 !important;
    }

    /* ── Post cards — horizontal list style (image left, text right) ── */
    .idn-grid-2 .post-card {
        flex-direction: row !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        gap: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        min-height: 110px !important;
    }
    .idn-grid-2 .post-card:hover {
        transform: none !important;
        box-shadow: none !important;
        background: #fafafa !important;
    }
    .idn-grid-2 .post-card:active {
        background: #f5f5f5 !important;
    }

    /* Thumbnail — square left side */
    .idn-grid-2 .post-card .post-card__thumb {
        width: 110px !important;
        min-width: 110px !important;
        height: 110px !important;
        aspect-ratio: 1/1 !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }
    .idn-grid-2 .post-card .post-card__thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Body — right side */
    .idn-grid-2 .post-card .post-card__body {
        padding: 10px 12px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-width: 0 !important;
    }

    /* Category tag — red pill */
    .idn-grid-2 .post-card .kt-tag {
        font-size: .58rem !important;
        font-weight: 800 !important;
        letter-spacing: .5px !important;
        padding: 2px 7px !important;
        border-radius: 3px !important;
        margin-bottom: 5px !important;
        display: inline-block !important;
    }

    /* Title — bold, 2 lines max */
    .idn-grid-2 .post-card .post-card__title {
        font-size: .9rem !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #111 !important;
    }
    .idn-grid-2 .post-card .post-card__title a {
        color: #111 !important;
    }

    /* Meta — time + read time */
    .idn-grid-2 .post-card .post-card__meta {
        font-size: .65rem !important;
        color: #999 !important;
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        gap: 4px !important;
    }

    /* Breaking badge */
    .idn-grid-2 .post-card .post-card__badge--breaking {
        font-size: .5rem !important;
        padding: 2px 5px !important;
    }

    /* ── Category hero — premium mobile ── */
    .idn-cat-hero-title {
        font-size: 1.6rem !important;
    }

    /* ── Subcategory pills — horizontal scroll ── */
    .idn-cat-subs {
        display: flex !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 0 0 4px !important;
        flex-wrap: nowrap !important;
    }
    .idn-cat-subs::-webkit-scrollbar { display: none !important; }
    .idn-cat-subs a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* ── Load more spinner ── */
    #categoryScrollSentinel {
        margin-top: 16px !important;
    }

    /* ── Promo strip: 2 cards on mobile ── */
    .idn-promo-inner {
        grid-template-columns: 1fr 1fr !important;
    }
    .idn-promo-card:nth-child(3),
    .idn-promo-card:nth-child(4) { display: none !important; }
}

/* Very small phones */
@media (max-width: 360px) {
    .idn-grid-2 .post-card .post-card__thumb {
        width: 90px !important;
        min-width: 90px !important;
        height: 90px !important;
    }
    .idn-grid-2 .post-card .post-card__title {
        font-size: .82rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM CATEGORY PAGES — idn-cat-* components
   UAE · Business · Technology · Lifestyle · World
   ══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   CATEGORY PAGE v2 — Professional per-category colours
   ════════════════════════════════════════════════════════ */

/* ── HERO ── */
.idn-cat-hero {
    background: var(--cat-accent, var(--color-primary));
    padding: 32px 0 0;
    position: relative;
    overflow: hidden;
}
.idn-cat-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 100%);
    pointer-events: none;
}
.idn-cat-hero__wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.idn-cat-hero__info { flex: 1; min-width: 0; }
.idn-cat-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    margin-bottom: 12px;
}
.idn-cat-hero__eyebrow i { font-size: .65rem; }
.idn-cat-hero__title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.0;
    letter-spacing: -.5px;
}
.idn-cat-hero__desc {
    color: rgba(255,255,255,.78);
    font-size: .88rem;
    max-width: 520px;
    margin: 0 0 14px;
    line-height: 1.55;
}
.idn-cat-hero__stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.idn-cat-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.65);
}
.idn-cat-hero__stat i { font-size: .6rem; }
.idn-cat-hero__stat-div { color: rgba(255,255,255,.35); font-size: .7rem; }
.idn-cat-hero__deco {
    font-size: 5rem;
    color: rgba(255,255,255,.08);
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
}
/* Pills row */
.idn-cat-hero__pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
    padding: 14px 0 16px;
    border-top: 1px solid rgba(255,255,255,.15);
    position: relative;
    z-index: 1;
}
.idn-cat-hero__pills-label {
    font-family: var(--font-ui);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    margin-right: 4px;
}
.idn-cat-hero__pill {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 5px 14px;
    font-family: var(--font-ui);
    font-size: .73rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.idn-cat-hero__pill:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

/* ── CONTENT WRAP ── */
.idn-cat-wrap {
    background: #f4f4f4;
    padding: 28px 0 48px;
}

/* ── FEATURED ARTICLE ── */
.idn-cat-feat {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
    position: relative;
}
.idn-cat-feat__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    background: var(--cat-accent, var(--color-primary));
    color: #fff;
    font-family: var(--font-ui);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.idn-cat-feat__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.idn-cat-feat__img {
    display: block;
    position: relative;
    overflow: hidden;
    background: #1a2744;
    min-height: 260px;
}
.idn-cat-feat__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.idn-cat-feat:hover .idn-cat-feat__img img { transform: scale(1.04); }
.idn-cat-feat__noimg {
    width: 100%; height: 100%; min-height: 260px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.15); font-size: 3rem;
}
.idn-cat-feat__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, rgba(255,255,255,.04));
    pointer-events: none;
}
.idn-cat-feat__body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 4px solid var(--cat-accent, var(--color-primary));
}
.idn-cat-feat__tag {
    font-size: .58rem !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
    text-decoration: none !important;
    align-self: flex-start;
}
.idn-cat-feat__title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #0a0a0a;
}
.idn-cat-feat__title a { color: inherit; text-decoration: none; }
.idn-cat-feat__title a:hover { color: var(--cat-accent, var(--color-primary)); }
.idn-cat-feat__excerpt {
    font-size: .875rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.idn-cat-feat__meta {
    font-family: var(--font-ui);
    font-size: .68rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.idn-cat-feat__meta i { color: var(--cat-accent, var(--color-primary)); }
.idn-cat-feat__sep { color: #ddd; }
.idn-cat-feat__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-weight: 700;
}
.idn-cat-feat__author img {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.idn-cat-feat__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cat-accent, var(--color-primary));
    color: #fff;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
    align-self: flex-start;
}
.idn-cat-feat__btn:hover { opacity: .88; transform: translateX(2px); color: #fff; }
.idn-cat-feat__btn i { font-size: .6rem; transition: transform .15s; }
.idn-cat-feat__btn:hover i { transform: translateX(3px); }

/* ── SECTION BAR ── */
.idn-cat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cat-accent, var(--color-primary));
}
.idn-cat-bar__left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.idn-cat-bar__accent {
    width: 4px;
    height: 18px;
    background: var(--cat-accent, var(--color-primary));
    border-radius: 2px;
    display: block;
}
.idn-cat-bar__label {
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #333;
}
.idn-cat-bar__count {
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 700;
    color: #aaa;
}

/* ── ARTICLE GRID ── */
.idn-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    background: #ddd;
    border-radius: 12px;
    overflow: hidden;
}

/* ── ARTICLE CARD v2 ── */
.idn-cat-card2 {
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: background .12s;
    position: relative;
}
.idn-cat-card2:hover { background: #fafafa; }
.idn-cat-card2__img {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #1a2744;
    flex-shrink: 0;
}
.idn-cat-card2__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    display: block;
}
.idn-cat-card2:hover .idn-cat-card2__img img { transform: scale(1.05); }
.idn-cat-card2__noimg {
    width: 100%; height: 100%; aspect-ratio: 16/9;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.12); font-size: 2rem;
}
.idn-cat-card2__breaking {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-ui);
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}
.idn-cat-card2__body {
    padding: 13px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.idn-cat-card2__tag {
    font-size: .56rem !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    text-decoration: none !important;
    align-self: flex-start;
}
.idn-cat-card2__title {
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.idn-cat-card2__title a { color: inherit; text-decoration: none; }
.idn-cat-card2__title a:hover { color: var(--cat-accent, var(--color-primary)); }
.idn-cat-card2__meta {
    font-family: var(--font-ui);
    font-size: .62rem;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

/* ── EMPTY STATE ── */
.idn-cat-empty {
    text-align: center;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.idn-cat-empty i {
    font-size: 2.5rem;
    color: #ccc;
}
.idn-cat-empty p {
    color: var(--color-muted);
    font-size: 1rem;
}
.idn-cat-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    margin-top: 8px;
}

/* ════ DESKTOP ════ */
@media (min-width: 900px) {
    .idn-cat-hero__title { font-size: 3rem; }
    .idn-cat-feat__title { font-size: 1.75rem; }
    .idn-cat-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ════ TABLET ════ */
@media (min-width: 600px) and (max-width: 899px) {
    .idn-cat-hero__title { font-size: 2.2rem; }
    .idn-cat-feat__inner { grid-template-columns: 1fr 1fr; }
    .idn-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* ════ MOBILE ════ */
@media (max-width: 599px) {
    .idn-cat-hero { padding: 22px 0 0; }
    .idn-cat-hero__title { font-size: 1.8rem; letter-spacing: -.3px; }
    .idn-cat-hero__deco { font-size: 3rem; }
    .idn-cat-hero__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 14px;
    }
    .idn-cat-hero__pills::-webkit-scrollbar { display: none; }
    .idn-cat-hero__pill { flex-shrink: 0; }
    .idn-cat-wrap { padding: 18px 0 36px; }
    /* Featured: stack on mobile */
    .idn-cat-feat { border-radius: 0; margin: 0 -12px 20px; box-shadow: none; }
    .idn-cat-feat__inner { grid-template-columns: 1fr; }
    .idn-cat-feat__img { min-height: 200px; aspect-ratio: 16/8; }
    .idn-cat-feat__body { padding: 14px 16px 18px; }
    .idn-cat-feat__title { font-size: 1.2rem; }
    .idn-cat-feat__excerpt { -webkit-line-clamp: 2; font-size: .82rem; }
    .idn-cat-feat__badge { top: 10px; left: 10px; }
    /* Grid: single column on small phones */
    .idn-cat-grid { grid-template-columns: 1fr; border-radius: 0; margin: 0 -12px; background: #e0e0e0; }
    .idn-cat-card2__title { font-size: .85rem; }
}
@media (max-width: 360px) {
    .idn-cat-hero__title { font-size: 1.55rem; }
    .idn-cat-feat__title { font-size: 1.1rem; }
    .idn-cat-card2__title { font-size: .8rem; }
}

/* Backwards-compat: keep old .idn-cat-card & .idn-cat-list classes intact
   so any page still using them won't break */
.idn-cat-list { display:flex; flex-direction:column; gap:3px; background:#e8e8e8; border-radius:12px; overflow:hidden; }
.idn-cat-card { display:flex; flex-direction:row; background:#fff; min-height:120px; transition:background .12s; }
.idn-cat-card:hover { background:#fafafa; }
.idn-cat-card__thumb { position:relative; width:130px; min-width:130px; overflow:hidden; background:#1a2744; flex-shrink:0; }
.idn-cat-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.idn-cat-card:hover .idn-cat-card__thumb img { transform:scale(1.04); }
.idn-cat-card__nothumb { width:100%; height:100%; min-height:120px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.2); font-size:1.5rem; }
.idn-cat-card__breaking { position:absolute; top:6px; left:6px; background:var(--color-primary); color:#fff; font-family:var(--font-ui); font-size:.5rem; font-weight:900; padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.idn-cat-card__body { flex:1; padding:12px 14px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.idn-cat-card__tag { font-size:.58rem !important; font-weight:800 !important; padding:2px 7px !important; border-radius:3px !important; margin-bottom:6px !important; display:inline-block !important; text-decoration:none !important; }
.idn-cat-card__title { font-family:var(--font-heading); font-size:.95rem; font-weight:800; line-height:1.3; color:#111; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.idn-cat-card__title a { color:inherit; text-decoration:none; }
.idn-cat-card__title a:hover { color:var(--color-primary); }
.idn-cat-card__meta { font-family:var(--font-ui); font-size:.65rem; color:#bbb; display:flex; align-items:center; gap:4px; }
.idn-cat-section-hdr { display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.idn-cat-section-hdr__line { flex:1; height:1.5px; background:#e0e0e0; }
.idn-cat-section-hdr__label { font-family:var(--font-ui); font-size:.65rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:#aaa; white-space:nowrap; }

/* ============================================================
   NEWSLETTER / SUBSCRIBE FORMS — UNIFIED DESIGN SYSTEM
   Clean, compact, professional. Works on all screen sizes.
   ============================================================ */

/* ── SHARED INPUT RESET ── */
.newsletter-form input,
.idn-nl-form input,
.psb-nl-input,
.sp-sw__nl-input,
#epaperNLForm input {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    font-family: var(--font-ui);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

/* ══════════════════════════════════════════════════════
   1. FOOTER NEWSLETTER
   Dark background, stacked layout, compact
══════════════════════════════════════════════════════ */
.footer__newsletter {
    margin-top: 14px;
    width: 100%;
}
.footer__newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.footer__newsletter .newsletter-form input {
    padding: 10px 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
}
.footer__newsletter .newsletter-form input::placeholder { color: rgba(255,255,255,0.3); }
.footer__newsletter .newsletter-form input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(204,0,0,0.15);
}
.footer__newsletter .newsletter-form button {
    padding: 10px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}
.footer__newsletter .newsletter-form button:hover { background: var(--color-primary-dark); }

/* ══════════════════════════════════════════════════════
   2. HOME / FRONT-PAGE SIDEBAR WIDGET
   Light card, stacked, fits in narrow sidebar
══════════════════════════════════════════════════════ */
.idn-nl-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.idn-nl-form input {
    padding: 9px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-dark);
    background: #fff;
}
.idn-nl-form input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
}
.idn-nl-form button {
    padding: 10px 14px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}
.idn-nl-form button:hover { background: var(--color-primary-dark); }

/* ══════════════════════════════════════════════════════
   3. SIDEBAR WIDGET (sidebar.php — category/tag pages)
   Compact card style, no overflow
══════════════════════════════════════════════════════ */
.psb-nl-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.psb-nl-input {
    padding: 9px 12px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    color: var(--color-dark) !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.psb-nl-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08) !important;
}

/* ══════════════════════════════════════════════════════
   4. SINGLE ARTICLE SIDEBAR NEWSLETTER
   Inside sp-sw widget, needs to stay narrow
══════════════════════════════════════════════════════ */
.sp-sw--newsletter form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.sp-sw__nl-input {
    padding: 9px 12px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    color: var(--color-dark) !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sp-sw__nl-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08) !important;
}

/* ══════════════════════════════════════════════════════
   5. EPAPER PAGE — pill-style inline form
   Centered on red background, side by side on desktop
══════════════════════════════════════════════════════ */
#epaperNLForm {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px;
    box-sizing: border-box;
}
#epaperNLForm input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    border: none;
    border-radius: 30px;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.95);
    color: #111;
}
#epaperNLForm input::placeholder { color: #999; }
#epaperNLForm input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
#epaperNLForm button {
    flex-shrink: 0;
    padding: 11px 20px;
    border: none;
    border-radius: 30px;
    background: #fff;
    color: var(--color-primary);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
#epaperNLForm button:hover { background: #111; color: #fff; }

/* ══════════════════════════════════════════════════════
   6. PAGE-NEWSLETTER — MailerLite embed overrides
   Force ML embed to match site branding
══════════════════════════════════════════════════════ */
.ml-embedded { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.ml-embedded form { width: 100% !important; }
.ml-embedded .ml-form-embedWrapper { border-radius: 10px !important; overflow: hidden !important; }
.ml-embedded input[type="email"],
.ml-embedded input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 0.88rem !important;
    font-family: var(--font-ui) !important;
    transition: border-color 0.18s !important;
    margin-bottom: 10px !important;
}
.ml-embedded input:focus {
    border-color: #CC0000 !important;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.1) !important;
    outline: none !important;
}
.ml-embedded button[type="submit"],
.ml-embedded .ml-form-embedSubmit button {
    width: 100% !important;
    background: #CC0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    font-family: var(--font-ui) !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
    transition: background 0.15s !important;
}
.ml-embedded button[type="submit"]:hover { background: #aa0000 !important; }

/* ══════════════════════════════════════════════════════
   PAGE-NEWSLETTER LAYOUT — tighter, more polished
══════════════════════════════════════════════════════ */
.idn-nl-page {
    min-height: 80vh;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    box-sizing: border-box;
}
.idn-nl-wrap { max-width: 520px; width: 100%; margin: 0 auto; }
.idn-nl-hero { text-align: center; margin-bottom: 28px; }
.idn-nl-icon {
    width: 56px; height: 56px;
    background: #CC0000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.idn-nl-icon i { color: #fff; font-size: 1.4rem; }
.idn-nl-hero h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}
.idn-nl-hero h1 span { color: #CC0000; }
.idn-nl-hero p { color: rgba(255,255,255,.55); font-size: 0.9rem; line-height: 1.65; margin: 0; }
.idn-nl-perks {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.idn-nl-perk {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}
.idn-nl-perk__icon { font-size: 1.2rem; margin-bottom: 5px; }
.idn-nl-perk__title { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.idn-nl-perk__desc { font-size: 0.6rem; color: rgba(255,255,255,.35); line-height: 1.4; }
.idn-nl-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    box-sizing: border-box;
}
.idn-nl-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.idn-nl-card__dot { width: 7px; height: 7px; background: #CC0000; border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; }
.idn-nl-card__live { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #CC0000; }
.idn-nl-card h2 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 900; color: #111; margin: 0 0 4px; }
.idn-nl-card__sub { font-size: 0.8rem; color: #999; margin: 0 0 20px; line-height: 1.5; }
.idn-nl-privacy { text-align: center; margin-top: 12px; font-size: 0.68rem; color: #bbb; }
.idn-nl-privacy i { color: #CC0000; margin-right: 3px; }
.idn-nl-footer { text-align: center; margin-top: 20px; color: rgba(255,255,255,.25); font-size: 0.7rem; }

/* ══════════════════════════════════════════════════════
   TABLET  768 – 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    #epaperNLForm { max-width: 360px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE  ≤ 767px
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Page newsletter */
    .idn-nl-page { padding: 28px 14px; min-height: auto; }
    .idn-nl-hero h1 { font-size: 1.6rem; }
    .idn-nl-perks { grid-template-columns: 1fr 1fr; gap: 7px; }
    .idn-nl-perks .idn-nl-perk:last-child { display: none; }
    .idn-nl-card { padding: 22px 18px; }

    /* Epaper stacks */
    #epaperNLForm { flex-direction: column; max-width: 100%; }
    #epaperNLForm input,
    #epaperNLForm button { width: 100%; text-align: center; }

    /* MailerLite */
    .ml-embedded input[type="email"] { font-size: 0.9rem !important; padding: 12px 14px !important; }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 390px
══════════════════════════════════════════════════════ */
@media (max-width: 390px) {
    .idn-nl-hero h1 { font-size: 1.4rem; }
    .idn-nl-perks { grid-template-columns: 1fr; }
    .idn-nl-card { padding: 18px 14px; }
    .idn-nl-card h2 { font-size: 1.1rem; }
    #epaperNLForm input,
    #epaperNLForm button { font-size: 0.85rem; padding: 10px 14px; }
}

/* ============================================================
   MORE FOR YOU — Bottom of article grid
   ============================================================ */
.sp-mfy {
    margin: 40px 0 0;
    border-top: 3px solid var(--color-primary);
    padding-top: 24px;
}
.sp-mfy__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.sp-mfy__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--color-black);
    display: flex;
    align-items: center;
}
.sp-mfy__more {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.15s;
}
.sp-mfy__more:hover { opacity: 0.75; }
.sp-mfy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sp-mfy-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.18s, transform 0.18s;
    background: #fff;
}
.sp-mfy-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.sp-mfy-card__img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg);
    flex-shrink: 0;
}
.sp-mfy-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.sp-mfy-card:hover .sp-mfy-card__img img { transform: scale(1.04); }
.sp-mfy-card__img .sp-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.62rem;
    padding: 2px 7px;
}
.sp-mfy-card__body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-mfy-card__body h4 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.sp-mfy-card:hover .sp-mfy-card__body h4 { color: var(--color-primary); }
.sp-mfy-card__meta {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: auto;
}

/* Mobile: More For You */
@media (max-width: 767px) {
    .sp-mfy__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .sp-mfy-card__body h4 { font-size: 0.82rem; -webkit-line-clamp: 2; }
}
@media (max-width: 420px) {
    .sp-mfy__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO IMAGE MOBILE FIX — clean image, text below, no dark overlay
   ============================================================ */
@media (max-width: 767px) {

    /* Hero container — stack vertically, no overflow clip needed */
    .idn-hero-main {
        border-radius: var(--radius-md) !important;
        overflow: visible !important;
    }

    /* Image wrapper — clean, proper height, no position:relative clipping */
    .idn-hero-main__img {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: var(--radius-md) !important;
        min-height: unset !important;
        aspect-ratio: 16/9 !important;
    }

    /* Image fills wrapper cleanly — no fixed px height */
    .idn-hero-main__img img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16/9 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Body — fully below image, no gradient overlay, clean white background */
    .idn-hero-main__body {
        position: static !important;
        background: none !important;
        background-image: none !important;
        padding: 12px 0 8px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Text colour fixes for below-image position */
    .idn-hero-main__title a {
        color: var(--color-dark) !important;
        text-shadow: none !important;
    }
    .idn-hero-main__exc {
        color: var(--color-mid) !important;
        display: block !important;
        font-size: 0.82rem !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .idn-hero-main__body .idn-meta {
        color: var(--color-muted) !important;
    }
    .idn-hero-main__body .idn-cat-tag {
        margin-bottom: 6px !important;
    }

    /* Live badge stays on image */
    .idn-live-badge {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 2 !important;
    }
}

/* Small phones */
@media (max-width: 390px) {
    .idn-hero-main__title { font-size: 1.15rem !important; }
}

/* ============================================================
   MAILERLITE SIDEBAR WIDGET — Compact & Clean
   Overrides ML's default red branded card to match site design
   ============================================================ */

/* Inside any sidebar widget */
.idn-sb-widget .ml-embedded,
.idn-widget-body .ml-embedded,
.psb-widget .ml-embedded {
    margin: 0 !important;
}

/* Hide ML's outer wrapper branding */
.idn-sb-widget .ml-form-embedWrapper,
.idn-widget-body .ml-form-embedWrapper,
.psb-widget .ml-form-embedWrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Hide ML's header/logo section inside widget */
.idn-sb-widget .ml-form-embedHeader,
.idn-widget-body .ml-form-embedHeader,
.psb-widget .ml-form-embedHeader,
.idn-sb-widget .ml-form-embedBody .ml-form-embedContent,
.idn-widget-body .ml-form-embedBody .ml-form-embedContent {
    display: none !important;
}

/* Clean compact email input */
.idn-sb-widget .ml-embedded input[type="email"],
.idn-widget-body .ml-embedded input[type="email"],
.psb-widget .ml-embedded input[type="email"] {
    width: 100% !important;
    padding: 9px 12px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-family: var(--font-ui) !important;
    font-size: 0.84rem !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: var(--color-dark) !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}
.idn-sb-widget .ml-embedded input[type="email"]:focus,
.idn-widget-body .ml-embedded input[type="email"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(204,0,0,0.08) !important;
}

/* Compact subscribe button */
.idn-sb-widget .ml-embedded button[type="submit"],
.idn-sb-widget .ml-embedded .ml-form-embedSubmit button,
.idn-widget-body .ml-embedded button[type="submit"],
.idn-widget-body .ml-embedded .ml-form-embedSubmit button,
.psb-widget .ml-embedded button[type="submit"] {
    width: 100% !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-family: var(--font-ui) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    box-sizing: border-box !important;
}
.idn-sb-widget .ml-embedded button[type="submit"]:hover,
.idn-widget-body .ml-embedded button[type="submit"]:hover {
    background: var(--color-primary-dark) !important;
}

/* Remove any ML padding/margin that bloats height */
.idn-sb-widget .ml-form-embedBody,
.idn-widget-body .ml-form-embedBody {
    padding: 0 !important;
    background: transparent !important;
}
.idn-sb-widget .ml-form-fieldRow,
.idn-widget-body .ml-form-fieldRow {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* ── HERO GRID ALIGNMENT — sidebar never taller than content ── */
.idn-hero-grid {
    align-items: start !important;
}
.idn-hero-right {
    position: sticky;
    top: 80px; /* below sticky header */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
.idn-hero-right::-webkit-scrollbar { display: none; }


/* ============================================================
   UAE SECTION — Perfect 3-column alignment, no gaps
   ============================================================ */

/* Grid: stretch all columns to same height */
.idn-uae-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 220px;
    gap: var(--space-lg);
    align-items: stretch !important;
}

/* Left column fills full height */
.idn-uae-left {
    display: flex;
    flex-direction: column;
}

/* Push the "More UAE" slot cards to the bottom so left fills height */
.idn-uae-left .idn-slot--leader {
    margin-top: auto !important;
    padding-top: 12px;
}

/* Middle hero image — always fills its column height */
.idn-uae-mid {
    aspect-ratio: unset !important;
    height: 100% !important;
    min-height: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #0d1b2e;
}
.idn-uae-mid a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
}
.idn-uae-mid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.idn-uae-mid a:hover img { transform: scale(1.03); }

/* Placeholder fills the space cleanly when no featured image */
.idn-uae-mid .idn-ph-hero {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0d1b2e, #1a3050) !important;
}

/* Right column — clean list, no oversized promo card */
.idn-uae-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Replace the oversized gold promo card with a subtle header */
.idn-uae-right > .idn-promo-sm {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
}
.idn-uae-right > .idn-promo-sm strong {
    font-size: 0.75rem !important;
}
.idn-uae-right > .idn-promo-sm span {
    font-size: 0.65rem !important;
}

/* Article list fills remaining space */
.idn-uae-right .idn-tlist {
    flex: 1;
}
.idn-uae-right .idn-tlist__item {
    padding: 8px 0;
}

/* Excerpt text — limit lines to prevent SEO text showing */
.idn-text-lead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.82rem !important;
    color: var(--color-mid) !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

/* ── SECTION headings consistent across all sections ── */
.idn-sec-title {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 3px solid currentColor;
    display: inline-block;
}
.idn-sec-title--uae         { color: var(--cat-uae); }
.idn-sec-title--business    { color: var(--cat-business); }
.idn-sec-title--world       { color: var(--cat-world); }
.idn-sec-title--technology  { color: var(--cat-tech); }
.idn-sec-title--sports      { color: var(--cat-sports); }
.idn-sec-title--lifestyle   { color: var(--cat-lifestyle); }

.idn-sec-more {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.idn-sec-more:hover { text-decoration: underline; }

/* Consistent section spacing */
.idn-cs {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* ── SLOT HCARD images — consistent height, no collapse ── */
.idn-slot-hcard__img {
    aspect-ratio: 16/9 !important;
    min-height: 80px;
    background: #e0e0e0;
}

/* ── WORLD/BUSINESS sections: align-items start so columns don't create empty space ── */
.idn-world-grid,
.idn-biz-grid {
    align-items: start;
}

/* idn-stack-col: scards should NOT flex-grow — they should be their natural height */
.idn-stack-col .idn-scard {
    flex: 0 0 auto !important;
}
.idn-stack-col .idn-scard .idn-scard__body {
    flex: 0 0 auto !important;
}

/* ============================================================
   HOMEPAGE SIDEBAR — Never taller than left content
   ============================================================ */
.idn-hero-right {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Grid aligns to top — left content drives the height */
.idn-hero-grid {
    align-items: start !important;
}

/* ============================================================
   SECTION ALIGNMENT — Targeted fixes only, no layout overrides
   ============================================================ */

/* UAE: left column fills height, "More UAE" slot pushed to bottom */
.idn-uae-left {
    display: flex;
    flex-direction: column;
}
.idn-uae-left .idn-slot--leader {
    margin-top: auto;
    padding-top: 12px;
}

/* UAE: middle image always fills its column */
.idn-uae-mid {
    aspect-ratio: unset !important;
    height: 100% !important;
    min-height: 260px;
}
.idn-uae-mid a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
}
.idn-uae-mid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.idn-uae-mid .idn-ph-hero {
    min-height: 260px !important;
    width: 100% !important;
    height: 100% !important;
}

/* UAE grid: all columns stretch to same height */
.idn-uae-grid {
    align-items: stretch !important;
}

/* World/Tech/Lifestyle: keep align-items: start — columns self-size */
.idn-3col,
.idn-3col--tech,
.idn-3col--life {
    align-items: start;
}

/* Business: keep align-items: start */
.idn-biz-grid {
    align-items: start;
}

/* Overlay cards: consistent aspect ratio so they don't vary in height */
.idn-3col > .idn-big-col .idn-overlay-card,
.idn-3col--tech > .idn-big-col .idn-overlay-card {
    aspect-ratio: 4/3;
}
.idn-3col--life > .idn-big-col .idn-overlay-card--tall {
    aspect-ratio: 3/4;
}
.idn-biz-grid > .idn-big-col .idn-overlay-card {
    aspect-ratio: 16/10;
}

/* Excerpt in UAE left col: cap at 2 lines, no SEO text overflow */
.idn-text-lead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ============================================================
   TECH SECTION — Stop middle column empty box
   The middle stack-col should not stretch to fill grid height
   ============================================================ */
.idn-3col--tech {
    align-items: start !important;
}

/* All 3col variants — columns never stretch beyond their content */
.idn-3col,
.idn-3col--tech,
.idn-3col--life {
    align-items: start !important;
}


/* ================================================================
   MINIMAL SPACING FIX - IDN v4.5.1
   Only fixes empty spaces in category sections without changing design
   ================================================================ */

/* Hide empty slot containers to prevent spacing issues */
.idn-slot:empty {
    display: none !important;
}

/* Hide empty grid rows */
.idn-slot__row:empty {
    display: none !important;
}

/* Prevent empty content from creating visual gaps */
.idn-slot-hcard:empty,
.idn-scard:empty {
    display: none !important;
}

/* Better fallback for missing images */
.idn-ph-sm,
.idn-ph-feat {
    min-height: 120px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.8rem;
}

.idn-ph-sm::before {
    content: "No Image";
}

.idn-ph-feat::before {
    content: "No Image Available";
}


/* ════════════════════════════════════════════════════════════════
   TAG PAGE HERO — idn-tag-hero
   ════════════════════════════════════════════════════════════════ */
.idn-tag-hero {
    background: var(--tag-accent, #1a2744);
    padding: 28px 0 0;
    position: relative;
    overflow: hidden;
}
.idn-tag-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.04) 100%);
    pointer-events: none;
}
.idn-tag-hero__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}
.idn-tag-hero__info { flex: 1; min-width: 0; }
.idn-tag-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    margin-bottom: 10px;
}
.idn-tag-hero__title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.05;
    letter-spacing: -.3px;
}
.idn-tag-hero__desc {
    color: rgba(255,255,255,.72);
    font-size: .87rem;
    max-width: 500px;
    margin: 0 0 12px;
    line-height: 1.55;
}
.idn-tag-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
}
.idn-tag-hero__stat i { font-size: .6rem; }
.idn-tag-hero__deco {
    font-size: 4.5rem;
    color: rgba(255,255,255,.09);
    flex-shrink: 0;
}
.idn-tag-wrap {
    background: #f4f4f4;
    padding: 24px 0 44px;
}

/* ════════════════════════════════════════════════════════════════
   AUTHOR PAGE HERO — idn-author-hero
   ════════════════════════════════════════════════════════════════ */
.idn-author-hero {
    background: #1a2744;
    padding: 32px 0 28px;
    position: relative;
    overflow: hidden;
}
.idn-author-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(204,0,0,.15) 0%, transparent 60%);
    pointer-events: none;
}
.idn-author-hero__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.idn-author-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.idn-author-hero__avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid rgba(255,255,255,.2);
}
.idn-author-hero__avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    opacity: .6;
}
.idn-author-hero__info { flex: 1; min-width: 0; }
.idn-author-hero__role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.idn-author-hero__name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.1;
}
.idn-author-hero__bio {
    color: rgba(255,255,255,.65);
    font-size: .87rem;
    max-width: 560px;
    margin: 0 0 12px;
    line-height: 1.55;
}
.idn-author-hero__stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.idn-author-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
}
.idn-author-hero__stat i { font-size: .6rem; }
.idn-author-hero__stat-div { color: rgba(255,255,255,.25); }
.idn-author-hero__web {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.idn-author-hero__web:hover { text-decoration: underline; }
.idn-author-wrap {
    background: #f4f4f4;
    padding: 24px 0 44px;
}

/* ════════════════════════════════════════════════════════════════
   SEARCH PAGE — idn-search-hero
   ════════════════════════════════════════════════════════════════ */
.idn-search-hero {
    background: #1a2744;
    padding: 32px 0 28px;
    position: relative;
    overflow: hidden;
}
.idn-search-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,102,204,.2) 0%, transparent 60%);
    pointer-events: none;
}
.idn-search-hero > .container { position: relative; z-index: 1; }
.idn-search-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
    margin-bottom: 12px;
}
.idn-search-hero__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.1;
}
.idn-search-hero__query {
    color: var(--color-primary);
    font-style: italic;
}
.idn-search-hero__count {
    font-family: var(--font-ui);
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin: 0 0 18px;
}
.idn-search-hero__form {
    display: flex;
    align-items: center;
    max-width: 540px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.idn-search-hero__form:focus-within {
    border-color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.15);
}
.idn-search-hero__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: .9rem;
    color: #fff;
    min-width: 0;
}
.idn-search-hero__input::placeholder { color: rgba(255,255,255,.4); }
.idn-search-hero__btn {
    background: var(--color-primary);
    border: none;
    color: #fff;
    padding: 11px 16px;
    cursor: pointer;
    font-size: .9rem;
    transition: opacity .15s;
    flex-shrink: 0;
}
.idn-search-hero__btn:hover { opacity: .85; }
.idn-search-empty {
    text-align: center;
    padding: 48px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.idn-search-empty i {
    font-size: 2.8rem;
    color: #ccc;
}
.idn-search-empty h2 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #333;
    margin: 0;
}
.idn-search-empty p {
    color: #888;
    font-size: .9rem;
    max-width: 360px;
}
.idn-search-wrap {
    background: #f4f4f4;
    padding: 24px 0 44px;
}

/* ── PAGINATION shared ── */
.idn-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.idn-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    transition: background .12s, color .12s;
}
.idn-pagination .page-numbers:hover,
.idn-pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── MOBILE: tag / author / search heroes ── */
@media (max-width: 599px) {
    .idn-tag-hero__title  { font-size: 1.7rem; }
    .idn-tag-hero__deco   { font-size: 3rem; }
    .idn-author-hero__avatar { width: 68px; height: 68px; }
    .idn-author-hero__name   { font-size: 1.5rem; }
    .idn-search-hero__title  { font-size: 1.5rem; }
    .idn-search-hero__form   { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   404 PAGE — idn-404-*
   ════════════════════════════════════════════════════════════════ */
.idn-404-wrap {
    background: #f4f4f4;
    padding: 48px 0 56px;
    min-height: 60vh;
}
.idn-404-hero {
    text-align: center;
    padding: 0 0 40px;
    max-width: 600px;
    margin: 0 auto;
}
.idn-404-hero__num {
    font-family: var(--font-heading);
    font-size: 9rem;
    font-weight: 900;
    line-height: 1;
    color: #e0e0e0;
    letter-spacing: -4px;
    margin-bottom: 8px;
    user-select: none;
}
.idn-404-hero__zero {
    color: var(--color-primary);
}
.idn-404-hero__title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: #111;
    margin: 0 0 12px;
}
.idn-404-hero__desc {
    color: #888;
    font-size: .9rem;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 24px;
}
/* Search bar */
.idn-404-search {
    display: flex;
    align-items: center;
    max-width: 420px;
    margin: 0 auto 24px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.idn-404-search:focus-within {
    border-color: var(--color-primary);
}
.idn-404-search__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 14px;
    font-family: var(--font-ui);
    font-size: .88rem;
    color: #111;
    background: transparent;
    min-width: 0;
}
.idn-404-search__input::placeholder { color: #bbb; }
.idn-404-search__btn {
    background: var(--color-primary);
    border: none;
    color: #fff;
    padding: 11px 16px;
    cursor: pointer;
    font-size: .9rem;
    flex-shrink: 0;
    transition: opacity .15s;
}
.idn-404-search__btn:hover { opacity: .85; }
/* Quick category nav */
.idn-404-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.idn-404-nav__home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a2744;
    color: #fff;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 800;
    padding: 7px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity .15s;
}
.idn-404-nav__home:hover { opacity: .85; color: #fff; }
.idn-404-nav__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: var(--cat-c, #333);
    border: 1.5px solid currentColor;
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 800;
    padding: 6px 13px;
    border-radius: 20px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.idn-404-nav__cat:hover {
    background: var(--cat-c, #333);
    color: #fff;
}
.idn-404-nav__cat i { font-size: .62rem; }
.idn-404-latest {
    max-width: 100%;
    margin-top: 8px;
}

/* Mobile 404 */
@media (max-width: 599px) {
    .idn-404-hero__num  { font-size: 6rem; }
    .idn-404-hero__title { font-size: 1.4rem; }
    .idn-404-search { max-width: 100%; }
    .idn-404-nav { gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════
   LATEST NEWS PAGE — idn-latest-hero
   ════════════════════════════════════════════════════════════════ */
.idn-latest-hero {
    background: linear-gradient(135deg, #1a2744 0%, #0f1626 100%);
    padding: 30px 0 0;
    position: relative;
    overflow: hidden;
}
.idn-latest-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(204,0,0,.12), transparent 60%);
    pointer-events: none;
}
.idn-latest-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
    padding-bottom: 24px;
}
.idn-latest-hero__info { flex: 1; min-width: 0; }
.idn-latest-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(204,0,0,.25);
    border: 1px solid rgba(204,0,0,.4);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-ui);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff6666;
    margin-bottom: 10px;
}
.idn-latest-hero__eyebrow i { font-size: .6rem; animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}
.idn-latest-hero__title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.0;
    letter-spacing: -.4px;
}
.idn-latest-hero__desc {
    color: rgba(255,255,255,.55);
    font-size: .87rem;
    margin: 0;
}
.idn-latest-hero__deco {
    font-size: 5rem;
    color: rgba(255,255,255,.06);
    flex-shrink: 0;
}
.idn-latest-wrap {
    background: #f4f4f4;
    padding: 24px 0 48px;
}

/* Mobile latest hero */
@media (max-width: 599px) {
    .idn-latest-hero__title { font-size: 1.8rem; }
    .idn-latest-hero__deco  { font-size: 3rem; }
}

/* ════════════════════════════════════════════════════════════════
   MOST POPULAR WIDGET — Premium redesign
   ════════════════════════════════════════════════════════════════ */
.idn-pop-widget {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    border: 1px solid #f0f0f0;
}
/* Head */
.idn-pop-widget__head {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--color-primary);
    position: relative;
    overflow: hidden;
}
.idn-pop-widget__head::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(204,0,0,0.18), transparent 70%);
    pointer-events: none;
}
.idn-pop-widget__head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.idn-pop-widget__fire {
    width: 34px;
    height: 34px;
    background: var(--color-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(204,0,0,.4);
}
.idn-pop-widget__title {
    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .3px;
    line-height: 1;
}
.idn-pop-widget__sub {
    font-family: var(--font-ui);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-top: 3px;
}
/* List */
.idn-pop-widget__list {
    padding: 4px 0;
}
/* Each item */
.idn-pop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: background .12s;
    position: relative;
}
.idn-pop-item:last-child { border-bottom: none; }
.idn-pop-item:hover { background: #fafafa; }
/* Rank column */
.idn-pop-item__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    width: 24px;
}
.idn-pop-item__num {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    display: block;
}
.idn-pop-item__bar {
    display: block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* Top 3 accent colours */
.idn-pop-item--gold   .idn-pop-item__num { color: #C9A84C; }
.idn-pop-item--gold   .idn-pop-item__bar { background: linear-gradient(90deg,#C9A84C,#f0d080); }
.idn-pop-item--silver .idn-pop-item__num { color: #8a8a8a; }
.idn-pop-item--silver .idn-pop-item__bar { background: linear-gradient(90deg,#8a8a8a,#c0c0c0); }
.idn-pop-item--bronze .idn-pop-item__num { color: #b06020; }
.idn-pop-item--bronze .idn-pop-item__bar { background: linear-gradient(90deg,#b06020,#d4844c); }
/* Posts 4–7 */
.idn-pop-item--four  .idn-pop-item__num,
.idn-pop-item--five  .idn-pop-item__num,
.idn-pop-item--six   .idn-pop-item__num,
.idn-pop-item--seven .idn-pop-item__num { color: #ccc; font-size: .95rem; }
/* Body */
.idn-pop-item__body {
    flex: 1;
    min-width: 0;
}
.idn-pop-item__title {
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.3;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .12s;
}
.idn-pop-item:hover .idn-pop-item__title { color: var(--color-primary); }
.idn-pop-item__meta {
    font-family: var(--font-ui);
    font-size: .62rem;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 4px;
}
.idn-pop-item__meta i { font-size: .55rem; }
/* Arrow */
.idn-pop-item__arrow {
    font-size: .55rem;
    color: #ddd;
    flex-shrink: 0;
    transition: color .12s, transform .12s;
}
.idn-pop-item:hover .idn-pop-item__arrow {
    color: var(--color-primary);
    transform: translateX(2px);
}
/* Top 3 left accent line */
.idn-pop-item--gold::before,
.idn-pop-item--silver::before,
.idn-pop-item--bronze::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.idn-pop-item--gold::before   { background: #C9A84C; }
.idn-pop-item--silver::before { background: #8a8a8a; }
.idn-pop-item--bronze::before { background: #b06020; }

/* Mobile */
@media (max-width: 599px) {
    .idn-pop-item__title { font-size: .75rem; }
    .idn-pop-item { padding: 9px 12px; }
}

/* ════════════════════════════════════════════════════════════════
   UAE SECTION — Middle image title overlay
   ════════════════════════════════════════════════════════════════ */
.idn-uae-mid__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
}
.idn-uae-mid__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.idn-uae-mid__link:hover img { transform: scale(1.03); }
.idn-uae-mid__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 48px 18px 18px;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
    pointer-events: none;
}
.idn-uae-mid__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.idn-uae-mid__meta {
    font-family: var(--font-ui);
    font-size: .65rem;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}
/* Override old idn-uae-mid link styles */
.idn-uae-mid a.idn-uae-mid__link { border-radius: var(--radius-md); }

@media (max-width: 899px) {
    .idn-uae-mid__title { font-size: 1rem; }
}
@media (max-width: 599px) {
    .idn-uae-mid__title { font-size: .92rem; }
    .idn-uae-mid__overlay { padding: 36px 14px 14px; }
}

/* ════════════════════════════════════════════════════════════════
   SLOT HCARD PLACEHOLDER — IDN logo card
   ════════════════════════════════════════════════════════════════ */
.idn-slot-hcard--placeholder {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    pointer-events: none;
}
.idn-slot-hcard--placeholder .idn-slot-hcard__img {
    aspect-ratio: 16/9;
    min-height: 90px;
}
.idn-slot-hcard--placeholder .idn-slot-hcard__body h4 {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.75rem;
}

/* ════════════════════════════════════════════════════════════════
   HIDE AUTHOR on mobile — single article + category pages
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .sp-meta__author { display: none !important; }
    .sp-meta__divider { display: none !important; }
    .sp-author { display: none !important; }
    .idn-cat-feat__author { display: none !important; }
}

/* ============================================================
   MOBILE CATEGORY SECTIONS — Clean readable layout ≤767px
   Tech, World, Lifestyle, Business — card-first approach
   ============================================================ */
@media screen and (max-width: 767px) {

    /* ── Section wrapper ── */
    .idn-cs { padding: 20px 0 !important; border-bottom: 2px solid var(--color-border-light) !important; }
    .idn-cs .container { padding: 0 14px !important; }

    /* ── Section header ── */
    .idn-sec-hdr { margin-bottom: 14px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--color-border-light) !important; }
    .idn-sec-title { font-size: 0.85rem !important; letter-spacing: 1.5px !important; }
    .idn-sec-more { font-size: 0.72rem !important; }

    /* ── All 3-col grids → single column stack ── */
    .idn-3col,
    .idn-3col--tech,
    .idn-3col--life {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ── Big featured card — full width, taller image ── */
    .idn-big-col { width: 100% !important; }
    .idn-overlay-card {
        aspect-ratio: 16/9 !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }
    .idn-overlay-card__body h2 { font-size: 1rem !important; -webkit-line-clamp: 2 !important; }
    .idn-overlay-card__body { padding: 40px 12px 14px !important; }

    /* ── More X slot — 2 cards side by side ── */
    .idn-slot--leader { margin-top: 10px !important; }
    .idn-slot__label { margin-bottom: 8px !important; }
    .idn-slot__label-text { font-size: 0.62rem !important; letter-spacing: 1.5px !important; }
    .idn-slot--leader .idn-slot__row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ── Slot cards in More X ── */
    .idn-slot-hcard { display: flex !important; flex-direction: column !important; }
    .idn-slot-hcard__img { aspect-ratio: 16/9 !important; border-radius: 6px !important; }
    .idn-slot-hcard__body h4 {
        font-family: var(--font-heading, 'Playfair Display', serif) !important;
        font-size: 0.76rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
    }
    .idn-meta--xs { font-size: 0.62rem !important; }

    /* ── Middle stack column → horizontal scroll strip ── */
    .idn-stack-col {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 12px 0 4px !important;
        margin: 0 !important;
    }
    .idn-stack-col::-webkit-scrollbar { display: none !important; }
    .idn-stack-col .idn-scard {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    .idn-stack-col .idn-scard .idn-scard__img { aspect-ratio: 16/9 !important; border-radius: 6px !important; }
    .idn-stack-col .idn-scard .idn-scard__body h3 {
        font-size: 0.74rem !important;
        -webkit-line-clamp: 3 !important;
    }

    /* ── Right column (Latest widget) — hide on mobile to keep it clean ── */
    .idn-3col > div:last-child,
    .idn-3col--tech > div:last-child,
    .idn-3col--life > div:last-child { display: none !important; }

    /* ── pf-widget (Top Tech This Week etc) fallback ── */
    .idn-pf-widget { margin-top: 12px !important; }
    .idn-pf-widget__head { padding: 8px 12px !important; }
    .idn-pf-widget__title { font-size: 0.7rem !important; }
    .idn-pf-item { padding: 8px 10px !important; gap: 10px !important; }
    .idn-pf-item__img { width: 64px !important; min-width: 64px !important; height: 52px !important; }
    .idn-pf-item__body h4 {
        font-family: var(--font-heading, 'Playfair Display', serif) !important;
        font-size: 0.76rem !important;
        -webkit-line-clamp: 2 !important;
    }
    .idn-pf-item__meta { font-size: 0.62rem !important; }

    /* ── Single pf-item card (below More Tech) ── */
    .idn-pf-item--single { margin-top: 10px !important; }
    .idn-pf-item--single .idn-pf-item__img { width: 80px !important; min-width: 80px !important; height: 70px !important; }
    .idn-pf-item--single .idn-pf-item__body h4 { font-size: 0.78rem !important; }

    /* ── World section: text-lead card ── */
    .idn-text-lead h2 { font-size: 1rem !important; -webkit-line-clamp: 3 !important; }
    .idn-text-lead p { display: none !important; }

    /* ── UAE section grid ── */
    .idn-uae-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .idn-uae-left,
    .idn-uae-right { width: 100% !important; }
    .idn-uae-right { display: none !important; }

    /* ── Business grid ── */
    .idn-biz-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .idn-biz-grid > div:first-child { display: none !important; }

    /* ── Section spacing between CS blocks ── */
    .idn-cs + .idn-cs { margin-top: 0 !important; }
}

/* ── Very small phones ≤390px ── */
@media screen and (max-width: 390px) {
    .idn-overlay-card__body h2 { font-size: 0.9rem !important; }
    .idn-slot-hcard__body h4 { font-size: 0.7rem !important; }
    .idn-stack-col .idn-scard { flex: 0 0 125px !important; min-width: 125px !important; max-width: 125px !important; }
}

/* ============================================================
   IDN v4.7.0 — DESKTOP MASTER OVERRIDE
   Placed last — wins all cascade wars on screens >= 1025px
   ============================================================ */
@media screen and (min-width: 1025px) {
    html, body { max-width: 100% !important; overflow-x: hidden !important; }
    .idn-header        { display: block !important; }
    .idn-topbar        { display: flex !important; }
    .nav-primary       { display: block !important; }
    .idn-mobile-header { display: none !important; }
    .container,
    .idn-cs .container,
    .idn-hero-section .container,
    .idn-strip-wrap .container {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .idn-hero-grid {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr 280px !important;
        gap: 24px !important;
        align-items: start !important;
    }
    .idn-hero-grid > div:last-child { display: block !important; }
    .idn-uae-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr 240px !important;
        gap: 24px !important;
    }
    .idn-biz-grid {
        display: grid !important;
        grid-template-columns: 260px 1.4fr 1fr !important;
        gap: 24px !important;
    }
    .idn-biz-grid > div:first-child { display: block !important; }
    .idn-3col {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr 1fr !important;
        gap: 20px !important;
    }
    .idn-3col--tech { grid-template-columns: 1.2fr 1fr 1fr !important; }
    .idn-3col--life { grid-template-columns: 1fr 1.4fr 1fr !important; }
    .idn-3col > div,
    .idn-3col--tech > div,
    .idn-3col--life > div { display: block !important; }
    .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .single-layout,
    .idn-art-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 32px !important;
    }
    .footer__main { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; }
}

/* ── Tablet 768–1024px: desktop header + 2-col grids ── */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .idn-header        { display: block !important; }
    .idn-topbar        { display: flex !important; }
    .nav-primary       { display: block !important; }
    .idn-mobile-header { display: none !important; }
    body               { padding-bottom: 0 !important; }
    .idn-hero-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    .idn-hero-grid > div:last-child { display: none !important; }
    .idn-uae-grid, .idn-biz-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    .idn-3col, .idn-3col--tech { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    .idn-3col > div:nth-child(3), .idn-3col--tech > div:nth-child(3) { display: none !important; }
    .idn-3col--life { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}

/* ── Mobile <= 767px: single column, mobile header ── */
@media screen and (max-width: 767px) {
    .idn-header, .idn-topbar, .nav-primary { display: none !important; }
    .idn-mobile-header { display: block !important; }
    html, body { overflow-x: hidden !important; width: 100% !important; }
    img, video, iframe, embed, object { max-width: 100% !important; }
    .container,
    .idn-cs .container,
    .idn-hero-section .container,
    .idn-strip-wrap .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .idn-hero-grid,
    .idn-uae-grid,
    .idn-biz-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .idn-hero-grid > div:last-child,
    .idn-hero-grid > .idn-hero-latest,
    .idn-hero-grid > div:nth-child(3),
    .idn-biz-grid > div:first-child { display: none !important; }
    .idn-3col, .idn-3col--tech, .idn-3col--life {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }
    .idn-hero-main__img img { height: 220px !important; object-fit: cover !important; }
    .post-card { width: 100% !important; }
    .post-card__excerpt, .post-card__footer { display: none !important; }
    .single-layout, .idn-art-body, .sp-wrap { display: block !important; }
    .idn-art-sidebar, .sp-sidebar, .sp-rail { display: none !important; }
    .sp-article { margin-left: 0 !important; width: 100% !important; }
    .idn-cs, .idn-hero-section { padding: 16px 0 !important; }
    .footer__main { grid-template-columns: 1fr !important; gap: 24px !important; }
    body { padding-bottom: 64px !important; }
}

/* ── Very small phones <= 390px ── */
@media screen and (max-width: 390px) {
    .container, .idn-cs .container { padding-left: 10px !important; padding-right: 10px !important; }
    .idn-hero-main__img img { height: 200px !important; }
    .idn-hero-main__title { font-size: 1.1rem !important; }
    .idn-sec-title { font-size: 0.82rem !important; }
}