/*
 * redesign.css — Eenadu-style dense newspaper homepage + shared chrome.
 *
 * Loaded after usha-tokens.css and usha-core.css. Layers new tokens, the
 * trending bar / sticky nav / red breaking ticker / hero carousel / 2-col
 * article feed / restructured footer on top of the existing v1 chrome.
 *
 * Responsive: desktop ≥1024, tablet 768–1024 (sidebar drops below hero),
 * mobile <768 (single column).
 */

/* ============================================================ */
/* Extended tokens — additive over usha-tokens.css.             */
/* ============================================================ */
:root {
  --rd-navy:        #0E2540;
  --rd-navy-2:      #142F4F;
  --rd-blue:        #185FA5;
  --rd-blue-2:      #1A4A82;
  --rd-red:         #C8102E;
  --rd-red-2:       #A20D24;
  --rd-gold:        #D4A843;
  --rd-bg:          #F7F6F2;
  --rd-card:        #FFFFFF;
  --rd-border:      #E6E1D5;
  --rd-ink:         #0A0A0A;
  --rd-ink-2:       #1F2937;
  --rd-muted:       #4B5563;
  --rd-faint:       #8A8F99;
  --rd-shadow-sm:   0 1px 2px rgba(20, 30, 50, 0.06);
  --rd-shadow:      0 2px 8px rgba(20, 30, 50, 0.08);
  --rd-shadow-lg:   0 8px 24px rgba(20, 30, 50, 0.12);
  --rd-radius:      6px;
  --rd-radius-lg:   10px;
  --rd-ease:        0.2s ease;
  --rd-max-width:   1280px;
  --rd-side-pad:    24px;
}

/* Body background sits a touch warm so cards pop. */
body.has-bottom-nav { background: var(--rd-bg); }

/* ============================================================ */
/* MASTHEAD - logo + homepage utility band (HYD/AMR temps,        */
/* IST time, date). Phase 3A removed the trending bar and the old */
/* centered date / sunrise-sunset block. Values mirror the        */
/* desktop mockup .util component.                                */
/* ============================================================ */
.rd-masthead {
  background: var(--rd-card);
  border-bottom: 1px solid var(--rd-border);
}
.rd-masthead__inner {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 18px var(--rd-side-pad);
  display: flex;
  align-items: center;
  gap: 32px;
}
.rd-masthead__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.rd-masthead__logo img {
  display: block;
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* Utility band - spreads HYD / AMR / IST / date evenly between the logo
   and the right edge. Homepage only (rendered when activeCategory=home). */
.rd-util {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  padding: 10px 28px;
  background: #FAFBFC;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
}
.rd-util__cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}
.rd-util__icon { font-size: 22px; line-height: 1; }
.rd-util__cell-text {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.rd-util__city {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--rd-muted);
  letter-spacing: 0.2px;
}
.rd-util__temp {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--rd-navy);
}
.rd-util__label {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.rd-util__value {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--rd-navy);
}
.rd-util__divider {
  width: 1px;
  height: 32px;
  background: var(--rd-border);
  flex-shrink: 0;
}
.rd-util__date {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.rd-util__date-day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--rd-navy);
  letter-spacing: -0.3px;
}
.rd-util__date-num {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--rd-muted);
  letter-spacing: 0.3px;
}
.rd-masthead__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.rd-masthead__link {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--rd-ink-2);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  transition: border-color var(--rd-ease), color var(--rd-ease);
  white-space: nowrap;
}
.rd-masthead__link:hover {
  border-color: var(--rd-blue);
  color: var(--rd-blue);
}
.rd-masthead__link--accent {
  background: var(--rd-red);
  border-color: var(--rd-red);
  color: #fff;
}
.rd-masthead__link--accent:hover {
  background: var(--rd-red-2);
  border-color: var(--rd-red-2);
  color: #fff;
}

/* ============================================================ */
/* NAV — sticky, single line, blue, with dropdowns.              */
/* ============================================================ */
.rd-nav {
  background: var(--rd-navy);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.rd-nav__inner {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 0 var(--rd-side-pad);
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-nav__inner::-webkit-scrollbar { display: none; }
.rd-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--rd-ease), color var(--rd-ease);
  cursor: pointer;
  border: 0;
  background: transparent;
}
.rd-nav__item:hover,
.rd-nav__item:focus-visible {
  color: var(--rd-gold);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.rd-nav__item--active {
  color: var(--rd-gold);
  box-shadow: inset 0 -3px 0 var(--rd-gold);
}

/* Decorative "more" overflow marker (non-interactive, per mockup). Pushed
   to the far right so it + the search button sit at the end of the bar. */
.rd-nav__more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.rd-nav__search {
  flex: 0 0 auto;
  align-self: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--rd-ease);
}
.rd-nav__search:hover { background: rgba(255, 255, 255, 0.16); }

