/* =========================================================================
   TechToday 2026 — Premium Tech News Portal
   Scoped under body.hr-modern. Loads AFTER healthro-modern.css and overrides it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand */
  --tt-primary: #1E40AF;
  --tt-primary-600: #2563EB;
  --tt-primary-700: #1D4ED8;
  --tt-primary-50: #EFF6FF;
  --tt-primary-100: #DBEAFE;

  --tt-accent: #7C3AED;
  --tt-accent-600: #6D28D9;
  --tt-accent-50: #F5F3FF;

  --tt-live: #DC2626;
  --tt-live-600: #B91C1C;
  --tt-success: #059669;

  /* Surfaces */
  --tt-bg: #FFFFFF;
  --tt-surface: #F8FAFC;
  --tt-surface-2: #F1F5F9;
  --tt-border: #E2E8F0;
  --tt-border-strong: #CBD5E1;

  /* Text */
  --tt-text: #0F172A;
  --tt-text-2: #1E293B;
  --tt-text-muted: #64748B;
  --tt-text-soft: #94A3B8;
  --tt-text-on-primary: #FFFFFF;

  /* Category accents (used on badges) */
  --tt-cat-ai: #7C3AED;
  --tt-cat-tech: #1E40AF;
  --tt-cat-mobile: #0EA5E9;
  --tt-cat-cyber: #0F172A;
  --tt-cat-startup: #059669;
  --tt-cat-gadgets: #D97706;

  /* Radius */
  --tt-r-sm: 6px;
  --tt-r: 10px;
  --tt-r-lg: 16px;
  --tt-r-xl: 24px;
  --tt-r-pill: 999px;

  /* Shadows */
  --tt-sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --tt-sh-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --tt-sh: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --tt-sh-lg: 0 20px 48px rgba(15, 23, 42, .14);
  --tt-ring: 0 0 0 3px rgba(37, 99, 235, .25);

  /* Spacing scale (4px base) */
  --tt-s-1: 4px;
  --tt-s-2: 8px;
  --tt-s-3: 12px;
  --tt-s-4: 16px;
  --tt-s-5: 20px;
  --tt-s-6: 24px;
  --tt-s-8: 32px;
  --tt-s-10: 40px;
  --tt-s-12: 48px;
  --tt-s-16: 64px;

  /* Type */
  --tt-ff-display: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-ff-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion */
  --tt-ease: cubic-bezier(.4, 0, .2, 1);
  --tt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tt-t-fast: 140ms var(--tt-ease);
  --tt-t: 220ms var(--tt-ease);
  --tt-t-slow: 420ms var(--tt-ease-out);

  /* Layout */
  --tt-container: 1100px;
  --tt-header-h: 90px;
}

/* FIX: Ensure body and outer expand to fill viewport width */
html,
body {
  width: 100% !important;
}

body.home {
  background-color: #F3F3F3 !important;
}

.hr-modern .outer {
  width: 100% !important;
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
.hr-modern,
.hr-modern *,
.hr-modern *::before,
.hr-modern *::after {
  box-sizing: border-box;
}

body.hr-modern {
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hr-modern h1,
.hr-modern h2,
.hr-modern h3,
.hr-modern h4,
.hr-modern h5,
.hr-modern h6 {
  font-family: var(--tt-ff-display);
  color: var(--tt-text);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern a {
  color: var(--tt-primary);
  text-decoration: none;
  transition: color var(--tt-t-fast);
}

.hr-modern a:hover {
  color: var(--tt-primary-700);
}

.hr-modern img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hr-modern :focus-visible {
  outline: none;
  box-shadow: var(--tt-ring);
  border-radius: var(--tt-r-sm);
}

/* Skip link */
.hr-modern .tt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tt-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 10000;
  border-radius: 0 0 var(--tt-r-sm) 0;
}

.hr-modern .tt-skip:focus {
  left: 0;
}

/* Container */
.hr-modern .tt-container {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 0 var(--tt-s-6);
}

@media (max-width: 768px) {
  .hr-modern .tt-container {
    padding: 0 var(--tt-s-4);
  }
}

/* -------------------------------------------------------------------------
   3. HEADER
   ------------------------------------------------------------------------- */
.hr-modern .tt-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tt-bg);
  border-bottom: 1px solid var(--tt-border);
  box-shadow: var(--tt-sh-xs);
  max-width: var(--tt-container);
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  width: 100%;
}

@media (max-width: 768px) {
  .hr-modern .tt-header {
    margin-top: 0;
  }
}

/* Top utility strip */
.hr-modern .tt-utility {
  background: var(--tt-surface-2);
  border-bottom: 1px solid var(--tt-border);
  font-size: 12px;
  color: var(--tt-text-muted);
}

.hr-modern .tt-utility-inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 6px var(--tt-s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-4);
}

.hr-modern .tt-utility-left,
.hr-modern .tt-utility-right {
  display: flex;
  align-items: center;
  gap: var(--tt-s-4);
}

.hr-modern .tt-utility a {
  color: var(--tt-text-muted);
  font-weight: 500;
}

.hr-modern .tt-utility a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-utility .tt-dot {
  color: var(--tt-text-soft);
}

@media (max-width: 768px) {
  .hr-modern .tt-utility {
    display: none;
  }
}

/* Main bar: logo / search / actions */
.hr-modern .tt-header-main {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: var(--tt-s-3) var(--tt-s-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--tt-s-6);
  align-items: center;
  min-height: var(--tt-header-h);
}

@media (max-width: 768px) {
  .hr-modern .tt-header-main {
    grid-template-columns: auto 1fr auto;
    padding: var(--tt-s-3) var(--tt-s-4);
    gap: var(--tt-s-3);
  }
}

.hr-modern .tt-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-s-2);
}

.hr-modern .tt-brand img {
  height: 70px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .hr-modern .tt-brand img {
    height: 55px;
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .hr-modern .tt-brand img {
    height: 45px;
    max-width: 140px;
  }
}

/* Inline search */
.hr-modern .tt-search {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.hr-modern .tt-search input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 44px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-pill);
  font-size: 14px;
  color: var(--tt-text);
  transition: border-color var(--tt-t-fast), background var(--tt-t-fast), box-shadow var(--tt-t-fast);
}

.hr-modern .tt-search input::placeholder {
  color: var(--tt-text-soft);
}

.hr-modern .tt-search input:focus {
  background: var(--tt-bg);
  border-color: var(--tt-primary-600);
  box-shadow: var(--tt-ring);
  outline: none;
}

.hr-modern .tt-search .tt-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tt-text-soft);
  pointer-events: none;
  font-size: 14px;
}

.hr-modern .tt-search button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 14px;
  border: none;
  background: var(--tt-primary);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  border-radius: var(--tt-r-pill);
  cursor: pointer;
  transition: background var(--tt-t-fast);
}

.hr-modern .tt-search button:hover {
  background: var(--tt-primary-700);
}

@media (max-width: 991px) {
  .hr-modern .tt-search {
    display: none;
  }
}

/* Header actions */
.hr-modern .tt-header-actions {
  display: flex;
  align-items: center;
  gap: var(--tt-s-2);
}

.hr-modern .tt-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tt-text-2);
  border: 1px solid transparent;
  border-radius: var(--tt-r-sm);
  cursor: pointer;
  transition: background var(--tt-t-fast), color var(--tt-t-fast);
  font-size: 16px;
}

.hr-modern .tt-icon-btn:hover {
  background: var(--tt-surface-2);
  color: var(--tt-primary);
}

/* Buttons */
.hr-modern .tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--tt-r-sm);
  font-family: var(--tt-ff-body);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tt-t-fast), color var(--tt-t-fast), border-color var(--tt-t-fast), transform var(--tt-t-fast);
  text-decoration: none;
  white-space: nowrap;
}

.hr-modern .tt-btn:active {
  transform: translateY(1px);
}

.hr-modern .tt-btn-primary {
  background: var(--tt-primary);
  color: #fff;
}

.hr-modern .tt-btn-primary:hover {
  background: var(--tt-primary-700);
  color: #fff;
}

.hr-modern .tt-btn-ghost {
  background: transparent;
  color: var(--tt-text-2);
}

.hr-modern .tt-btn-ghost:hover {
  background: var(--tt-surface-2);
  color: var(--tt-primary);
}

.hr-modern .tt-btn-outline {
  background: transparent;
  color: var(--tt-text);
  border-color: var(--tt-border-strong);
}

.hr-modern .tt-btn-outline:hover {
  border-color: var(--tt-primary);
  color: var(--tt-primary);
  background: var(--tt-primary-50);
}

.hr-modern .tt-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Category strip */
.hr-modern .tt-cat-strip {
  background: var(--tt-bg);
  border-top: 1px solid var(--tt-border);
}

.hr-modern .tt-cat-strip-inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 0 var(--tt-s-6);
  position: relative;
}

.hr-modern .tt-cat-scroll {
  display: flex;
  gap: var(--tt-s-1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  padding: 6px 0;
}

.hr-modern .tt-cat-scroll::-webkit-scrollbar {
  display: none;
}

.hr-modern .tt-cat-strip a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-text-2);
  border-radius: var(--tt-r-sm);
  transition: background var(--tt-t-fast), color var(--tt-t-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hr-modern .tt-cat-strip a:hover {
  background: var(--tt-primary-50);
  color: var(--tt-primary);
}

.hr-modern .tt-cat-strip a.is-active {
  background: transparent;
  color: var(--tt-primary);
  font-weight: 700;
}

.hr-modern .tt-cat-strip .tt-live-link {
  color: var(--tt-live);
}

.hr-modern .tt-cat-strip .tt-live-link:hover {
  background: rgba(220, 38, 38, .08);
  color: var(--tt-live-600);
}

/* Edge fades */
.hr-modern .tt-cat-strip-inner::before,
.hr-modern .tt-cat-strip-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 1;
}

.hr-modern .tt-cat-strip-inner::before {
  left: 0;
  background: linear-gradient(to right, var(--tt-bg), transparent);
}

.hr-modern .tt-cat-strip-inner::after {
  right: 0;
  background: linear-gradient(to left, var(--tt-bg), transparent);
}

/* Breaking ticker */
.hr-modern .tt-breaking {
  background: var(--tt-text);
  color: #fff;
  height: 36px;
  overflow: hidden;
}

/* Inner wrapper — constrains ticker to same max-width as navbar */
.hr-modern .tt-breaking-inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 0 var(--tt-s-6) 0 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .hr-modern .tt-breaking-inner {
    padding: 0 var(--tt-s-4) 0 0;
  }
}

.hr-modern .tt-breaking-label {
  background: var(--tt-live);
  color: #fff;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hr-modern .tt-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
  animation: tt-pulse 1.6s infinite;
}

@keyframes tt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.hr-modern .tt-breaking-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.hr-modern .tt-breaking-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 20px;
  white-space: nowrap;
  padding-left: 20px;
  animation: tt-ticker 60s linear infinite;
}

.hr-modern .tt-breaking-scroll:hover .tt-breaking-track,
.hr-modern .tt-breaking-scroll:focus-within .tt-breaking-track {
  animation-play-state: paused;
}

.hr-modern .tt-breaking-track a {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.hr-modern .tt-breaking-track a:hover {
  color: var(--tt-primary-100);
}

.hr-modern .tt-breaking-track .tt-ticker-sep {
  color: rgba(255, 255, 255, .35);
}

@keyframes tt-ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Mobile menu */
.hr-modern .tt-mobile-toggle {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  color: var(--tt-text);
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .hr-modern .tt-mobile-toggle {
    display: inline-flex;
  }
}

.hr-modern .tt-search-toggle {
  display: none;
}

@media (max-width: 767px) {
  .hr-modern .tt-search-toggle {
    display: inline-flex;
  }
}

.hr-modern .tt-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tt-t), visibility var(--tt-t);
  z-index: 1100;
}

.hr-modern .tt-mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.hr-modern .tt-mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(86vw, 360px);
  height: 100vh;
  background: var(--tt-bg);
  z-index: 1110;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
  transition: right var(--tt-t);
  display: flex;
  flex-direction: column;
}

.hr-modern .tt-mobile-drawer.is-open {
  right: 0;
}

.hr-modern .tt-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tt-s-4);
  border-bottom: 1px solid var(--tt-border);
  position: sticky;
  top: 0;
  background: var(--tt-bg);
  z-index: 1;
}

.hr-modern .tt-mobile-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.hr-modern .tt-mobile-close {
  width: 36px;
  height: 36px;
  border-radius: var(--tt-r-sm);
  border: none;
  background: var(--tt-surface-2);
  color: var(--tt-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hr-modern .tt-mobile-close:hover {
  background: var(--tt-border);
}

.hr-modern .tt-mobile-search {
  padding: var(--tt-s-4);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tt-mobile-search input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  font-size: 14px;
  background: var(--tt-surface);
}

.hr-modern .tt-mobile-nav {
  list-style: none;
  padding: var(--tt-s-2) 0;
  margin: 0;
}

.hr-modern .tt-mobile-nav li {
  margin: 0;
}

.hr-modern .tt-mobile-nav a,
.hr-modern .tt-mobile-nav .tt-mobile-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--tt-s-4);
  color: var(--tt-text);
  font-size: 15px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast), color var(--tt-t-fast);
  cursor: pointer;
  text-decoration: none;
}

.hr-modern .tt-mobile-nav a:hover,
.hr-modern .tt-mobile-nav .tt-mobile-toggle-item:hover {
  background: var(--tt-primary-50);
  border-left-color: var(--tt-primary);
  color: var(--tt-primary);
}

.hr-modern .tt-mobile-nav .tt-mobile-icon {
  width: 22px;
  text-align: center;
  color: var(--tt-text-muted);
  font-size: 14px;
}

.hr-modern .tt-mobile-nav .tt-arrow {
  transition: transform var(--tt-t-fast);
  color: var(--tt-text-soft);
  font-size: 12px;
}

.hr-modern .tt-mobile-nav .is-open .tt-arrow {
  transform: rotate(180deg);
}

.hr-modern .tt-mobile-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--tt-surface);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tt-t);
}

.hr-modern .tt-mobile-sub.is-open {
  max-height: 1200px;
}

.hr-modern .tt-mobile-sub a {
  padding: 11px var(--tt-s-4) 11px 52px;
  font-size: 14px;
  font-weight: 500;
  border-left: none;
  color: var(--tt-text-2);
}

body.tt-menu-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   4. SECTION HEADERS
   ------------------------------------------------------------------------- */
.hr-modern .tt-section {
  margin: var(--tt-s-6) 0;
}

@media (max-width: 768px) {
  .hr-modern .tt-section {
    margin: var(--tt-s-5) 0;
  }
}

.hr-modern .tt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-4);
  margin-bottom: var(--tt-s-6);
  padding-bottom: var(--tt-s-3);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tt-section-title {
  font-family: var(--tt-ff-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tt-text);
}

.hr-modern .tt-section-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--tt-primary);
  border-radius: 2px;
}

.hr-modern .tt-section-title.tt-accent::before {
  background: var(--tt-accent);
}

.hr-modern .tt-section-title.tt-live::before {
  display: none;
}

.hr-modern .tt-section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hr-modern .tt-section-link:hover {
  color: var(--tt-primary-700);
  gap: 8px;
}

/* -------------------------------------------------------------------------
   5. CARDS
   ------------------------------------------------------------------------- */
.hr-modern .tt-grid {
  display: grid;
  gap: var(--tt-s-4);
}

.hr-modern .tt-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hr-modern .tt-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991px) {

  .hr-modern .tt-grid-3,
  .hr-modern .tt-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {

  .hr-modern .tt-grid-3,
  .hr-modern .tt-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Category badge */
.hr-modern .tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--tt-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--tt-r-sm);
  text-decoration: none;
}

.hr-modern .tt-badge:hover {
  color: #fff;
  opacity: .92;
}

.hr-modern .tt-badge.is-ai {
  background: var(--tt-cat-ai);
}

.hr-modern .tt-badge.is-tech {
  background: var(--tt-cat-tech);
}

.hr-modern .tt-badge.is-mobile {
  background: var(--tt-cat-mobile);
}

.hr-modern .tt-badge.is-cyber {
  background: var(--tt-cat-cyber);
}

.hr-modern .tt-badge.is-startup {
  background: var(--tt-cat-startup);
}

.hr-modern .tt-badge.is-gadgets {
  background: var(--tt-cat-gadgets);
}

/* Meta line */
.hr-modern .tt-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--tt-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.hr-modern .tt-meta a {
  color: inherit;
}

.hr-modern .tt-meta a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-meta .tt-sep::before {
  content: '·';
  margin: 0 4px;
  color: var(--tt-text-soft);
}

/* Default card (vertical) */
.hr-modern .tt-card {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  overflow: hidden;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hr-modern .tt-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tt-sh);
  border-color: transparent;
}

.hr-modern .tt-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tt-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .tt-card:hover .tt-card-media img {
  transform: scale(1.05);
}

.hr-modern .tt-card-media .tt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

.hr-modern .tt-card-body {
  padding: var(--tt-s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.hr-modern .tt-card-title {
  font-family: var(--tt-ff-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tt-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-card-title a {
  color: inherit;
  background-image: linear-gradient(to right, var(--tt-primary), var(--tt-primary));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--tt-t);
}

.hr-modern .tt-card-title a:hover {
  color: var(--tt-primary);
  background-size: 100% 1px;
}

.hr-modern .tt-card-excerpt {
  font-size: 14px;
  color: var(--tt-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-card-footer {
  display: none !important;
}

/* Feature card (large hero card) — image on top, text below */
.hr-modern .tt-card-feature {
  position: relative;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  display: flex;
  flex-direction: column;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
}

.hr-modern .tt-card-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--tt-sh);
  border-color: transparent;
}

.hr-modern .tt-card-feature img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--tt-t-slow);
}

.hr-modern .tt-card-feature::after {
  display: none;
}

.hr-modern .tt-card-feature:hover img {
  transform: scale(1.03);
}

.hr-modern .tt-card-feature-body {
  position: static;
  padding: var(--tt-s-5) var(--tt-s-6) var(--tt-s-6);
  color: var(--tt-text);
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-3);
  background: var(--tt-bg);
  flex: 1;
}

.hr-modern .tt-card-feature-title {
  font-family: var(--tt-ff-display);
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--tt-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-card-feature-title a {
  color: var(--tt-text);
}

.hr-modern .tt-card-feature-title a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-card-feature .tt-meta {
  color: var(--tt-text-muted);
}

.hr-modern .tt-card-feature .tt-meta a {
  color: var(--tt-text-muted);
}

@media (max-width: 768px) {
  .hr-modern .tt-card-feature-body {
    padding: var(--tt-s-4);
  }
}

/* Row card (horizontal — sidebar, trending list) */
.hr-modern .tt-card-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--tt-s-3);
  padding: var(--tt-s-3) 0;
  border-bottom: 1px solid var(--tt-border);
  align-items: start;
}

.hr-modern .tt-card-row:last-child {
  border-bottom: none;
}

.hr-modern .tt-card-row-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--tt-r-sm);
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tt-card-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .tt-card-row:hover .tt-card-row-media img {
  transform: scale(1.06);
}

.hr-modern .tt-card-row-title {
  font-family: var(--tt-ff-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tt-text);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-card-row-title a {
  color: inherit;
}

.hr-modern .tt-card-row-title a:hover {
  color: var(--tt-primary);
}

/* Ranked list (Trending / Popular) */
.hr-modern .tt-ranked {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rank;
}

.hr-modern .tt-ranked>li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--tt-s-3);
  padding: var(--tt-s-3) 0;
  border-bottom: 1px solid var(--tt-border);
  align-items: center;
}

.hr-modern .tt-ranked>li:last-child {
  border-bottom: none;
}

.hr-modern .tt-ranked>li::before {
  content: counter(rank, decimal-leading-zero);
  font-family: var(--tt-ff-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--tt-border-strong);
  font-variant-numeric: tabular-nums;
}

.hr-modern .tt-ranked .tt-rank-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-ranked a:hover .tt-rank-title {
  color: var(--tt-primary);
}

.hr-modern .tt-ranked a {
  color: inherit;
}

/* -------------------------------------------------------------------------
   6. HERO + TRENDING LAYOUTS
   ------------------------------------------------------------------------- */
.hr-modern .tt-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--tt-s-4);
  margin: var(--tt-s-6) 0 var(--tt-s-10);
}

.hr-modern .tt-hero-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--tt-s-4);
}

.hr-modern .tt-hero-side .tt-card-feature {
  aspect-ratio: 16 / 11;
}

.hr-modern .tt-hero-side .tt-card-feature-title {
  font-size: 16px;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .hr-modern .tt-hero {
    grid-template-columns: 1fr;
  }

  .hr-modern .tt-hero-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

@media (max-width: 575px) {
  .hr-modern .tt-hero-side {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-trending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tt-s-4);
}

@media (max-width: 991px) {
  .hr-modern .tt-trending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .hr-modern .tt-trending-grid {
    grid-template-columns: 1fr;
  }
}

/* Category section: 1 large + 3 small */
.hr-modern .tt-cat-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--tt-s-6);
}

.hr-modern .tt-cat-block-sub {
  display: grid;
  gap: var(--tt-s-4);
}

@media (max-width: 991px) {
  .hr-modern .tt-cat-block {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   7. SIDEBAR
   ------------------------------------------------------------------------- */
.hr-modern .tt-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-6);
}

@media (min-width: 992px) {
  .hr-modern .tt-sidebar.is-sticky {
    position: sticky;
    top: calc(var(--tt-header-h) + 16px);
  }
}

.hr-modern .tt-widget {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-5);
}

.hr-modern .tt-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tt-s-4);
  padding-bottom: var(--tt-s-3);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tt-widget-title {
  font-family: var(--tt-ff-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hr-modern .tt-widget-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--tt-primary);
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   8. NEWSLETTER CTA
   ------------------------------------------------------------------------- */
.hr-modern .tt-newsletter {
  background: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
  color: #fff;
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-10) var(--tt-s-8);
  margin: var(--tt-s-12) 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--tt-s-8);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hr-modern .tt-newsletter::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hr-modern .tt-newsletter h2 {
  font-size: clamp(22px, 2.2vw, 32px);
  color: #fff;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-newsletter p {
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  margin: 0;
}

.hr-modern .tt-newsletter form {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  padding: 6px;
  border-radius: var(--tt-r-pill);
  backdrop-filter: blur(8px);
}

.hr-modern .tt-newsletter input {
  flex: 1;
  height: 44px;
  padding: 0 18px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.hr-modern .tt-newsletter input::placeholder {
  color: rgba(255, 255, 255, .7);
}

.hr-modern .tt-newsletter button {
  height: 44px;
  padding: 0 22px;
  border: none;
  background: #fff;
  color: var(--tt-primary);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--tt-r-pill);
  cursor: pointer;
  transition: transform var(--tt-t-fast);
}

.hr-modern .tt-newsletter button:hover {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .hr-modern .tt-newsletter {
    grid-template-columns: 1fr;
    padding: var(--tt-s-8) var(--tt-s-5);
    margin: var(--tt-s-8) 0;
  }
}

/* -------------------------------------------------------------------------
   9. UTILITIES + LEGACY OVERRIDES
   ------------------------------------------------------------------------- */
.hr-modern .tt-stack-2>*+* {
  margin-top: var(--tt-s-2);
}

.hr-modern .tt-stack-3>*+* {
  margin-top: var(--tt-s-3);
}

.hr-modern .tt-stack-4>*+* {
  margin-top: var(--tt-s-4);
}

/* Neutralize the old red-bar + cat-nav so they don't double up with new chrome */
.hr-modern .hr-breaking-bar,
.hr-modern .hr-cat-nav,
.hr-modern .header-separator,
.hr-modern .menu-container {
  display: none !important;
}

/* Hide the legacy main-container Bootstrap row when our new layout owns the page */
.hr-modern .main-block {
  padding: 0;
}

/* Give home page content top breathing room */
.hr-modern .main-block #tt-main.tt-container {
  padding-top: var(--tt-s-6);
}

@media (max-width: 768px) {
  .hr-modern .main-block #tt-main.tt-container {
    padding-top: var(--tt-s-3);
  }
}

/* Legacy banner-block carousel container — keep it visible but contained */
.hr-modern .banner-block {
  max-width: var(--tt-container);
  margin: var(--tt-s-6) auto 0;
  padding: 0 var(--tt-s-6);
}

@media (max-width: 768px) {
  .hr-modern .banner-block {
    padding: 0 var(--tt-s-4);
  }
}

/* Image lazy fade */
.hr-modern img.tt-lazy {
  opacity: 0;
  transition: opacity var(--tt-t);
}

.hr-modern img.tt-lazy.is-loaded {
  opacity: 1;
}

/* Print */
@media print {

  .hr-modern .tt-header,
  .hr-modern .tt-newsletter,
  .hr-modern .tt-sidebar,
  .hr-modern .tt-footer,
  .hr-modern .tt-share-rail,
  .hr-modern .tt-reading-progress {
    display: none !important;
  }
}

/* =========================================================================
   10. ARTICLE PAGE
   ========================================================================= */

/* Reading progress */
.hr-modern .tt-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(to right, var(--tt-primary), var(--tt-accent));
  z-index: 2000;
  transition: width 100ms linear;
  pointer-events: none;
}

/* Breadcrumb */
.hr-modern .tt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tt-text-muted);
  margin: var(--tt-s-4) 0 var(--tt-s-6);
}

.hr-modern .tt-breadcrumb a {
  color: var(--tt-text-muted);
  font-weight: 500;
}

.hr-modern .tt-breadcrumb a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-breadcrumb .tt-sep {
  color: var(--tt-text-soft);
}

.hr-modern .tt-breadcrumb .is-current {
  color: var(--tt-text);
  font-weight: 600;
}

/* Article layout */
.hr-modern .tt-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--tt-s-10);
  margin-top: var(--tt-s-4);
}

@media (max-width: 991px) {
  .hr-modern .tt-article-grid {
    grid-template-columns: 1fr;
    gap: var(--tt-s-8);
  }
}

/* Article hero */
.hr-modern .tt-article-hero {
  margin: 0 0 var(--tt-s-6);
}

.hr-modern .tt-article-title {
  font-family: var(--tt-ff-display);
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: var(--tt-s-3) 0 var(--tt-s-4);
  color: var(--tt-text);
}

.hr-modern .tt-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-s-3) var(--tt-s-5);
  font-size: 13px;
  color: var(--tt-text-muted);
  padding: var(--tt-s-4) 0;
  border-top: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
  margin-bottom: var(--tt-s-6);
}

.hr-modern .tt-article-meta .tt-meta-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hr-modern .tt-article-meta strong {
  color: var(--tt-text);
  font-weight: 600;
}

.hr-modern .tt-article-meta a {
  color: var(--tt-text-2);
  font-weight: 500;
}

.hr-modern .tt-article-meta a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-article-meta i {
  color: var(--tt-text-soft);
}

.hr-modern .tt-article-image {
  position: relative;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  margin-bottom: var(--tt-s-6);
  background: var(--tt-surface-2);
  text-align: center;
}

.hr-modern .tt-article-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  margin: 0 auto;
  object-fit: contain;
  background: var(--tt-surface-2);
}

.hr-modern .tt-article-image .tt-image-caption {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tt-text-soft);
  text-align: left;
}

.hr-modern .tt-article-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--tt-r-lg);
  background: #000;
  margin-bottom: var(--tt-s-6);
}

.hr-modern .tt-article-video iframe,
.hr-modern .tt-article-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Article body typography */
.hr-modern .tt-article-body {
  font-family: var(--tt-ff-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--tt-text-2);
  max-width: 720px;
}

.hr-modern .tt-article-body>*+* {
  margin-top: var(--tt-s-4);
}

.hr-modern .tt-article-body p {
  margin: 0 0 var(--tt-s-4);
}

.hr-modern .tt-article-body h2,
.hr-modern .tt-article-body h3,
.hr-modern .tt-article-body h4 {
  font-family: var(--tt-ff-display);
  margin: var(--tt-s-8) 0 var(--tt-s-3);
  color: var(--tt-text);
}

.hr-modern .tt-article-body h2 {
  font-size: 26px;
}

/* "Earlier on News Adda" block under an article */
.tt-earlier-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-earlier-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--tt-border, #e5e7eb);
  line-height: 1.45;
}

.tt-earlier-list li:last-child {
  border-bottom: 0;
}

.tt-earlier-date {
  flex: 0 0 auto;
  min-width: 84px;
  font-size: 13px;
  color: var(--tt-text-3, #6b7280);
}

.tt-earlier-list a {
  font-weight: 600;
  color: var(--tt-text, inherit);
  text-decoration: none;
}

.tt-earlier-list a:hover {
  text-decoration: underline;
}

/* AI articles: "Key facts" bullets and the source credit line */
.hr-modern .tt-article-body ul {
  list-style: disc;
  margin: 0 0 var(--tt-s-4);
  padding-left: 1.4em;
}

.hr-modern .tt-article-body li {
  margin: 0 0 var(--tt-s-2);
}

.hr-modern .tt-article-body .tt-source-credit {
  font-size: 15px;
  opacity: 0.85;
}

.hr-modern .tt-article-body h3 {
  font-size: 22px;
}

.hr-modern .tt-article-body h4 {
  font-size: 19px;
}

.hr-modern .tt-article-body a {
  color: var(--tt-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hr-modern .tt-article-body a:hover {
  color: var(--tt-primary-700);
}

.hr-modern .tt-article-body img {
  border-radius: var(--tt-r);
  margin: var(--tt-s-4) auto;
}

.hr-modern .tt-article-body blockquote {
  margin: var(--tt-s-6) 0;
  padding: var(--tt-s-4) var(--tt-s-6);
  border-left: 4px solid var(--tt-primary);
  background: var(--tt-primary-50);
  border-radius: 0 var(--tt-r) var(--tt-r) 0;
  font-size: 18px;
  color: var(--tt-text);
  font-style: italic;
}

.hr-modern .tt-article-body ul,
.hr-modern .tt-article-body ol {
  padding-left: var(--tt-s-6);
  margin: 0 0 var(--tt-s-4);
}

.hr-modern .tt-article-body li {
  margin-bottom: var(--tt-s-2);
}

.hr-modern .tt-article-body pre,
.hr-modern .tt-article-body code {
  background: var(--tt-surface-2);
  border-radius: var(--tt-r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.hr-modern .tt-article-body code {
  padding: 2px 6px;
}

.hr-modern .tt-article-body pre {
  padding: var(--tt-s-4);
  overflow-x: auto;
}

/* Tags */
.hr-modern .tt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--tt-s-6) 0;
  padding: var(--tt-s-4) 0;
  border-top: 1px solid var(--tt-border);
}

.hr-modern .tt-tags-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-text-muted);
  align-self: center;
  margin-right: 8px;
}

.hr-modern .tt-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--tt-surface-2);
  color: var(--tt-text-2);
  border-radius: var(--tt-r-pill);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--tt-t-fast), color var(--tt-t-fast);
  text-decoration: none;
}

.hr-modern .tt-tag:hover {
  background: var(--tt-primary);
  color: #fff;
}

/* Source CTA button */
.hr-modern .tt-source-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--tt-s-4) 0;
  padding: 12px 22px;
  border-radius: var(--tt-r-sm);
  background: var(--tt-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--tt-t-fast);
}