/* ============================================================ */
/* BREAKING TICKER — red, pulsing dot, marquee.                  */
/* ============================================================ */
.rd-breaking {
  background: #FEF2F2;
  border-top: 1px solid #FECACA;
  border-bottom: 1px solid #FECACA;
}
.rd-breaking__inner {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 0 var(--rd-side-pad);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  overflow: hidden;
  position: relative;
}
/* Pink mask over the strip's left padding so marquee text never peeks to
   the left of the label. Sits above the scrolling track (z-index 1) but
   below the label (z-index 2); width tracks the inner's left padding. */
.rd-breaking__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--rd-side-pad);
  background: #FEF2F2;
  z-index: 1;
  pointer-events: none;
}
.rd-breaking__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #DC2626;
  color: #fff;
  padding: 5px 22px 5px 12px;
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  z-index: 2;
}
.rd-breaking__dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: rdPulse 1.4s ease-in-out infinite;
}
@keyframes rdPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}
.rd-breaking__track {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 28px;
  white-space: nowrap;
  animation: rdMarquee 45s linear infinite;
}
.rd-breaking__track:hover { animation-play-state: paused; }
.rd-breaking__item {
  display: inline-flex;
  align-items: center;
  color: var(--rd-ink);
  text-decoration: none;
  font-size: 16px;
  font-family: var(--font-display);
}
.rd-breaking__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 12px;
  background: #DC2626;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-breaking__item:hover { text-decoration: underline; }
.rd-breaking__sep { display: none; }
@keyframes rdMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================ */
/* MAIN WRAP                                                     */
/* ============================================================ */
.rd-wrap {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 12px var(--rd-side-pad) 24px;
}
.rd-section + .rd-section { margin-top: 8px; }
.rd-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--rd-navy);
  padding-bottom: 6px;
}
.rd-section__title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--rd-navy);
  margin: 0;
  letter-spacing: -0.2px;
}
.rd-section__more {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--rd-blue);
  text-decoration: none;
}
.rd-section__more:hover { text-decoration: underline; }

/* ============================================================ */
/* HERO ZONE — 62/38 grid on desktop.                            */
/* ============================================================ */
.rd-hero {
  display: grid;
  grid-template-columns: 560px 1fr 340px;
  gap: 24px;
}

/* Carousel ------------------------------------------------------ */
.rd-carousel {
  position: relative;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--rd-shadow);
}
.rd-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.rd-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.rd-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  background: #0a0a0a;
}
.rd-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-carousel__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%);
  color: #fff;
}
.rd-carousel__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-block;
  background: var(--rd-red);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 3px;
}
.rd-carousel__headline {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.22;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.rd-carousel__meta {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.rd-carousel__slide a {
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: inherit;
}

.rd-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--rd-navy);
  box-shadow: var(--rd-shadow);
  transition: background var(--rd-ease), transform var(--rd-ease);
  z-index: 3;
}
.rd-carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.rd-carousel__arrow--prev { left: 14px; }
.rd-carousel__arrow--next { right: 14px; }
.rd-carousel__arrow svg { width: 18px; height: 18px; }

.rd-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 3;
}
.rd-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--rd-ease), transform var(--rd-ease);
}
.rd-carousel__dot--active {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}

/* Featured row beneath the carousel ------------------------------ */
.rd-hero__featured {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rd-featured {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: 8px;
  transition: transform var(--rd-ease), box-shadow var(--rd-ease), border-color var(--rd-ease);
  text-decoration: none;
  color: inherit;
}
.rd-featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow);
  border-color: #d8d2c0;
}
.rd-featured__img {
  width: 100px;
  height: 70px;
  border-radius: var(--rd-radius);
  overflow: hidden;
  background: var(--rd-bg);
}
.rd-featured__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rd-featured__body { min-width: 0; }
.rd-featured__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.32;
  color: var(--rd-ink);
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-featured__meta {
  font-size: 13px;
  color: var(--rd-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Sidebar — తాజా వార్తలు + breaking box ------------------------ */
.rd-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rd-side__panel {
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-lg);
  box-shadow: var(--rd-shadow-sm);
  padding: 10px;
}
.rd-side__title {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rd-blue);
  color: var(--rd-navy);
}
.rd-side__list { list-style: none; margin: 0; padding: 0; }
.rd-side__item + .rd-side__item {
  border-top: 1px dashed var(--rd-border);
  margin-top: 5px;
  padding-top: 5px;
}
.rd-side__link {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: var(--rd-ink-2);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  transition: color var(--rd-ease);
}
.rd-side__link:hover { color: var(--rd-blue); }
.rd-side__bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--rd-blue);
}
.rd-side__time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--rd-faint);
}