.hr-modern .tt-source-cta:hover {
  background: var(--tt-primary-700);
  color: #fff;
}

.hr-modern .tt-source-cta.is-youtube {
  background: #DC2626;
}

.hr-modern .tt-source-cta.is-youtube:hover {
  background: #B91C1C;
}

/* Share rail */
.hr-modern .tt-share-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: var(--tt-s-6) 0;
  padding: var(--tt-s-4) 0;
  border-top: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tt-share-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-text-muted);
  margin-right: 4px;
}

.hr-modern .tt-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-surface-2);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  font-size: 15px;
  transition: transform var(--tt-t-fast), background var(--tt-t-fast), color var(--tt-t-fast);
  cursor: pointer;
}

.hr-modern .tt-share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
}

.hr-modern .tt-share-btn.is-fb:hover {
  background: #1877F2;
}

.hr-modern .tt-share-btn.is-tw:hover {
  background: #0F172A;
}

.hr-modern .tt-share-btn.is-wa:hover {
  background: #25D366;
}

.hr-modern .tt-share-btn.is-tg:hover {
  background: #0088CC;
}

.hr-modern .tt-share-btn.is-li:hover {
  background: #0A66C2;
}

.hr-modern .tt-share-btn.is-link:hover {
  background: var(--tt-primary);
}

/* Comments */
.hr-modern .tt-comments {
  margin: var(--tt-s-10) 0 var(--tt-s-6);
}

.hr-modern .tt-comments h3 {
  font-family: var(--tt-ff-display);
  font-size: 22px;
  margin: 0 0 var(--tt-s-5);
  padding-bottom: var(--tt-s-3);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tt-comment-form {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-5);
  margin-bottom: var(--tt-s-6);
}

.hr-modern .tt-comment-form .form-group {
  margin-bottom: var(--tt-s-3);
}

.hr-modern .tt-comment-form .form-control {
  width: 100%;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--tt-ff-body);
  background: var(--tt-bg);
  color: var(--tt-text);
  transition: border-color var(--tt-t-fast), box-shadow var(--tt-t-fast);
}

.hr-modern .tt-comment-form .form-control:focus {
  outline: none;
  border-color: var(--tt-primary-600);
  box-shadow: var(--tt-ring);
}

.hr-modern .tt-comment-form textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

.hr-modern .tt-comment-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--tt-primary);
  color: #fff;
  border: none;
  border-radius: var(--tt-r-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--tt-t-fast);
}

.hr-modern .tt-comment-form button[type="submit"]:hover {
  background: var(--tt-primary-700);
}

.hr-modern .tt-comment-item {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-4);
  margin-bottom: var(--tt-s-3);
}

.hr-modern .tt-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--tt-s-2);
}

.hr-modern .tt-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.hr-modern .tt-comment-name {
  font-weight: 600;
  color: var(--tt-text);
}

.hr-modern .tt-comment-date {
  font-size: 12px;
  color: var(--tt-text-muted);
}

.hr-modern .tt-comment-body {
  color: var(--tt-text-2);
  line-height: 1.6;
  font-size: 15px;
}

.hr-modern .tt-comments-empty {
  padding: var(--tt-s-6);
  background: var(--tt-surface);
  border: 1px dashed var(--tt-border);
  border-radius: var(--tt-r);
  color: var(--tt-text-muted);
  text-align: center;
}

/* =========================================================================
   11. LIST / PAGINATION
   ========================================================================= */
/* Category page hero banner */
.hr-modern .tt-cat-hero {
  background: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-8) var(--tt-s-8);
  margin-bottom: var(--tt-s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-6);
  position: relative;
  overflow: hidden;
}

.hr-modern .tt-cat-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.hr-modern .tt-cat-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: 60px;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.hr-modern .tt-cat-hero-left {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.hr-modern .tt-cat-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--tt-s-2);
}

.hr-modern .tt-cat-hero-title {
  font-family: var(--tt-ff-display) !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 var(--tt-s-2) !important;
  line-height: 1.15 !important;
}

.hr-modern .tt-cat-hero-sub {
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  margin: 0;
}

.hr-modern .tt-cat-hero-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tt-s-2);
  flex-shrink: 0;
}

/* India category: state filter (custom dropdown), sits to the left of the article count */
.hr-modern .tt-state-dd { position: relative; }

.hr-modern .tt-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--tt-r-pill);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast);
}

.hr-modern .tt-state-btn:hover,
.hr-modern .tt-state-dd.is-open .tt-state-btn {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
}

.hr-modern .tt-state-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hr-modern .tt-state-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hr-modern .tt-state-caret { transition: transform var(--tt-t-fast); }
.hr-modern .tt-state-dd.is-open .tt-state-caret { transform: rotate(180deg); }

.hr-modern .tt-state-panel {
  position: fixed;
  z-index: 100000;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.hr-modern .tt-state-panel[hidden] { display: none; }

.hr-modern .tt-state-search { padding: 10px; border-bottom: 1px solid var(--tt-border); }

.hr-modern .tt-state-search input {
  width: 100%;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-pill);
  background: var(--tt-surface-2);
  color: var(--tt-text);
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  outline: 0;
}

.hr-modern .tt-state-search input:focus { border-color: var(--tt-primary); background: #fff; }

.hr-modern .tt-state-list { max-height: 280px; overflow-y: auto; padding: 6px; }

.hr-modern .tt-state-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--tt-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.hr-modern .tt-state-item[hidden] { display: none; }
.hr-modern .tt-state-item:hover { background: var(--tt-primary-50); color: var(--tt-primary); }

.hr-modern .tt-state-item.is-on { background: var(--tt-primary-50); color: var(--tt-primary); font-weight: 700; }
.hr-modern .tt-state-item.is-on::after { content: "\2713"; font-weight: 800; }

.hr-modern .tt-state-none { padding: 14px; text-align: center; color: var(--tt-text-muted); font-size: 13px; }
.hr-modern .tt-state-none[hidden] { display: none; }

.hr-modern .tt-cat-count-badge {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-3) var(--tt-s-5);
  text-align: center;
  color: #fff;
}

.hr-modern .tt-cat-count-badge .count-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.hr-modern .tt-cat-count-badge .count-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 2px;
  display: block;
}

.hr-modern .tt-cat-hero-rss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--tt-r-pill);
  transition: background var(--tt-t-fast);
}

.hr-modern .tt-cat-hero-rss:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff !important;
}

@media (max-width: 575px) {
  .hr-modern .tt-cat-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--tt-s-5);
  }

  .hr-modern .tt-cat-hero-right {
    align-items: flex-start;
    flex-direction: row;
  }
}

.hr-modern .tt-page-title {
  font-family: var(--tt-ff-display);
  font-size: clamp(24px, 2.6vw, 36px);
  margin: var(--tt-s-2) 0 var(--tt-s-2);
  font-weight: 700;
  color: var(--tt-text);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-modern .tt-page-title .tt-rss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tt-r-sm);
  background: #F97316;
  color: #fff;
  font-size: 14px;
  transition: background var(--tt-t-fast);
}

.hr-modern .tt-page-title .tt-rss-btn:hover {
  background: #EA580C;
  color: #fff;
}

.hr-modern .tt-page-subtitle {
  color: var(--tt-text-muted);
  font-size: 15px;
  margin: 0 0 var(--tt-s-6);
}

.hr-modern .tt-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tt-s-2) 0 var(--tt-s-4);
  border-bottom: 1px solid var(--tt-border);
  margin-bottom: var(--tt-s-4);
}

.hr-modern .tt-list-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-text-muted);
  letter-spacing: 0.02em;
}

.hr-modern .tt-list {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-5);
}

.hr-modern .tt-list-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--tt-s-5);
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-4);
  transition: box-shadow var(--tt-t), border-color var(--tt-t), transform var(--tt-t);
}

.hr-modern .tt-list-item:hover {
  box-shadow: var(--tt-sh);
  border-color: transparent;
  transform: translateY(-2px);
}

.hr-modern .tt-list-item.no-image {
  grid-template-columns: 1fr;
}

.hr-modern .tt-list-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--tt-r-sm);
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tt-list-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .tt-list-item:hover .tt-list-media img {
  transform: scale(1.04);
}

.hr-modern .tt-list-body {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-3);
  min-width: 0;
}

.hr-modern .tt-list-title {
  font-family: var(--tt-ff-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-list-title a {
  color: var(--tt-text);
}

.hr-modern .tt-list-title a:hover {
  color: var(--tt-primary);
}

.hr-modern .tt-list-excerpt {
  color: var(--tt-text-muted);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-list-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-3);
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .hr-modern .tt-list-item {
    grid-template-columns: 1fr;
    padding: var(--tt-s-3);
  }

  .hr-modern .tt-list-title {
    font-size: 17px;
  }
}

/* Pagination */
.hr-modern .tt-pagination,
.hr-modern .pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: var(--tt-s-8) 0;
  justify-content: center;
}

.hr-modern .tt-pagination li,
.hr-modern .pagination li {
  display: inline-block;
}

.hr-modern .tt-pagination a,
.hr-modern .tt-pagination span,
.hr-modern .pagination a,
.hr-modern .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  background: var(--tt-bg);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--tt-t-fast), color var(--tt-t-fast), border-color var(--tt-t-fast);
}

.hr-modern .tt-pagination a:hover,
.hr-modern .pagination a:hover {
  background: var(--tt-primary-50);
  color: var(--tt-primary);
  border-color: var(--tt-primary);
}

.hr-modern .tt-pagination .active a,
.hr-modern .tt-pagination .active span,
.hr-modern .pagination .active a,
.hr-modern .pagination .active span {
  background: var(--tt-primary);
  color: #fff;
  border-color: var(--tt-primary);
}

/* Subcategory pill list */
.hr-modern .all_sub_category {
  list-style: none;
  padding: 0;
  margin: var(--tt-s-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hr-modern .all_sub_category>li {
  margin: 0;
}

.hr-modern .all_sub_category>li>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--tt-surface-2);
  color: var(--tt-text-2);
  border-radius: var(--tt-r-pill);
  font-weight: 500;
  font-size: 14px;
  transition: background var(--tt-t-fast), color var(--tt-t-fast);
  text-decoration: none;
}

.hr-modern .all_sub_category>li>a:hover {
  background: var(--tt-primary);
  color: #fff;
}

.hr-modern .all_sub_category .category-counter {
  background: rgba(15, 23, 42, .08);
  color: inherit;
  padding: 2px 8px;
  border-radius: var(--tt-r-pill);
  font-size: 11px;
  font-weight: 700;
}

/* Inside sidebar widget: compact pill size and full-width wrapping */
.hr-modern .s-widget .all_sub_category>li>a {
  padding: 6px 12px;
  font-size: 13px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .hr-modern .all_sub_category {
    gap: 6px;
  }

  .hr-modern .all_sub_category>li>a {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* =========================================================================
   11b. PRE-FOOTER FEATURED NEWS
   ========================================================================= */
.hr-modern .tt-prefooter-featured {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: var(--tt-s-8) var(--tt-s-6);
  border-top: 1px solid var(--tt-border);
}

.hr-modern .tt-prefooter-inner {
  width: 100%;
}

.hr-modern .tt-prefooter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tt-s-6);
}

.hr-modern .tt-prefooter-label {
  font-family: var(--tt-ff-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--tt-text);
  letter-spacing: -0.01em;
  border-left: 3px solid var(--tt-primary);
  padding-left: 10px;
}

.hr-modern .tt-prefooter-viewall {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--tt-t-fast);
}

.hr-modern .tt-prefooter-viewall:hover {
  gap: 10px;
}

.hr-modern .tt-prefooter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tt-s-4);
}

@media (max-width: 991px) {
  .hr-modern .tt-prefooter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .hr-modern .tt-prefooter-grid {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-pfcard {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--tt-t), transform var(--tt-t);
}

.hr-modern .tt-pfcard:hover {
  box-shadow: var(--tt-sh);
  transform: translateY(-3px);
}

.hr-modern .tt-pfcard-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tt-surface-2);
  max-height: 130px;
}

/* Phones / single-column: let the image fill the full card width (max-height + aspect-ratio was shrinking its width) */
@media (max-width: 575px) {
  .hr-modern .tt-pfcard-media {
    width: 100%;
    max-height: none;
  }
}

.hr-modern .tt-pfcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tt-t-slow);
}

.hr-modern .tt-pfcard:hover .tt-pfcard-media img {
  transform: scale(1.05);
}

.hr-modern .tt-pfcard-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--tt-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--tt-r-pill);
}

.hr-modern .tt-pfcard-body {
  padding: var(--tt-s-2) var(--tt-s-3) var(--tt-s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.hr-modern .tt-pfcard-date {
  font-size: 10px;
  color: var(--tt-text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hr-modern .tt-pfcard-title {
  font-family: var(--tt-ff-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tt-pfcard-title a {
  color: var(--tt-text);
  text-decoration: none;
}

.hr-modern .tt-pfcard-title a:hover {
  color: var(--tt-primary);
}

/* =========================================================================
   12. FOOTER
   ========================================================================= */
.hr-modern .tt-footer {
  max-width: var(--tt-container);
  margin-left: auto;
  margin-right: auto;
  background: #0f172a;
  color: #94A3B8;
  margin-top: var(--tt-s-12);
  border-top: 4px solid var(--tt-primary);
}

.hr-modern .tt-footer-inner {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: var(--tt-s-12) var(--tt-s-6) var(--tt-s-6);
}

.hr-modern .tt-footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--tt-s-8);
  padding-bottom: var(--tt-s-10);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 1200px) {
  .hr-modern .tt-footer-top {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .hr-modern .tt-footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .hr-modern .tt-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--tt-s-6);
  }
}

.hr-modern .tt-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--tt-s-3);
}

.hr-modern .tt-footer-brand img {
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.15));
}

.hr-modern .tt-footer-brand-col p {
  color: #94A3B8;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 var(--tt-s-4);
  max-width: 380px;
}

.hr-modern .tt-footer-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hr-modern .tt-footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background var(--tt-t-fast), color var(--tt-t-fast), transform var(--tt-t-fast);
}

.hr-modern .tt-footer-socials a:hover {
  background: var(--tt-primary);
  color: #fff;
  transform: translateY(-2px);
  border-color: transparent;
}

.hr-modern .tt-footer h5 {
  font-family: var(--tt-ff-display);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--tt-s-4);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tt-primary);
  display: inline-block;
}

.hr-modern .tt-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-modern .tt-footer-links a {
  color: #94A3B8;
  font-size: 14px;
  transition: color var(--tt-t-fast), padding-left var(--tt-t-fast);
  display: inline-block;
}

.hr-modern .tt-footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

.hr-modern .tt-footer-bottom {
  padding: var(--tt-s-5) 0 var(--tt-s-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tt-s-3);
  font-size: 13px;
  color: #64748B;
}

.hr-modern .tt-footer-bottom a {
  color: #94A3B8;
}

.hr-modern .tt-footer-bottom a:hover {
  color: #fff;
}

.hr-modern .tt-footer-bottom-links {
  display: flex;
  gap: var(--tt-s-4);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hr-modern .tt-footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* Neutralize legacy footer global rules so we don't double-render */
.hr-modern footer .container-fluid .row.text-left.py-4 {
  display: none !important;
}

/* =========================================================================
   13. AUTH + FORMS (login / register / recover / contact)
   ========================================================================= */
.hr-modern .tt-auth {
  max-width: 980px;
  margin: var(--tt-s-10) auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--tt-s-8);
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  box-shadow: var(--tt-sh);
}

.hr-modern .tt-auth-aside {
  background: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
  color: #fff;
  padding: var(--tt-s-10) var(--tt-s-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 380px;
}

.hr-modern .tt-auth-aside::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
  right: -80px;
  top: -80px;
  border-radius: 50%;
}

.hr-modern .tt-auth-aside h2 {
  font-family: var(--tt-ff-display);
  color: #fff;
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 0 0 var(--tt-s-3);
  line-height: 1.2;
}

.hr-modern .tt-auth-aside p {
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.hr-modern .tt-auth-aside ul {
  list-style: none;
  padding: 0;
  margin: var(--tt-s-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-modern .tt-auth-aside li {
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hr-modern .tt-auth-aside li i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.hr-modern .tt-auth-main {
  padding: var(--tt-s-10) var(--tt-s-8);
}

.hr-modern .tt-auth-main h1 {
  font-family: var(--tt-ff-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 var(--tt-s-2);
  color: var(--tt-text);
}

.hr-modern .tt-auth-main .tt-auth-sub {
  color: var(--tt-text-muted);
  font-size: 14px;
  margin: 0 0 var(--tt-s-6);
}

@media (max-width: 768px) {
  .hr-modern .tt-auth {
    grid-template-columns: 1fr;
    margin: var(--tt-s-6) var(--tt-s-3);
  }

  .hr-modern .tt-auth-aside,
  .hr-modern .tt-auth-main {
    padding: var(--tt-s-6) var(--tt-s-5);
  }

  .hr-modern .tt-auth-aside {
    min-height: auto;
  }
}

/* Generic form layout (used by auth, contact, recover) */
.hr-modern .tt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--tt-s-4);
}

.hr-modern .tt-field label,
.hr-modern .tt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-text-2);
  letter-spacing: 0.01em;
}

.hr-modern .tt-field label .tt-req,
.hr-modern .tt-req {
  color: var(--tt-live);
  margin-left: 2px;
}

.hr-modern .tt-input,
.hr-modern .tt-textarea,
.hr-modern .tt-select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  background: var(--tt-bg);
  color: var(--tt-text);
  font-size: 15px;
  font-family: var(--tt-ff-body);
  transition: border-color var(--tt-t-fast), box-shadow var(--tt-t-fast), background var(--tt-t-fast);
}

.hr-modern .tt-textarea {
  height: auto;
  padding: 12px 14px;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.hr-modern .tt-input:focus,
.hr-modern .tt-textarea:focus,
.hr-modern .tt-select:focus {
  outline: none;
  border-color: var(--tt-primary-600);
  box-shadow: var(--tt-ring);
  background: var(--tt-bg);
}

.hr-modern .tt-input::placeholder,
.hr-modern .tt-textarea::placeholder {
  color: var(--tt-text-soft);
}

.hr-modern .tt-field-error {
  color: var(--tt-live);
  font-size: 12px;
  margin-top: 2px;
}

.hr-modern .tt-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-s-3);
  align-items: center;
  margin-top: var(--tt-s-2);
}

.hr-modern .tt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tt-s-4);
}

@media (max-width: 575px) {
  .hr-modern .tt-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.hr-modern .tt-form-aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tt-s-3);
  margin: var(--tt-s-3) 0;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tt-text-muted);
}

.hr-modern .tt-form-aux a {
  color: var(--tt-primary);
  font-weight: 600;
}

.hr-modern .tt-form-aux a:hover {
  color: var(--tt-primary-700);
}

.hr-modern .tt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--tt-text-2);
  cursor: pointer;
  user-select: none;
}

.hr-modern .tt-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--tt-primary);
  cursor: pointer;
}

/* Social login row */
.hr-modern .tt-social-divider {
  display: flex;
  align-items: center;
  gap: var(--tt-s-3);
  color: var(--tt-text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--tt-s-5) 0 var(--tt-s-4);
}

.hr-modern .tt-social-divider::before,
.hr-modern .tt-social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tt-border);
}

.hr-modern .tt-social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tt-s-3);
}

@media (max-width: 480px) {
  .hr-modern .tt-social-row {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  border-radius: var(--tt-r-sm);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--tt-border);
  background: var(--tt-bg);
  color: var(--tt-text);
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast), transform var(--tt-t-fast);
  text-decoration: none;
}

.hr-modern .tt-social-btn:hover {
  transform: translateY(-1px);
}

.hr-modern .tt-social-btn.is-google:hover {
  background: #fff4f4;
  border-color: #DC2626;
  color: #DC2626;
}

.hr-modern .tt-social-btn.is-facebook:hover {
  background: #eef4ff;
  border-color: #1877F2;
  color: #1877F2;
}

.hr-modern .tt-social-btn i {
  font-size: 16px;
}

/* Flash / alert */
.hr-modern .tt-alert {
  padding: 12px 16px;
  border-radius: var(--tt-r-sm);
  font-size: 14px;
  margin-bottom: var(--tt-s-4);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hr-modern .tt-alert-info {
  background: var(--tt-primary-50);
  color: var(--tt-primary-700);
  border: 1px solid var(--tt-primary-100);
}

.hr-modern .tt-alert-success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.hr-modern .tt-alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.hr-modern .tt-alert-danger {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* =========================================================================
   14. STATIC PAGES (page_view, 404, sitemap, career, policy)
   ========================================================================= */
.hr-modern .tt-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
  margin: var(--tt-s-8) auto;
}

.hr-modern .tt-page.has-sidebar {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--tt-s-8);
  max-width: var(--tt-container);
}

.hr-modern .tt-page.has-sidebar-left {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--tt-s-8);
  max-width: var(--tt-container);
}

@media (max-width: 991px) {

  .hr-modern .tt-page.has-sidebar,
  .hr-modern .tt-page.has-sidebar-left {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-page-content {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-8);
}

@media (max-width: 768px) {
  .hr-modern .tt-page-content {
    padding: var(--tt-s-5);
  }
}

.hr-modern .tt-page-content h1,
.hr-modern .tt-page-content h2,
.hr-modern .tt-page-content h3 {
  font-family: var(--tt-ff-display);
  color: var(--tt-text);
}

.hr-modern .tt-page-content h2 {
  font-size: 24px;
  margin: var(--tt-s-6) 0 var(--tt-s-3);
}

.hr-modern .tt-page-content h3 {
  font-size: 20px;
  margin: var(--tt-s-5) 0 var(--tt-s-3);
}

.hr-modern .tt-page-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tt-text-2);
  margin: 0 0 var(--tt-s-4);
}

.hr-modern .tt-page-content ul,
.hr-modern .tt-page-content ol {
  padding-left: var(--tt-s-6);
  margin: 0 0 var(--tt-s-4);
  color: var(--tt-text-2);
  line-height: 1.75;
}

.hr-modern .tt-page-content a {
  color: var(--tt-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hr-modern .tt-page-content a:hover {
  color: var(--tt-primary-700);
}

/* 404 */
.hr-modern .tt-404 {
  text-align: center;
  padding: var(--tt-s-16) var(--tt-s-4);
  max-width: 620px;
  margin: 0 auto;
}

.hr-modern .tt-404-code {
  font-family: var(--tt-ff-display);
  font-size: clamp(96px, 18vw, 180px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-404 h1 {
  font-family: var(--tt-ff-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--tt-text);
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-404 p {
  color: var(--tt-text-muted);
  font-size: 16px;
  margin: 0 0 var(--tt-s-6);
}

/* Contact split layout */
.hr-modern .tt-contact-wrap {
  margin: var(--tt-s-8) auto;
}

.hr-modern .tt-contact-head {
  text-align: center;
  margin-bottom: var(--tt-s-8);
}

.hr-modern .tt-contact-head h1 {
  font-family: var(--tt-ff-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-contact-head p {
  color: var(--tt-text-muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
}

.hr-modern .tt-contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--tt-s-6);
  align-items: stretch;
}

@media (max-width: 991px) {
  .hr-modern .tt-contact-grid {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-contact-card {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-8);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.hr-modern .tt-contact-address {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tt-border, #e5e7eb);
}

.hr-modern .tt-contact-address h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.hr-modern .tt-contact-address p {
  margin: 0;
  line-height: 1.6;
}

.hr-modern .tt-opt {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.7;
}

.hr-modern .tt-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
}

.hr-modern .tt-contact-card h3 {
  font-family: var(--tt-ff-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--tt-s-6);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hr-modern .tt-contact-card h3 i {
  color: var(--tt-primary);
}

@media (max-width: 768px) {
  .hr-modern .tt-contact-card {
    padding: var(--tt-s-5);
  }
}

/* Input groups for contact OTP */
.hr-modern .tt-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.hr-modern .tt-input-group .tt-input {
  flex: 1;
}

.hr-modern .tt-otp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tt-s-3);
  margin-top: 10px;
  flex-wrap: wrap;
}

.hr-modern .tt-otp-timer {
  font-size: 13px;
  color: var(--tt-live);
  font-weight: 600;
}

.hr-modern .tt-otp-timer.is-success {
  color: var(--tt-success);
}

.hr-modern .tt-otp-resend {
  background: none;
  border: none;
  color: var(--tt-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.hr-modern .tt-otp-resend:disabled {
  color: var(--tt-text-soft);
  cursor: not-allowed;
}

.hr-modern .tt-helper-text {
  font-size: 12px;
  color: var(--tt-text-muted);
  margin-top: 4px;
}

/* Sidebar widget legacy-wrap helper */
.hr-modern .page-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-5);
}

.hr-modern .page-sidebar>.s-widget,
.hr-modern .page-sidebar>.widget,
.hr-modern .page-sidebar>.panel {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-5);
}

/* Legacy policy / static page wrappers — auto-modernise */
.hr-modern .page-heading-two {
  background: var(--tt-surface-2);
  padding: var(--tt-s-8) 0;
  margin-bottom: var(--tt-s-6);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .page-heading-two .container {
  max-width: var(--tt-container);
  padding: 0 var(--tt-s-6);
}

.hr-modern .page-heading-two h2 {
  font-family: var(--tt-ff-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--tt-text);
}

.hr-modern .page-heading-two h2 span {
  display: none;
}

.hr-modern .page-heading-two .breads {
  color: var(--tt-text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.hr-modern .page-heading-two .breads a {
  color: var(--tt-text-muted);
  font-weight: 500;
}

.hr-modern .page-heading-two .breads a:hover {
  color: var(--tt-primary);
}

/* Generic body-content typography under legacy containers */
.hr-modern .container.py-4,
.hr-modern .container-main {
  max-width: var(--tt-container);
  margin: 0 auto;
  padding: 0 var(--tt-s-6) var(--tt-s-10);
}

.hr-modern .container.py-4>.row>.col-md-12,
.hr-modern .container.py-4>.row>[class*="col-"] {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-8);
  margin-top: var(--tt-s-2);
}

@media (max-width: 768px) {

  .hr-modern .container.py-4>.row>.col-md-12,
  .hr-modern .container.py-4>.row>[class*="col-"] {
    padding: var(--tt-s-5);
  }
}

.hr-modern .container.py-4 p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tt-text-2);
  margin: 0 0 var(--tt-s-4);
}

.hr-modern .container.py-4 h3,
.hr-modern .container.py-4 h4 {
  font-family: var(--tt-ff-display);
  color: var(--tt-text);
  margin: var(--tt-s-6) 0 var(--tt-s-3);
}

.hr-modern .container.py-4 h3 {
  font-size: 22px;
}

.hr-modern .container.py-4 h4 {
  font-size: 18px;
}

.hr-modern .container.py-4 ul,
.hr-modern .container.py-4 ol {
  padding-left: var(--tt-s-6);
  margin: 0 0 var(--tt-s-4);
  color: var(--tt-text-2);
  line-height: 1.75;
}

.hr-modern .container.py-4 a {
  color: var(--tt-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hr-modern .container.py-4 a:hover {
  color: var(--tt-primary-700);
}

/* Sitemap list */
.hr-modern .sitemap .list-3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 768px) {
  .hr-modern .sitemap .list-3 {
    grid-template-columns: 1fr;
  }
}

.hr-modern .sitemap .list-3 li {
  margin: 0;
}

.hr-modern .sitemap .list-3 a {
  display: block;
  padding: 10px 14px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  color: var(--tt-text-2);
  font-size: 13px;
  word-break: break-all;
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast), color var(--tt-t-fast);
  text-decoration: none;
}

.hr-modern .sitemap .list-3 a:hover {
  background: var(--tt-primary-50);
  border-color: var(--tt-primary);
  color: var(--tt-primary);
}

/* Career cards */
.hr-modern .tt-career-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tt-s-5);
  margin: var(--tt-s-8) 0;
}

@media (max-width: 991px) {
  .hr-modern .tt-career-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .hr-modern .tt-career-grid {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tt-career-card {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-6);
  display: flex;
  flex-direction: column;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
}

.hr-modern .tt-career-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tt-sh);
  border-color: transparent;
}

.hr-modern .tt-career-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--tt-r);
  background: var(--tt-primary-50);
  color: var(--tt-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: var(--tt-s-4);
}

.hr-modern .tt-career-card h3 {
  font-family: var(--tt-ff-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--tt-s-2);
}

.hr-modern .tt-career-card h4 {
  font-family: var(--tt-ff-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-text-muted);
  margin: var(--tt-s-4) 0 var(--tt-s-2);
  font-weight: 700;
}

.hr-modern .tt-career-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-career-card li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--tt-text-2);
  line-height: 1.55;
}

.hr-modern .tt-career-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tt-primary);
}

.hr-modern .tt-career-cta {
  background: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-10) var(--tt-s-6);
  text-align: center;
  color: #fff;
  margin: var(--tt-s-10) 0 var(--tt-s-8);
  position: relative;
  overflow: hidden;
}

.hr-modern .tt-career-cta::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, .15), transparent 70%);
  right: -100px;
  top: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.hr-modern .tt-career-cta h2 {
  font-family: var(--tt-ff-display);
  color: #fff;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 var(--tt-s-5);
}

.hr-modern .tt-career-cta .tt-btn {
  background: #fff;
  color: var(--tt-primary);
  font-weight: 700;
  height: 48px;
  padding: 0 28px;
  font-size: 16px;
}

.hr-modern .tt-career-cta .tt-btn:hover {
  background: var(--tt-primary-50);
  transform: translateY(-2px);
}

/* =========================================================================
   15. LEGACY SIDEBAR WIDGETS  (.s-widget — popular_news, recent_news, etc.)
   ========================================================================= */
.hr-modern .s-widget {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: var(--tt-s-5);
  margin-bottom: var(--tt-s-5);
}