.rd-side__panel--alert {
  background: linear-gradient(180deg, var(--rd-red) 0%, var(--rd-red-2) 100%);
  border-color: var(--rd-red-2);
  color: #fff;
}
.rd-side__panel--alert .rd-side__title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-side__panel--alert .rd-side__title .rd-breaking__dot { background: #fff; }
.rd-side__alert-head {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.32;
  margin: 0 0 8px;
  color: #fff;
}
.rd-side__alert-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.rd-side__alert-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--rd-radius);
  transition: background var(--rd-ease);
}
.rd-side__alert-cta:hover { background: rgba(0, 0, 0, 0.4); }

/* ============================================================ */
/* ARTICLE FEED — 2-col card grid.                               */
/* ============================================================ */
.rd-feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rd-card {
  display: flex;
  flex-direction: column;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--rd-ease), box-shadow var(--rd-ease), border-color var(--rd-ease);
}
.rd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow-lg);
  border-color: #d8d2c0;
}
.rd-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--rd-bg);
  overflow: hidden;
}
.rd-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.rd-card:hover .rd-card__img img { transform: scale(1.03); }
.rd-card__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rd-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rd-card__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.32;
  color: var(--rd-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-card__summary {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--rd-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-card__time {
  font-size: 13px;
  color: var(--rd-faint);
}

/* ============================================================ */
/* CATEGORY BADGES — per-category colour pills.                  */
/* ============================================================ */
.rd-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 3px;
  background: #EEE;
  color: #333;
  text-transform: none;
  white-space: nowrap;
}
.rd-badge--ap            { background: #E6F1FB; color: #0C447C; }
.rd-badge--tg,
.rd-badge--telangana     { background: #E1F5EE; color: #085041; }
.rd-badge--national      { background: #EEEDFE; color: #3C3489; }
.rd-badge--international { background: #FAECE7; color: #712B13; }
.rd-badge--business      { background: #FAEEDA; color: #633806; }
.rd-badge--cinema,
.rd-badge--tollywood,
.rd-badge--entertainment { background: #FBEAF0; color: #72243E; }
.rd-badge--sports,
.rd-badge--cricket       { background: #EAF3DE; color: #27500A; }
.rd-badge--technology    { background: #F1EFE8; color: #444; }
.rd-badge--health        { background: #E6F7F4; color: #0E4A45; }
.rd-badge--education     { background: #FBF4DA; color: #6A4E07; }
.rd-badge--arts          { background: #F2EAF8; color: #4A2566; }
.rd-badge--transportation { background: #EDEDF2; color: #2B2F45; }
.rd-badge--crime         { background: #FCEBEB; color: #791F1F; }

/* ============================================================ */
/* FOOTER — restructured navy block.                             */
/* ============================================================ */
.rd-footer {
  background: var(--rd-navy);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 48px;
}
.rd-footer__inner {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 36px var(--rd-side-pad) 24px;
}
.rd-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.rd-footer__brand img {
  height: 56px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.rd-footer__tag {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.rd-footer__col h4 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--rd-gold);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.rd-footer__col ul { list-style: none; padding: 0; margin: 0; }
.rd-footer__col li + li { margin-top: 8px; }
.rd-footer__col a {
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--rd-ease);
}
.rd-footer__col a:hover { color: var(--rd-gold); }
.rd-footer__legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.rd-footer__legal a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  margin-left: 14px;
}
.rd-footer__legal a:hover { color: var(--rd-gold); }

/* ============================================================ */
/* ARTICLE / CATEGORY 3-COLUMN LAYOUT                            */
/* ============================================================ */
.art-grid {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 24px var(--rd-side-pad) 48px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
.cat-grid {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 24px var(--rd-side-pad) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

/* Sidebars share the .art-side surface so styling stays in one place. */
.art-side {
  position: sticky;
  top: 64px; /* clears the sticky nav */
  align-self: start;
}
.art-side__panel {
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-lg);
  box-shadow: var(--rd-shadow-sm);
  padding: 16px;
}
.art-side__panel + .art-side__panel { margin-top: 16px; }
.art-side__title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rd-blue);
  color: var(--rd-navy);
}
.art-side__list { list-style: none; padding: 0; margin: 0; }
.art-side__item + .art-side__item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rd-border);
}
.art-side__link {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: var(--rd-ink-2);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  transition: color var(--rd-ease);
}
.art-side__link:hover { color: var(--rd-blue); }
.art-side__bullet {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--rd-blue);
}
.art-side__time {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--rd-faint);
}

/* Most Read — numbered list 1..6. */
.art-mostread { counter-reset: mostread; }
.art-mostread .art-side__item { counter-increment: mostread; display: flex; gap: 10px; }
.art-mostread .art-side__num {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--rd-blue);
  line-height: 1.1;
  flex-shrink: 0;
  width: 22px;
}
.art-mostread .art-side__num::before { content: counter(mostread); }
.art-mostread a {
  text-decoration: none;
  color: var(--rd-ink-2);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  transition: color var(--rd-ease);
}
.art-mostread a:hover { color: var(--rd-blue); }

/* Topics pills. */
.art-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.art-topic-pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--rd-bg);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--rd-ink-2);
  text-decoration: none;
  transition: background var(--rd-ease), color var(--rd-ease), border-color var(--rd-ease);
}
.art-topic-pill:hover {
  background: var(--rd-blue);
  border-color: var(--rd-blue);
  color: #fff;
}

/* Ad slot placeholder (keeps right column from collapsing on first paint). */
.art-side__ad {
  background: repeating-linear-gradient(45deg, var(--rd-bg), var(--rd-bg) 8px, #EEE 8px, #EEE 16px);
  border: 1px dashed var(--rd-border);
  border-radius: var(--rd-radius);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--rd-faint);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Main column ---------------------------------------------------- */
.art-main { min-width: 0; }
.art-breadcrumb {
  font-size: 12px;
  color: var(--rd-muted);
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.art-breadcrumb a { color: var(--rd-blue); text-decoration: none; }
.art-breadcrumb a:hover { text-decoration: underline; }
.art-breadcrumb .sep { color: var(--rd-faint); }
.art-breadcrumb .here {
  color: var(--rd-ink-2);
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.art-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--rd-muted);
  margin-bottom: 12px;
}

.art-headline {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: var(--rd-ink);
  margin: 0 0 12px;
}
.art-subhead {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--rd-muted);
  margin: 0 0 16px;
}
.art-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--rd-ink-2);
  border-top: 1px solid var(--rd-border);
  border-bottom: 1px solid var(--rd-border);
  padding: 10px 0;
  margin: 16px 0 14px;
  font-family: var(--font-display);
}
.art-author .sep { color: var(--rd-faint); }
.art-author time { color: var(--rd-muted); }

/* Share rail — icon-only, no SDKs. */
.art-share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
}
.art-share__label {
  font-size: 12px;
  color: var(--rd-muted);
  margin-right: 4px;
  font-family: var(--font-display);
}
.art-share__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rd-ease), color var(--rd-ease), border-color var(--rd-ease), transform var(--rd-ease);
}
.art-share__btn svg { width: 16px; height: 16px; }
.art-share__btn:hover { transform: translateY(-1px); }
.art-share__btn[data-net="wa"]:hover    { background: #25D366; color: #fff; border-color: #25D366; }
.art-share__btn[data-net="x"]:hover     { background: #000;    color: #fff; border-color: #000; }
.art-share__btn[data-net="fb"]:hover    { background: #1877F2; color: #fff; border-color: #1877F2; }
.art-share__btn[data-net="copy"]:hover  { background: var(--rd-navy); color: #fff; border-color: var(--rd-navy); }
.art-share__copied {
  font-size: 12px;
  color: var(--rd-ok, var(--rd-blue));
  margin-left: 8px;
  opacity: 0;
  transition: opacity var(--rd-ease);
}
.art-share__copied.show { opacity: 1; }

/* Hero image. */
.art-hero {
  margin: 0 0 22px;
  border-radius: var(--rd-radius-lg);
  overflow: hidden;
  background: var(--rd-bg);
}
.art-hero img { display: block; width: 100%; height: auto; }
.art-hero figcaption {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--rd-muted);
  background: #FAFBFD;
  border-top: 1px solid var(--rd-border);
}

/* 60-second summary box — navy. */
.art-summary {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--rd-navy);
  color: #fff;
  border-radius: var(--rd-radius-lg);
}
.art-summary__label {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  text-transform: uppercase;
  color: var(--rd-gold);
  margin-bottom: 8px;
}
.art-summary__body {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
}

/* Body — Mandali Telugu reading column. */
.art-body {
  font-family: var(--font-body);
  font-size: var(--fs-article-body-desktop, 19px);
  line-height: var(--lh-body, 1.72);
  color: var(--rd-ink);
  margin: 0 0 24px;
}
.art-body p { margin: 0 0 16px; }
.art-body p:last-child { margin-bottom: 0; }

/* "ఇదీ చదవండి" — also-read row. */
.art-related {
  margin: 28px 0;
  border-top: 2px solid var(--rd-navy);
  padding-top: 18px;
}
.art-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.art-related__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--rd-navy);
  margin: 0;
}
.art-related__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.art-related__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  overflow: hidden;
  transition: transform var(--rd-ease), box-shadow var(--rd-ease);
}
.art-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow);
}
.art-related__img {
  aspect-ratio: 16 / 10;
  background: var(--rd-bg);
  overflow: hidden;
}
.art-related__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-related__body { padding: 10px; }
.art-related__title-row {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.36;
  color: var(--rd-ink);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category-page tags row */
.art-tags {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rd-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.art-tags__label {
  font-size: 12px;
  color: var(--rd-muted);
  font-family: var(--font-display);
}

/* Responsive: tablet drops the left sidebar, mobile stacks everything. */
@media (max-width: 1023.98px) {
  .art-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
  .art-side--left { display: none; }
  .art-related__list { grid-template-columns: repeat(2, 1fr); }
  .art-headline { font-size: 26px; }
}
@media (max-width: 767.98px) {
  .art-grid, .cat-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 16px 32px;
  }
  .art-side { position: static; top: auto; }
  /* Reorder so the article reads first; sidebars fall below the body.
     Final mobile order: main (article + related) → left (తాజా వార్తలు)
     → right (Most Read + Topics). DOM order is unchanged for SEO/a11y. */
  .art-main { order: 1; }
  .art-side--left { display: block; order: 2; }
  .art-side--right { order: 3; }
  .art-headline { font-size: 22px; }
  .art-subhead { font-size: 15px; }
  .art-body { font-size: var(--fs-article-body-mobile, 17px); }
  .art-related__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .art-breadcrumb .here { max-width: 220px; }
}

/* ============================================================ */
/* SCREEN-READER ONLY.                                            */
/* ============================================================ */
.rd-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
@media (max-width: 1023.98px) {
  .rd-hero {
    grid-template-columns: 1fr;
  }
  .rd-hero__main { order: 1; }
  .rd-hero__center { order: 2; }
  .rd-side { order: 3; }
  .rd-sidebar { order: 3; }
  .rd-carousel__viewport { aspect-ratio: 16 / 9; }
  .rd-carousel__headline { font-size: 26px; }
  /* Logo bump is desktop-only; tablet keeps a sensible 72px. */
  .rd-masthead__logo img { height: 72px; max-height: 72px; }
  .rd-masthead__inner { gap: 16px; }
  .rd-util { gap: 12px; padding: 8px 16px; }
  .rd-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .rd-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  /* Phase 3A-fix: masthead stays a SINGLE row on mobile - logo on the left,
     IST time + date inline on the right (not stacked below). Saves vertical
     space so news content sits higher. */
  .rd-masthead__inner {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px 16px;
  }
  /* The logo holds up to 64px (larger than the pre-3A 52px) and only scales
     down on very narrow phones so the inline time/date never forces a second
     row or horizontal scroll. The horizontal wordmark is ~4:1, so a literal
     desktop 80px cannot share a phone row with the time/date. */
  .rd-masthead__logo {
    flex: 0 1 auto;
    min-width: 0;
  }
  .rd-masthead__logo img {
    height: auto;
    width: auto;
    max-height: 64px;
    max-width: 100%;
  }
  /* IST time + date inline at the right edge; compact and chrome-free so they
     fit beside the wordmark. Weather cells stay hidden on mobile. */
  .rd-util {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .rd-util__cell--weather,
  .rd-util__divider--weather { display: none; }
  .rd-util__divider { height: 24px; }
  .rd-util__date { align-items: flex-end; white-space: nowrap; }
  .rd-util__date-day { font-size: 16px; }
  .rd-util__date-num { font-size: 12px; }
  .rd-util__value { font-size: 15px; }
  .rd-nav__inner { padding: 0 12px; }
  .rd-nav__item { padding: 0 12px; font-size: 13px; }
  .rd-nav__more { padding: 0 12px; }

  .rd-wrap { padding: 10px 12px 20px; }
  .rd-section + .rd-section { margin-top: 8px; }
  .rd-section__title { font-size: 20px; }
  .rd-hero { gap: 10px; }
  .rd-hero__featured { grid-template-columns: 1fr; }
  .rd-hero__thumbs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rd-thumb-card__title { font-size: 14px; }
  .rd-feed { grid-template-columns: 1fr; gap: 10px; }
  .rd-carousel__overlay { padding: 14px 16px 16px; }
  .rd-carousel__headline { font-size: 22px; }
  .rd-carousel__arrow { width: 32px; height: 32px; }
  .rd-card__title { font-size: 19px; }
  .rd-card__body { padding: 10px; }
  .rd-breaking__inner { min-height: 36px; padding: 0 14px; }
  .rd-breaking__item { font-size: 15px; }
  .rd-footer__top { grid-template-columns: 1fr; gap: 22px; }
  .rd-footer__brand { grid-column: auto; }
  .rd-footer__legal { font-size: 11px; flex-direction: column; }
  .rd-footer__legal a { margin-left: 0; margin-right: 14px; }
}

/* ============================================================ */
/* PHASE 1A — Homepage category rail (dormant, additive only).   */
/*                                                               */
/* These rules describe category rail cards that the upcoming    */
/* Phase 1C/1D template phase will introduce. They use new       */
/* rd-section-card / rd-section-grid / rd-rail class names that  */
/* do NOT match any selector in the current index.html, so they  */
/* have no effect on the live homepage rendering today. They     */
/* must not introduce any global selectors. Article and category */
/* pages are unaffected because they consume art-* / cat-* /     */
/* card-horiz classes from usha-core.css.                        */
/*                                                               */
/* Naming is consistent with the rest of this file:              */
/*   .rd-section-grid       outer responsive grid                */
/*   .rd-section-card       one category card                    */
/*   .rd-section-card__*    card subparts                        */
/*   .rd-section-card--<k>  accent border per category           */
/*   .rd-rail               horizontal scrolling strip variant   */
/* All accent borders read --acc-* tokens from usha-tokens.css   */
/* (also added in Phase 1A) so future palette tweaks land in one */
/* place.                                                        */
/* ============================================================ */

.rd-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.rd-section-card {
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-top: 3px solid var(--section-accent, var(--rd-navy));
  border-radius: var(--rd-radius-lg);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rd-section-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rd-border);
  padding-bottom: 8px;
  background: linear-gradient(180deg, #FAFBFC 0%, rgba(250, 251, 252, 0) 100%);
}

.rd-section-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--rd-ink);
  line-height: var(--lh-tight);
}