.hr-modern .s-widget>h5 {
  font-family: var(--tt-ff-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 var(--tt-s-4);
  padding-bottom: var(--tt-s-3);
  border-bottom: 1px solid var(--tt-border);
  color: var(--tt-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hr-modern .s-widget>h5 .color,
.hr-modern .s-widget>h5 .fa {
  color: var(--tt-primary);
  font-size: 14px;
}

.hr-modern .s-widget .widget-content {
  padding: 0;
}

.hr-modern .s-widget .scrollable-news-widget {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hr-modern .s-widget .scrollable-news-widget::-webkit-scrollbar {
  display: none;
}

/* List items inside .s-widget */
.hr-modern .s-widget .list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hr-modern .s-widget .list-unstyled>li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tt-border);
  align-items: start;
}

.hr-modern .s-widget .list-unstyled>li:last-child {
  border-bottom: none;
}

.hr-modern .s-widget .sn-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--tt-r-sm);
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .s-widget .sn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .s-widget .list-unstyled>li:hover .sn-thumb img {
  transform: scale(1.05);
}

.hr-modern .s-widget .sn-body {
  min-width: 0;
}

.hr-modern .s-widget .sub-head {
  font-family: var(--tt-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tt-text);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .s-widget .sub-head a {
  color: inherit;
}

.hr-modern .s-widget .sub-head a:hover {
  color: var(--tt-primary);
}

.hr-modern .s-widget .sub-head-link-date {
  font-size: 11px;
  color: var(--tt-text-muted);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.hr-modern .s-widget .sub-head-link-date a {
  color: var(--tt-text-muted);
}

.hr-modern .s-widget .sub-head-link-date a:hover {
  color: var(--tt-primary);
}

.hr-modern .s-widget .sn-sep {
  color: var(--tt-text-soft);
  margin: 0 2px;
}

/* Newsletter sidebar widget */
.hr-modern .s-widget .newsletter-letter-form-holder {
  display: block;
}

.hr-modern .s-widget .search form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-modern .s-widget .input-group {
  display: flex;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  background: var(--tt-bg);
  overflow: hidden;
  transition: border-color var(--tt-t-fast), box-shadow var(--tt-t-fast);
}

.hr-modern .s-widget .input-group:focus-within {
  border-color: var(--tt-primary-600);
  box-shadow: var(--tt-ring);
}

.hr-modern .s-widget .input-group .form-control,
.hr-modern .s-widget .input-group input[type="email"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 14px;
  height: 42px;
  font-size: 14px;
  color: var(--tt-text);
  outline: none;
}

.hr-modern .s-widget .input-group .btn,
.hr-modern .s-widget .input-group .btn-primary {
  border: none;
  background: var(--tt-primary);
  color: #fff;
  padding: 0 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--tt-t-fast);
  height: 42px;
  line-height: 42px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fix: make .input-group-btn span stretch as flex child (legacy Bootstrap 3 wrapper) */
.hr-modern .s-widget .input-group .input-group-btn {
  display: flex;
  align-items: stretch;
}

.hr-modern .s-widget .input-group .btn:hover {
  background: var(--tt-primary-700);
}

.hr-modern .s-widget .alert {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: var(--tt-r-sm);
  margin: 0;
}

.hr-modern .s-widget .alert-success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.hr-modern .s-widget .alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.hr-modern .s-widget .alert-info {
  background: var(--tt-primary-50);
  color: var(--tt-primary-700);
  border: 1px solid var(--tt-primary-100);
}

.hr-modern .s-widget .alert-danger {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* =========================================================================
   16. LEGACY .tod-* (TechOfDay-style pagebody widgets)
   ========================================================================= */
.hr-modern .tod-section {
  margin: var(--tt-s-8) 0;
}

.hr-modern .tod-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-3);
  margin-bottom: var(--tt-s-5);
  padding-bottom: var(--tt-s-3);
  border-bottom: 1px solid var(--tt-border);
}

.hr-modern .tod-sec-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hr-modern .tod-sec-bar {
  width: 3px;
  height: 18px;
  background: var(--tt-primary);
  border-radius: 2px;
}

.hr-modern .tod-sec-title {
  font-family: var(--tt-ff-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--tt-text);
}

.hr-modern .tod-sec-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.hr-modern .tod-sec-more:hover {
  color: var(--tt-primary-700);
  gap: 8px;
}

.hr-modern .tod-card {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
}

.hr-modern .tod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tt-sh);
  border-color: transparent;
}

.hr-modern .tod-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tod-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .tod-card:hover .tod-card-img img {
  transform: scale(1.04);
}

.hr-modern .tod-card-img-sm {
  aspect-ratio: 16 / 9;
}

.hr-modern .tod-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 10px;
  background: var(--tt-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--tt-r-sm);
}

.hr-modern .tod-card-body {
  padding: var(--tt-s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.hr-modern .tod-card-body-sm {
  padding: 10px;
}

.hr-modern .tod-card-meta {
  display: none !important;
}

.hr-modern .tod-card-meta a {
  color: inherit;
}

.hr-modern .tod-card-meta a:hover {
  color: var(--tt-primary);
}

.hr-modern .tod-card-meta .tod-source {
  font-weight: 600;
}

.hr-modern .tod-card-meta .tod-sep {
  color: var(--tt-text-soft);
}

.hr-modern .tod-card-title {
  font-family: var(--tt-ff-display);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tod-card-title a {
  color: var(--tt-text);
}

.hr-modern .tod-card-title a:hover {
  color: var(--tt-primary);
}

.hr-modern .tod-card-title-lg {
  font-size: 17px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hr-modern .tod-card-title-sm {
  font-size: 13px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hr-modern .tod-card-desc {
  margin: 0;
  font-size: 14px;
  color: var(--tt-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tod-more {
  color: var(--tt-primary);
  font-weight: 600;
}

.hr-modern .tod-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tt-s-3);
  margin-top: var(--tt-s-5);
}

@media (max-width: 991px) {
  .hr-modern .tod-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .hr-modern .tod-strip {
    grid-template-columns: 1fr;
  }
}

.hr-modern .tod-strip-item {
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  overflow: hidden;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
}

.hr-modern .tod-strip-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--tt-sh-sm);
  border-color: transparent;
}

.hr-modern .tod-strip-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tod-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tt-surface-2);
  transition: transform var(--tt-t-slow);
}

.hr-modern .tod-strip-item:hover .tod-strip-thumb img {
  transform: scale(1.05);
}

.hr-modern .tod-strip-body {
  padding: var(--tt-s-3);
}

.hr-modern .tod-strip-title {
  font-family: var(--tt-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tod-strip-title a {
  color: var(--tt-text);
}

.hr-modern .tod-strip-title a:hover {
  color: var(--tt-primary);
}

.hr-modern .tod-divider {
  height: 1px;
  background: var(--tt-border);
  margin: var(--tt-s-8) 0 0;
}

/* Main row layout for tod-section (featured LEFT + 2x2 grid RIGHT) */
.hr-modern .tod-main-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  align-items: stretch;
}

.hr-modern .tod-feat-col,
.hr-modern .tod-grid-col {
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
}

.hr-modern .tod-feat-col>.tod-card,
.hr-modern .tod-grid-col>.tod-grid {
  flex: 1;
}

.hr-modern .tod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--tt-s-3);
  margin: 0;
}

.hr-modern .tod-grid-item {
  padding: 0;
  display: flex;
}

.hr-modern .tod-grid-item .tod-card {
  width: 100%;
}

.hr-modern .tod-grid .tod-card-img {
  aspect-ratio: 16 / 11;
}

.hr-modern .tod-grid .tod-card-title-sm {
  font-size: 13px;
}

.hr-modern .tod-grid .tod-card-body-sm {
  padding: 10px 12px;
}

@media (max-width: 991px) {

  .hr-modern .tod-feat-col,
  .hr-modern .tod-grid-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hr-modern .tod-feat-col {
    margin-bottom: var(--tt-s-4);
  }
}

@media (max-width: 480px) {
  .hr-modern .tod-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* ── Category section color variants (tod-section--{slug} → tod-sec-bar color) ── */
.hr-modern .tod-section--ai .tod-sec-bar {
  background: #7c3aed;
}

/* violet */
.hr-modern .tod-section--mobile .tod-sec-bar {
  background: #2563eb;
}

/* blue   */
.hr-modern .tod-section--cyber .tod-sec-bar {
  background: #ea580c;
}

/* orange */
.hr-modern .tod-section--startup .tod-sec-bar {
  background: #16a34a;
}

/* green  */
.hr-modern .tod-section--gadget .tod-sec-bar {
  background: #0891b2;
}

/* cyan   */

/* Match "See All" link color to variant accent */
.hr-modern .tod-section--ai .tod-sec-more {
  color: #7c3aed;
}

.hr-modern .tod-section--ai .tod-sec-more:hover {
  color: #6d28d9;
}

.hr-modern .tod-section--mobile .tod-sec-more {
  color: #2563eb;
}

.hr-modern .tod-section--mobile .tod-sec-more:hover {
  color: #1d4ed8;
}

.hr-modern .tod-section--cyber .tod-sec-more {
  color: #ea580c;
}

.hr-modern .tod-section--cyber .tod-sec-more:hover {
  color: #c2410c;
}

.hr-modern .tod-section--startup .tod-sec-more {
  color: #16a34a;
}

.hr-modern .tod-section--startup .tod-sec-more:hover {
  color: #15803d;
}

.hr-modern .tod-section--gadget .tod-sec-more {
  color: #0891b2;
}

.hr-modern .tod-section--gadget .tod-sec-more:hover {
  color: #0e7490;
}

/* Alternate section backgrounds for visual rhythm (odd sections get a faint tint) */
.hr-modern .tod-section:nth-child(odd) {
  background: transparent;
}

.hr-modern .tod-section:nth-child(even) {
  background: var(--tt-surface-2);
  border-radius: var(--tt-r);
  padding: var(--tt-s-5);
  margin-left: calc(-1 * var(--tt-s-5));
  margin-right: calc(-1 * var(--tt-s-5));
}

/* Badge inherits variant accent so it reads as a category tag, not generic primary */
.hr-modern .tod-section--ai .tod-badge {
  background: #7c3aed;
}

.hr-modern .tod-section--mobile .tod-badge {
  background: #2563eb;
}

.hr-modern .tod-section--cyber .tod-badge {
  background: #ea580c;
}

.hr-modern .tod-section--startup .tod-badge {
  background: #16a34a;
}

.hr-modern .tod-section--gadget .tod-badge {
  background: #0891b2;
}

/* tod-hero (banner_view.php editorial hero) */
.hr-modern .tod-hero {
  margin: var(--tt-s-4) 0 var(--tt-s-8);
}

.hr-modern .tod-hero-row {
  gap: var(--tt-s-4);
  margin: 0;
}

.hr-modern .tod-hero-main {
  position: relative;
  display: block;
  height: 100%;
  min-height: 380px;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  background: #0f172a;
}

.hr-modern .tod-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hr-modern .tod-hero-img a {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hr-modern .tod-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--tt-t-slow);
}

.hr-modern .tod-hero-main:hover .tod-hero-img img {
  transform: scale(1.04);
}

.hr-modern .tod-hero-overlay {
  display: none !important;
}

.hr-modern .tod-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px var(--tt-s-6) var(--tt-s-6);
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
  color: #fff;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-modern .tod-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
}

.hr-modern .tod-badge-hero {
  position: static;
  background: var(--tt-accent);
}

.hr-modern .tod-hero-source {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
}

.hr-modern .tod-hero-title {
  font-family: var(--tt-ff-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

.hr-modern .tod-hero-title a {
  color: #fff;
}

.hr-modern .tod-hero-title a:hover {
  color: rgba(255, 255, 255, .85);
}

.hr-modern .tod-hero-date {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

.hr-modern .tod-hero-stack {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--tt-s-3);
  height: 100%;
}

.hr-modern .tod-hero-stack-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r);
  padding: 8px;
  transition: transform var(--tt-t), box-shadow var(--tt-t), border-color var(--tt-t);
}

.hr-modern .tod-hero-stack-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--tt-sh-sm);
  border-color: transparent;
}

.hr-modern .tod-hero-stack-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--tt-r-sm);
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tod-hero-stack-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hr-modern .tod-hero-stack-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--tt-text-muted);
}

.hr-modern .tod-meta-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 11px;
  color: var(--tt-text-muted);
}

.hr-modern .tod-meta-line .tod-source {
  color: var(--tt-primary);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.hr-modern .tod-meta-line .tod-date {
  font-size: 10px;
}

.hr-modern .tod-hero-stack-title {
  font-family: var(--tt-ff-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hr-modern .tod-hero-stack-title a {
  color: var(--tt-text);
}

.hr-modern .tod-hero-stack-title a:hover {
  color: var(--tt-primary);
}

@media (max-width: 768px) {
  .hr-modern .tod-hero-row>[class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .hr-modern .tod-hero-stack {
    grid-template-rows: repeat(4, auto);
  }
}

/* Owl carousel — basic restyle */
.hr-modern #owl-demo .item {
  position: relative;
  border-radius: var(--tt-r-lg);
  overflow: hidden;
  background: var(--tt-text);
}

.hr-modern #owl-demo .img-wrapper {
  position: relative;
}

.hr-modern #owl-demo .img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, .85) 100%);
}

.hr-modern #owl-demo .img-wrapper img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.hr-modern #owl-demo .info-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--tt-s-5);
  color: #fff;
  z-index: 2;
}

.hr-modern #owl-demo .info-wrapper h2 {
  font-family: var(--tt-ff-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}

.hr-modern #owl-demo .info-wrapper h2 a {
  color: #fff;
}

.hr-modern #owl-demo .info-wrapper h2 a:hover {
  color: var(--tt-primary-100);
}

/* =========================================================================
   17. MARQUEE  (legacy ticker — neutral styling so it doesn't clash)
   ========================================================================= */
.hr-modern .marquee-holder {
  background: var(--tt-surface-2);
  border-radius: var(--tt-r-sm);
  padding: 6px 12px;
  margin: var(--tt-s-3) 0;
  font-size: 13px;
}

.hr-modern .marquee-body ul.marquee li {
  margin-right: 24px;
}

.hr-modern .marquee-news-title {
  font-weight: 600;
  color: var(--tt-text-2);
}

.hr-modern .marquee-holder a {
  color: var(--tt-primary);
}

.hr-modern .marquee-holder a:hover {
  color: var(--tt-primary-700);
}

/* =========================================================================
   18. MSG + COOKIE POPUP + GENERIC FLASH
   ========================================================================= */
.hr-modern .tt-msg-card {
  max-width: 720px;
  margin: var(--tt-s-10) auto;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-8);
  text-align: center;
}

.hr-modern .tt-msg-card h1 {
  font-family: var(--tt-ff-display);
  font-size: 28px;
  margin: 0 0 var(--tt-s-3);
}

.hr-modern .tt-msg-card p {
  color: var(--tt-text-muted);
  margin: 0 0 var(--tt-s-5);
  font-size: 16px;
  line-height: 1.7;
}

.hr-modern .tt-msg-card .alert,
.hr-modern .tt-msg-card .tt-alert {
  text-align: left;
}

/* Cookie popup */
.hr-modern #cookiescript-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  padding: var(--tt-s-5);
  box-shadow: var(--tt-sh-lg);
  z-index: 1500;
  font-size: 14px;
  color: var(--tt-text-2);
}

.hr-modern #cookiescript-popup.hide {
  display: none;
}

.hr-modern #cookiescript-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tt-s-3);
}

.hr-modern #cookiescript-popup .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--tt-r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast), color var(--tt-t-fast);
  text-decoration: none;
}

.hr-modern #cookiescript-popup .btn-blue {
  background: transparent;
  color: var(--tt-primary);
  border-color: var(--tt-border-strong);
}

.hr-modern #cookiescript-popup .btn-blue:hover {
  border-color: var(--tt-primary);
  background: var(--tt-primary-50);
}

.hr-modern #cookiescript-popup .btn-green {
  background: var(--tt-primary);
  color: #fff;
  margin-left: 8px;
}

.hr-modern #cookiescript-popup .btn-green:hover {
  background: var(--tt-primary-700);
}

@media (max-width: 575px) {
  .hr-modern #cookiescript-popup {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: var(--tt-s-4);
  }

  .hr-modern #cookiescript-popup .btn {
    width: 100%;
    margin: 0;
  }
}

/* Map legacy Bootstrap alert.* to the new tt-alert chrome when inside hr-modern */
.hr-modern .alert {
  padding: 12px 16px;
  border-radius: var(--tt-r-sm);
  font-size: 14px;
  margin-bottom: var(--tt-s-4);
  border: 1px solid transparent;
}

.hr-modern .alert-info {
  background: var(--tt-primary-50);
  color: var(--tt-primary-700);
  border-color: var(--tt-primary-100);
}

.hr-modern .alert-success {
  background: #ECFDF5;
  color: #065F46;
  border-color: #A7F3D0;
}

.hr-modern .alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;
}

.hr-modern .alert-danger,
.hr-modern .alert-error {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FECACA;
}

/* =========================================================================
   19. CATEGORY GRID WIDGET (.list-6)  — used by category_sidebar, sub_categories
   ========================================================================= */
.hr-modern .s-widget .list-6 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 992px) {
  .hr-modern .s-widget .list-6 {
    grid-template-columns: 1fr;
  }
}

.hr-modern .s-widget .list-6>li {
  margin: 0;
  width: auto;
  padding: 0;
  flex: initial;
  max-width: none;
}

.hr-modern .s-widget .list-6>li>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  color: var(--tt-text-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast), color var(--tt-t-fast), transform var(--tt-t-fast);
}

.hr-modern .s-widget .list-6>li>a:hover {
  background: var(--tt-primary-50);
  border-color: var(--tt-primary);
  color: var(--tt-primary);
  transform: translateX(2px);
}

.hr-modern .s-widget .list-6 .color {
  background: rgba(15, 23, 42, .06);
  color: var(--tt-text-muted);
  padding: 2px 8px;
  border-radius: var(--tt-r-pill);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--tt-ff-body);
}

.hr-modern .s-widget .list-6>li>a:hover .color {
  background: var(--tt-primary);
  color: #fff;
}

/* AdSense container (used inside .s-widget) */
.hr-modern .s-widget .adsense-container {
  background: var(--tt-surface) !important;
  border: 1px dashed var(--tt-border) !important;
  box-shadow: none !important;
  border-radius: var(--tt-r) !important;
  padding: var(--tt-s-5) !important;
}

.hr-modern .s-widget .adsense-container img {
  margin: 0 auto;
  opacity: .85;
}

/* =========================================================================
   20. ACCESSIBILITY + MOTION POLISH
   ========================================================================= */

/* Focus-visible — applied broadly */
.hr-modern a:focus-visible,
.hr-modern button:focus-visible,
.hr-modern input:focus-visible,
.hr-modern textarea:focus-visible,
.hr-modern select:focus-visible,
.hr-modern [tabindex="0"]:focus-visible {
  outline: 2px solid var(--tt-primary-600);
  outline-offset: 2px;
  border-radius: var(--tt-r-sm);
}

/* Skip plain :focus highlights on mouse clicks */
.hr-modern a:focus:not(:focus-visible),
.hr-modern button:focus:not(:focus-visible) {
  outline: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .hr-modern *,
  .hr-modern *::before,
  .hr-modern *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hr-modern .tt-live-dot {
    animation: none !important;
  }

  .hr-modern .tt-breaking-track {
    animation: none !important;
  }

  .hr-modern #owl-demo .item {
    transition: none !important;
  }
}

/* High-contrast outline mode */
@media (forced-colors: active) {

  .hr-modern .tt-card,
  .hr-modern .tt-card-feature,
  .hr-modern .tt-card-row,
  .hr-modern .tt-list-item,
  .hr-modern .s-widget {
    border: 1px solid CanvasText;
  }

  .hr-modern .tt-btn,
  .hr-modern .tt-badge {
    border: 1px solid CanvasText;
  }
}

/* Img graceful fallback — when src fails and no inline onerror */
.hr-modern img[src=""],
.hr-modern img:not([src]) {
  visibility: hidden;
}

/* Ensure no horizontal overflow on small viewports caused by long titles */
.hr-modern .tt-card-title,
.hr-modern .tt-card-row-title,
.hr-modern .tt-list-title,
.hr-modern .tt-card-feature-title,
.hr-modern .tt-article-title {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* =========================================================================
   21. LEGACY-CSS SUPERSESSION GUARDS
   Theme-2026.css owns chrome + cards. Neutralize the legacy duplicates
   in healthro-modern.css that would otherwise produce double rules.
   ========================================================================= */

/* The legacy ".hr-cat-badge" pill — fold its appearance into .tt-badge */
.hr-modern .hr-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--tt-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--tt-r-sm);
  text-decoration: none;
  border: none;
  box-shadow: none;
}

/* Neutralize legacy hero/banner padding that fights .tt-container */
.hr-modern .main-block>.container.main-container {
  max-width: var(--tt-container);
  padding: 0 var(--tt-s-6);
}

@media (max-width: 768px) {
  .hr-modern .main-block>.container.main-container {
    padding: 0 var(--tt-s-4);
  }
}

/* Legacy bootstrap form-control inside .hr-modern picks up the new look */
.hr-modern .form-control:not(.tt-input):not(.tt-textarea):not(.tt-select) {
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-sm);
  font-family: var(--tt-ff-body);
  background: var(--tt-bg);
  color: var(--tt-text);
  transition: border-color var(--tt-t-fast), box-shadow var(--tt-t-fast);
}

.hr-modern .form-control:not(.tt-input):not(.tt-textarea):not(.tt-select):focus {
  border-color: var(--tt-primary-600);
  box-shadow: var(--tt-ring);
  outline: none;
}

/* Bootstrap .btn fallback — only used inside .hr-modern */
.hr-modern .btn:not(.tt-btn):not([class*="tt-"]) {
  font-family: var(--tt-ff-body);
  font-weight: 600;
  border-radius: var(--tt-r-sm);
  transition: background var(--tt-t-fast), color var(--tt-t-fast), border-color var(--tt-t-fast);
}

.hr-modern .btn-primary:not(.tt-btn) {
  background: var(--tt-primary);
  border-color: var(--tt-primary);
}

.hr-modern .btn-primary:not(.tt-btn):hover {
  background: var(--tt-primary-700);
  border-color: var(--tt-primary-700);
}

.hr-modern .btn-blue:not(.tt-btn) {
  background: var(--tt-primary);
  border-color: var(--tt-primary);
  color: #fff;
}

.hr-modern .btn-blue:not(.tt-btn):hover {
  background: var(--tt-primary-700);
  border-color: var(--tt-primary-700);
  color: #fff;
}

.hr-modern .btn-red:not(.tt-btn) {
  background: var(--tt-live);
  border-color: var(--tt-live);
  color: #fff;
}

.hr-modern .btn-red:not(.tt-btn):hover {
  background: var(--tt-live-600);
  border-color: var(--tt-live-600);
  color: #fff;
}

.hr-modern .btn-warning:not(.tt-btn) {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}

.hr-modern .btn-warning:not(.tt-btn):hover {
  background: #D97706;
  border-color: #D97706;
  color: #fff;
}

.hr-modern .btn-danger:not(.tt-btn) {
  background: var(--tt-live);
  border-color: var(--tt-live);
  color: #fff;
}

.hr-modern .btn-danger:not(.tt-btn):hover {
  background: var(--tt-live-600);
  border-color: var(--tt-live-600);
  color: #fff;
}

.hr-modern .btn-white:not(.tt-btn),
.hr-modern .btn-secondary:not(.tt-btn) {
  background: var(--tt-surface);
  border-color: var(--tt-border-strong);
  color: var(--tt-text-2);
}

.hr-modern .btn-white:not(.tt-btn):hover,
.hr-modern .btn-secondary:not(.tt-btn):hover {
  background: var(--tt-surface-2);
  border-color: var(--tt-primary);
  color: var(--tt-primary);
}

/* Hide stray legacy decorative <hr> the old style.css added between sections */
.hr-modern .all-news-content>hr,
.hr-modern .page-heading-two+hr {
  border: none;
  height: 1px;
  background: var(--tt-border);
  margin: var(--tt-s-4) 0;
}

/* =========================================================================
   22. HERO BANNER FIX — kill conflicts with healthro-modern's .tod-badge
   ========================================================================= */
.hr-modern .tod-hero-main {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  min-height: 380px !important;
  border-radius: var(--tt-r-lg) !important;
  overflow: hidden !important;
  background: #0f172a !important;
  border: none !important;
  aspect-ratio: unset !important;
}

.hr-modern .tod-hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  flex-shrink: unset !important;
}

.hr-modern .tod-hero-img a {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.hr-modern .tod-hero-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  position: static !important;
}

.hr-modern .tod-hero-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 60px var(--tt-s-6) var(--tt-s-6) !important;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 3 !important;
  flex: unset !important;
  align-items: flex-start !important;
}

.hr-modern .tod-hero-caption .tod-hero-meta {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  flex-wrap: wrap;
}

.hr-modern .tod-hero-caption .tod-badge,
.hr-modern .tod-hero-caption .tod-badge-hero,
.hr-modern .tod-hero-meta .tod-badge,
.hr-modern .tod-hero-meta .tod-badge-hero {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 10px !important;
  background: var(--tt-accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--tt-r-sm);
  z-index: auto !important;
  margin: 0 !important;
  line-height: 1.4;
}

.hr-modern .tod-hero-caption .tod-hero-source {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  color: rgba(255, 255, 255, .85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  margin: 0 !important;
}

.hr-modern .tod-hero-caption .tod-hero-source:hover {
  color: #fff !important;
  text-decoration: underline;
}

.hr-modern .tod-hero-caption .tod-hero-title {
  position: static !important;
  font-family: var(--tt-ff-display);
  font-size: clamp(18px, 2.2vw, 28px) !important;
  font-weight: 700;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #fff !important;
  max-width: 100%;
}

.hr-modern .tod-hero-caption .tod-hero-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #fff !important;
  text-decoration: none;
}

.hr-modern .tod-hero-caption .tod-hero-title a:hover {
  color: rgba(255, 255, 255, .85) !important;
}

.hr-modern .tod-hero-caption .tod-hero-date {
  position: static !important;
  display: inline-block;
  font-size: 12px !important;
  color: rgba(255, 255, 255, .7) !important;
  margin: 0 !important;
}

/* Right column stacked-cards fix (keeps the 4 small cards on the right side) */

/* Make the row NOT use gap — Bootstrap negative margins must stay intact */
.hr-modern .tod-hero-row {
  gap: 0 !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  align-items: stretch !important;
}

/* Left col: normal Bootstrap padding */
.hr-modern .tod-hero-left {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Right col: stretch full height, become flex column so stack fills it */
.hr-modern .tod-hero-right {
  padding-left: 15px !important;
  padding-right: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.hr-modern .tod-hero-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--tt-s-2) !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

.hr-modern .tod-hero-stack-item {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 10px !important;
  background: var(--tt-bg) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: var(--tt-r) !important;
  padding: 8px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  align-items: center;
  overflow: hidden;
}

.hr-modern .tod-hero-stack-item:hover {
  background: var(--tt-surface) !important;
  box-shadow: var(--tt-sh-sm);
  border-color: var(--tt-primary-200, #BFDBFE) !important;
}

.hr-modern .tod-hero-stack-thumb {
  display: block !important;
  width: 88px !important;
  height: 66px !important;
  flex: none !important;
  border-radius: var(--tt-r-sm) !important;
  overflow: hidden;
  background: var(--tt-surface-2);
}

.hr-modern .tod-hero-stack-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.hr-modern .tod-hero-stack-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 11px;
  color: var(--tt-text-muted);
}

.hr-modern .tod-hero-stack-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Override legacy .scrollable-news-widget float-based layout from healthro-modern.css */
.hr-modern .s-widget .scrollable-news-widget ul,
.hr-modern .scrollable-news-widget ul {
  display: block;
}

.hr-modern .s-widget .scrollable-news-widget li,
.hr-modern .scrollable-news-widget li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tt-border);
  align-items: start;
  overflow: visible;
  float: none;
}

.hr-modern .s-widget .scrollable-news-widget li:hover,
.hr-modern .scrollable-news-widget li:hover {
  background: transparent;
  padding-left: 0;
}

.hr-modern .s-widget .scrollable-news-widget li:last-child,
.hr-modern .scrollable-news-widget li:last-child {
  border-bottom: none;
}

.hr-modern .s-widget .scrollable-news-widget .sn-thumb,
.hr-modern .scrollable-news-widget .sn-thumb {
  float: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--tt-r-sm);
}

.hr-modern .s-widget .scrollable-news-widget .sn-thumb img,
.hr-modern .scrollable-news-widget .sn-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.hr-modern .s-widget .scrollable-news-widget .sub-head a:hover,
.hr-modern .scrollable-news-widget .sub-head a:hover {
  color: var(--tt-primary);
}

.hr-modern .s-widget .scrollable-news-widget .sub-head-link-date a:hover,
.hr-modern .scrollable-news-widget .sub-head-link-date a:hover {
  color: var(--tt-primary);
}

.hr-modern .s-widget .scrollable-news-widget .sn-sep,
.hr-modern .scrollable-news-widget .sn-sep {
  color: var(--tt-text-soft);
}

/* Override legacy .s-widget > h5 (red border-left, uppercase) — repeat with same specificity, loaded later */
.hr-modern .s-widget>h5,
.hr-modern .s-widget .body-widget-title {
  margin: 0 0 var(--tt-s-4);
  padding: 0 0 var(--tt-s-3);
  background: transparent;
  border-bottom: 1px solid var(--tt-border);
  border-left: none;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--tt-ff-display);
  color: var(--tt-text);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  letter-spacing: normal;
  text-transform: none;
}

.hr-modern .s-widget .widget-content {
  padding: 0;
}

.hr-modern .s-widget:hover {
  box-shadow: none;
}

/* =========================================================================
   23. LAYOUT OVERLAP FIX — main col-lg-8 + sidebar col-lg-4 separation
   ========================================================================= */

/* Bootstrap row containing main column + sidebar:
   - Use controlled gutters via padding instead of gap (gap on flex rows
     can push total width over 100% if negative margins are already present)
   - Force min-width:0 so flex children can't bleed past their track */
.hr-modern .row.tt-stack-3 {
  margin-left: -12px !important;
  margin-right: -12px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.hr-modern .row.tt-stack-3>.col-lg-8,
.hr-modern .row.tt-stack-3>.col-lg-4 {
  padding-left: 12px !important;
  padding-right: 12px !important;
  min-width: 0 !important;
}

/* Clip main column so cards can't visually bleed into sidebar space.
   overflow:clip doesn't create a scroll container (unlike hidden),
   so position:sticky still works on sidebar. */
.hr-modern .row.tt-stack-3>.col-lg-8 {
  overflow: clip;
}

/* Sticky sidebar: give it a z-index above the main column content
   but well below the header (1030) so no header dropdown is covered */
.hr-modern .tt-sidebar.is-sticky {
  position: sticky !important;
  top: calc(var(--tt-header-h) + 16px) !important;
  z-index: 50 !important;
}

/* Stop tt-stack-3 from adding margin-top to the sidebar column
   (it looks fine on mobile stacked layout, but on desktop the flex
   row alignment handles spacing) */
@media (min-width: 992px) {
  .hr-modern .row.tt-stack-3>.col-lg-4 {
    margin-top: 0 !important;
  }
}

/* ── Fix Bootstrap col-6 width/max-width conflicting with CSS Grid ──
   .tod-grid uses display:grid (1fr 1fr) but its children carry
   Bootstrap's col-6 rules (width:50%; max-width:50%).
   In grid context, % widths are of the GRID CONTAINER, so col-6
   makes items 50% of the full grid width = exactly one 1fr column.
   But max-width:50% caps items at half the grid, preventing them from
   filling their cell when Bootstrap loads first.  Override to 100%. */
.hr-modern .tod-grid>.tod-grid-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  min-width: 0 !important;
}

/* Ensure section containers don't overflow their column */
.hr-modern .tod-section {
  overflow: hidden;
  min-width: 0;
}

.hr-modern .tod-main-row {
  min-width: 0;
}

/* Sidebar search widget — reset .hr-search min-width inside sidebar */
.hr-modern .tt-sidebar .hr-search,
.hr-modern .s-widget .hr-search {
  min-width: 0 !important;
  width: 100% !important;
}

.hr-modern .tt-sidebar .s-widget .widget-content.search,
.hr-modern .s-widget .widget-content.search {
  padding: 0 !important;
}

.hr-modern .tt-sidebar .hr-search input[type="search"] {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 13px !important;
}

/* =========================================================================
   24. AD UNITS — Google AdSense between-section slots
   ========================================================================= */