.rd-section-card__more {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--section-accent, var(--rd-blue));
  text-decoration: none;
  white-space: nowrap;
}
.rd-section-card__more:hover { text-decoration: underline; }

.rd-section-card__lead {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.rd-section-card__lead-img {
  width: 100%;
  aspect-ratio: 130 / 88;
  overflow: hidden;
  border-radius: var(--rd-radius);
  background: var(--rd-bg);
}
.rd-section-card__lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rd-section-card__lead-body { min-width: 0; }

.rd-section-card__lead-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: var(--lh-tight);
  color: var(--rd-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rd-section-card__lead-meta {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 12px;
  color: var(--rd-muted);
}

.rd-section-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.rd-section-card__item {
  border-top: 1px dashed var(--rd-border);
  padding: 7px 0;
  min-width: 0;
}
.rd-section-card__item:first-child { border-top: 0; padding-top: 0; }

.rd-section-card__item a {
  position: relative;
  display: block;
  padding-left: 14px;
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--rd-ink);
  text-decoration: none;
}
.rd-section-card__item a:hover { color: var(--rd-blue); }
.rd-section-card__item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--section-accent, var(--rd-blue));
}
.rd-section-card__item a > span:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rd-section-card__item-time {
  display: block;
  margin-top: 2px;
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  color: var(--rd-faint);
}

/* Accent modifiers per category. Each modifier sets a local
 * --section-accent custom property; the base card consumes it for the
 * 3px top border, and the "more" link and list bullets read the same
 * token so each card carries one consistent category color. The rest
 * of the card chrome stays neutral so the card still reads as part of
 * the unified design. --acc-* tokens come from usha-tokens.css. */
.rd-section-card--ap            { --section-accent: var(--acc-ap); }
.rd-section-card--ts,
.rd-section-card--telangana     { --section-accent: var(--acc-ts); }
.rd-section-card--national      { --section-accent: var(--acc-national); }
.rd-section-card--international { --section-accent: var(--acc-international); }
.rd-section-card--cinema        { --section-accent: var(--acc-cinema); }
.rd-section-card--sports        { --section-accent: var(--acc-sports); }
.rd-section-card--business      { --section-accent: var(--acc-business); }
.rd-section-card--spiritual     { --section-accent: var(--acc-spiritual); }
.rd-section-card--technology    { --section-accent: var(--acc-technology); }
.rd-section-card--opinion       { --section-accent: var(--acc-opinion); }
.rd-section-card--lifestyle     { --section-accent: var(--acc-lifestyle); }

/* Horizontal-scroll rail variant for compact strips (e.g. sports
 * tiles, business tiles). Hides the native scrollbar; users swipe
 * on touch and use overflow scroll on desktop. Each .rd-rail__item
 * has a fixed min-width so cards stay readable. */