.hr-modern .tt-ad-unit {
  width: 100%;
  overflow: hidden;
  text-align: center;
  margin: var(--tt-s-6) 0;
  background: var(--tt-surface);
  border-radius: var(--tt-r);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-modern .tt-ad-unit.tt-ad-between {
  border-top: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
  padding: var(--tt-s-2) 0;
  background: transparent;
}

.hr-modern .tt-ad-unit ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .hr-modern .tt-ad-unit {
    min-height: 60px;
    margin: var(--tt-s-4) 0;
  }
}

/* =========================================================================
   25. TOP BANNER AD + GUTTER ADS (navbharattimes-style)
   ========================================================================= */

/* Top leaderboard ad strip — between header and banner */
.tt-top-banner-ad {
  background: var(--tt-surface-2, #F1F5F9);
  border-bottom: 1px solid var(--tt-border, #E2E8F0);
  padding: 10px 0;
  text-align: center;
  min-height: 70px;
  display: flex;
  align-items: center;
  max-width: var(--tt-container, 1280px);
  margin-left: auto;
  margin-right: auto;
}

.tt-top-banner-ad .tt-breaking-inner {
  justify-content: center;
  min-height: 60px;
}

.tt-top-banner-ad ins.adsbygoogle {
  display: block !important;
}

/* Desktop: show 970px banner, hide 300x250 mobile banner */
.tt-top-leaderboard-wrap.tt-desktop-ad { display: block; }
.tt-top-leaderboard-wrap.tt-mobile-ad  { display: none; }

@media (max-width: 768px) {
  .tt-top-banner-ad {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 0;
  }
  .tt-top-banner-ad ins.adsbygoogle,
  .tt-top-banner-ad > * {
    max-width: 100%;
  }
  /* Hide desktop-only 970px banner on mobile — creative is centered in 970px so it's invisible when clipped */
  .tt-top-leaderboard-wrap.tt-desktop-ad {
    display: none !important;
  }
  /* Show mobile 300x250 banner instead */
  .tt-top-leaderboard-wrap.tt-mobile-ad {
    display: block !important;
    overflow: hidden;
  }
}

/* ── Mobile responsive layout fixes ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Remove negative side margins on even tod-sections — they cause horizontal overflow on narrow screens */
  .hr-modern .tod-section:nth-child(even) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--tt-s-3);
    padding-right: var(--tt-s-3);
  }

  /* Prevent any stray element from causing horizontal scroll */
  .hr-modern .outer,
  .hr-modern .main-block {
    overflow-x: hidden;
  }

  /* Shrink thumbnail column at 576–768px so text column has room */
  .hr-modern .tt-list-item {
    grid-template-columns: 140px 1fr;
    gap: var(--tt-s-3);
  }

  /* Reduce card padding on mid-size phones */
  .hr-modern .tt-card,
  .hr-modern .tt-list-item {
    padding: var(--tt-s-3);
  }
}

@media (max-width: 480px) {
  /* Stack list items vertically on small phones */
  .hr-modern .tt-list-item {
    grid-template-columns: 1fr;
  }

  /* Full-width thumbnail when stacked */
  .hr-modern .tt-list-media {
    width: 100%;
  }
}

/* Dev placeholder */
.tt-top-ad-placeholder {
  width: 100%;
  max-width: 970px;
  height: 90px;
  border: 2px dashed #4285f4;
  border-radius: 8px;
  background: #f4f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #4285f4;
  margin: 0 auto;
}

/* ── Gutter / side ads  (NBT-style fixed left + right) ─────────────── */
.tt-gutter-ad {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 160px;
  z-index: 500;
  display: none;
  background: transparent;
  overflow: hidden;
  align-items: flex-start;
  padding-top: 10px;
}

.tt-gutter-left {
  flex-direction: column;
  gap: 10px;
}

.tt-gutter-right {
  flex-direction: column;
  gap: 10px;
}