.rd-rail {
  position: relative;
  margin: 0 calc(-1 * var(--rd-side-pad));
  padding: 0 var(--rd-side-pad);
}
.rd-rail__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rd-rail__track::-webkit-scrollbar { display: none; }
.rd-rail__item {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 240px;
  scroll-snap-align: start;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  overflow: hidden;
  min-width: 0;
}
.rd-rail__item-img {
  width: 100%;
  aspect-ratio: 940 / 650;
  overflow: hidden;
  background: var(--rd-bg);
}
.rd-rail__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-rail__item-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rd-rail__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.35;
  color: var(--rd-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-rail__item-time {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  color: var(--rd-faint);
}

/* Responsive collapse for the section grid. */
@media (max-width: 1023.98px) {
  .rd-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 767.98px) {
  .rd-section-grid { grid-template-columns: 1fr; }
  .rd-section-card { padding: 12px 12px 10px; }
  .rd-section-card__lead { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
  .rd-section-card__lead-title { font-size: 16px; }
  .rd-section-card__title { font-size: 18px; }
  .rd-rail__item { min-width: 200px; max-width: 220px; }
}
@media (max-width: 419.98px) {
  .rd-section-card__lead { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
}

/* ============================================================ */
/* PHASE 2A1 - 3-column hero left and middle                     */
/*                                                               */
/* Adds new selectors only. Existing .rd-side / .rd-featured     */
/* rules are intentionally untouched in P2A1 so the existing     */
/* right column keeps rendering as the third desktop column      */
/* until P2A2 replaces it with the widget stack.                 */
/* ============================================================ */

.rd-hero__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rd-hero__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.rd-thumb-card {
  display: flex;
  flex-direction: column;
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--rd-ease), box-shadow var(--rd-ease), border-color var(--rd-ease);
}
.rd-thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow);
  border-color: #d8d2c0;
}
.rd-thumb-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--rd-bg);
  overflow: hidden;
}
.rd-thumb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-thumb-card__body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rd-thumb-card__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--rd-red);
  color: #fff;
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}
.rd-thumb-card__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.32;
  color: var(--rd-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-thumb-card__meta {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  color: var(--rd-muted);
}

.rd-hero__center {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rd-latest-panel {
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  display: flex;
  flex-direction: column;
}
.rd-latest-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--rd-navy, #11203f);
  color: #fff;
}
.rd-latest-panel__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.rd-latest-panel__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4ADE80;
}
.rd-latest-panel__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.75);
  animation: rd-live-pulse 1.6s ease-out infinite;
}
@keyframes rd-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.rd-latest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rd-latest-item {
  margin: 0;
}
.rd-latest-item + .rd-latest-item {
  border-top: 1px solid var(--rd-border);
}
.rd-latest-item__link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--rd-ink-2);
  transition: background var(--rd-ease), color var(--rd-ease);
}
.rd-latest-item__link:hover {
  background: rgba(17, 32, 63, 0.04);
  color: var(--rd-blue);
}
.rd-latest-item__bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-red);
  margin-top: 6px;
  flex-shrink: 0;
}
.rd-latest-item:nth-child(even) .rd-latest-item__bullet {
  background: var(--rd-navy);
}
.rd-latest-item__title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.42;
  color: var(--rd-ink);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-latest-item__meta {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 12px;
  color: var(--rd-faint, #6b6b6b);
  white-space: nowrap;
  flex-shrink: 0;
}

/* P2A1 responsive: hero collapses via the existing 1023.98px rule
   above (.rd-hero -> 1fr; rd-hero__main/center/side ordered 1/2/3).
   Below 600px, thumb grid stays 2-column but tightens; meta column
   in latest-list collapses under the title to avoid overflow. */
@media (max-width: 599.98px) {
  .rd-hero__thumbs { gap: 6px; }
  .rd-thumb-card__body { padding: 6px 8px 8px; }
  .rd-thumb-card__title { font-size: 12px; }
  .rd-thumb-card__badge { display: none; }
  .rd-latest-item__link {
    grid-template-columns: 18px minmax(0, 1fr);
    row-gap: 2px;
  }
  .rd-latest-item__meta {
    grid-column: 2 / 3;
    white-space: normal;
  }
}

/* ============================================================ */
/* PHASE 2A2 - right sidebar widgets                             */
/*                                                               */
/* Adds new selectors only. Old .rd-side and .rd-side__panel*    */
/* rules from before P2A1 are left in place; the markup that     */
/* referenced them was removed in P2A2 so they are now orphan    */
/* CSS and will be cleaned up in a separate P2A3 commit.         */
/* ============================================================ */

.rd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.widget {
  background: var(--rd-card);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  display: flex;
  flex-direction: column;
}

.widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-bottom: 1px solid var(--rd-border);
}
.widget--trending .widget__head {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
}
.widget--sport .widget__head {
  background: linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 100%);
}
.widget--biz .widget__head {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
}