.tt-gutter-frame {
  display: block;
  width: 160px;
  height: 600px;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

/* Gutter ads are anchored to the 1100px content edge (half = 550px) with a fixed
   10px gap: ad inner edge sits at 50% − 560px, so it NEVER overlaps content.
   On narrow screens the OUTER part of the ad simply clips off the screen edge
   (NBT-style) instead of pushing onto the content. Shown from 1300px viewport. */
@media (min-width: 1300px) {
  .tt-gutter-left {
    display: flex;
    left: calc(50% - 550px - 170px);
  }

  .tt-gutter-right {
    display: flex;
    right: calc(50% - 550px - 170px);
  }
}

/* ── Placeholder card (local dev) ── */
.tt-gutter-placeholder {
  width: 160px;
  height: 600px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.tt-gutter-placeholder-sm {
  width: 160px;
  height: 250px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* "Advertisement" label strip */
.tt-gad-label {
  width: 100%;
  background: #f0f0f0;
  color: #888;
  font-size: 9px;
  text-align: center;
  padding: 3px 0;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/* Inner content area */
.tt-gad-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  gap: 10px;
  text-align: center;
  background: #fff;
}

.tt-gad-inner-sm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  gap: 8px;
  text-align: center;
  background: #fff;
}

/* Logo */
.tt-gad-logo {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -.5px;
  line-height: 1;
}

.tt-gad-logo span {
  color: #e8272a;
}

.tt-gad-logo-sub {
  font-size: 8px;
  color: #aaa;
  margin-top: -4px;
}

/* Separator */
.tt-gad-sep {
  width: 100%;
  height: 1px;
  background: #eee;
}

/* Headline */
.tt-gad-headline {
  font-size: 13px;
  color: #222;
  line-height: 1.5;
  font-weight: 400;
}

.tt-gad-headline b {
  color: #e8272a;
  font-weight: 700;
}

/* Badges */
.tt-gad-badge-blue {
  width: 100%;
  padding: 6px 4px;
  border: 2px solid #1a73e8;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #1a73e8;
  background: #fff;
}

.tt-gad-badge-fill {
  width: 100%;
  padding: 6px 4px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #1a73e8;
}

.tt-gad-small-text {
  font-size: 10px;
  color: #888;
}

/* Bottom image strip */
.tt-gad-img {
  width: 100%;
  flex-shrink: 0;
  background: linear-gradient(170deg, #dce8f8 0%, #c0d8f0 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.tt-gad-img-tall {
  height: 200px;
}

.tt-gad-img-sm {
  height: 90px;
}

/* Person SVG wrapper */
.tt-gad-person {
  width: 120px;
  height: 100%;
  display: block;
}

/* ── Left ad: real photo area ── */
.tt-gad-photo-wrap {
  width: 100%;
  height: 210px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #b8d4f0 0%, #8ab8e8 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.tt-gad-photo-img {
  width: 148px;
  height: 185px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
}

/* ── Right ads: full-photo card (NBT celebrity style) ── */
.tt-gad-photo-card {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tt-gad-card-photo {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.tt-gad-card-footer {
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  flex-shrink: 0;
}

.tt-gad-info-icon {
  color: #cce4ff;
  font-size: 11px;
  letter-spacing: 2px;
}

.tt-gad-card-label {
  color: #ddd;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Top banner wider on large screens */
@media (min-width: 1280px) {
  .tt-top-ad-placeholder {
    max-width: 970px;
    height: 90px;
  }
}


/* ============================================================
   TechToday 2026 — Polish pass (Sections 2–8 of the redesign brief)
   Appended last so it overrides the rest of the cascade.
   ============================================================ */

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

.hr-modern body,
.hr-modern .tt-container,
.hr-modern .tt-card,
.hr-modern .tt-section,
.hr-modern .tt-header {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.hr-modern .tt-card-title,
.hr-modern .article-card h3,
.hr-modern [class*="card"] h3,
.hr-modern .card-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #111827;
}

.hr-modern .tt-tod-hero-title,
.hr-modern .featured-title,
.hr-modern .hero-title,
.hr-modern .main-article h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
}

.hr-modern .tt-meta,
.hr-modern .meta-text,
.hr-modern .article-meta,
.hr-modern .source-name {
  font-size: 12px;
  color: #6B7280;
  letter-spacing: 0.2px;
}

/* ---------- Section 2: header / logo — visibility fix ---------- */
.hr-modern .tt-header {
  border-bottom: 3px solid #1d4ed8 !important;
}

.hr-modern .tt-header-main {
  display: flex !important;
  align-items: center !important;
  min-height: 80px !important;
  background: #ffffff !important;
}

/* Brand / logo area — image only, no text */
.hr-modern .tt-brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  flex-shrink: 0;
}

/* Logo image — proper sizing, drop-shadow for depth on white bg */
.hr-modern .tt-brand-img,
.hr-modern .tt-brand img {
  height: 68px !important;
  width: auto !important;
  display: block !important;
  max-width: 220px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18)) !important;
  flex-shrink: 0;
}

@media (max-width: 768px) {

  .hr-modern .tt-brand-img,
  .hr-modern .tt-brand img {
    height: 50px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 480px) {

  .hr-modern .tt-brand-img,
  .hr-modern .tt-brand img {
    height: 42px !important;
    max-width: 130px !important;
  }
}

/* ---------- Section 3: image fit for all cards / thumbs ---------- */
.hr-modern *,
.hr-modern *::before,
.hr-modern *::after {
  box-sizing: border-box;
}

.hr-modern img {
  max-width: 100%;
  height: auto;
}

.hr-modern body {
  overflow-x: hidden;
}

.hr-modern .tt-card-media,
.hr-modern .news-card .card-media,
.hr-modern .article-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.hr-modern .tt-card-media img,
.hr-modern .news-card img,
.hr-modern .article-thumb img,
.hr-modern [class*="card"] img,
.hr-modern [class*="news"] img,
.hr-modern [class*="article"] img,
.hr-modern .tt-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top;
  display: block;
}

/* Don't squish logo, badges, social icons, ad markers or hero images,
   and — critically — don't crop the article detail hero image or any
   image the editor pastes into article body content. Uploaded photos
   should always render at their natural aspect ratio, full-size. */
.hr-modern .tt-brand img,
.hr-modern .tt-footer-brand img,
.hr-modern .tt-badge img,
.hr-modern .tt-utility-right img,
.hr-modern .tt-footer-socials img,
.hr-modern .tod-hero-img img,
.hr-modern .tod-hero-stack-thumb img,
.hr-modern .vg-thumb img,
.hr-modern .tt-article-image img,
.hr-modern .tt-article-body img,
.hr-modern figure.tt-article-image img,
.hr-modern .article-body img,
.hr-modern .post-content img,
.hr-modern .news-body img {
  aspect-ratio: auto !important;
  height: auto !important;
  width: auto;
  max-width: 100%;
  object-fit: contain !important;
}

/* Article body images: center, fit to column, keep natural aspect ratio */
.hr-modern .tt-article-body img,
.hr-modern .article-body img,
.hr-modern .post-content img,
.hr-modern .news-body img {
  display: block;
  margin: 18px auto;
  max-width: 100%;
  border-radius: 8px;
}

.hr-modern .tod-hero-img img,
.hr-modern .tod-hero-stack-thumb img {
  object-fit: cover !important;
  height: 100% !important;
}

/* ---------- Section 5: article card upgrades ---------- */
.hr-modern .tt-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.hr-modern .tt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.hr-modern .category-pill,
.hr-modern .tt-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: #EFF6FF;
  color: #1D4ED8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
}

.hr-modern .tt-meta .tt-read-time {
  color: #6B7280;
  font-size: 12px;
  margin-left: 4px;
}

/* ---------- Section 6: hide broken-hash social icons site-wide ---------- */
.hr-modern .tt-footer-socials a[href="#"],
.hr-modern .tt-utility-right a[href="#"],
.hr-modern .social-links a[href="#"],
.hr-modern a[href="#"][class*="social"] {
  display: none !important;
}

/* ---------- Section 8: disabled-look auth buttons ---------- */
.hr-modern .tt-btn.signin[href="#"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- AdSense placeholder fallback in sidebar ---------- */
/* If a sidebar ad fails to render, show a subtle newsletter CTA. */
.hr-modern .tt-sidebar .tt-ad-unit:empty::before,
.hr-modern .tt-sidebar .adsbygoogle:empty {
  display: block;
  content: "Subscribe to our newsletter ↓";
  background: #F9FAFB;
  border: 1px dashed #E5E7EB;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: #9CA3AF;
  font-size: 13px;
  min-height: 80px;
}

/* ---------- Section 4: mobile responsive ---------- */

/* Tablet / small desktop */
@media (max-width: 1024px) {
  .hr-modern .row.tt-stack-3 {
    display: block;
  }

  .hr-modern .row.tt-stack-3>.col-lg-8,
  .hr-modern .row.tt-stack-3>.col-lg-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hr-modern .tt-sidebar.is-sticky {
    position: static !important;
  }

  .hr-modern .tt-trending-grid,
  .hr-modern .tt-grid,
  .hr-modern [class*="news-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone */
@media (max-width: 768px) {
  .hr-modern .tt-header-main {
    padding: 0 16px;
    min-height: 60px !important;
  }

  .hr-modern .tt-brand {
    padding-right: 16px;
  }

  .hr-modern .tt-brand img {
    height: 44px !important;
    max-height: 44px !important;
    transform: scale(1.35);
    transform-origin: left center;
  }

  .hr-modern .tt-cat-strip {
    font-size: 13px;
  }

  .hr-modern .tt-breaking,
  .hr-modern .breaking-ticker {
    font-size: 12px;
  }

  /* Hide desktop search input, leave the icon-toggle to open the drawer */
  .hr-modern .tt-search {
    display: none !important;
  }

  /* Gutter ads are hidden by default (display:none on .tt-gutter-ad base rule);
     only visible at ≥1300px via the media query above. */

  /* Hide utility-right secondary chrome below tablet */
  .hr-modern .tt-utility {
    font-size: 11px;
  }
}

@media (max-width: 640px) {

  .hr-modern .tt-trending-grid,
  .hr-modern .tt-grid,
  .hr-modern [class*="news-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hr-modern .tod-hero-row {
    display: block !important;
  }

  .hr-modern .tod-hero-left,
  .hr-modern .tod-hero-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .hr-modern .tod-hero-main {
    min-height: 240px !important;
  }

  .hr-modern .tt-tod-hero-title {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  .hr-modern h1,
  .hr-modern h2 {
    font-size: clamp(18px, 4vw, 28px) !important;
  }

  .hr-modern .tt-card-title,
  .hr-modern .card-title,
  .hr-modern h3 {
    font-size: clamp(14px, 3.5vw, 18px) !important;
  }

  .hr-modern .tt-meta,
  .hr-modern .meta-info {
    font-size: 11px !important;
  }

  .hr-modern .tt-breaking-track,
  .hr-modern .breaking-ticker-wrapper {
    font-size: 11px !important;
  }

  /* Newsletter section / form */
  .hr-modern .tt-newsletter,
  .hr-modern .newsletter-section {
    padding: 24px 16px !important;
  }

  .hr-modern .tt-newsletter input[type="email"],
  .hr-modern .newsletter-section input[type="email"] {
    width: 100% !important;
  }

  /* Footer */
  .hr-modern .tt-footer-top,
  .hr-modern footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 380px) {
  .hr-modern body {
    font-size: 14px;
  }

  .hr-modern .tt-trending-grid,
  .hr-modern .tt-grid,
  .hr-modern [class*="news-grid"] {
    grid-template-columns: 1fr !important;
  }

  .hr-modern .tt-footer-top,
  .hr-modern footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Navbar mobile responsiveness
   (utility bar + main bar + category strip + breaking ticker)
   ============================================================ */

/* ── Tablet ≤991px: switch to mobile chrome ── */
@media (max-width: 991px) {
  .hr-modern .tt-header {
    position: relative;
  }

  .hr-modern .tt-header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    min-height: 64px !important;
  }

  .hr-modern .tt-brand {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 14px;
  }

  .hr-modern .tt-header-actions {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
  }

  /* Hide desktop CTAs (Sign In / Subscribe / Admin Panel) below tablet */
  .hr-modern .tt-header-actions .tt-btn:not(.tt-mobile-toggle) {
    display: none !important;
  }

  /* Search input collapses on tablet */
  .hr-modern .tt-search {
    display: none !important;
  }

  /* Hamburger only on phones — hide on tablet (768-991px) */
  .hr-modern .tt-mobile-toggle {
    display: none !important;
  }

  .hr-modern .tt-search-toggle {
    display: none !important;
  }
}

/* ── Phone ≤767px: show hamburger ── */
@media (max-width: 767px) {
  .hr-modern .tt-mobile-toggle {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .hr-modern .tt-search-toggle {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ── Phone ≤768px: tighten utility & category strip ── */
@media (max-width: 768px) {

  /* Utility bar: hide the date + secondary chrome to free space */
  .hr-modern .tt-utility {
    padding: 4px 0;
    font-size: 11px;
  }

  .hr-modern .tt-utility-inner {
    padding: 0 14px !important;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .hr-modern .tt-utility-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hr-modern .tt-utility-left .tt-dot,
  .hr-modern .tt-utility-left span:nth-child(n+4) {
    display: none;
  }

  .hr-modern .tt-utility-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  /* Drop the social icons on phones — gtranslate keeps */
  .hr-modern .tt-utility-right a[aria-label="Facebook"],
  .hr-modern .tt-utility-right a[aria-label="Twitter / X"],
  .hr-modern .tt-utility-right a[aria-label="Instagram"],
  .hr-modern .tt-utility-right a[aria-label="YouTube"],
  .hr-modern .tt-utility-right .tt-dot {
    display: none !important;
  }

  /* Main bar: tighter padding, smaller icon buttons */
  .hr-modern .tt-header-main {
    padding: 8px 12px !important;
    min-height: 60px !important;
  }

  .hr-modern .tt-search-toggle,
  .hr-modern .tt-mobile-toggle {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  /* Logo size: layout 44px box, scaled visually */
  .hr-modern .tt-brand img {
    height: 44px !important;
    max-height: 44px !important;
    transform: scale(1.35);
    transform-origin: left center;
  }

  .hr-modern .tt-brand {
    padding-right: 18px;
  }

  /* Category strip: full-bleed horizontal scroll */
  .hr-modern .tt-cat-strip {
    font-size: 13px;
  }

  .hr-modern .tt-cat-strip-inner {
    padding: 0 8px !important;
  }

  .hr-modern .tt-cat-scroll {
    gap: 4px !important;
    padding: 4px 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .hr-modern .tt-cat-strip a {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* Hide the gradient fades so they don't darken every other tab */
  .hr-modern .tt-cat-strip-inner::before,
  .hr-modern .tt-cat-strip-inner::after {
    display: none !important;
  }

  /* Breaking ticker: tighter */
  .hr-modern .tt-breaking,
  .hr-modern .breaking-ticker {
    font-size: 11.5px;
  }

  .hr-modern .tt-breaking-inner {
    padding: 0 12px 0 0;
  }

  .hr-modern .tt-breaking-label {
    padding: 0 10px !important;
    font-size: 10px !important;
  }

  .hr-modern .tt-breaking-track a {
    font-size: 11.5px;
    padding-right: 12px;
  }

  /* Skip link should stay invisible until focus, not overlap mobile bar */
  .hr-modern .tt-skip:not(:focus) {
    position: absolute;
    left: -9999px;
  }
}

/* ── Small phone ≤480px: ultra-compact ── */
@media (max-width: 480px) {
  .hr-modern .tt-utility-inner {
    padding: 0 10px !important;
  }

  .hr-modern .tt-utility-left span:nth-child(n+2) {
    display: none;
  }

  .hr-modern .tt-utility {
    font-size: 10.5px;
  }

  .hr-modern .tt-header-main {
    padding: 6px 10px !important;
    min-height: 54px !important;
    gap: 4px !important;
  }

  .hr-modern .tt-brand img {
    height: 40px !important;
    max-height: 40px !important;
    transform: none !important;
  }

  .hr-modern .tt-brand {
    padding-right: 10px;
    border-right: none;
  }

  .hr-modern .tt-search-toggle,
  .hr-modern .tt-mobile-toggle {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .hr-modern .tt-cat-strip-inner {
    padding: 0 6px !important;
  }

  .hr-modern .tt-cat-strip a {
    padding: 5px 9px !important;
    font-size: 12px !important;
  }

  .hr-modern .tt-breaking-label {
    padding: 3px 7px !important;
    font-size: 9.5px !important;
  }

  .hr-modern .tt-breaking-track a {
    font-size: 11px;
  }
}

/* ── 310–320px: smallest phones ── */
@media (max-width: 320px) {
  .hr-modern .tt-header-main {
    padding: 4px 8px !important;
    min-height: 50px !important;
  }

  .hr-modern .tt-brand img {
    height: 32px !important;
    max-height: 32px !important;
    transform: none !important;
  }

  .hr-modern .tt-brand {
    padding-right: 6px;
    border-right: none;
  }

  .hr-modern .tt-search-toggle,
  .hr-modern .tt-mobile-toggle {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .hr-modern .tt-utility {
    font-size: 9.5px;
  }

  .hr-modern .tt-utility-inner {
    padding: 0 8px !important;
  }

  .hr-modern .tt-cat-strip a {
    padding: 4px 7px !important;
    font-size: 11.5px !important;
  }

  .hr-modern .tt-breaking-label {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
}

/* ── Hide category nav strip on mobile ── */
@media (max-width: 768px) {
  .hr-modern .tt-cat-strip {
    display: none !important;
  }
}

/* ── Mobile topbar responsive fixes ── */
/* Ensure topbar never causes horizontal scroll */
.tt-topbar {
  overflow: hidden;
}

.tt-topbar-langs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}

.tt-topbar-langs::-webkit-scrollbar {
  display: none;
}

/* Tagline: truncate gracefully on tiny screens */
@media (max-width: 400px) {
  .hr-modern .tt-brand-tagline {
    font-size: 9px !important;
    padding-left: 38px !important;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Mobile drawer: language list styling */
.hr-modern .tt-mobile-sub a {
  padding-left: 44px;
}

/* ==========================================================================
   Sidebar / Widget Search Bar  —  image3 style
   Clean single-line bar: input on left, icon button on right
   ========================================================================== */
.hr-modern .s-widget .hr-search,
.hr-modern .widget-content .hr-search {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #d1d9e6 !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  transition: border-color .2s, box-shadow .2s;
  min-width: unset !important;
  width: 100%;
}

.hr-modern .s-widget .hr-search:focus-within,
.hr-modern .widget-content .hr-search:focus-within {
  border-color: var(--tt-primary, #3b5bdb) !important;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .13) !important;
  background: #fff !important;
}

.hr-modern .s-widget .hr-search input[type="text"],
.hr-modern .s-widget .hr-search input[type="search"],
.hr-modern .widget-content .hr-search input[type="text"],
.hr-modern .widget-content .hr-search input[type="search"] {
  flex: 1 1 0% !important;
  width: 0 !important;
  /* flex-basis handled by flex: 1, prevents overflow */
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 12px 0 16px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #1a202c !important;
  font-family: inherit;
  box-shadow: none !important;
}

.hr-modern .s-widget .hr-search input::placeholder,
.hr-modern .widget-content .hr-search input::placeholder {
  color: #9aa5b8 !important;
  font-size: 14px;
}

/* Hide native clear button inside widget search */
.hr-modern .s-widget .hr-search input[type="search"]::-webkit-search-cancel-button,
.hr-modern .s-widget .hr-search input[type="text"]::-webkit-search-cancel-button {
  display: none;
}

.hr-modern .s-widget .hr-search button,
.hr-modern .widget-content .hr-search button {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-left: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  padding: 0 !important;
  line-height: 1;
  transition: color .18s, background .18s;
}

.hr-modern .s-widget .hr-search button:hover,
.hr-modern .widget-content .hr-search button:hover {
  color: var(--tt-primary, #3b5bdb) !important;
  background: #eef2ff !important;
}

/* =========================================================================
   MOBILE ALIGNMENT — section header & card grid
   ========================================================================= */

/* ── ≤575px: prevent section title from wrapping on small phones ── */
@media (max-width: 575px) {
  .hr-modern .tt-section-title {
    font-size: 15px;
    min-width: 0;
    flex-shrink: 1;
  }

  .hr-modern .tt-section-title::before {
    height: 15px;
  }

  .hr-modern .tt-section-link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
  }

  .hr-modern .tt-section-head {
    gap: var(--tt-s-2);          /* 8px — tighter than desktop 16px */
    margin-bottom: var(--tt-s-4); /* 16px instead of 24px */
  }

  /* Slightly tighter card gap on single-column mobile */
  .hr-modern .tt-grid {
    gap: var(--tt-s-3); /* 12px instead of 16px */
  }

  /* Card media: block-level so aspect-ratio works reliably */
  .hr-modern .tt-card-media {
    display: block;
  }
}

/* ── ≤380px: very small phones — tighten further ── */
@media (max-width: 380px) {
  .hr-modern .tt-section-title {
    font-size: 13px;
  }

  .hr-modern .tt-section-title::before {
    height: 13px;
  }

  .hr-modern .tt-section-link {
    font-size: 11px;
  }
}

/* ── Mobile: equal margins on both sides of card grid ──
   On single-column mobile the desktop row gutter math (row -12px + col +12px)
   fights with the !important rule and can produce unequal visual margins.
   Zero out both sides so the tt-container's own 16px padding is the sole
   horizontal spacing — identical left and right. */
@media (max-width: 1024px) {
  .hr-modern .row.tt-stack-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hr-modern .row.tt-stack-3 > .col-lg-8,
  .hr-modern .row.tt-stack-3 > .col-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
  }
}

/* ============================================================
   News Adda logo (transparent PNG) - header, footer, tagline
   Higher-specificity selectors so these win over the older
   per-breakpoint rules in theme-2026.css and landing-2026.css.
   ============================================================ */
.hr-modern .tt-header-main .tt-brand img,
.hr-modern .tt-header-main .tt-brand .tt-brand-img {
  height: 58px !important;
  max-height: 58px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;          /* no shadow: logo sits directly on the header */
  background: transparent !important;
  box-shadow: none !important;
}

.hr-modern .tt-header-main .tt-brand {
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.hr-modern .tt-header-main .tt-brand .tt-brand-tagline {
  align-self: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  width: 100%;
}

.hr-modern .tt-footer .tt-footer-brand img {
  height: 54px !important;
  max-height: 54px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  filter: none !important;          /* keep the real logo colours on the dark footer */
  background: transparent !important;
}

@media (max-width: 768px) {
  .hr-modern .tt-header-main .tt-brand img,
  .hr-modern .tt-header-main .tt-brand .tt-brand-img { height: 44px !important; max-height: 44px !important; max-width: 215px !important; }
  .hr-modern .tt-footer .tt-footer-brand img { height: 46px !important; max-height: 46px !important; max-width: 230px !important; }
}

@media (max-width: 480px) {
  .hr-modern .tt-header-main .tt-brand img,
  .hr-modern .tt-header-main .tt-brand .tt-brand-img { height: 36px !important; max-height: 36px !important; max-width: 175px !important; }
  .hr-modern .tt-footer .tt-footer-brand img { height: 42px !important; max-height: 42px !important; max-width: 210px !important; }
}

/* ============================================================
   Trending Now - auto slide, right to left
   ============================================================ */
.hr-modern .tt-trending-slider {
  --tt-card-w: 262px;
  --tt-card-gap: 18px;
  position: relative;
  overflow: hidden;
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.hr-modern .tt-trending-slider .tt-trending-track {
  display: flex !important;
  width: max-content;
  animation: tt-trending-slide var(--tt-trend-dur, 40s) linear infinite;
  will-change: transform;
}

/* the track holds the cards twice, so moving by exactly half loops with no jump */
@keyframes tt-trending-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hr-modern .tt-trending-slider:hover .tt-trending-track,
.hr-modern .tt-trending-slider:focus-within .tt-trending-track {
  animation-play-state: paused;
}

/* fixed-width vertical cards at every screen size (overrides the old grid / mobile row layouts) */
.hr-modern .tt-trending-slider .tt-trending-card {
  display: block !important;
  flex: 0 0 var(--tt-card-w);
  width: var(--tt-card-w);
  margin-right: var(--tt-card-gap);
}
.hr-modern .tt-trending-slider .tt-trending-card-media {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 768px) {
  .hr-modern .tt-trending-slider { --tt-card-w: 226px; --tt-card-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-modern .tt-trending-slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .hr-modern .tt-trending-slider .tt-trending-track { animation: none; }
  .hr-modern .tt-trending-slider .tt-trending-card[aria-hidden="true"] { display: none !important; }
}

/* ============================================================
   Featured hero - auto-rotating slides (fade), dots
   ============================================================ */
.hr-modern .tt-hero2-main.tt-hero2-slider::after { display: none; }   /* gradient now lives on each slide */

.hr-modern .tt-hero2-slider .tt-hero2-main-link.tt-hero2-slide {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hr-modern .tt-hero2-slider .tt-hero2-main-link.tt-hero2-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease, visibility 0s;
}
.hr-modern .tt-hero2-slider .tt-hero2-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(10,15,35,0.92) 0%, rgba(10,15,35,0.72) 38%, rgba(10,15,35,0.10) 62%, rgba(10,15,35,0.00) 78%);
  pointer-events: none;
}

.hr-modern .tt-hero2-dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;
  display: flex;
  gap: 8px;
}
.hr-modern .tt-hero2-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.hr-modern .tt-hero2-dot:hover { background: rgba(255, 255, 255, .8); }
.hr-modern .tt-hero2-dot.is-active { width: 26px; background: #fff; }
.hr-modern .tt-hero2-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hr-modern .tt-hero2-slider .tt-hero2-main-link.tt-hero2-slide,
  .hr-modern .tt-hero2-slider .tt-hero2-main-link.tt-hero2-slide.is-active { transition: none; }
}

/* Slides are absolutely positioned, so the slider must own its height
   (custom.css forces .tt-hero2-main { min-height: 0 !important }). On desktop it also stretches to the Latest News rail. */
.hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 400px !important; }
@media (max-width: 1024px) { .hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 380px !important; } }
@media (max-width: 768px)  { .hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 360px !important; } }
@media (max-width: 640px)  { .hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 320px !important; } }
@media (max-width: 480px)  { .hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 290px !important; } }
@media (max-width: 380px)  { .hr-modern .tt-hero2-main.tt-hero2-slider { min-height: 250px !important; } }

/* Sidebar widgets spread across the full width when the story column is empty */
.hr-modern .tt-sidebar.tt-sidebar-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
  position: static;
}
.hr-modern .tt-sidebar.tt-sidebar-wide > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Homepage (wide desktop): the hero sits in a full-width container, so drop #tt-main's side padding and
   widen the story/sidebar row by the column gutters. Trending / More Stories / sidebar / Featured News then
   line up exactly with the hero and the Latest News card above. (Narrower screens keep the normal padding.) */
@media (min-width: 1160px) {
  .hr-modern .main-block #tt-main.tt-container.tt-home {
    padding-left: 0;
    padding-right: 0;
  }
  .hr-modern .main-block #tt-main.tt-home > .row.tt-stack-3 {
    width: calc(100% + 24px);
    max-width: none;
  }
}

/* Homepage (wide desktop): Featured News strip above the footer also lines up with the hero edges */
@media (min-width: 1160px) {
  .hr-modern.home .tt-prefooter-featured {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Hero dots: same look, but a larger invisible touch area so they are easy to tap on phones */
.hr-modern .tt-hero2-dot { position: relative; }
.hr-modern .tt-hero2-dot::after {
  content: "";
  position: absolute;
  top: -11px;
  bottom: -11px;
  left: -5px;
  right: -5px;
}

/* More Stories on phones: 2 columns x 2 rows (first 4 stories only), compact cards. Desktop shows 6 cards (3 columns x 2 rows). */
@media (max-width: 767px) {
  .hr-modern .tt-more-stories .tt-grid.tt-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;   /* beats the older "<=640px: 1fr !important" rule */
    gap: 12px;
  }
  .hr-modern .tt-more-stories .tt-grid > .tt-card:nth-child(n+5) { display: none; }

  .hr-modern .tt-more-stories .tt-card-body { padding: 10px 10px 12px; }
  .hr-modern .tt-more-stories .tt-card-title {
    font-size: 13px !important;
    line-height: 1.32 !important;
    margin: 0 0 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hr-modern .tt-more-stories .tt-meta-date { font-size: 10.5px; }
}

/* Hero + Latest News on phones/tablets: keep the same side gutter as the rest of the page.
   (healthro-modern.css zeroes the banner container padding and landing-2026.css pulls the row out with negative margins,
   which made the Featured card and Latest News card touch the screen edges.) */
@media (max-width: 1024px) {
  .hr-modern .banner-block {
    padding-left: var(--tt-s-6) !important;
    padding-right: var(--tt-s-6) !important;
  }
  .hr-modern .banner-block .tt-hero2-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hr-modern .banner-block .tt-hero2-main-col,
  .hr-modern .banner-block .tt-hero2-rail-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .hr-modern .banner-block {
    padding-left: var(--tt-s-4) !important;
    padding-right: var(--tt-s-4) !important;
  }
}

/* Latest News rail: bigger, vertically centred headlines (next to the thumbnail), cut with "..." after 3 lines */
.hr-modern .tt-latest-rail .tt-latest-rail-item {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.hr-modern .tt-latest-rail .tt-latest-rail-thumb {
  width: 88px;
  height: 88px;
}
.hr-modern .tt-latest-rail .tt-latest-rail-body {
  justify-content: center;
  min-width: 0;
}
.hr-modern .tt-latest-rail .tt-latest-rail-item .tt-latest-rail-headline {
  font-size: 15px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .hr-modern .tt-latest-rail .tt-latest-rail-item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .hr-modern .tt-latest-rail .tt-latest-rail-thumb { width: 84px; height: 84px; }
  .hr-modern .tt-latest-rail .tt-latest-rail-item .tt-latest-rail-headline { font-size: 14.5px !important; }
}

/* New News Adda logo (wider/taller artwork): a little more height in the header; white plate in the dark footer so the navy "Adda" stays readable */
.hr-modern .tt-header-main .tt-brand img,
.hr-modern .tt-header-main .tt-brand .tt-brand-img {
  height: 64px !important;
  max-height: 64px !important;
  max-width: 200px !important;
}
.hr-modern .tt-footer .tt-footer-brand img {
  height: 72px !important;
  max-height: 72px !important;
  max-width: 220px !important;
  background: #fff !important;
  padding: 6px 12px;
  border-radius: 10px;
  filter: none !important;
}
@media (max-width: 768px) {
  .hr-modern .tt-header-main .tt-brand img,
  .hr-modern .tt-header-main .tt-brand .tt-brand-img { height: 52px !important; max-height: 52px !important; max-width: 160px !important; }
  .hr-modern .tt-footer .tt-footer-brand img { height: 60px !important; max-height: 60px !important; max-width: 190px !important; }
}
@media (max-width: 480px) {
  .hr-modern .tt-header-main .tt-brand img,
  .hr-modern .tt-header-main .tt-brand .tt-brand-img { height: 46px !important; max-height: 46px !important; max-width: 140px !important; }
  .hr-modern .tt-footer .tt-footer-brand img { height: 54px !important; max-height: 54px !important; max-width: 170px !important; }
}

/* Category / list pages: show the WHOLE photo (no cropping) at its natural proportions */
.hr-modern .tt-list-media {
  aspect-ratio: auto;
  align-self: start;
}
.hr-modern .tt-list-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Hindi (Devanagari) headlines: the top matras were clipped by tight line-height + overflow:hidden. Give them room. */
html[lang="hi"] .hr-modern .tt-list-title,
html[lang="hi"] .hr-modern .tt-card-title,
html[lang="hi"] .hr-modern .tt-card-feature-title,
html[lang="hi"] .hr-modern .tt-card-row-title,
html[lang="hi"] .hr-modern .tt-pfcard-title,
html[lang="hi"] .hr-modern .tt-hero2-title,
html[lang="hi"] .hr-modern .tt-hero2-headline,
html[lang="hi"] .hr-modern .tt-latest-rail-headline,
html[lang="hi"] .hr-modern .tt-rank-title,
html[lang="hi"] .hr-modern .tt-trending-title,
html[lang="hi"] .hr-modern .tt-more-stories .tt-card-title,
html[lang="hi"] .hr-modern .tod-card-title,
html[lang="hi"] .hr-modern .tod-card-title-lg,
html[lang="hi"] .hr-modern .tod-card-title-sm,
html[lang="hi"] .hr-modern .tod-hero-title,
html[lang="hi"] .hr-modern .tod-hero-stack-title,
html[lang="hi"] .hr-modern .tod-strip-title,
html[lang="hi"] .hr-modern .tt-article-title,
html[lang="hi"] .hr-modern .tt-breaking-track a,
html.translated-ltr .hr-modern .tt-list-title,
html.translated-ltr .hr-modern .tt-card-title,
html.translated-ltr .hr-modern .tt-card-feature-title,
html.translated-ltr .hr-modern .tt-card-row-title,
html.translated-ltr .hr-modern .tt-pfcard-title,
html.translated-ltr .hr-modern .tt-hero2-title,
html.translated-ltr .hr-modern .tt-hero2-headline,
html.translated-ltr .hr-modern .tt-latest-rail-headline,
html.translated-ltr .hr-modern .tt-rank-title,
html.translated-ltr .hr-modern .tt-trending-title,
html.translated-ltr .hr-modern .tt-more-stories .tt-card-title,
html.translated-ltr .hr-modern .tod-card-title,
html.translated-ltr .hr-modern .tod-card-title-lg,
html.translated-ltr .hr-modern .tod-card-title-sm,
html.translated-ltr .hr-modern .tod-hero-title,
html.translated-ltr .hr-modern .tod-hero-stack-title,
html.translated-ltr .hr-modern .tod-strip-title,
html.translated-ltr .hr-modern .tt-article-title {
  line-height: 1.6 !important;
  padding-top: 0.12em;
  padding-bottom: 0.06em;
}

/* Accessibility (Lighthouse): bigger tap spacing for the hero dots, stronger text contrast on small grey text */
.hr-modern .tt-hero2-dots { gap: 16px; }
.hr-modern .tt-pfcard-date { color: #4B5563; font-size: 11px; }
.hr-modern .tt-trending-sub { color: #4B5563 !important; }

/* ===== Live blog ===== */
.na-live { margin: 24px 0; }
.na-live-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.na-live-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--tt-live, #DC2626); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 4px 12px; border-radius: 4px; }
.na-live-badge.is-ended { background: #6B7280; }
.na-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: na-pulse 1.2s infinite; }
@keyframes na-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.na-live-sub { color: #6B7280; font-size: 13px; }
.na-live-list { border-left: 3px solid #E5E7EB; margin-left: 4px; }
.na-live-item { display: flex; gap: 14px; padding: 0 0 20px 16px; position: relative; }
.na-live-item::before { content: ""; position: absolute; left: -8px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--tt-live, #DC2626); border: 2px solid #fff; }
.na-live-time { min-width: 62px; font-weight: 700; font-size: 13px; color: var(--tt-live, #DC2626); line-height: 1.3; }
.na-live-time small { display: block; color: #9CA3AF; font-weight: 500; }
.na-live-card { flex: 1; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 12px 14px; }
.na-live-card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.na-live-card p { margin: 0; font-size: 16px; line-height: 1.7; }
.na-live-card img { max-width: 100%; height: auto; border-radius: 6px; margin-top: 10px; }
.na-live-pin { display: inline-block; font-size: 12px; font-weight: 600; color: #B45309; margin-bottom: 4px; }
.na-live-item.is-pinned .na-live-card { background: #FFFBEB; border-color: #FCD34D; }
.na-live-item.is-new .na-live-card { animation: na-flash 2.5s ease-out; }
@keyframes na-flash { from { background: #FEF3C7; } to { background: #F9FAFB; } }
.na-live-empty { color: #6B7280; padding-left: 16px; }

/* ===== LIVE pill on cards (hero, latest rail) ===== */
.na-live-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--tt-live, #DC2626); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .08em; line-height: 1; padding: 5px 10px; border-radius: 4px; margin: 0 8px 8px 0; vertical-align: middle; }
.na-live-pill.is-small { font-size: 10px; padding: 3px 7px; margin: 0 6px 0 0; }
.na-live-pill .na-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block; animation: na-pulse 1.2s infinite; }

/* keep the pill as wide as its text, even inside a stretching flex column */
.na-live-pill { align-self: flex-start; width: auto; max-width: max-content; flex: 0 0 auto; }

/* inside the hero card: sit just above the title (card gap is 14px, so pull 6px closer) */
.hr-modern .tt-hero2-body .na-live-pill { margin: 0 0 -6px 0; }

/* Only the dot inside the LIVE pill blinks (steady for visitors who prefer reduced motion) */
@media (prefers-reduced-motion: reduce) { .na-live-pill .na-dot { animation: none; } }

/* ===== Live blog embeds (X, YouTube, Instagram) ===== */
.na-live-card { min-width: 0; }
.na-embed { margin-top: 12px; max-width: 100%; overflow: hidden; }
.na-embed .twitter-tweet, .na-embed .twitter-tweet-rendered { margin: 0 auto !important; }
.na-embed-yt { position: relative; padding-top: 56.25%; border-radius: 8px; background: #000; }
.na-embed-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.na-embed-ig .instagram-media { max-width: 540px !important; min-width: 0 !important; width: 100% !important; margin: 0 auto !important; }

/* ===== Cricket scorecards ===== */
.cr-page{padding-top:22px;padding-bottom:40px}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,300px));gap:14px;justify-content:start;margin-bottom:16px}
@media (max-width:560px){.cr-grid{grid-template-columns:1fr}}

/* filter pills + updated label */
.cr-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;font-size:13px;color:var(--tt-text-muted)}
.cr-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cr-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tt-border);background:var(--tt-bg);color:var(--tt-text-2);font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s}
.cr-tab b{font-size:12px;background:var(--tt-surface-2);color:var(--tt-text-muted);border-radius:999px;padding:1px 8px}
.cr-tab:hover{border-color:var(--tt-primary-600);color:var(--tt-primary)}
.cr-tab.is-on{background:var(--tt-primary);border-color:var(--tt-primary);color:#fff}
.cr-tab.is-on b{background:rgba(255,255,255,.22);color:#fff}
.cr-updated{font-size:13px}
.cr-back{font-weight:700;color:var(--tt-primary)}

/* match card */
a.cr-card{position:relative;display:flex;flex-direction:column;background:var(--tt-bg);border:1px solid var(--tt-border);border-radius:14px;padding:12px 14px 12px;color:var(--tt-text);text-decoration:none;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .15s,box-shadow .15s,border-color .15s}
a.cr-card:hover{transform:translateY(-2px);border-color:var(--tt-primary-600);box-shadow:0 10px 24px rgba(15,23,42,.10);color:var(--tt-text);text-decoration:none}
a.cr-card.cr-live::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--tt-live),#F97316)}
.cr-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.cr-chip{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--tt-text-muted);background:var(--tt-surface-2);padding:3px 9px;border-radius:6px}
a.cr-card .cr-card-title{font-size:13px;line-height:1.4;color:var(--tt-text-muted);font-weight:500;margin-bottom:10px;text-align:center}
.cr-teams{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;text-align:center}
.cr-team{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.cr-t-name{font-size:14px;font-weight:700;color:var(--tt-text-2);max-width:100%;line-height:1.25;overflow-wrap:anywhere;margin-top:4px}
.cr-t-score{font-size:18px;font-weight:800;color:var(--tt-text);font-variant-numeric:tabular-nums;line-height:1.2}
.cr-t-score .cr-yet{font-size:12px;font-weight:500;font-style:italic;color:var(--tt-text-muted)}
.cr-t-ov{font-size:12px;color:var(--tt-text-muted);min-height:16px}
.cr-mid{align-self:center;font-size:12px;font-weight:700;color:var(--tt-text-soft);padding-top:0}
.cr-team.is-batting .cr-t-name::after{content:"\1F3CF";font-size:11px;margin-left:5px}
.cr-team.is-win .cr-t-name,.cr-team.is-win .cr-t-score{color:var(--tt-success)}
a.cr-card .cr-card-status,.cr-card.cr-soon .cr-card-status{margin-top:12px;text-align:center;font-size:13px;font-weight:600;line-height:1.4;color:var(--tt-primary)}
a.cr-card.cr-done .cr-card-status{color:var(--tt-success)}
a.cr-card.cr-soon .cr-card-status{color:var(--tt-text-muted)}

/* team flags: small squares (!important so theme-wide img rules can never stretch them) */
img.cr-logo,.cr-logo{width:22px!important;height:22px!important;max-width:none!important;border-radius:4px;object-fit:cover;background:var(--tt-surface-2);flex:0 0 auto;box-shadow:0 0 0 1px var(--tt-border);display:inline-block}
.cr-logo-fb{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--tt-text-muted)}
img.cr-logo.cr-logo-card,.cr-logo.cr-logo-card{width:40px!important;height:40px!important;border-radius:5px}
.cr-logo-card.cr-logo-fb{font-size:14px}
img.cr-logo.cr-logo-lg,.cr-logo.cr-logo-lg{width:36px!important;height:36px!important;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.cr-logo-lg.cr-logo-fb{font-size:13px;color:#fff;background:rgba(255,255,255,.12)}

/* real flags keep the 3:2 flag shape */
img.cr-logo.cr-flag{width:24px!important;height:16px!important;border-radius:2px;object-fit:cover}
img.cr-logo.cr-flag.cr-logo-card{width:44px!important;height:30px!important;border-radius:3px}
img.cr-logo.cr-flag.cr-logo-lg{width:48px!important;height:32px!important;border-radius:3px}

/* badges */
.cr-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:999px}
.cr-badge-live{background:#FEE2E2;color:var(--tt-live-600)}
.cr-badge-break{background:#FEF3C7;color:#92400E}
.cr-badge-done{background:#DCFCE7;color:#166534}
.cr-badge-soon{background:var(--tt-primary-50);color:var(--tt-primary)}
.cr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tt-live);animation:crPulse 1.4s infinite}
@keyframes crPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}

/* match hero (detail page) */
.cr-hero{background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%);color:#fff;border-radius:20px;padding:24px 26px 22px;margin-bottom:26px;box-shadow:0 12px 30px rgba(15,23,42,.18)}
.cr-hero-live{background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 60%,#7F1D1D 130%)}
.cr-hero-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.cr-hero-name{font-size:14px;color:rgba(255,255,255,.75);font-weight:500}
.cr-hero-teams{display:flex;align-items:center;justify-content:space-around;gap:16px;text-align:center}
.cr-hero-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.78}
.cr-hero-team.is-batting,.cr-hero-team.is-win{opacity:1}
.cr-hero-tname{font-size:17px;font-weight:700;margin-top:6px}
.cr-hero-score{font-size:36px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.cr-hero-ov{font-size:13px;color:rgba(255,255,255,.7);min-height:18px}
.cr-hero-team.is-win .cr-hero-score{color:#86EFAC}
.cr-vs{font-size:13px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.cr-hero-status{text-align:center;margin:20px auto 0;font-size:16px;font-weight:700;background:rgba(255,255,255,.12);border-radius:12px;padding:10px 16px;max-width:560px}
.cr-hero-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.cr-meta-chip{font-size:12px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);border-radius:999px;padding:5px 12px}

/* innings tables */
.cr-innings{margin-bottom:28px}
.cr-inn-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding-left:12px;border-left:4px solid var(--tt-primary)}
.cr-inn-head{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;margin:0;color:var(--tt-text)}
.cr-inn-head span{font-weight:500;color:var(--tt-text-muted);font-size:15px}
.cr-inn-total{font-size:16px;font-weight:800;color:var(--tt-primary);font-variant-numeric:tabular-nums}
.cr-table-wrap{overflow-x:auto;margin-bottom:14px;border:1px solid var(--tt-border);border-radius:12px;background:var(--tt-bg)}
.cr-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cr-table th{background:var(--tt-surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tt-text-muted);padding:10px 12px;text-align:right;white-space:nowrap}
.cr-table td{padding:10px 12px;text-align:right;border-top:1px solid var(--tt-border);white-space:nowrap;color:var(--tt-text-2)}
.cr-table tbody tr:nth-child(even){background:var(--tt-surface)}
.cr-table .cr-l{text-align:left}
.cr-table .cr-out{color:var(--tt-text-muted);font-size:13px;white-space:normal;min-width:150px}
.cr-table .cr-name{font-weight:700;color:var(--tt-text)}
.cr-table .cr-runs{font-weight:800;color:var(--tt-text)}
.cr-table tr.cr-notout{background:#F0FDF4}
.cr-table tr.cr-notout td.cr-name{color:#166534}
.cr-star{font-style:normal;color:#16A34A}
.cr-empty{color:var(--tt-text-muted);font-size:15px;padding:24px 0;text-align:center;grid-column:1/-1}
.cr-note{margin-top:22px;font-size:12px;color:var(--tt-text-soft);text-align:center}

/* homepage strip */
.cr-strip .cr-grid{margin-bottom:0}

@media (max-width:640px){
  .cr-grid{grid-template-columns:1fr}
  .cr-hero{padding:18px 14px}
  .cr-hero-score{font-size:26px}
  .cr-hero-tname{font-size:14px}
  .cr-hero-status{font-size:14px}
  .cr-bar{flex-direction:column;align-items:flex-start}
  .cr-tab{padding:6px 11px;font-size:13px}
  .cr-inn-head{font-size:16px}
}

/* upcoming cards are plain boxes (not links) */
div.cr-card{position:relative;display:flex;flex-direction:column;background:var(--tt-bg);border:1px solid var(--tt-border);border-radius:14px;padding:12px 14px 12px;color:var(--tt-text);box-shadow:0 1px 2px rgba(15,23,42,.04)}
div.cr-card .cr-card-title{font-size:13px;line-height:1.4;color:var(--tt-text-muted);font-weight:500;margin-bottom:10px;text-align:center}
div.cr-card .cr-card-status{margin-top:12px;font-size:13px;font-weight:600;line-height:1.4;color:var(--tt-primary);text-align:center}

/* match on a break (stumps / lunch): in progress, but not drawn like a live card */
a.cr-card.cr-live.cr-onbreak::before{background:linear-gradient(90deg,#F59E0B,#FCD34D)}

/* phones: dismissal moves under the batter's name; rare columns (NB / WD) are dropped so the tables fit without sideways scrolling */
.cr-dis-m{display:none}
@media (max-width:640px){
  .cr-dis-m{display:block;font-size:12px;font-weight:400;color:var(--tt-text-muted);white-space:normal;line-height:1.3;margin-top:2px}
  .cr-table .cr-out,.cr-table .cr-opt{display:none}
  .cr-table th,.cr-table td{padding:9px 7px}
  .cr-table td.cr-name{white-space:normal;min-width:120px}
}

/* Cricket hero: red blinking LIVE tag (brighter red so it reads on the blue banner) */
.hr-modern .tt-cat-hero-eyebrow.tt-eyebrow-live {
  color: #FF4D4D;
  gap: 7px;
}
.hr-modern .tt-eyebrow-live .cr-dot { width: 8px; height: 8px; background: #FF4D4D; box-shadow: 0 0 8px rgba(255, 77, 77, 0.8); }

/* ===== Cricket cards: slim horizontal layout ===== */
.cr-grid{grid-template-columns:repeat(auto-fill,minmax(340px,420px));gap:14px}
@media (max-width:560px){.cr-grid{grid-template-columns:1fr}}

a.cr-card.cr-live::before,a.cr-card.cr-live.cr-onbreak::before{display:none}
a.cr-card,div.cr-card{padding:10px 14px 10px;border-radius:12px}

.cr-card .cr-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cr-card .cr-card-top .cr-card-title{flex:1;min-width:0;margin:0;min-height:0;text-align:right;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cr-card .cr-teams{align-items:center;justify-content:space-between;gap:10px;text-align:left}
.cr-card .cr-team{flex:1 1 0;min-width:0;flex-direction:row;align-items:center;gap:10px}
.cr-card .cr-team:last-child{flex-direction:row-reverse;text-align:right}
.cr-card .cr-t-info{min-width:0;display:flex;flex-direction:column;gap:1px}
.cr-card .cr-t-name{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-card .cr-t-line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cr-card .cr-team:last-child .cr-t-line{justify-content:flex-end}
.cr-card .cr-t-score{font-size:17px}
.cr-card .cr-t-ov{min-height:0;font-size:11px}
.cr-card .cr-mid{flex:0 0 auto}
.cr-card .cr-card-status{margin-top:8px;font-size:12.5px}

/* homepage strip: slides right to left like Trending Now (pauses on hover) */
.cr-slider{--cr-w:400px;--cr-gap:14px;position:relative;overflow:hidden;padding:4px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.cr-slider .cr-track{display:flex;width:max-content;animation:cr-slide var(--cr-dur,40s) linear infinite;will-change:transform}
@keyframes cr-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cr-slider:hover .cr-track,.cr-slider:focus-within .cr-track{animation-play-state:paused}
.cr-slider .cr-card{flex:0 0 var(--cr-w);width:var(--cr-w);margin-right:var(--cr-gap)}
@media (max-width:560px){.cr-slider{--cr-w:300px}}
@media (prefers-reduced-motion:reduce){
  .cr-slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .cr-slider .cr-track{animation:none}
  .cr-slider .cr-card[aria-hidden="true"]{display:none}
}

/* ===== Cricket page: filters, series groups, next-India card ===== */
.cr-src[hidden]{display:none!important}

/* hero: India's next / live match */
.hr-modern .cr-next{display:flex;flex-direction:column;gap:3px;min-width:230px;max-width:300px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff!important;text-decoration:none;transition:background .15s,transform .15s}
.hr-modern .cr-next[hidden]{display:none}
.hr-modern .cr-next:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.cr-next-k{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.cr-next-v{font-size:17px;font-weight:800;line-height:1.25}
.cr-next-w{font-size:12.5px;color:rgba(255,255,255,.85)}

/* tabs a bit bolder */
.cr-bar{margin-bottom:12px}
.cr-tab{padding:9px 18px;font-size:15px}

/* filter row: format chips + team search */
.cr-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.cr-chips{display:flex;gap:8px;flex-wrap:wrap}
.cr-chipbtn{border:1px solid var(--tt-border);background:transparent;color:var(--tt-text-muted);font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .15s}
.cr-chipbtn:hover{border-color:var(--tt-primary-600);color:var(--tt-primary)}
.cr-chipbtn.is-on{background:var(--tt-primary-50);border-color:var(--tt-primary);color:var(--tt-primary)}
.cr-chip-india.is-on{background:#FFF7ED;border-color:#F97316;color:#C2410C}
.cr-search{position:relative;display:inline-flex;align-items:center;margin:0}
.cr-search .fa{position:absolute;left:13px;color:var(--tt-text-muted);font-size:13px;pointer-events:none}
.cr-search input{width:220px;max-width:100%;border:1px solid var(--tt-border);background:var(--tt-bg);border-radius:999px;padding:8px 14px 8px 34px;font:inherit;font-size:13.5px;color:var(--tt-text);outline:0;transition:border-color .15s,box-shadow .15s}
.cr-search input:focus{border-color:var(--tt-primary);box-shadow:0 0 0 3px rgba(30,64,175,.12)}

/* series groups */
.cr-group{margin:0 0 26px}
.cr-group-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--tt-border)}
.cr-group-head h3{margin:0;font-size:16px;font-weight:800;color:var(--tt-text);line-height:1.3}
.cr-group-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C2410C;background:#FFF7ED;border:1px solid #FDBA74;border-radius:999px;padding:2px 8px}
.cr-group-n{margin-left:auto;font-size:12px;font-weight:700;color:var(--tt-text-muted);background:var(--tt-surface-2);border-radius:999px;padding:2px 10px}
.cr-view .cr-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));margin-bottom:0}
.cr-view .cr-card .cr-card-title{display:none}
@media (max-width:560px){.cr-view .cr-grid{grid-template-columns:1fr}.cr-search{width:100%}.cr-search input{width:100%}}

/* empty state */
.cr-empty.cr-none{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:48px 16px;color:var(--tt-text-muted);border:1px dashed var(--tt-border);border-radius:14px;background:var(--tt-bg)}
.cr-empty.cr-none .fa{font-size:30px;color:var(--tt-primary);opacity:.6}
.cr-empty.cr-none b{font-size:16px;color:var(--tt-text)}

/* ===== Scorecard: innings switch (India | West Indies) ===== */
.cr-inn-switch{display:flex;gap:6px;padding:5px;margin:0 0 20px;background:var(--tt-surface-2);border:1px solid var(--tt-border);border-radius:14px}
.cr-inn-tab{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--tt-text-muted);font:inherit;font-size:14.5px;font-weight:700;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.cr-inn-tab:hover{color:var(--tt-primary)}
.cr-inn-tab.is-on{background:var(--tt-bg);color:var(--tt-primary);box-shadow:0 1px 4px rgba(15,23,42,.14)}
.cr-inn-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-inn-tab b{font-size:12.5px;font-weight:800;color:var(--tt-text-muted);background:var(--tt-surface-2);border-radius:999px;padding:1px 8px}
.cr-inn-tab.is-on b{background:var(--tt-primary-50);color:var(--tt-primary)}
.cr-innings[hidden]{display:none}
@media (max-width:480px){.cr-inn-tab{font-size:13px;padding:9px 8px}.cr-inn-tab b{display:none}}

/* innings switch: no filled chip behind the chosen team, just colour + underline */
.cr-inn-switch{background:transparent;border:0;border-bottom:1px solid var(--tt-border);border-radius:0;padding:0;gap:0}
.cr-inn-tab{border-radius:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px}
.cr-inn-tab.is-on{background:transparent;box-shadow:none;border-bottom-color:var(--tt-primary)}
.cr-inn-tab b,.cr-inn-tab.is-on b{background:transparent;padding:0}

/* innings title row: text centred against the blue side line */
.cr-inn-bar{align-items:center;padding-top:6px;padding-bottom:6px}
.cr-inn-bar .cr-inn-head{display:flex;align-items:center;gap:8px;margin:0!important;padding:0;line-height:1.2}
.cr-inn-bar .cr-inn-head .cr-logo{align-self:center}
.cr-inn-bar .cr-inn-head span{line-height:1.2}
.cr-inn-bar .cr-inn-total{margin:0;line-height:1.2}

/* ===== Cricket cards: even rows (same top row, same team block height, same status height) ===== */
.cr-card{height:100%}
.cr-card .cr-card-top{justify-content:flex-start;min-height:26px}
.cr-card .cr-card-top .cr-chip{order:1}
.cr-card .cr-card-top .cr-badge{order:2}
.cr-card .cr-card-top .cr-card-title{order:3}

/* two equal team columns with "vs" in the middle */
.cr-card .cr-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px}
.cr-card .cr-team{flex:none;min-width:0;display:flex;align-items:center;gap:8px}
.cr-card .cr-mid{align-self:center}
img.cr-logo.cr-flag.cr-logo-card,.cr-logo.cr-logo-card{flex:0 0 auto}

/* name / score / overs always on three fixed lines, so both teams line up whatever the score looks like */
.cr-card .cr-t-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-card .cr-t-name{font-size:13px;line-height:18px;height:18px}
.cr-card .cr-t-line{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-wrap:nowrap}
.cr-card .cr-team:last-child .cr-t-line{align-items:flex-end}
.cr-card .cr-t-score{font-size:18px;line-height:24px;height:24px;white-space:nowrap;display:block}
.cr-card .cr-t-score .cr-yet{font-size:12.5px;line-height:24px}
.cr-card .cr-t-ov{display:block;font-size:11px;line-height:14px;height:14px}

/* status: centred in a two-line slot pinned to the bottom of the card */
.cr-card .cr-card-status{margin-top:auto;padding-top:10px;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35}
.cr-card .cr-teams{margin-bottom:0}
.cr-card .cr-t-score,.cr-card .cr-t-ov{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cr-card .cr-team:last-child .cr-t-info{text-align:right;align-items:flex-end}
.cr-card .cr-t-name{max-width:100%}

/* both flags sit on the same line: every team block has the same height, even without an overs line */
.cr-card .cr-t-info{min-height:59px;justify-content:center}

/* ===== Cricket cards: flag with the team name centred under it, score beside the flag ===== */
.cr-card .cr-team{align-items:flex-start;gap:10px}
.cr-card .cr-t-id{flex:0 0 76px;width:76px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.cr-card .cr-t-id .cr-t-name{width:100%;margin:0;height:auto;min-height:30px;font-size:12.5px;line-height:15px;white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cr-card .cr-t-id .cr-t-name::after{display:none}
.cr-card .cr-team.is-batting .cr-t-id .cr-t-name::after{display:inline}
.cr-card .cr-t-info{flex:1 1 auto;min-width:0;min-height:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}
.cr-card .cr-team:last-child .cr-t-info{align-items:flex-end;text-align:right}
.cr-card .cr-team:last-child{flex-direction:row-reverse}

/* tighter card: status right under the teams, score centred against the flag + name block */
.cr-card .cr-team{align-items:center}
.cr-card .cr-t-info{min-height:0;align-self:center}
.cr-card .cr-mid{align-self:center;padding-bottom:18px}
.cr-card .cr-teams{align-items:center}
.cr-card .cr-card-status{margin-top:10px;padding-top:0;min-height:0;display:block}
.cr-card.cr-live .cr-card-status,.cr-card.cr-done .cr-card-status,.cr-card.cr-soon .cr-card-status{margin-top:10px}

/* ===== Cricket cards: one 5-column row  [flag+name] [score] vs [score] [flag+name] ===== */
.cr-card .cr-teams{display:grid;grid-template-columns:88px minmax(0,1fr) auto minmax(0,1fr) 88px;column-gap:8px;align-items:center}
.cr-card .cr-team{display:contents}
.cr-card .cr-team:first-child .cr-t-id{grid-column:1;grid-row:1}
.cr-card .cr-team:first-child .cr-t-info{grid-column:2;grid-row:1;align-items:flex-start;text-align:left}
.cr-card .cr-mid{grid-column:3;grid-row:1;padding:0 4px;align-self:center}
.cr-card .cr-team:last-child .cr-t-info{grid-column:4;grid-row:1;align-items:flex-end;text-align:right}
.cr-card .cr-team:last-child .cr-t-id{grid-column:5;grid-row:1}
.cr-card .cr-t-id{flex:none;width:88px}
.cr-card .cr-t-id .cr-t-name{font-size:12px}
.cr-card .cr-t-info{align-self:center;min-width:0}
.cr-card .cr-t-score{font-size:18px;white-space:nowrap}
@media (max-width:420px){
  .cr-card .cr-teams{grid-template-columns:70px minmax(0,1fr) auto minmax(0,1fr) 70px;column-gap:4px}
  .cr-card .cr-t-id{width:70px}
  .cr-card .cr-t-id .cr-t-name{font-size:11.5px}
  .cr-card .cr-t-score{font-size:15px}
}

/* roomier score columns: narrower flag columns, smaller gaps, so "245/10" and "136/4" never touch "vs" */
.cr-card .cr-teams{grid-template-columns:72px minmax(0,1fr) auto minmax(0,1fr) 72px;column-gap:6px}
.cr-card .cr-t-id{width:72px}
.cr-card .cr-t-id .cr-t-name{font-size:11.5px;line-height:14px}
.cr-card .cr-t-score{font-size:17px}
.cr-card .cr-mid{padding:0 2px;font-size:11px}
.cr-card .cr-t-score .cr-yet{font-size:12px}
@media (max-width:420px){
  .cr-card .cr-teams{grid-template-columns:64px minmax(0,1fr) auto minmax(0,1fr) 64px;column-gap:4px}
  .cr-card .cr-t-id{width:64px}
  .cr-card .cr-t-score{font-size:15px}
}

/* "vs": exact centre of the card, both ways */
.cr-card .cr-mid{align-self:center;justify-self:center;text-align:center;line-height:1;margin:0;padding:0 2px}

/* two-innings scores (Tests / first-class): one innings per line */
.cr-card .cr-t-score.cr-multi{height:auto;line-height:1}
.cr-card .cr-t-score.cr-multi .cr-inn{display:block;font-size:15px;line-height:19px;white-space:nowrap}

/* scores and "vs" are centred on the FLAG (the 50px logo slot), not on flag + name */
.cr-card .cr-teams{align-items:start}
img.cr-logo.cr-flag.cr-logo-card{margin:5px auto}          /* 39px flags + 5px = same 49-50px slot as the square logos */
.cr-card .cr-t-info{align-self:start;min-height:50px;justify-content:center}
.cr-card .cr-mid{align-self:start;min-height:50px;display:flex;align-items:center;justify-content:center}
.cr-card .cr-team:first-child .cr-t-info,.cr-card .cr-team:last-child .cr-t-info{min-height:50px}

/* ===== Sidebar "Live Cricket": one card at a time, sliding like the featured news ===== */
.hr-modern .cr-side{margin-top:var(--tt-s-6,24px)}
.cr-rot{position:relative}
.cr-rot-view{overflow:hidden;border-radius:14px}
.cr-rot-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.cr-rot-track .cr-card{flex:0 0 100%;width:100%;min-width:0;height:auto;box-sizing:border-box}
.cr-rot-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.cr-rot-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--tt-border);cursor:pointer;transition:width .25s,background .25s}
.cr-rot-dot.is-on{width:22px;background:var(--tt-primary)}
@media (prefers-reduced-motion:reduce){.cr-rot-track{transition:none}}

/* ===== About the author (under the article) ===== */
.hr-modern .tt-author-box{display:flex;gap:18px;align-items:center;margin:28px 0;padding:18px 20px;background:var(--tt-bg);border:1px solid var(--tt-border);border-radius:14px}
.hr-modern .tt-author-photo{flex:0 0 84px;width:84px;height:84px;border-radius:50%;object-fit:cover}
.hr-modern .tt-author-initial{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:34px;font-weight:800;font-family:var(--tt-ff-display)}
.hr-modern .tt-author-info{min-width:0}
.hr-modern .tt-author-kicker{display:block;font-size:12.5px;color:var(--tt-text-muted);margin-bottom:2px}
.hr-modern .tt-author-name{margin:0 0 6px;font-size:21px;font-weight:800;line-height:1.25;color:var(--tt-text)}
.hr-modern .tt-author-name small{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;color:var(--tt-primary);background:var(--tt-primary-50);border-radius:999px;padding:2px 10px;vertical-align:middle}
.hr-modern .tt-author-bio{margin:0;font-size:15px;line-height:1.6;color:var(--tt-text-2)}
@media (max-width:560px){.hr-modern .tt-author-box{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.hr-modern .tt-author-photo{flex-basis:64px;width:64px;height:64px;font-size:26px}}

/* article sub-title (one line under the headline) */
.hr-modern .tt-article-subtitle{margin:10px 0 4px;font-size:19px;line-height:1.5;font-weight:500;color:var(--tt-text-2)}
@media (max-width:560px){.hr-modern .tt-article-subtitle{font-size:16.5px}}

/* ===== Newsletter widget: compact ===== */
.hr-modern .s-widget.tt-nl-compact{padding:14px 16px;margin-bottom:0}
.hr-modern .s-widget.tt-nl-compact>h5{margin:0 0 10px;padding-bottom:8px;font-size:14px}
.hr-modern .s-widget.tt-nl-compact .search form{gap:6px}
.hr-modern .s-widget.tt-nl-compact .input-group .form-control,
.hr-modern .s-widget.tt-nl-compact .input-group input[type="email"]{height:36px;font-size:13.5px}
.hr-modern .s-widget.tt-nl-compact .input-group .btn,
.hr-modern .s-widget.tt-nl-compact .input-group .btn-primary{height:36px;line-height:36px;padding:0 14px;font-size:12.5px}
.hr-modern .s-widget.tt-nl-compact small{margin-top:6px!important;font-size:11.5px!important}

/* ===== Weather card ===== */
.hr-modern .tt-wx{--wx-a:#2563EB;--wx-b:#38BDF8;position:relative;overflow:hidden;color:#fff;border-radius:16px;padding:16px 18px 14px;background:linear-gradient(145deg,var(--wx-a),var(--wx-b));box-shadow:0 8px 22px rgba(15,23,42,.14);min-height:214px}
.hr-modern .tt-wx::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hr-modern .tt-wx-clear{--wx-a:#1D4ED8;--wx-b:#38BDF8}
.hr-modern .tt-wx-night{--wx-a:#0F172A;--wx-b:#4338CA}
.hr-modern .tt-wx-cloud{--wx-a:#475569;--wx-b:#94A3B8}
.hr-modern .tt-wx-fog{--wx-a:#64748B;--wx-b:#CBD5E1}
.hr-modern .tt-wx-rain{--wx-a:#1E3A8A;--wx-b:#64748B}
.hr-modern .tt-wx-storm{--wx-a:#1E1B4B;--wx-b:#6D28D9}
.hr-modern .tt-wx-snow{--wx-a:#3B82F6;--wx-b:#BAE6FD}
.hr-modern .tt-wx.is-loading{opacity:.92}
.tt-wx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;position:relative;z-index:1}
.tt-wx-place{display:flex;flex-direction:column;min-width:0}
.tt-wx-city{font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-wx-date{font-size:12px;opacity:.85;margin-top:2px}
.tt-wx-loc{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:background .15s}
.tt-wx-loc:hover{background:rgba(255,255,255,.3)}
.tt-wx-main{display:flex;align-items:center;gap:12px;margin:10px 0 8px;position:relative;z-index:1}
.tt-wx-icon{font-size:46px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.tt-wx-temp{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.02em}
.tt-wx-temp sup{font-size:16px;font-weight:700;margin-left:2px;vertical-align:top;position:relative;top:6px}
.tt-wx-desc{display:flex;flex-direction:column;margin-left:auto;text-align:right;font-size:12px;opacity:.95}
.tt-wx-desc b{font-size:14px;font-weight:700}
.tt-wx-stats{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;margin:0 0 10px;border-radius:10px;background:rgba(255,255,255,.14);font-size:12.5px;position:relative;z-index:1}
.tt-wx-stats i{font-style:normal;margin-right:2px}
.tt-wx-days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative;z-index:1}
.tt-wx-day{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;padding:6px 0;border-radius:10px;background:rgba(255,255,255,.1)}
.tt-wx-day span{opacity:.85;font-weight:600}
.tt-wx-day i{font-style:normal;font-size:18px;line-height:1.3}
.tt-wx-day b{font-size:13px}
.tt-wx-day em{font-style:normal;opacity:.7;font-size:11.5px}

/* ===== Compact pass: weather card about half the height, no rule under the newsletter heading ===== */
.hr-modern .s-widget.tt-nl-compact>h5{border-bottom:0;padding-bottom:0;margin-bottom:10px}
.hr-modern .tt-wx{min-height:0;padding:12px 14px 10px;border-radius:14px}
.hr-modern .tt-wx::after{width:120px;height:120px;right:-40px;top:-44px}
.tt-wx-city{font-size:15px}
.tt-wx-date{font-size:11.5px}
.tt-wx-loc{width:26px;height:26px;font-size:12px}
.tt-wx-main{margin:4px 0 8px;gap:10px}
.tt-wx-icon{font-size:32px}
.tt-wx-temp{font-size:34px}
.tt-wx-temp sup{font-size:13px;top:3px}
.tt-wx-desc{font-size:11.5px}
.tt-wx-desc b{font-size:13px}
.tt-wx-days{gap:5px}
.tt-wx-day{flex-direction:row;justify-content:center;gap:4px;padding:5px 2px;font-size:11.5px}
.tt-wx-day i{font-size:15px;line-height:1}
.tt-wx-day b{font-size:12px}


/* Live Cricket card stretches to the height of the story row beside it, its content stays centred */
.cr-side .cr-rot-track{align-items:stretch}
.cr-side .cr-rot-track .cr-card{justify-content:center;gap:4px}
.cr-side .cr-rot-track .cr-card .cr-card-status{margin-top:10px}

/* tighter sidebar cards so newsletter + weather fit beside the first row of stories */
.hr-modern .s-widget.tt-nl-compact{padding:12px 16px 10px}
.hr-modern .s-widget.tt-nl-compact>h5{margin-bottom:8px}
.hr-modern .s-widget.tt-nl-compact .input-group .form-control,
.hr-modern .s-widget.tt-nl-compact .input-group input[type="email"],
.hr-modern .s-widget.tt-nl-compact .input-group .btn,
.hr-modern .s-widget.tt-nl-compact .input-group .btn-primary{height:34px;line-height:34px}
.hr-modern .s-widget.tt-nl-compact small{margin-top:4px!important;line-height:1.3}
.hr-modern .tt-wx{padding:10px 14px 8px}
.tt-wx-main{margin:2px 0 6px}
.tt-wx-temp{font-size:30px}
.tt-wx-icon{font-size:28px}
.tt-wx-day{padding:4px 2px}

/* ===== Weather card: realistic sky (time of day + weather) =====
   Classes set by section_weather_card.php on the card: ph-morning|noon|evening|night + sky-clear|cloud|fog|rain|storm|snow.
   Clouds are SVG fractal noise (.wx-layer), the sun is a bloom, the moon has a real phase, rain/snow have depth layers. */
.hr-modern .tt-wx{text-shadow:0 1px 3px rgba(2,6,23,.4);padding:11px 14px 9px;border-radius:14px;background:linear-gradient(180deg,#0f4fc0 0%,#2b86dc 45%,#6fb8ee 100%);transition:background .5s}
.hr-modern .tt-wx::after{display:none}
.hr-modern .tt-wx.ph-morning{background:linear-gradient(180deg,#2f6bd6 0%,#5f9fe6 38%,#a9c7e6 68%,#f3c9a0 100%)}
.hr-modern .tt-wx.ph-noon{background:linear-gradient(180deg,#0f4fc0 0%,#2b86dc 48%,#6fb8ee 82%,#a8d8f4 100%)}
.hr-modern .tt-wx.ph-evening{background:linear-gradient(180deg,#26346e 0%,#6a4a8c 34%,#c4577b 62%,#f08a52 86%,#f9b768 100%)}
.hr-modern .tt-wx.ph-night{background:linear-gradient(180deg,#04071a 0%,#0b1342 50%,#1b2466 86%,#2a2f7a 100%)}

.tt-wx-scene{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.tt-wx-scene *{font-style:normal;text-shadow:none}
/* weather mutes the sky colours */
.tt-wx-scene::before{content:"";position:absolute;inset:0;background:transparent}
.tt-wx.sky-cloud .tt-wx-scene::before{background:rgba(120,132,150,.42)}
.tt-wx.sky-fog .tt-wx-scene::before{background:rgba(200,208,216,.5)}
.tt-wx.sky-rain .tt-wx-scene::before{background:rgba(45,55,72,.55)}
.tt-wx.sky-storm .tt-wx-scene::before{background:rgba(20,22,40,.64)}
.tt-wx.sky-snow .tt-wx-scene::before{background:rgba(200,212,228,.36)}
.tt-wx.is-night.sky-cloud .tt-wx-scene::before{background:rgba(40,48,80,.34)}
.tt-wx.is-night.sky-fog .tt-wx-scene::before{background:rgba(90,100,130,.42)}
.tt-wx.is-night.sky-rain .tt-wx-scene::before{background:rgba(10,14,28,.5)}
.tt-wx.is-night.sky-storm .tt-wx-scene::before{background:rgba(5,6,14,.56)}
.tt-wx.is-night.sky-snow .tt-wx-scene::before{background:rgba(120,130,160,.3)}
/* depth: darker top and bottom (keeps white text readable on bright skies), vignette and a touch of film grain */
.tt-wx-scene::after{content:"";position:absolute;inset:0;z-index:9;background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
  linear-gradient(180deg,rgba(0,0,0,.22) 0,rgba(0,0,0,0) 36%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.3) 100%),
  radial-gradient(120% 110% at 50% 40%,transparent 58%,rgba(0,0,0,.26) 100%)}

/* sun: blown-out core with a wide bloom, no rays */
.wx-sun{position:absolute;right:44px;top:-36px;width:156px;height:156px;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle,#fff 0,#fffbe9 5%,rgba(255,244,196,.95) 9%,rgba(255,224,146,.6) 19%,rgba(255,202,112,.28) 37%,rgba(255,190,100,.08) 56%,transparent 70%)}
.ph-morning .wx-sun{top:20px;right:70px;background:radial-gradient(circle,#fff6de 0,#ffe7b8 6%,rgba(255,214,150,.92) 11%,rgba(255,178,100,.55) 22%,rgba(255,160,90,.24) 40%,rgba(255,150,80,.07) 58%,transparent 70%)}
.ph-evening .wx-sun{top:44px;right:86px;width:200px;height:200px;background:radial-gradient(circle,#fff1d2 0,#ffc984 6%,rgba(255,150,76,.85) 13%,rgba(255,112,62,.45) 28%,rgba(255,92,60,.16) 46%,rgba(255,90,60,.05) 60%,transparent 72%)}

/* moon: soft maria, glow, and a shadow disc that carves the real phase */
.wx-moon{position:absolute;right:66px;top:12px;width:30px;height:30px;border-radius:50%;overflow:hidden;background:
  radial-gradient(circle 4.5px at 36% 34%,rgba(120,118,106,.55),transparent),
  radial-gradient(circle 6px at 64% 52%,rgba(118,116,104,.5),transparent),
  radial-gradient(circle 4px at 44% 76%,rgba(125,122,110,.5),transparent),
  radial-gradient(circle 3px at 72% 24%,rgba(125,122,110,.4),transparent),
  radial-gradient(circle at 36% 32%,#FBF9EA 0,#E6E3D0 58%,#BFBCA8 100%);
  box-shadow:0 0 14px 4px rgba(215,225,255,calc(.26 * var(--g,1))),0 0 46px 16px rgba(140,160,255,calc(.13 * var(--g,1)))}
.wx-moon-sh{position:absolute;inset:-1px;border-radius:50%;background:#080d2c;box-shadow:0 0 5px 2px #080d2c}
.wx-star{position:absolute;width:var(--sz,1.4px);height:var(--sz,1.4px);border-radius:50%;background:#fff;opacity:var(--o,.7);box-shadow:0 0 2px rgba(255,255,255,.55);animation:wxTw 5s ease-in-out infinite}
@keyframes wxTw{0%,100%{opacity:var(--o,.7)}50%{opacity:calc(var(--o,.7) * .4)}}

/* clouds: noise tiles panning slowly */
.wx-layer{position:absolute;left:0;width:1560px;height:170px;display:flex;animation:wxPan linear infinite;will-change:transform;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)}
.wx-layer svg{flex:0 0 520px;width:520px;height:170px;display:block}
@keyframes wxPan{to{transform:translateX(-520px)}}

/* rain: three depths (small / faint / slow ... large / bright / fast), wind-slanted, mist near the ground */
.wx-drop{position:absolute;top:-30px;width:1px;border-radius:1px;background:linear-gradient(180deg,rgba(210,230,255,0),rgba(210,230,255,.9));animation:wxFall linear infinite}
.wx-drop.z0{height:9px;opacity:.28}
.wx-drop.z1{height:15px;opacity:.45}
.wx-drop.z2{height:24px;width:1.4px;opacity:.62;filter:blur(.3px)}
@keyframes wxFall{from{transform:translate(0,0) rotate(14deg)}to{transform:translate(48px,215px) rotate(14deg)}}
.wx-mist{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,rgba(190,205,225,.22))}
.wx-flash{position:absolute;inset:0;z-index:10;opacity:0;mix-blend-mode:screen;background:radial-gradient(70% 95% at 50% 15%,rgba(215,228,255,.85),rgba(150,170,255,.25) 60%,transparent);animation:wxFlash 8s linear infinite}
.wx-bolt{position:absolute;inset:0;width:100%;height:100%;z-index:10;opacity:0;filter:drop-shadow(0 0 3px #cfe0ff) drop-shadow(0 0 9px #7ea6ff);animation:wxBolt 8s linear infinite}
@keyframes wxFlash{0%,89%,100%{opacity:0}89.5%{opacity:.9}90.6%{opacity:.2}91.4%{opacity:.7}94%{opacity:0}}
@keyframes wxBolt{0%,89%,100%{opacity:0}89.5%{opacity:1}90.6%{opacity:.15}91.4%{opacity:1}93%{opacity:0}}

/* snow */
.wx-flake{position:absolute;top:-10px;border-radius:50%;background:#fff;animation:wxSnow linear infinite}
.wx-flake.z0{width:2px;height:2px;opacity:.6}
.wx-flake.z1{width:3px;height:3px;opacity:.8}
.wx-flake.z2{width:5px;height:5px;opacity:.9;filter:blur(.8px)}
@keyframes wxSnow{0%{transform:translate(0,0)}50%{transform:translate(16px,100px)}100%{transform:translate(-8px,215px)}}

/* foreground */
.tt-wx-top,.tt-wx-main,.tt-wx-days{position:relative;z-index:2}
/* roomy line-height: Devanagari / Tamil etc. have marks above the line that the nowrap + overflow:hidden box used to shave off */
.tt-wx-city{font-size:15px;font-weight:700;line-height:1.6;padding-top:1px}
.tt-wx-date{font-size:11.5px;opacity:.92;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-wx-day span{display:inline}
.tt-wx-loc{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.tt-wx-icon{display:inline-block;width:34px;height:34px;font-size:0;line-height:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
.tt-wx-icon svg{display:block}
.tt-wx-temp{font-size:36px;font-weight:300;letter-spacing:-.03em;line-height:1}
.tt-wx-temp sup{font-size:14px;font-weight:500;top:5px;opacity:.92}
.tt-wx-desc b{font-size:13px;font-weight:600}
.tt-wx-desc span{opacity:.92}
.tt-wx-days{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.24);padding-top:6px;margin-top:3px}
.tt-wx-day{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 2px;border-radius:0;font-size:11.5px;gap:5px}
.tt-wx-day+.tt-wx-day{border-left:1px solid rgba(255,255,255,.16)}
.tt-wx-day span{font-weight:500;opacity:.92}
.tt-wx-day i{display:inline-block;width:19px;height:19px;font-size:0;line-height:0}
.tt-wx-day i svg{display:block}
.tt-wx-day b{font-size:12px;font-weight:600}
@media (prefers-reduced-motion:reduce){.tt-wx-scene *{animation:none!important}}

/* ===== Live Cricket sidebar card: dark floodlit-stadium look to match the weather card =====
   Scoped to .cr-side (homepage). The /cricket match list keeps its own light cards. */
.hr-modern .cr-side{margin-top:0}
.hr-modern .cr-side .cr-rot-view{border-radius:14px;box-shadow:0 8px 22px rgba(15,23,42,.16)}
.hr-modern .cr-side a.cr-card,.hr-modern .cr-side div.cr-card{position:relative;overflow:hidden;color:#fff;border:0;border-radius:14px;padding:13px 16px 13px;gap:0;justify-content:flex-start;text-align:left;
  background:
    radial-gradient(90% 70% at 88% -12%,rgba(255,255,255,.2),transparent 60%),
    radial-gradient(70% 60% at 6% -10%,rgba(120,180,255,.16),transparent 62%),
    linear-gradient(165deg,#081a33 0%,#0d2c52 50%,#0b4a42 100%);
  box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* mowed-grass stripes fading in at the bottom */
.hr-modern .cr-side a.cr-card::after,.hr-modern .cr-side div.cr-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 28px,rgba(255,255,255,0) 28px 56px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
.hr-modern .cr-side a.cr-card:hover{transform:none;box-shadow:none;color:#fff}
.hr-modern .cr-side .cr-card>*{position:relative;z-index:1}

.hr-modern .cr-side .cr-card .cr-card-top{margin:0 0 6px;gap:8px;min-height:24px}
.hr-modern .cr-side .cr-badge{font-size:10.5px;padding:3px 9px;letter-spacing:.08em}
.hr-modern .cr-side .cr-badge-live{background:#E11D48;color:#fff;box-shadow:0 0 0 3px rgba(225,29,72,.25)}
.hr-modern .cr-side .cr-badge-live .cr-dot{background:#fff;width:7px;height:7px}
.hr-modern .cr-side .cr-badge-break{background:#F59E0B;color:#1c1300}
.hr-modern .cr-side .cr-chip{background:rgba(255,255,255,.14);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.14);font-size:10.5px;padding:2px 8px}
.hr-modern .cr-side .cr-card .cr-card-top .cr-card-title{color:rgba(255,255,255,.72);font-size:12px;line-height:1.6;padding-top:1px}

/* teams: flag, name, score stacked and centred, "vs" between */
.hr-modern .cr-side .cr-card .cr-teams{flex:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center;padding:4px 0}
.hr-modern .cr-side .cr-card .cr-team,.hr-modern .cr-side .cr-card .cr-team:last-child{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;text-align:center}
.hr-modern .cr-side .cr-card .cr-t-id{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%}
.hr-modern .cr-side .cr-card .cr-t-name{margin:0;max-width:100%;font-size:13.5px;font-weight:700;line-height:1.6;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-modern .cr-side .cr-card .cr-team.is-batting .cr-t-name::after{content:none}
.hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{width:52px!important;height:35px!important;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.28)}
.hr-modern .cr-side img.cr-logo.cr-logo-card,.hr-modern .cr-side .cr-logo.cr-logo-card{width:46px!important;height:46px!important;border-radius:10px;background:rgba(255,255,255,.1);box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.22)}
.hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{border-radius:4px}
.hr-modern .cr-side .cr-logo-fb{color:#fff}
.hr-modern .cr-side .cr-card .cr-t-info{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.hr-modern .cr-side .cr-card .cr-t-line{display:flex;flex-direction:column;align-items:center;gap:0}
.hr-modern .cr-side .cr-card .cr-team:last-child .cr-t-line{justify-content:flex-start}
.hr-modern .cr-side .cr-card .cr-t-score{font-size:25px;font-weight:800;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi{display:flex;flex-direction:column;align-items:center}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn{display:block;font-size:14px;font-weight:600;line-height:1.3;opacity:.72}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn:last-child{font-size:22px;font-weight:800;opacity:1;line-height:1.25}
.hr-modern .cr-side .cr-card .cr-t-score .cr-yet{font-size:12px;font-weight:500;font-style:italic;color:rgba(255,255,255,.6)}
.hr-modern .cr-side .cr-card .cr-t-ov{font-size:11.5px;color:rgba(255,255,255,.68);min-height:0}
.hr-modern .cr-side .cr-card .cr-team.is-batting .cr-t-score::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.28);vertical-align:middle;position:relative;top:-2px}
.hr-modern .cr-side .cr-card .cr-team.is-batting img.cr-logo{box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 2px rgba(74,222,128,.85)}
.hr-modern .cr-side .cr-card .cr-team.is-win .cr-t-score,.hr-modern .cr-side .cr-card .cr-team.is-win .cr-t-name{color:#86EFAC}
.hr-modern .cr-side .cr-card .cr-mid{align-self:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 8px;line-height:1.6;margin-top:0}

/* result / situation line */
.hr-modern .cr-side .cr-card .cr-card-status,.hr-modern .cr-side a.cr-card .cr-card-status{margin:8px 0 0;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;line-height:1.55;text-align:center;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hr-modern .cr-side .cr-rot-dots{margin-top:12px}

/* tablets and phones: the sidebar stacks full width, so the card gets bigger and the 24px + 24px gap above it goes */
@media (max-width:991px){
  .hr-modern .tt-sidebar{gap:16px}
  .hr-modern .cr-side .cr-rot-track{min-height:0}
  .hr-modern .cr-side a.cr-card,.hr-modern .cr-side div.cr-card{min-height:264px;padding:16px 18px 16px}
  .hr-modern .cr-side .cr-card .cr-card-top{margin-bottom:8px}
  .hr-modern .cr-side .cr-badge{font-size:11.5px;padding:4px 11px}
  .hr-modern .cr-side .cr-chip{font-size:11.5px;padding:3px 10px}
  .hr-modern .cr-side .cr-card .cr-card-top .cr-card-title{font-size:13px}
  .hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{width:64px!important;height:43px!important}
  .hr-modern .cr-side img.cr-logo.cr-logo-card,.hr-modern .cr-side .cr-logo.cr-logo-card{width:56px!important;height:56px!important}
  .hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{border-radius:5px}
  .hr-modern .cr-side .cr-card .cr-t-name{font-size:15px}
  .hr-modern .cr-side .cr-card .cr-t-score{font-size:30px}
  .hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn{font-size:16px}
  .hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn:last-child{font-size:26px}
  .hr-modern .cr-side .cr-card .cr-t-ov{font-size:12.5px}
  .hr-modern .cr-side .cr-card .cr-mid{font-size:11px;padding:4px 10px}
  .hr-modern .cr-side .cr-card .cr-card-status,.hr-modern .cr-side a.cr-card .cr-card-status{margin-top:12px;padding:9px 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.hr-modern .cr-side .cr-badge-live .cr-dot{animation:none}}

/* the older .cr-card rules above pin grid columns, widths and heights for the light card: undo them for the sidebar card */
.hr-modern .cr-side .cr-card .cr-teams .cr-team:first-child{grid-column:1;grid-row:1}
.hr-modern .cr-side .cr-card .cr-teams .cr-mid{grid-column:2;grid-row:1;min-height:0;justify-self:center;padding:3px 9px}
.hr-modern .cr-side .cr-card .cr-teams .cr-team:last-child{grid-column:3;grid-row:1}
.hr-modern .cr-side .cr-card .cr-team .cr-t-id{width:auto;flex:0 1 auto;grid-column:auto;grid-row:auto}
.hr-modern .cr-side .cr-card .cr-team .cr-t-info,.hr-modern .cr-side .cr-card .cr-team:first-child .cr-t-info,.hr-modern .cr-side .cr-card .cr-team:last-child .cr-t-info{grid-column:auto;grid-row:auto;align-self:auto;min-height:0;align-items:center;text-align:center;flex:0 0 auto}
.hr-modern .cr-side .cr-card .cr-t-id .cr-t-name{display:block;width:auto;min-height:0;height:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;font-size:13.5px;line-height:1.6}
.hr-modern .cr-side .cr-card .cr-t-score,.hr-modern .cr-side .cr-card .cr-t-score.cr-multi{height:auto;max-width:none;overflow:visible;white-space:nowrap;line-height:1.2}
.hr-modern .cr-side .cr-card .cr-t-ov{height:auto;line-height:1.4;max-width:none;overflow:visible}
.hr-modern .cr-side .cr-card .cr-t-line{align-items:center}
.hr-modern .cr-side .cr-card .cr-team:last-child .cr-t-line{align-items:center}
.hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{margin:0}
.hr-modern .cr-side .cr-card .cr-card-top .cr-badge{order:1}
.hr-modern .cr-side .cr-card .cr-card-top .cr-chip{order:2}
.hr-modern .cr-side .cr-card .cr-card-top .cr-card-title{order:3}
@media (max-width:991px){
  .hr-modern .cr-side .cr-card .cr-t-id .cr-t-name{font-size:15px}
}
/* flags line up across both teams even when only one has an overs line; "vs" sits level with the flags */
.hr-modern .cr-side .cr-card .cr-teams{align-items:start}
.hr-modern .cr-side .cr-card .cr-teams .cr-mid{align-self:start;margin-top:10px}
@media (max-width:991px){.hr-modern .cr-side .cr-card .cr-teams .cr-mid{margin-top:16px}}

/* ===== Live Cricket sidebar card, v2: no LIVE pill, plain status line, per-innings scores for Tests, dots inside the card =====
   The card fills the height the homepage script gives it (same top and bottom as the last row of "More Stories"). */
.hr-modern .cr-side .cr-rot-view{border-radius:16px;box-shadow:0 10px 26px rgba(8,26,51,.22)}
.hr-modern .cr-side a.cr-card,.hr-modern .cr-side div.cr-card{height:100%;display:flex;flex-direction:column;padding:14px 16px;border-radius:16px;
  background:
    radial-gradient(80% 55% at 50% -18%,rgba(96,165,250,.30),transparent 66%),
    radial-gradient(60% 50% at 100% 100%,rgba(16,185,129,.22),transparent 70%),
    linear-gradient(160deg,#07172e 0%,#0c2a4f 55%,#0a3f3d 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* the slider dots sit below the card (outside it), so the card keeps its normal padding */

/* header: format chip (gold) + series name */
.hr-modern .cr-side .cr-card .cr-card-top{min-height:22px;margin:0 0 4px;flex:0 0 auto}
.hr-modern .cr-side .cr-card .cr-card-top .cr-chip{order:1;background:rgba(251,191,36,.14);color:#FCD34D;border:1px solid rgba(251,191,36,.38);font-weight:800;letter-spacing:.08em}
.hr-modern .cr-side .cr-card .cr-card-top .cr-badge{order:2}
.hr-modern .cr-side .cr-card .cr-card-top .cr-card-title{order:3;flex:1;min-width:0;margin:0;text-align:right;font-size:12px;color:rgba(255,255,255,.7)}

/* teams: centred in the free space, a round "vs" between the flags */
.hr-modern .cr-side .cr-card .cr-teams{flex:1 1 auto;align-content:center;align-items:start;padding:6px 0}
.hr-modern .cr-side .cr-card .cr-teams .cr-mid{align-self:start;margin-top:3px;min-width:30px;height:30px;padding:0 7px;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.04em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hr-modern .cr-side .cr-card .cr-t-score{font-size:26px;font-weight:800}
.hr-modern .cr-side .cr-card .cr-t-ov{font-size:11.5px;letter-spacing:.02em}

/* Tests / first-class: "1st 245/10", "2nd 80/2" - every innings on its own line, the one in progress is the biggest */
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi{display:flex;flex-direction:column;align-items:center;gap:1px}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi::before{display:none}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn,
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn:last-child{display:flex;align-items:baseline;gap:7px;font-size:17px;font-weight:700;line-height:1.3;opacity:1}
.hr-modern .cr-side .cr-card.cr-live:not(.cr-onbreak) .cr-t-score.cr-multi .cr-inn:not(.is-cur){opacity:.72}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn.is-cur{font-size:22px;font-weight:800;opacity:1}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn.is-cur::before{content:"";flex:0 0 auto;align-self:center;width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.28)}
.hr-modern .cr-side .cr-card .cr-t-score .cr-inn em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* result / situation: plain text under a hairline (no box) */
.hr-modern .cr-side .cr-card .cr-card-status,.hr-modern .cr-side a.cr-card .cr-card-status{flex:0 0 auto;margin:auto 0 0;padding:9px 2px 0;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0;background:none;box-shadow:none;
  color:#FDE68A;font-size:13px;font-weight:600;line-height:1.45;text-align:center}
.hr-modern .cr-side .cr-card.cr-done .cr-card-status{color:#86EFAC}
.hr-modern .cr-side .cr-card.cr-soon .cr-card-status{color:rgba(255,255,255,.82)}

/* slider dots sit below the card */
.hr-modern .cr-side .cr-rot-dots{position:static;margin:12px 0 0;gap:6px}
.hr-modern .cr-side .cr-rot-dot{width:7px;height:7px;background:#CBD5E1}
.hr-modern .cr-side .cr-rot-dot.is-on{width:20px;background:#1E40AF}

/* not enough height (a Test with four innings, Hindi line heights): the homepage script adds .is-tight */
.hr-modern .cr-side .cr-rot.is-tight a.cr-card,.hr-modern .cr-side .cr-rot.is-tight div.cr-card{padding-top:10px;padding-bottom:10px}
.hr-modern .cr-side .cr-rot.is-tight img.cr-logo.cr-flag.cr-logo-card{width:42px!important;height:28px!important}
.hr-modern .cr-side .cr-rot.is-tight img.cr-logo.cr-logo-card,.hr-modern .cr-side .cr-rot.is-tight .cr-logo.cr-logo-card{width:38px!important;height:38px!important}
.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-t-score.cr-multi .cr-inn,.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-t-score.cr-multi .cr-inn:last-child{font-size:15px}
.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-t-score.cr-multi .cr-inn.is-cur{font-size:18px}
.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-t-score{font-size:22px}
.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-card-status{padding-top:6px;font-size:12.5px}
.hr-modern .cr-side .cr-rot.is-tight .cr-card .cr-mid{margin-top:0}

@media (max-width:991px){
  .hr-modern .cr-side a.cr-card,.hr-modern .cr-side div.cr-card{min-height:268px}
  .hr-modern .cr-side .cr-card .cr-teams .cr-mid{margin-top:7px;min-width:34px;height:34px}
  .hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn,.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn:last-child{font-size:19px}
  .hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn.is-cur{font-size:25px}
}

/* ===== Live Cricket sidebar card, v3: white premium look (same layout as v2) ===== */
.hr-modern .cr-side .cr-rot-view{border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.05)}
.hr-modern .cr-side a.cr-card,.hr-modern .cr-side div.cr-card{color:#0F172A;text-shadow:none;border:1px solid #E6EAF2;
  background:
    radial-gradient(90% 55% at 50% -12%,rgba(30,64,175,.07),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FAFD 100%);
  box-shadow:inset 0 1px 0 #fff}
.hr-modern .cr-side a.cr-card:hover{color:#0F172A}
/* gold-to-navy hairline across the top, in place of the old grass stripes */
.hr-modern .cr-side a.cr-card::after,.hr-modern .cr-side div.cr-card::after{content:"";position:absolute;left:0;right:0;top:0;bottom:auto;height:3px;
  background:linear-gradient(90deg,#1E3A8A 0%,#2563EB 55%,#F59E0B 100%);-webkit-mask-image:none;mask-image:none}

.hr-modern .cr-side .cr-card .cr-card-top .cr-chip{background:#EEF2FF;color:#1E3A8A;border:1px solid #C7D2FE}
.hr-modern .cr-side .cr-card .cr-card-top .cr-card-title{color:#64748B;font-weight:500}
.hr-modern .cr-side .cr-badge-break{background:#FEF3C7;color:#92400E;box-shadow:inset 0 0 0 1px #FCD34D}

.hr-modern .cr-side .cr-card .cr-t-name{color:#0F172A}
.hr-modern .cr-side img.cr-logo.cr-flag.cr-logo-card{box-shadow:0 3px 10px rgba(15,23,42,.22),0 0 0 1px rgba(15,23,42,.08)}
.hr-modern .cr-side img.cr-logo.cr-logo-card,.hr-modern .cr-side .cr-logo.cr-logo-card{background:#F1F5F9;box-shadow:0 3px 10px rgba(15,23,42,.16),0 0 0 1px rgba(15,23,42,.08)}
.hr-modern .cr-side .cr-logo-fb{color:#334155;background:#E2E8F0}
.hr-modern .cr-side .cr-card .cr-t-score{color:#0F172A}
.hr-modern .cr-side .cr-card .cr-t-score .cr-yet{color:#94A3B8}
.hr-modern .cr-side .cr-card .cr-t-ov{color:#64748B}
.hr-modern .cr-side .cr-card .cr-t-score .cr-inn em{color:#94A3B8}
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn.is-cur{color:#1E40AF}
.hr-modern .cr-side .cr-card .cr-team.is-batting img.cr-logo{box-shadow:0 3px 10px rgba(15,23,42,.2),0 0 0 2px #22C55E}
.hr-modern .cr-side .cr-card .cr-team.is-batting .cr-t-score::before{box-shadow:0 0 0 3px rgba(34,197,94,.22);background:#22C55E}
.hr-modern .cr-side .cr-card .cr-team.is-batting .cr-t-score.cr-multi::before{display:none}   /* the dot sits on the current innings line instead */
.hr-modern .cr-side .cr-card .cr-t-score.cr-multi .cr-inn.is-cur::before{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.hr-modern .cr-side .cr-card .cr-team.is-win .cr-t-score,.hr-modern .cr-side .cr-card .cr-team.is-win .cr-t-name{color:#15803D}
.hr-modern .cr-side .cr-card .cr-teams .cr-mid{color:#475569;background:#F1F5F9;border:1px solid #E2E8F0;box-shadow:0 1px 3px rgba(15,23,42,.08)}

.hr-modern .cr-side .cr-card .cr-card-status,.hr-modern .cr-side a.cr-card .cr-card-status{border-top:1px solid #E6EAF2;color:#1E3A8A}
.hr-modern .cr-side .cr-card.cr-done .cr-card-status{color:#15803D}
.hr-modern .cr-side .cr-card.cr-soon .cr-card-status{color:#64748B}

.hr-modern .cr-side .cr-rot-dot{background:#CBD5E1}
.hr-modern .cr-side .cr-rot-dot.is-on{background:#1E40AF}

/* ===== /cricket match list: innings lines of a Test / first-class card ("1st 183/10" over "2nd 295/10") =====
   The label gets its own small grey text and a gap, so the two teams' scores no longer run into each other and into "vs".
   (The homepage card has its own, more specific rules above.) */
.cr-card .cr-t-score.cr-multi .cr-inn{display:flex;align-items:baseline;gap:6px;font-style:normal;font-size:14px;line-height:19px;font-weight:800;white-space:nowrap}
.cr-card .cr-team:last-child .cr-t-score.cr-multi .cr-inn{justify-content:flex-end}
.cr-card .cr-t-score .cr-inn em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tt-text-soft,#94A3B8)}
.cr-card .cr-t-score.cr-multi .cr-inn.is-cur{color:var(--tt-primary,#1E40AF)}
.cr-card .cr-t-score.cr-multi{display:flex;flex-direction:column;align-items:flex-start}
.cr-card .cr-team:last-child .cr-t-score.cr-multi{align-items:flex-end}
@media (max-width:420px){.cr-card .cr-t-score.cr-multi .cr-inn{font-size:13px;gap:4px}}

/* ===== /cricket list: Test / first-class cards (.cr-tests) as two rows - flag + name on the left, all of that side's innings stacked on the right ===== */
.cr-grid .cr-card.cr-tests .cr-teams{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.cr-grid .cr-card.cr-tests .cr-team{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;text-align:left;flex-direction:row}
.cr-grid .cr-card.cr-tests .cr-team .cr-t-id{display:contents}
.cr-grid .cr-card.cr-tests .cr-team img.cr-logo.cr-logo-card,.cr-grid .cr-card.cr-tests .cr-team .cr-logo.cr-logo-card{grid-column:1;grid-row:1;margin:0;justify-self:center}
.cr-grid .cr-card.cr-tests .cr-team .cr-t-id .cr-t-name{grid-column:2;grid-row:1;width:auto;min-height:0;height:auto;margin:0;font-size:14px;line-height:1.3;font-weight:700;text-align:left;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-grid .cr-card.cr-tests .cr-team .cr-t-info,.cr-grid .cr-card.cr-tests .cr-team:first-child .cr-t-info,.cr-grid .cr-card.cr-tests .cr-team:last-child .cr-t-info{grid-column:3;grid-row:1;align-self:center;min-height:0;align-items:flex-end;text-align:right;justify-content:center}
.cr-grid .cr-card.cr-tests .cr-t-line,.cr-grid .cr-card.cr-tests .cr-team:last-child .cr-t-line{align-items:flex-end}
.cr-grid .cr-card.cr-tests .cr-t-score.cr-multi,.cr-grid .cr-card.cr-tests .cr-team:last-child .cr-t-score.cr-multi{align-items:flex-end;gap:1px;max-width:none;overflow:visible}
.cr-grid .cr-card.cr-tests .cr-t-score.cr-multi .cr-inn,.cr-grid .cr-card.cr-tests .cr-team:last-child .cr-t-score.cr-multi .cr-inn{justify-content:space-between;min-width:112px;font-size:15px}
.cr-grid .cr-card.cr-tests .cr-t-ov{text-align:right;max-width:none;overflow:visible}
.cr-grid .cr-card.cr-tests .cr-mid{align-self:center;min-height:0;height:auto;margin:0;padding:0;font-size:10px;line-height:1;opacity:.55}
.cr-grid .cr-card.cr-tests .cr-t-score .cr-yet{font-size:12px}

/* ===== Shortly shortcut (phones): small round NA icon on the right edge, sitting above the back-to-top button ===== */
.tt-shortly-fab{display:none}
@media (max-width:768px){
  .tt-shortly-fab{position:fixed;right:10px;bottom:68px;z-index:900;display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;padding:5px 0 4px;border-radius:27px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 6px 18px rgba(15,23,42,.18);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tt-shortly-fab img{display:block;width:34px;height:34px;object-fit:contain}
  .tt-shortly-fab span{font-size:9.5px;font-weight:800;line-height:1;letter-spacing:.02em;color:#1E3A8A}
  .tt-shortly-fab:active{transform:scale(.94)}
  .tt-shortly-fab::after{content:"";position:absolute;inset:-4px;border-radius:30px;border:2px solid rgba(37,99,235,.45);opacity:0;animation:ttFabPulse 2.4s ease-out 1.5s 3}
  .tt-menu-open .tt-shortly-fab{display:none}
}
@keyframes ttFabPulse{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.tt-shortly-fab::after{animation:none}}

/* ===== Shortly oval button (desktop / tablet): above Home, inset from the left edge, ends where the BREAKING label ends ===== */
.hr-modern .tt-shortly-row { position: relative; z-index: 2; padding: 14px 0 2px; margin-left: calc(-1 * var(--tt-s-6) + 16px); }
.hr-modern .tt-cat-strip a.tt-shortly-pill,
.hr-modern .tt-cat-strip a.tt-shortly-pill:hover {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
  height: 36px; min-width: 120px; box-sizing: border-box; padding: 0 11px 0 4px; border-radius: 999px; white-space: nowrap;
  background: transparent; color: #fff; text-decoration: none;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .38); transition: transform .18s ease, box-shadow .18s ease;
}
.hr-modern .tt-cat-strip a.tt-shortly-pill:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(79, 70, 229, .5); }
/* flowing gradient + light sweep, clipped to the oval (the NEW badge sits outside the clip) */
.tt-shortly-bg { position: absolute; inset: 0; z-index: -1; border-radius: 999px; overflow: hidden;
  background: linear-gradient(110deg, #0B1B5E 0%, #2540C8 28%, #7C3AED 52%, #2540C8 76%, #0B1B5E 100%); background-size: 300% 100%;
  animation: ttShortlyFlow 7s linear infinite; }
.tt-shortly-bg::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-20deg);
  animation: ttShortlyShine 3.8s ease-in-out infinite; }
/* logo inside a spinning "story ring" (Shortly is a story-style swipe feed) */
.tt-shortly-ico { position: relative; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  animation: ttShortlyRipple 2.4s ease-out infinite; }
.tt-shortly-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#FBBF24, #F43F5E, #A855F7, #38BDF8, #FBBF24); animation: ttShortlySpin 3s linear infinite; }
.tt-shortly-ico::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #fff; }
.tt-shortly-ico img { position: relative; z-index: 1; display: block; width: 18px; height: 18px; object-fit: contain; }
.tt-shortly-txt { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
/* two arrows chase upwards: swipe up for the next story */
.tt-shortly-up { display: inline-flex; flex-direction: column; margin-left: auto; font-size: 13px; line-height: 6px; height: 12px; justify-content: center; }
.tt-shortly-up i { display: block; opacity: .25; animation: ttShortlyUp 1.2s ease-in-out infinite; }
.tt-shortly-up i:last-child { animation-delay: .22s; }
.tt-shortly-new { position: absolute; top: -9px; right: 10px; padding: 2px 6px; border-radius: 999px; background: #F59E0B; color: #1F2937;
  font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .08em; line-height: 1.2; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  animation: ttShortlyPop 2.6s ease-in-out infinite; }
@keyframes ttShortlyFlow { from { background-position: 0 0; } to { background-position: -300% 0; } }
@keyframes ttShortlyShine { 0%, 55% { left: -45%; } 100% { left: 130%; } }
@keyframes ttShortlySpin { to { transform: rotate(360deg); } }
@keyframes ttShortlyRipple { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
@keyframes ttShortlyUp { 0%, 100% { opacity: .25; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes ttShortlyPop { 0%, 70%, 100% { transform: scale(1) rotate(0); } 78% { transform: scale(1.14) rotate(-5deg); } 86% { transform: scale(1.14) rotate(5deg); } 94% { transform: scale(1) rotate(0); } }
@media (max-width: 768px) { .hr-modern .tt-shortly-row { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tt-shortly-bg, .tt-shortly-bg::after, .tt-shortly-ico, .tt-shortly-ico::before, .tt-shortly-up i, .tt-shortly-new { animation: none; }
  .tt-shortly-up i { opacity: .9; }
}

/* ===== Stories (homepage sidebar strip + full-screen viewer) ===== */
.tt-stories { background: #fff; border: 1px solid var(--tt-border, #E2E8F0); border-radius: 14px; padding: 10px 12px 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tt-stories-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tt-stories-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--tt-text, #0F172A); }
.tt-stories-title i { color: #E11D48; margin-right: 4px; }
.tt-stories-hint { font-size: 11px; color: var(--tt-text-3, #64748B); }
.tt-stories-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 2px 4px; scroll-snap-type: x proximity; }
.tt-stories-row::-webkit-scrollbar { display: none; }
.tt-story { flex: 0 0 66px; width: 66px; padding: 0; border: 0; background: none; text-align: center; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.tt-story-ring { display: block; width: 62px; height: 62px; margin: 0 auto; padding: 3px; border-radius: 50%;
  background: conic-gradient(from 210deg, #F59E0B, #EF4444, #A855F7, #2563EB, #F59E0B); transition: transform .15s ease; }
.tt-story:hover .tt-story-ring { transform: scale(1.06); }
.tt-story-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #E2E8F0; box-sizing: border-box; }
.tt-story.is-seen .tt-story-ring { background: #CBD5E1; }
.tt-story-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 10.5px; line-height: 1.25; font-weight: 600; color: var(--tt-text-2, #334155); }

.tt-sv-lock, .tt-sv-lock body { overflow: hidden; }
.tt-sv { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; gap: 18px; background: rgba(8, 12, 24, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tt-sv.is-open { display: flex; animation: ttSvIn .22s ease; }
@keyframes ttSvIn { from { opacity: 0; } to { opacity: 1; } }
.tt-sv-frame { position: relative; overflow: hidden; background: #000; border-radius: 18px; height: min(100vh, 820px); aspect-ratio: 9 / 16; max-width: 100vw; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.tt-sv-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(24px) brightness(.55); }
.tt-sv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: ttSvA 9s ease-out forwards; }
.tt-sv-frame[data-k="1"] .tt-sv-img { transform-origin: 20% 40%; animation-name: ttSvB; }
.tt-sv-frame[data-k="2"] .tt-sv-img { transform-origin: 80% 60%; animation-name: ttSvA; }
.tt-sv-frame[data-k="3"] .tt-sv-img { transform-origin: 50% 70%; animation-name: ttSvB; }
.tt-sv-frame.is-paused .tt-sv-img { animation-play-state: paused; }
@keyframes ttSvA { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes ttSvB { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.tt-sv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .86) 100%); }
.tt-sv-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.tt-sv-bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.tt-sv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 3px; }
.tt-sv-top { position: absolute; top: 20px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; color: #fff; }
.tt-sv-ava { width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: conic-gradient(#F59E0B, #EF4444, #A855F7, #2563EB, #F59E0B); flex: 0 0 auto; }
.tt-sv-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1.5px solid #000; box-sizing: border-box; }
.tt-sv-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tt-sv-who b { font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-sv-who em { font-style: normal; font-size: 11px; opacity: .8; }
.tt-sv-x { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.tt-sv-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 18px 30px; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.tt-sv-body.in { opacity: 1; transform: none; }
.tt-sv-h { margin: 0; font-size: 25px; line-height: 1.22; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.tt-sv-p { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }
.tt-sv-h2 { margin: 0 0 14px; font-size: 17px; line-height: 1.3; font-weight: 700; opacity: .92; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.tt-sv-read { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: #fff; color: #0F172A; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.tt-sv-hint { margin-top: 14px; font-size: 12px; opacity: .75; }
.tt-sv-nav { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.tt-sv-nav:hover { background: rgba(255, 255, 255, .26); }
@media (max-width: 700px) {
  .tt-sv { gap: 0; background: #000; }
  .tt-sv-frame { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .tt-sv-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tt-sv-img, .tt-sv.is-open { animation: none; } .tt-sv-body { transition: none; } }
.tt-home > .tt-stories { margin-bottom: 16px; }   /* Stories strip moved above the story list on small screens */
/* newsletter card stretched to the height of the last More Stories row: content stays centred */
.hr-modern .tt-sidebar .tt-nl-compact.is-fill { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

/* Stories viewer: stronger selectors, because the theme styles every img / heading / link under .hr-modern (it squashed the picture to its natural
   height and painted the headline dark). Phone-shaped frame (9:19.5), picture over the whole frame. */
.tt-sv .tt-sv-frame { height: min(100vh, 900px); aspect-ratio: 9 / 19.5; }
.tt-sv .tt-sv-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
.tt-sv .tt-sv-ava img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
.tt-sv .tt-sv-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .9) 100%); }
.tt-sv .tt-sv-body { padding: 0 18px 26px; color: #fff; }
.tt-sv .tt-sv-h { margin: 0 0 12px; color: #fff; font-size: 24px; line-height: 1.22; font-weight: 800; }
.tt-sv .tt-sv-p { margin: 0 0 18px; color: rgba(255, 255, 255, .95); font-size: 16px; line-height: 1.5; font-weight: 500; }
.tt-sv a.tt-sv-read, .tt-sv a.tt-sv-read:hover { color: #0F172A; background: #fff; }
.tt-sv .tt-sv-who b, .tt-sv .tt-sv-who em, .tt-sv .tt-sv-top { color: #fff; }
@media (max-width: 700px) { .tt-sv .tt-sv-frame { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; } }
/* Stories: landscape pictures are shown whole (no cropping of faces) over a blurred copy of themselves; tall pictures still fill the frame */
.tt-sv .tt-sv-frame.is-wide .tt-sv-bg { filter: blur(26px) brightness(.5); }
.tt-sv .tt-sv-frame.is-wide .tt-sv-img { inset: auto; top: 14%; left: 0; height: 46% !important; object-fit: contain; animation: none; }
.tt-sv .tt-sv-h { margin-bottom: 18px; }

/* ===== Stories: special stories (Top 5, Rashifal, Quiz, On this day, Rates) ===== */
.tt-story-ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; color: #fff; font-size: 22px; }
.tt-k-top5 { background: linear-gradient(135deg, #F97316, #DC2626); }
.tt-k-rashifal { background: linear-gradient(135deg, #8B5CF6, #DB2777); }
.tt-k-quiz { background: linear-gradient(135deg, #0EA5E9, #2563EB); }
.tt-k-history { background: linear-gradient(135deg, #D97706, #92400E); }
.tt-k-rates { background: linear-gradient(135deg, #16A34A, #065F46); }
.tt-sv .tt-sv-ava .fa { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-size: 15px; border: 1.5px solid #000; box-sizing: border-box; }
.tt-sv .tt-sv-ava.tt-k-top5, .tt-sv .tt-sv-ava.tt-k-rashifal, .tt-sv .tt-sv-ava.tt-k-quiz, .tt-sv .tt-sv-ava.tt-k-history, .tt-sv .tt-sv-ava.tt-k-rates { background-size: cover; }

/* card slides: no photo, a coloured background with the text centred */
.tt-sv .tt-sv-frame.is-card { background: #111; }
.tt-sv .tt-sv-frame.is-card[data-theme="top5"] { background: linear-gradient(160deg, #7C2D12 0%, #DC2626 100%); }
.tt-sv .tt-sv-frame.is-card[data-theme="rashifal"] { background: linear-gradient(160deg, #3B0764 0%, #BE185D 100%); }
.tt-sv .tt-sv-frame.is-card[data-theme="quiz"] { background: linear-gradient(160deg, #0C4A6E 0%, #2563EB 100%); }
.tt-sv .tt-sv-frame.is-card[data-theme="history"] { background: linear-gradient(160deg, #451A03 0%, #B45309 100%); }
.tt-sv .tt-sv-frame.is-card[data-theme="rates"] { background: linear-gradient(160deg, #022C22 0%, #15803D 100%); }
.tt-sv .tt-sv-frame.is-card .tt-sv-shade { display: none; }
.tt-sv .tt-sv-frame.is-card .tt-sv-body { top: 86px; display: flex; flex-direction: column; justify-content: center; padding: 0 22px 26px; }
.tt-sv .tt-sv-sym { font-size: 84px; line-height: 1; margin-bottom: 10px; }
.tt-sv .tt-sv-year { font-size: 74px; line-height: 1; font-weight: 900; letter-spacing: -.02em; color: #FDE68A; margin-bottom: 14px; }
.tt-sv .tt-sv-big { font-size: 20px; line-height: 1.5; }
.tt-sv .tt-sv-rank { font-size: 15px; font-weight: 900; color: #FDE68A; margin-bottom: 6px; }
.tt-sv .tt-sv-chip { display: inline-block; align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.tt-sv .tt-sv-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.tt-sv .tt-sv-sub { font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.tt-sv .tt-sv-huge { font-size: 64px; line-height: 1.1; font-weight: 900; color: #fff; margin: 4px 0 12px; }
.tt-sv .tt-sv-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.tt-sv .tt-sv-rows { display: flex; flex-direction: column; gap: 12px; }
.tt-sv .tt-sv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .13); }
.tt-sv .tt-sv-row span { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.tt-sv .tt-sv-row b { font-size: 24px; font-weight: 900; color: #fff; white-space: nowrap; }
.tt-sv .tt-sv-place { margin-bottom: 14px; font-size: 16px; font-weight: 700; color: #fff; }
.tt-sv button.tt-sv-loc { align-self: flex-start; margin-top: 18px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.tt-sv button.tt-sv-loc:disabled { opacity: .5; }
/* quiz */
.tt-sv .tt-sv-qn { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-bottom: 10px; }
.tt-sv .tt-sv-q { font-size: 21px; margin-bottom: 18px; }
.tt-sv .tt-sv-opts { display: flex; flex-direction: column; gap: 9px; }
.tt-sv button.tt-sv-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.tt-sv button.tt-sv-opt b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 12px; }
.tt-sv button.tt-sv-opt.is-right { background: #16A34A; border-color: #86EFAC; }
.tt-sv button.tt-sv-opt.is-wrong { background: #DC2626; border-color: #FCA5A5; }
.tt-sv button.tt-sv-opt.is-dim { opacity: .45; }
.tt-sv .tt-sv-fact { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.45; color: #fff; }
.tt-sv .tt-sv-fact[hidden] { display: none; }

/* ===== Stories v3: one circle per top story, animated Rates / Fuel slides ===== */
.tt-story-ring { position: relative; }
.tt-story-rank { position: absolute; right: -3px; bottom: -3px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #DC2626; border: 2px solid #fff; color: #fff; font: 800 11px/16px Inter, sans-serif; font-style: normal; text-align: center; }
.tt-k-rates { background: linear-gradient(135deg, #F59E0B, #15803D); }
.tt-k-fuel { background: linear-gradient(135deg, #2563EB, #06B6D4); }

/* animated card backgrounds: the colours drift slowly */
.tt-sv .tt-sv-frame.is-card[data-theme="fx"], .tt-sv .tt-sv-frame.is-card[data-theme="gold"], .tt-sv .tt-sv-frame.is-card[data-theme="silver"],
.tt-sv .tt-sv-frame.is-card[data-theme="petrol"], .tt-sv .tt-sv-frame.is-card[data-theme="diesel"] { background-size: 220% 220%; animation: ttSvShift 11s ease-in-out infinite; }
.tt-sv .tt-sv-frame.is-card[data-theme="fx"] { background-image: linear-gradient(160deg, #052E2B, #0F766E 45%, #16A34A 70%, #064E3B); }
.tt-sv .tt-sv-frame.is-card[data-theme="gold"] { background-image: linear-gradient(160deg, #2B1A00, #92600A 38%, #E7B23A 66%, #7A4E00); }
.tt-sv .tt-sv-frame.is-card[data-theme="silver"] { background-image: linear-gradient(160deg, #0F172A, #475569 40%, #CBD5E1 70%, #64748B); }
.tt-sv .tt-sv-frame.is-card[data-theme="petrol"] { background-image: linear-gradient(160deg, #0B1D4A, #1D4ED8 48%, #06B6D4 76%, #0B1D4A); }
.tt-sv .tt-sv-frame.is-card[data-theme="diesel"] { background-image: linear-gradient(160deg, #2A1203, #B45309 48%, #F59E0B 76%, #2A1203); }
@keyframes ttSvShift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

/* floating symbols (coins, dollar signs, drops) */
.tt-sv .tt-sv-fxl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.tt-sv .tt-sv-fxl i { position: absolute; bottom: -50px; color: #fff; font-style: normal; line-height: 1; animation: ttSvRise linear infinite; }
@keyframes ttSvRise { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-1100px) rotate(360deg); } }
.tt-sv .tt-sv-bars, .tt-sv .tt-sv-top, .tt-sv .tt-sv-body { z-index: 3; }

/* the coin that turns on top of each rates slide */
.tt-sv .tt-sv-coin { width: 84px; height: 84px; margin-bottom: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 255, 255, .35); animation: ttSvSpin 3.6s ease-in-out infinite; }
.tt-sv .tt-sv-coin.is-fx { background: radial-gradient(circle at 30% 28%, #86EFAC, #16A34A 70%); font-size: 24px; }
.tt-sv .tt-sv-coin.is-gold { background: radial-gradient(circle at 30% 28%, #FFF1B8, #E0A82E 62%, #A16207); color: #5B3A00; }
.tt-sv .tt-sv-coin.is-silver { background: radial-gradient(circle at 30% 28%, #fff, #CBD5E1 60%, #64748B); color: #334155; }
.tt-sv .tt-sv-coin.is-petrol { background: radial-gradient(circle at 30% 28%, #93C5FD, #2563EB 70%); }
.tt-sv .tt-sv-coin.is-diesel { background: radial-gradient(circle at 30% 28%, #FDE68A, #D97706 70%); }
@keyframes ttSvSpin { 0%, 12% { transform: rotateY(0deg); } 52%, 100% { transform: rotateY(360deg); } }

/* the big number, the change chip and the dollar chart */
.tt-sv .tt-sv-huge { font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.tt-sv .tt-sv-frame[data-theme="gold"] .tt-sv-huge { background: linear-gradient(100deg, #FFF6C9 20%, #F5C542 45%, #FFF6C9 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: ttSvShimmer 3.2s linear infinite; }
.tt-sv .tt-sv-frame[data-theme="silver"] .tt-sv-huge { background: linear-gradient(100deg, #fff 20%, #94A3B8 45%, #fff 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: ttSvShimmer 3.2s linear infinite; }
@keyframes ttSvShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.tt-sv .tt-sv-delta { display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 700; color: #fff; }
.tt-sv .tt-sv-delta.is-up { color: #FDE68A; }
.tt-sv .tt-sv-delta.is-down { color: #BBF7D0; }
.tt-sv .tt-sv-spark { display: block; width: 100%; height: 74px; margin-top: 8px; overflow: visible; }
.tt-sv .tt-sv-spark-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ttSvDraw 1.9s ease-out .25s forwards; }
.tt-sv .tt-sv-spark-d { opacity: 0; animation: ttSvDot .4s ease-out 2s forwards; }
@keyframes ttSvDraw { to { stroke-dashoffset: 0; } }
@keyframes ttSvDot { to { opacity: 1; } }
.tt-sv .tt-sv-pill { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 11px 16px; border-radius: 14px; background: rgba(255, 255, 255, .16); }
.tt-sv .tt-sv-pill span { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.tt-sv .tt-sv-pill b { font-size: 20px; font-weight: 900; color: #fff; }
.tt-sv .tt-sv-place { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .tt-sv .tt-sv-frame.is-card, .tt-sv .tt-sv-fxl i, .tt-sv .tt-sv-coin, .tt-sv .tt-sv-huge, .tt-sv .tt-sv-spark-l, .tt-sv .tt-sv-spark-d { animation: none !important; }
  .tt-sv .tt-sv-spark-l { stroke-dashoffset: 0; } .tt-sv .tt-sv-spark-d { opacity: 1; }
}

/* ===== Stories v4: one Top 5 circle whose pictures take turns; much richer Rates / Horoscope / Quiz / History / Fuel cards ===== */

/* the Top 5 circle */
.tt-story-multi .tt-story-ring { overflow: visible; }
.tt-story-multi .tt-ms { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; max-width: none !important; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-sizing: border-box; opacity: 0; transform: scale(1.12); transition: opacity .9s ease, transform 2.6s ease; background: #E2E8F0; }
.tt-story-multi .tt-ms.is-on { opacity: 1; transform: scale(1); }
.tt-story-multi .tt-story-ring { background: conic-gradient(from 0deg, #F59E0B, #EF4444, #A855F7, #2563EB, #F59E0B); animation: ttStoryRing 6s linear infinite; }
.tt-story-multi .tt-story-ring > img, .tt-story-multi .tt-story-ring > i { animation: none; }
@keyframes ttStoryRing { to { filter: hue-rotate(360deg); } }
.tt-story-rank .fa { font-size: 10px; line-height: 16px; color: #fff; }

/* body of every slide: shared helpers */
.tt-sv .tt-sv-center { text-align: center; align-self: center; }
.tt-sv .tt-sv-body.is-rashi, .tt-sv .tt-sv-body.is-hist, .tt-sv .tt-sv-body.is-petrol, .tt-sv .tt-sv-body.is-diesel, .tt-sv .tt-sv-body.is-qresult { text-align: center; align-items: center; }
.tt-sv .tt-sv-body.is-petrol .tt-sv-loc, .tt-sv .tt-sv-body.is-diesel .tt-sv-loc { align-self: center; }
.tt-sv .tt-sv-glass { width: 100%; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tt-sv .tt-sv-glass .tt-sv-p { margin: 0; text-align: left; }

/* animated colour for the horoscope and quiz backgrounds too */
.tt-sv .tt-sv-frame.is-card[data-theme="rashifal"], .tt-sv .tt-sv-frame.is-card[data-theme="quiz"] { background-size: 220% 220%; animation: ttSvShift 12s ease-in-out infinite; }
.tt-sv .tt-sv-frame.is-card[data-theme="rashifal"] { background-image: linear-gradient(160deg, #1E0B4B, #6D28D9 40%, #DB2777 72%, #1E0B4B); }
.tt-sv .tt-sv-frame.is-card[data-theme="quiz"] { background-image: linear-gradient(160deg, #0B1B4A, #2563EB 42%, #7C3AED 74%, #0B1B4A); }

/* HOROSCOPE: twinkling sky, nebula clouds, the zodiac wheel turning behind the sign */
.tt-sv .tt-st { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7); animation: ttSvTwinkle ease-in-out infinite; }
@keyframes ttSvTwinkle { 0%, 100% { opacity: .12; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.tt-sv .tt-nebula { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(60px); opacity: .5; animation: ttSvDrift 14s ease-in-out infinite alternate; }
.tt-sv .tt-nebula.n1 { left: -90px; top: -60px; background: #F472B6; }
.tt-sv .tt-nebula.n2 { right: -100px; bottom: 60px; background: #60A5FA; animation-delay: -6s; }
@keyframes ttSvDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 50px) scale(1.2); } }
.tt-sv .tt-sv-wheelwrap { position: relative; width: 100%; height: 250px; display: grid; place-items: center; margin-bottom: 4px; }
.tt-sv .tt-sv-wheel { position: absolute; width: 310px; height: 310px; left: 50%; top: 50%; margin: -155px 0 0 -155px; animation: ttSvRays 70s linear infinite; opacity: .95; }
.tt-sv .tt-sv-sym { position: relative; font-size: 92px; line-height: 1; color: #fff; text-shadow: 0 0 22px rgba(255, 255, 255, .85), 0 0 60px rgba(236, 72, 153, .9); animation: ttSvGlow 3.2s ease-in-out infinite; margin: 0; }
@keyframes ttSvGlow { 0%, 100% { transform: scale(1); text-shadow: 0 0 18px rgba(255, 255, 255, .7), 0 0 50px rgba(236, 72, 153, .8); } 50% { transform: scale(1.08); text-shadow: 0 0 28px rgba(255, 255, 255, 1), 0 0 80px rgba(236, 72, 153, 1); } }
.tt-sv .tt-sv-body.is-rashi .tt-sv-h { margin-bottom: 14px; font-size: 30px; letter-spacing: .04em; }

/* QUIZ: countdown line, neon options, shake, confetti, result */
.tt-sv .tt-sv-qn { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tt-sv .tt-sv-qn span { white-space: nowrap; }
.tt-sv .tt-sv-qt { flex: 1; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .22); position: relative; overflow: hidden; }
.tt-sv .tt-sv-qt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #86EFAC, #FDE68A, #FCA5A5); transform-origin: left; animation: ttSvTimer 22s linear forwards; }
.tt-sv .tt-sv-frame.is-paused .tt-sv-qt::after { animation-play-state: paused; }
@keyframes ttSvTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tt-sv button.tt-sv-opt { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transition: transform .15s, background .2s, box-shadow .2s; }
.tt-sv button.tt-sv-opt:hover { transform: translateX(4px); background: rgba(255, 255, 255, .22); box-shadow: 0 0 18px rgba(147, 197, 253, .55); }
.tt-sv button.tt-sv-opt.is-right { box-shadow: 0 0 26px rgba(74, 222, 128, .8); }
.tt-sv button.tt-sv-opt.is-wrong { box-shadow: 0 0 26px rgba(248, 113, 113, .8); }
.tt-sv .tt-sv-body.shake { animation: ttSvShake .55s ease; }
@keyframes ttSvShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.tt-sv .tt-sv-cf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.tt-sv .tt-sv-cf b { position: absolute; top: -24px; border-radius: 2px; animation: ttSvFall linear forwards; }
@keyframes ttSvFall { to { top: 105%; transform: rotate(720deg) translateX(40px); } }
.tt-sv .tt-sv-trophy { font-size: 92px; line-height: 1; color: #FDE68A; text-shadow: 0 0 30px rgba(253, 224, 71, .85); margin-bottom: 10px; animation: ttSvGlow 2.4s ease-in-out infinite; }
.tt-sv .tt-sv-huge small { font-size: 34px; opacity: .8; font-weight: 700; }
.tt-sv .tt-sv-huge.tt-sv-metal { font-size: clamp(38px, 11.5vw, 52px); white-space: nowrap; padding-right: .08em; }   /* lakh-size gold / silver prices must fit the card (the last digit was clipped) */

/* HISTORY: an old film / parchment look */
.tt-sv .tt-sv-frame.is-card[data-theme="history"] { background-image: linear-gradient(170deg, #1C0F02, #5B3A12 45%, #92602A 72%, #2B1807); box-shadow: inset 0 0 130px rgba(0, 0, 0, .7), 0 20px 60px rgba(0, 0, 0, .55); }
.tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.35'/></svg>"); animation: ttSvGrain .6s steps(3) infinite; }
@keyframes ttSvGrain { 0% { background-position: 0 0; } 33% { background-position: -40px 25px; } 66% { background-position: 30px -35px; } 100% { background-position: 0 0; } }
.tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl::before, .tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; background: repeating-linear-gradient(to bottom, transparent 0 14px, rgba(255, 244, 214, .55) 14px 30px); opacity: .6; }
.tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl::before { left: 6px; }
.tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl::after { right: 6px; }
.tt-sv .tt-sv-year { font-family: Georgia, 'Times New Roman', serif; font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: #FDE68A; text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(253, 186, 116, .5); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.tt-sv .tt-sv-ago { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 237, 200, .85); margin-bottom: 18px; }
.tt-sv .tt-sv-paper { width: 100%; padding: 18px 20px; border-radius: 6px; background: linear-gradient(#F6E7C1, #E8D09B); color: #3B2A14; transform: rotate(-1.2deg); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 40px rgba(120, 80, 20, .25); border: 1px solid rgba(90, 60, 20, .4); }
.tt-sv .tt-sv-paper .tt-sv-p { color: #3B2A14; margin: 0; text-align: left; font-family: Georgia, 'Times New Roman', serif; text-shadow: none; font-size: 18px; line-height: 1.55; font-weight: 500; }

/* DOLLAR: a ticker running along the top */
.tt-sv .tt-sv-ticker { position: absolute; top: -8px; left: -22px; right: -22px; overflow: hidden; background: rgba(0, 0, 0, .28); padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.tt-sv .tt-sv-ticker div { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #BBF7D0; animation: ttSvTicker 26s linear infinite; }
@keyframes ttSvTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tt-sv .tt-sv-body.is-fx { padding-top: 34px; }

/* GOLD / SILVER / DOLLAR coin: rays turning behind it */
.tt-sv .tt-sv-coinwrap { position: relative; width: 84px; height: 84px; margin-bottom: 16px; }
.tt-sv .tt-sv-coinwrap .tt-sv-coin { margin: 0; position: relative; z-index: 1; }
.tt-sv .tt-sv-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .32) 0 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 64%); mask: radial-gradient(circle, #000 12%, transparent 64%); animation: ttSvRays 26s linear infinite; }
.tt-sv .tt-sv-rays.is-gold { background: repeating-conic-gradient(from 0deg, rgba(255, 233, 150, .5) 0 5deg, transparent 5deg 18deg); }
.tt-sv .tt-sv-rays.is-fx { background: repeating-conic-gradient(from 0deg, rgba(167, 243, 208, .4) 0 5deg, transparent 5deg 18deg); }
@keyframes ttSvRays { to { transform: rotate(360deg); } }

/* PETROL / DIESEL: the gauge */
.tt-sv .tt-sv-gauge { width: 100%; max-width: 320px; margin: 4px auto 0; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.tt-sv .tt-sv-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.tt-sv .tt-sv-gfill { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.2, .9, .2, 1); }
.tt-sv .tt-sv-gauge.go .tt-sv-gfill { stroke-dashoffset: var(--p); }
.tt-sv .tt-sv-gauge.is-petrol .tt-sv-gfill { stroke: #BFDBFE; }
.tt-sv .tt-sv-gauge.is-diesel .tt-sv-gfill { stroke: #FDE68A; }
.tt-sv .tt-sv-needle { transform-box: view-box; transform-origin: 100px 104px; transform: rotate(-90deg); transition: transform 1.8s cubic-bezier(.2, .9, .2, 1); }
.tt-sv .tt-sv-gauge.go .tt-sv-needle { transform: rotate(var(--a)); }
.tt-sv .tt-sv-gnum { margin-top: -4px; text-align: center; }
.tt-sv .tt-sv-body.is-petrol .tt-sv-note, .tt-sv .tt-sv-body.is-diesel .tt-sv-note { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tt-sv .tt-st, .tt-sv .tt-nebula, .tt-sv .tt-sv-wheel, .tt-sv .tt-sv-sym, .tt-sv .tt-sv-qt::after, .tt-sv .tt-sv-rays, .tt-sv .tt-sv-ticker div,
  .tt-sv .tt-sv-frame.is-card[data-theme="history"] .tt-sv-fxl, .tt-story-multi .tt-story-ring { animation: none !important; }
  .tt-sv .tt-sv-gfill, .tt-sv .tt-sv-needle { transition: none; }
}

/* Stories strip: one-line labels ("Dollar · Gold…") so every circle sits on the same line */
.tt-stories-row { align-items: flex-start; }
.tt-story { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; align-self: flex-start; }
.tt-story .tt-story-name { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; -webkit-box-orient: initial; }

/* ===== Air quality card (sidebar, under the weather card): live sky + smog + city skyline that fades as the AQI rises ===== */
.hr-modern .tt-aq { --aq-a: #2F7BD8; --aq-b: #9FD3F5; --aq-haze: rgba(196, 170, 128, .2); --aq-blur: 0px; --aq-col: #16A34A;
  position: relative; overflow: hidden; color: #fff; border-radius: 16px; padding: 16px 18px 12px; min-height: 236px; box-sizing: border-box;
  display: flex; flex-direction: column; background: linear-gradient(180deg, var(--aq-a), var(--aq-b)); box-shadow: 0 8px 22px rgba(15, 23, 42, .14); }
.hr-modern .tt-aq.is-loading { opacity: .92; }
.tt-aq-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tt-aq-scene > * { position: absolute; }
.tt-aq-scene .aq-sky { inset: 0; background: linear-gradient(180deg, var(--aq-a), var(--aq-b)); transition: background 1s; }
.tt-aq-scene .aq-orb { top: 16%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  background: radial-gradient(circle, #FFF8DC 0, #FFD978 42%, #FFB347 62%, rgba(255, 179, 71, 0) 72%); box-shadow: 0 0 46px 20px rgba(255, 205, 120, .45); filter: blur(var(--aq-blur)); }
.tt-aq-scene .aq-orb.is-moon { background: radial-gradient(circle at 40% 40%, #F7F3E1 0, #E4DEC4 55%, rgba(228, 222, 196, 0) 72%); box-shadow: 0 0 30px 10px rgba(240, 235, 210, .3); }
.tt-aq-scene .aq-smog { left: 0; width: 200%; display: flex; animation: aqDrift 90s linear infinite; }
.tt-aq-scene .aq-smog.l1 { bottom: 22%; height: 62%; }
.tt-aq-scene .aq-smog.l2 { bottom: -6%; height: 58%; animation-duration: 60s; animation-direction: reverse; }
.tt-aq-scene .aq-smog-svg { width: 50%; height: 100%; display: block; flex: 0 0 50%; }
.tt-aq-scene .aq-smog rect { fill: #fff; }
.tt-aq.is-night .tt-aq-scene .aq-smog rect { fill: #A8A091; }
@keyframes aqDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tt-aq-scene .aq-city { left: 0; right: 0; bottom: 0; }
.tt-aq-scene .aq-city svg { display: block; width: 100%; height: 100%; }
.tt-aq-scene .aq-city.far { height: 54%; filter: blur(calc(var(--aq-blur) * 1.6)); }
.tt-aq-scene .aq-city.mid { height: 42%; filter: blur(calc(var(--aq-blur) * .8)); }
.tt-aq-scene .aq-city.near { height: 27%; }
.tt-aq-scene .aq-win { animation: aqWin 9s steps(1) infinite; }
@keyframes aqWin { 0%, 70% { opacity: .95; } 71%, 100% { opacity: .25; } }
.tt-aq-scene .aq-hazefill { inset: 0; background: linear-gradient(to top, var(--aq-haze) 0%, var(--aq-haze) 30%, rgba(0, 0, 0, 0) 92%); }
.tt-aq-scene .aq-dust { inset: 0; }
.tt-aq-scene .aq-p { position: absolute; border-radius: 50%; background: rgba(255, 244, 222, .95); box-shadow: 0 0 4px rgba(255, 240, 210, .8); animation-name: aqFloat, aqBob; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
@keyframes aqFloat { from { transform: translateX(-40px); } to { transform: translateX(80px); } }
@keyframes aqBob { from { margin-top: -6px; } to { margin-top: 6px; } }
.tt-aq-scene .aq-shade { inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .5) 100%); }

.tt-aq-top, .tt-aq-main, .tt-aq-scale, .tt-aq-pol { position: relative; z-index: 1; }
.tt-aq-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tt-aq-place { display: flex; flex-direction: column; min-width: 0; }
.tt-aq-city { font-size: 16px; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-aq-sub { font-size: 11.5px; opacity: .9; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.tt-aq-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.tt-aq-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--aq-col); box-shadow: 0 0 0 0 var(--aq-col); animation: aqPulse 1.8s infinite; }
@keyframes aqPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.tt-aq-main { margin-top: auto; display: flex; align-items: flex-end; gap: 14px; padding-top: 16px; }
.tt-aq-num { display: flex; flex-direction: column; line-height: .9; }
.tt-aq-num b { font-size: 54px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 3px 14px rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; }
.tt-aq-num small { margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.tt-aq-cat { min-width: 0; padding-bottom: 4px; }
.tt-aq-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--aq-col); font-size: 12px; font-weight: 800; box-shadow: 0 0 16px var(--aq-col); }
.tt-aq-cat p { margin: 6px 0 0; font-size: 12px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tt-aq-scale { height: 6px; margin: 12px 0 9px; border-radius: 6px;
  background: linear-gradient(to right, #16A34A 0 10%, #65A30D 10% 20%, #CA8A04 20% 40%, #EA580C 40% 60%, #DC2626 60% 80%, #7F1D1D 80% 100%); }
.tt-aq-scale i { position: absolute; top: -5px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--aq-col); box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: left 1.4s cubic-bezier(.2, .9, .2, 1); }
.tt-aq-pol { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-aq-pol span { display: inline-flex; gap: 4px; align-items: baseline; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 11px; }
.tt-aq-pol em { font-style: normal; opacity: .8; }
.tt-aq-pol b { font-weight: 800; }
.tt-aq-pol small { width: 100%; font-size: 10px; opacity: .75; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) {
  .tt-aq-scene .aq-smog, .tt-aq-scene .aq-p, .tt-aq-scene .aq-win, .tt-aq-live i { animation: none !important; }
}

/* ===== Weather <-> Air quality slider: one card in the sidebar, two slides taking turns, two dots below ===== */
.tt-wxaq { position: relative; }
.tt-wxaq-view { overflow: hidden; border-radius: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, .14); }
.tt-wxaq-track { display: flex; align-items: stretch; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.hr-modern .tt-wxaq-track > .tt-wx, .hr-modern .tt-wxaq-track > .tt-aq { flex: 0 0 100%; min-width: 0; margin: 0 !important; box-shadow: none; border-radius: 0; }
.tt-wxaq-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.tt-wxaq-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 7px; background: #CBD5E1; cursor: pointer; transition: width .25s, background .25s; }
.tt-wxaq-dots button.is-on { width: 18px; background: #2563EB; }
/* the air-quality slide at the weather card's size */
.hr-modern .tt-aq { min-height: 214px; padding: 16px 18px 14px; }
.tt-aq-main { padding-top: 8px; gap: 12px; }
.tt-aq-num b { font-size: 46px; }
.tt-aq-cat p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
.tt-aq-scale { margin: 10px 0 8px; }
@media (prefers-reduced-motion: reduce) { .tt-wxaq-track { transition: none; } }

/* AQI slide: never taller than the weather card. contain:size takes its own content out of the height calculation, so the slider row is exactly
   as tall as the weather card; the AQI slide is stretched to that and only the essentials are in it. */
.hr-modern .tt-wxaq-track > .tt-aq { contain: size; min-height: 0; padding: 14px 16px 12px; }
.tt-aq-top { gap: 6px; }
.tt-aq-city { font-size: 15px; }
.tt-aq-sub { font-size: 11px; }
.tt-aq-live { padding: 2px 8px; font-size: 10px; }
.tt-aq-main { padding-top: 4px; gap: 11px; }
.tt-aq-num b { font-size: 42px; }
.tt-aq-num small { margin-top: 2px; font-size: 10px; }
.tt-aq-chip { padding: 2px 10px; font-size: 11.5px; }
.tt-aq-cat p { margin-top: 4px; font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; }
.tt-aq-scale { margin: 9px 0 7px; height: 5px; }
.tt-aq-scale i { top: -5px; width: 15px; height: 15px; margin-left: -7px; }
.tt-aq-pol { gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.tt-aq-pol span { padding: 2px 7px; font-size: 10.5px; white-space: nowrap; }

/* AQI slide layout v2: left = place + advice, right = the AQI badge with the number and the category tag under it; scale and chips at the bottom */
.tt-sidebar { gap: 14px; }
.hr-modern .tt-sidebar { gap: 14px; }
.hr-modern .tt-wxaq-track > .tt-aq { padding: 14px 16px 12px; }
.tt-aq-top { align-items: flex-start; }
.tt-aq-place { flex: 1 1 auto; max-width: 58%; }
.tt-aq-city { font-size: 16px; }
.tt-aq-sub { font-size: 11px; line-height: 1.3; white-space: normal; }
.tt-aq-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; }
.tt-aq-numb { display: block; margin-top: 4px; font-size: 50px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 3px 14px rgba(0, 0, 0, .45); }
.tt-aq-right .tt-aq-chip { margin-top: 2px; }
.tt-aq-tip { margin-top: 7px; }
.tt-aq-tip p { margin: 0; font-size: 11.5px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tt-aq-scale { margin-top: auto; }

/* Stories card: tighter - heading sits close to the circles, so the card is shorter and the weather card moves up under it */
.tt-stories { padding: 8px 12px 6px; }
.tt-stories-head { align-items: center; margin-bottom: 2px; line-height: 1.2; }
.tt-stories-title, .tt-stories-hint { line-height: 1.2; }
.tt-stories-row { padding: 2px 2px 2px; }   /* 2px top so the hover zoom of a circle is not clipped */
.tt-story-name { margin-top: 3px; }

/* Weather / air quality slider: no dots (it slides by itself; swipe or drag changes it by hand). The page script sets its height so that its
   bottom edge meets the bottom of the first More Stories row; when that is short (.is-mini) both slides switch to a one-line layout. */
.tt-wxaq-dots { display: none; }
.tt-wxaq-view { cursor: grab; -webkit-user-select: none; user-select: none; }
.tt-wxaq-view:active { cursor: grabbing; }
.hr-modern .tt-wxaq.is-mini .tt-wx { padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tt-wxaq.is-mini .tt-wx-date, .tt-wxaq.is-mini .tt-wx-days { display: none; }
.tt-wxaq.is-mini .tt-wx-top { display: block; position: static; }   /* static: the location button is placed against the card, not against this row */
.tt-wxaq.is-mini .tt-wx-place { padding-right: 32px; }
.tt-wxaq.is-mini .tt-wx-loc { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; font-size: 11px; z-index: 2; }
.tt-wxaq.is-mini .tt-wx-main { margin: 0; gap: 8px; }
.tt-wxaq.is-mini .tt-wx-icon { width: 30px; height: 30px; font-size: 26px; flex: 0 0 auto; }
.tt-wxaq.is-mini .tt-wx-temp { font-size: 30px; }
.tt-wxaq.is-mini .tt-wx-temp sup { font-size: 12px; top: 2px; }
.hr-modern .tt-wxaq.is-mini .tt-aq { padding: 8px 14px; justify-content: center; }
.tt-wxaq.is-mini .tt-aq-tip, .tt-wxaq.is-mini .tt-aq-pol, .tt-wxaq.is-mini .tt-aq-live { display: none; }
.tt-wxaq.is-mini .tt-aq-place { max-width: 56%; }
.tt-wxaq.is-mini .tt-aq-top { align-items: center; }
.tt-wxaq.is-mini .tt-aq-right { flex-direction: row; align-items: center; gap: 8px; }
.tt-wxaq.is-mini .tt-aq-numb { margin: 0; font-size: 30px; }
.tt-wxaq.is-mini .tt-aq-right .tt-aq-chip { margin: 0; }
.tt-wxaq.is-mini .tt-aq-scale { margin: 8px 0 0; }

/* Fitted to the first story row (normal size): city + date on top, temperature in the middle, 4-day forecast pinned to the bottom edge */
.hr-modern .tt-wxaq.is-fit:not(.is-mini) .tt-wx { display: flex; flex-direction: column; box-sizing: border-box; }
.tt-wxaq.is-fit:not(.is-mini) .tt-wx-main { margin: auto 0; }
.tt-wxaq.is-fit:not(.is-mini) .tt-wx-days { margin-top: 0; }

/* Stories viewer: small centred "Newsadda / Powered by Techotd" at the bottom of every story except Top 5 */
.tt-sv .tt-sv-brand { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; pointer-events: none; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .45); line-height: 1.25; }
.tt-sv .tt-sv-brand b { font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.tt-sv .tt-sv-brand span { font-size: 10.5px; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.tt-sv .tt-sv-frame[data-kind="top5"] .tt-sv-brand { display: none; }
.tt-sv .tt-sv-frame:not([data-kind="top5"]) .tt-sv-body { padding-bottom: 54px; }   /* leave room so the story text never touches the footer */

/* Live cricket card: no dots (it slides by itself; swipe or drag changes the match), same as the Weather / Air quality card */
.hr-modern .cr-side .cr-rot-dots, .cr-rot-dots { display: none; }
.cr-rot-view { cursor: grab; -webkit-user-select: none; user-select: none; }
.cr-rot-view:active { cursor: grabbing; }
.cr-rot-view a { -webkit-user-drag: none; }

/* Cricket card in the sidebar: the generic .tt-section rule gave it a 24px bottom margin on top of the sidebar's 14px gap, which showed as an
   extra gap above the newsletter (phone and desktop). Spacing between sidebar cards comes from the sidebar gap only. */
.hr-modern .tt-sidebar > .cr-side { margin-top: 0; margin-bottom: 0; }

/* Air quality card: no colour bar (and so no dot on it) */
.tt-aq-scale { display: none; }
/* PM2.5 / PM10 / O3 / NO2 as one row of 4 across the bottom of the card, like the Sat / Sun / Mon / Tue row of the weather card (where the bar used to be) */
.hr-modern .tt-aq .tt-aq-pol { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 5px; margin-top: auto; padding-top: 6px; overflow: visible; flex-wrap: nowrap; position: relative; z-index: 1; }
.hr-modern .tt-aq .tt-aq-pol span { display: flex; justify-content: center; align-items: baseline; gap: 4px; padding: 4px 2px; border-radius: 10px; background: rgba(255, 255, 255, .13); font-size: 11.5px; line-height: 1.3; white-space: nowrap; min-width: 0; }
.hr-modern .tt-aq .tt-aq-pol span em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .85; }
.hr-modern .tt-aq .tt-aq-pol span b { font-size: 12px; font-weight: 700; }
.hr-modern .tt-aq .tt-aq-tip p { -webkit-line-clamp: 2; }   /* two lines of advice, so the row of 4 always fits */
.tt-wxaq.is-mini .tt-aq-pol { display: none !important; }   /* the one-line mini layout has no room for the row */

/* AQI card, normal size: tighter top part so the row of 4 pollutant chips fits inside the SAME card height (nothing is cut at the bottom).
   One-line "Air quality" label, smaller number with a small "AQI" after it instead of the separate badge, two lines of advice. */
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq { padding: 12px 16px 10px; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-live { display: none; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-numb { margin-top: 0; font-size: 40px; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-numb::after { content: "AQI"; margin-left: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; opacity: .85; text-shadow: none; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 1.3; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-tip { margin-top: 4px; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-tip p { font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-pol { padding-top: 4px; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-pol span { padding: 3px 2px; font-size: 11px; }
.hr-modern .tt-wxaq:not(.is-mini) .tt-aq .tt-aq-pol span b { font-size: 11.5px; }

/* Category page: the article count as a small glossy oval pill - round newspaper icon on the left, number with ARTICLES under it, a slow shine passing over it */
.hr-modern .tt-cat-count-badge {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "ic num" "ic lbl"; column-gap: 9px; align-items: center; text-align: left;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 100%);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 6px 16px rgba(8, 18, 60, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hr-modern .tt-cat-count-badge::before {
  content: "\f1ea"; font-family: FontAwesome; grid-area: ic;
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--tt-primary, #1D4ED8);
  background: linear-gradient(145deg, #FFFFFF 0%, #DBEAFE 100%);
  box-shadow: 0 3px 8px rgba(8, 18, 60, .28), 0 0 0 3px rgba(255, 255, 255, .22);
}
.hr-modern .tt-cat-count-badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg);
  animation: ttCatShine 5s ease-in-out infinite;
}
@keyframes ttCatShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.hr-modern .tt-cat-count-badge .count-num { grid-area: num; align-self: end; font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(8, 18, 60, .35); }
.hr-modern .tt-cat-count-badge .count-lbl { grid-area: lbl; align-self: start; margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .hr-modern .tt-cat-count-badge::after { animation: none; display: none; } }

/* Category hero: the article count sits right next to the category name (every category), wrapping under it only when the name is very long */
.hr-modern .tt-cat-hero-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 var(--tt-s-2); }
.hr-modern .tt-cat-hero-titlerow .tt-cat-hero-title { margin: 0 !important; }
.hr-modern .tt-cat-hero-titlerow .tt-cat-count-badge { flex: 0 0 auto; margin-top: 2px; }

/* Category count pill, final size: ONE line, no taller than the category name next to it - [icon] 52 ARTICLES */
.hr-modern .tt-cat-count-badge {
  display: inline-flex; align-items: center; gap: 6px; text-align: left;
  padding: 3px 11px 3px 3px; box-shadow: 0 3px 10px rgba(8, 18, 60, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hr-modern .tt-cat-count-badge::before { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 2px 5px rgba(8, 18, 60, .25), 0 0 0 2px rgba(255, 255, 255, .22); }
.hr-modern .tt-cat-count-badge .count-num { align-self: auto; font-size: 15px; line-height: 1; text-shadow: 0 1px 4px rgba(8, 18, 60, .3); }
.hr-modern .tt-cat-count-badge .count-lbl { align-self: auto; margin: 1px 0 0; font-size: 8px; letter-spacing: .1em; line-height: 1; }
.hr-modern .tt-cat-hero-titlerow { flex-wrap: nowrap; gap: 10px; }   /* name and pill stay on one line */
.hr-modern .tt-cat-hero-titlerow .tt-cat-hero-title { min-width: 0; }   /* a very long name wraps inside its own space instead of pushing the pill out */

/* Category count chip, simplest form: a small plain pill "101 articles" - no icon, no shine, no heavy glass */
.hr-modern .tt-cat-count-badge { gap: 4px; padding: 3px 10px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hr-modern .tt-cat-count-badge::before, .hr-modern .tt-cat-count-badge::after { display: none; }
.hr-modern .tt-cat-count-badge .count-num { font-size: 13px; font-weight: 800; text-shadow: none; }
.hr-modern .tt-cat-count-badge .count-lbl { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .9; }
.hr-modern .tt-cat-hero-titlerow .tt-cat-count-badge { margin-top: 3px; }

/* Count chip: vertically centred on the category name's letters (the earlier 2-3px top margins pushed it down) - every category */
.hr-modern .tt-cat-hero-titlerow { align-items: center; }
.hr-modern .tt-cat-hero-titlerow .tt-cat-count-badge { margin: 0 !important; align-self: center; transform: translateY(-1px); }

/* Count chip, centred on the BODY of the category name (the lowercase letters), not on the line box: the line box carries empty space above the capitals,
   so a plain centre sat a few px too high. The nudge is proportional to the name's font size, so it works for every category at every screen size. */
.hr-modern .tt-cat-hero-titlerow .tt-cat-count-badge { transform: translateY(calc(clamp(26px, 3vw, 40px) * .1)); }

/* ---------- State / city news (/state, /state/{state}[/{city}]) ---------- */
.hr-modern .tt-city-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; margin: -4px 0 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.hr-modern .tt-city-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--tt-border); border-radius: 999px; background: var(--tt-bg); color: var(--tt-text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hr-modern .tt-city-chip span { font-size: 11.5px; font-weight: 700; color: var(--tt-text-muted); }
.hr-modern .tt-city-chip:hover { border-color: var(--tt-primary-600); color: var(--tt-primary-700); }
.hr-modern .tt-city-chip.is-on { background: var(--tt-primary); border-color: var(--tt-primary); color: var(--tt-text-on-primary); }
.hr-modern .tt-city-chip.is-on span { color: rgba(255,255,255,.8); }

.hr-modern .tt-states-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 30px; }
.hr-modern .tt-state-item-lnk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--tt-border); border-radius: var(--tt-r); background: var(--tt-bg); color: var(--tt-text); text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .15s, background .15s; }
.hr-modern .tt-state-item-lnk:hover { border-color: var(--tt-primary-600); background: var(--tt-primary-50); color: var(--tt-primary-700); }
.hr-modern .tt-state-item-n { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--tt-text-muted); }
@media (max-width: 991px) { .hr-modern .tt-states-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .hr-modern .tt-states-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .hr-modern .tt-state-item-lnk { padding: 12px; font-size: 14px; } }
.hr-modern .tt-home-states { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.hr-modern .tt-home-states .tt-city-chips { padding: 2px 0; margin: 0; flex: 1 1 auto; min-width: 0; }
.hr-modern .tt-home-states-label { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: var(--tt-text); white-space: nowrap; }
.hr-modern .tt-home-states-label i { color: var(--tt-primary-600); }