.widget__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--rd-navy, #11203f);
  line-height: 1.2;
}
.widget__more {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-navy, #11203f);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  transition: background var(--rd-ease);
}
.widget__more:hover { background: #fff; }

.widget__rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget__rank-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rd-border);
  align-items: baseline;
}
.widget__rank-item:last-child { border-bottom: 0; }
.widget__rank {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--rd-gold, #c8a24b);
  line-height: 1;
  text-align: center;
}
.widget__rank-item:first-child .widget__rank {
  color: var(--rd-red, #c8262d);
  font-size: 22px;
}
.widget__headline {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.36;
  color: var(--rd-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--rd-ease);
}
.widget__headline:hover { color: var(--rd-blue); }

.widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget__item {
  padding: 8px 14px;
  border-top: 1px dashed var(--rd-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.widget__item:first-child { border-top: 0; }
.widget__item-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--rd-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--rd-ease);
}
.widget__item-title:hover { color: var(--rd-blue); }
.widget__item-meta {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 12px;
  color: var(--rd-muted);
}

.widget__market {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  padding: 10px 14px;
  background: #FFFCF5;
  border-bottom: 1px solid var(--rd-border);
}
.widget__market-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.widget__market-label {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-muted);
  text-transform: none;
}
.widget__market-value {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--rd-ink);
}
.widget__market-delta {
  font-family: var(--font-latin, "DM Sans"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
}
.widget__market-delta--up   { color: #16A34A; }
.widget__market-delta--down { color: #c8262d; }
.widget__market-delta--flat { color: var(--rd-muted, #6b6b6b); }

@media (max-width: 767.98px) {
  .rd-sidebar { gap: 12px; }
}
@media (max-width: 419.98px) {
  .widget__market { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* PHASE 2A-FIX-1 - visual correction patch                      */
/*                                                               */
/* New rules only. All in-place edits to existing selectors land */
/* in the rules above. This block adds:                          */
/*  1) wider --rd-max-width on >=1366px monitors (C2 squeeze)    */
/*  2) inline gold tab pseudo on latest panel title (H3)         */
/* ============================================================ */
@media (min-width: 1366px) {
  :root { --rd-max-width: 1380px; }
}
.rd-latest-panel__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--rd-gold);
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 1px;
}