/* ================================================================
   24 Times News — main stylesheet
   Front-page layout matches the three-panel + colour-coded strip mock.
   Mobile-first with explicit breakpoints at 576 / 768 / 1024 / 1200.
   ================================================================ */

/* ===== GLOBAL ===== */
*, *::before, *::after { box-sizing: border-box; }

/* ── Content copy / screenshot protection ───────────────────────
   Applied via the .fp-content-protected class on the article wrapper.
   Browser-level deterrent only — see copy-protection.js for caveats. */
.fp-content-protected,
.fp-content-protected * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS long-press save image */
}

/* Re-enable selection in form fields, share buttons, and any element
   marked data-allow-copy="true" — those should remain interactive. */
.fp-content-protected input,
.fp-content-protected textarea,
.fp-content-protected [contenteditable="true"],
.fp-content-protected [data-allow-copy="true"],
.fp-content-protected [data-allow-copy="true"] *,
.fp-content-protected .ht-share-rail,
.fp-content-protected .ht-share-rail *,
.fp-content-protected .share-buttons,
.fp-content-protected .share-buttons * {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

/* Disable image drag and the iOS long-press save dialog. */
.fp-content-protected img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* But keep links wrapping images clickable. */
.fp-content-protected a > img { pointer-events: auto; }

/* Briefly blur the content when the window loses focus (deterrent
   against quick alt-tab → screenshot-tool flows). */
.fp-content-protected.fp-content-blurred {
  filter: blur(8px);
  transition: filter .15s ease;
}

/* ── Market ticker (TradingView embed) ──────────────────────────
   The TradingView script renders an iframe inside .tradingview-widget-container.
   We give the wrapper a thin border so it sits cleanly between the breaking
   ticker and the top bar. Height is set, NOT clamped — TradingView needs
   the room to render symbol + price + change without text clipping,
   especially on narrow viewports. */
.market-ticker {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  z-index: 5;
}
.market-ticker--dark {
  background: #0a0a0a;
  border-bottom-color: #1c1c1c;
}
.market-ticker .tradingview-widget-container,
.market-ticker .tradingview-widget-container__widget {
  width: 100%;
}
.market-ticker iframe {
  display: block !important;
  width: 100% !important;
  /* TradingView's default minimum is ~60px. On phones the symbol logo +
     price + change need full vertical space or text clips. */
  height: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
}
@media (max-width: 575.98px) {
  .market-ticker iframe { height: 70px !important; min-height: 70px !important; }
}

/* ── Top-bar weather widget ──────────────────────────────────── */
.top-bar-weather {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  line-height: 1;
}
.top-bar-weather .weather-icon {
  display: inline-flex;
  align-items: center;
  color: #e60023;
}
.top-bar-weather .weather-city { font-weight: 600; color: #333; }
.top-bar-weather .weather-temp {
  font-weight: 700;
  color: #111;
  min-width: 1.5em;
  text-align: left;
  opacity: .55;
  transition: opacity .2s ease;
}
.top-bar-weather.is-loaded .weather-temp { opacity: 1; }
.top-bar-sep { color: #bbb; }

/* ── Page-level overflow safety net ──────────────────────────────
   Clamp any rogue full-width element to the viewport. `clip` is
   preferred over `hidden` because it does not break position:sticky
   on descendants (e.g. the share rail on single posts). */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: #f5f5f5;
  font-family: 'Source Sans 3', sans-serif;
  color: #111;
  margin: 0;
  line-height: 1.45;
}

a { text-decoration: none; color: inherit; }
a:hover { color: #e60023; }

/* Constrain every form of embedded media to its parent's width.
   Catches admin-injected iframes, ad embeds, oEmbeds, etc. that ship
   with hard-coded widths and otherwise blow out the layout. */
img, svg, video, canvas, picture { max-width: 100%; display: block; height: auto; }
iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }

/* Bootstrap rows are flex; flex children refuse to shrink below their
   intrinsic content width by default. A long unbreakable word, URL,
   or pre-formatted block can therefore push a column wider than its
   share of the row → horizontal page scroll. min-width: 0 on every
   col-* lets columns shrink correctly. */
.row > [class*="col-"] { min-width: 0; }

/* Long URLs / Hindi compound words that contain no space cannot wrap
   by default — break them as a last resort. Scope to content-bearing
   wrappers so it doesn't affect navigation, badges, etc. */
.fp-main p,
.fp-main h1, .fp-main h2, .fp-main h3, .fp-main h4, .fp-main h5,
.entry-content,
.ht-content-body,
.single-post-wrap .post-content {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.fp-main { padding: 16px 0 40px; max-width: 100%; overflow-x: clip; }

/* ================================================================
   TOP PANEL : Featured / Trending / Latest (3 columns on desktop)
   ================================================================ */
.fp-toppanel { margin: 12px 0 18px; }

.fp-panel {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px;
  height: 100%;
}

.fp-panel-head {
  border-bottom: 2px solid #e60023;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.fp-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #444;
}

/* Hero (left column) */
.fp-hero { display: block; margin-bottom: 12px; }
.fp-hero-img,
.fp-hero .no-featured-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}
.fp-hero-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 10px 0 0;
  color: #111;
}

/* Headline list (used in all 3 top columns) */
.fp-headline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fp-headline-list li + li {
  border-top: 1px solid #eee;
}
.fp-hitem {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: flex-start;
}
.fp-hitem-thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 55px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9ecef;
}
.fp-hitem-img,
.fp-hitem-thumb .no-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
}
.fp-hitem-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   CATEGORY STRIPS — editorial layout
   Each strip = colored header (label + "More") +
                hero card (image with overlaid title) on the left +
                3 horizontal mini cards stacked on the right.

   The accent color per strip is exposed as the `--strip-color` custom
   property so each variant just overrides one value.
   ================================================================ */
.fp-strip {
  --strip-color: var(--c-red, #e60023);
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(0,0,0,.06);
}

.fp-strip-head {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.fp-strip-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--strip-color);
  position: relative;
  padding-left: 14px;
}
.fp-strip-title::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 5px;
  background: var(--strip-color);
  border-radius: 2px;
}
.fp-strip-viewall {
  font-size: 13px;
  font-weight: 700;
  color: var(--strip-color);
  white-space: nowrap;
  transition: opacity .2s;
}
.fp-strip-viewall:hover { opacity: .8; color: var(--strip-color); }

/* The grid uses Bootstrap .row/.col-* — these rules only carry theme spacing. */
.fp-strip-grid { /* layout via Bootstrap .row .g-3 */ }

/* ── HERO CARD (left, large) ─────────────────────────────────── */
.fp-cat-hero { margin-bottom: 0; }
.fp-cat-hero a { color: inherit; }
.fp-cat-hero a:hover .fp-cat-hero-title { text-decoration: underline; }
.fp-cat-hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #ececec;
  display: block;
}
.fp-cat-hero-ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ececec;
}
.fp-cat-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.fp-cat-hero-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── MINI CARDS (horizontal: thumb + title) ──────────────────── */
.fp-cat-mini a { color: inherit; }
.fp-cat-mini a:hover .fp-cat-mini-title { color: var(--strip-color); }
.fp-cat-mini-thumb {
  width: 140px;
  height: 92px;
  background: #ececec;
}
.fp-cat-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fp-cat-mini-ph { width: 100%; height: 100%; background: #ececec; }
.fp-cat-mini-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #111;
  align-self: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}

/* ── COLOR VARIANTS ──────────────────────────────────────────── */
.fp-strip--red       { --strip-color: #e60023; }
.fp-strip--blue      { --strip-color: #0a66c2; }
.fp-strip--mint      { --strip-color: #1a936f; }
.fp-strip--sky       { --strip-color: #0c8ce9; }
.fp-strip--lilac,
.fp-strip--plum      { --strip-color: #7e3cb6; }
.fp-strip--sun,
.fp-strip--gold      { --strip-color: #c9a227; }
.fp-strip--rose      { --strip-color: #d3265a; }
.fp-strip--peach,
.fp-strip--tangerine { --strip-color: #e26a1e; }
.fp-strip--blush     { --strip-color: #c43c7a; }
.fp-strip--lime      { --strip-color: #6aa84f; }

/* ── RESPONSIVE TWEAKS ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Below lg: hero stacks above the 3-card list (Bootstrap col-12 default).
     Mini-card thumbs stay the same width — they read fine on tablet. */
  .fp-cat-mini-thumb { width: 130px; height: 86px; }
}
@media (max-width: 575.98px) {
  .fp-strip { padding: 12px; }
  .fp-strip-title { font-size: 16px; }
  .fp-cat-hero-title { font-size: 16px; }
  .fp-cat-mini-thumb { width: 110px; height: 74px; }
  .fp-cat-mini-title { font-size: 14px; -webkit-line-clamp: 2; }
}

/* ================================================================
   MORE TRENDING NEWS
   ================================================================ */
.fp-trending,
.fp-recommended {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px 18px;
  margin-bottom: 18px;
}

.fp-trending-head,
.fp-recommended-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: -14px -16px 14px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.fp-trending-head    { background: #fdecec; border-bottom: 3px solid #e60023; }
.fp-recommended-head { background: #eaf8f0; border-bottom: 3px solid #16a34a; }

.fp-trending-title,
.fp-recommended-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111;
}
.fp-trending-icon    { color: #e60023; }
.fp-recommended-icon { color: #16a34a; }

/* Mini card grid (shared by Trending + Recommended) — 3 cols on desktop, horizontal card */
.fp-minicard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}
.fp-minicard {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  align-items: flex-start;
  transition: background .15s ease;
  color: inherit;
}
.fp-minicard:hover { background: #f7f7f9; color: inherit; }
.fp-minicard-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9ecef;
}
.fp-minicard-img,
.fp-minicard-thumb .no-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
}
.fp-minicard-body { min-width: 0; flex: 1; }
.fp-minicard-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-minicard-date {
  display: block;
  font-size: 11px;
  color: #7a7a7a;
}

/* ================================================================
   BREAKING NEWS TICKER (left over from older layout, still used)
   ================================================================ */
.breaking {
  background: #e60023;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 6px;
  margin: 8px 0 12px;
}
.breaking span {
  display: inline-block;
  animation: fp-scroll 25s linear infinite;
}
.breaking a { color: #fff; font-weight: 600; }
@keyframes fp-scroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* ================================================================
   LEGACY HERO / NEWS CARDS (used on archives, singles, etc.)
   ================================================================ */
.section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0 14px;
  border-left: 4px solid #e60023;
  padding-left: 10px;
}
.hero-main { position: relative; border-radius: 12px; overflow: hidden; }
.hero-main img { height: 400px; object-fit: cover; }
.hero-overlay {
  position: absolute; bottom: 0; padding: 20px; width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #fff;
}
.hero-overlay h2 { font-size: 26px; font-weight: 700; }
.badge-cat {
  background: #e60023; color: #fff;
  padding: 4px 8px; font-size: 12px;
  margin-bottom: 8px; display: inline-block;
  border-radius: 3px;
}
.news-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: .3s;
  margin-bottom: 12px;
}
.news-card:hover { transform: translateY(-5px); }
.news-card img { height: 180px; object-fit: cover; }
.news-card .content { padding: 12px; }
.news-card .category { font-size: 12px; color: #e60023; font-weight: 600; }
.news-card .title { font-size: 15px; font-weight: 600; margin: 5px 0; }
.news-card .meta { font-size: 12px; color: #777; }

/* Web stories + videos (older template parts) */
.stories { display: flex; gap: 10px; overflow-x: auto; }
.story { min-width: 100px; text-align: center; }
.story img { height: 140px; border-radius: 10px; object-fit: cover; }
.story p { font-size: 12px; margin-top: 5px; }

.video-card { background: #000; color: #fff; border-radius: 10px; overflow: hidden; }
.video-card img { height: 180px; object-fit: cover; }
.video-card p { padding: 10px; font-size: 14px; }

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet – 2 columns for category strips, keep mini-grid at 2 cols */
@media (max-width: 1024px) {
  .fp-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-minicard-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablet — stack the 3 top columns so each panel is full-width.
   fp-panel already ships with Bootstrap's col-lg-4, so bootstrap's
   breakpoint handles horizontal -> vertical flow automatically. */
@media (max-width: 768px) {
  .fp-strip { padding: 12px 12px 14px; }
  .fp-strip-head { margin: -12px -12px 12px; }
  .fp-strip-title { font-size: 14px; }
  .fp-strip-viewall { font-size: 12px; }
  .fp-strip-grid { gap: 10px; }

  .fp-trending,
  .fp-recommended { padding: 12px 12px 14px; }
  .fp-trending-head,
  .fp-recommended-head { margin: -12px -12px 12px; }
  .fp-trending-title,
  .fp-recommended-title { font-size: 13px; }

  .hero-main img { height: 250px; }
  .hero-overlay h2 { font-size: 18px; }
  .news-card img { height: 140px; }
  .section-title { font-size: 18px; }
}

/* Phones — single column across the board */
@media (max-width: 576px) {
  .fp-hero-img,
  .fp-hero .no-featured-image { aspect-ratio: 16 / 9; }
  .fp-hero-title { font-size: 15px; }

  .fp-hitem-thumb { flex: 0 0 64px; width: 64px; height: 50px; }
  .fp-hitem-title { font-size: 12.5px; }

  .fp-strip-grid { grid-template-columns: 1fr; gap: 10px; }
  .fp-cat-card-title { font-size: 13.5px; min-height: 0; }

  .fp-minicard-grid { grid-template-columns: 1fr; }
  .fp-minicard-thumb { flex: 0 0 88px; width: 88px; height: 64px; }
  .fp-minicard-title { font-size: 13px; }

  .breaking { font-size: 12.5px; padding: 7px 10px; }
}

/* Rows helper used by older Bootstrap markup */
.row { margin-bottom: 15px; }

/* ================================================================
   TOP 3-COLUMN PANEL — LATEST NEWS sidebar, live-news cards, premium
   ================================================================ */
.fp-top-row { margin-bottom: 18px; }

/* LATEST NEWS sidebar box */
.latest-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px 14px;
}
.latest-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #e60023;
  border-bottom: 2px solid #e60023;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.latest-item-link { display: block; color: inherit; }
.latest-item-link + .latest-item-link .latest-item { border-top: 1px solid #eee; }
.latest-item { padding: 10px 0; }
.latest-item .category {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #e60023;
  margin-bottom: 2px;
}
.latest-item .item-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #111;
}
.latest-item .meta {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* Live-news cards stacked under the hero */
.fp-live-list { display: block; }
.fp-live-card { text-decoration: none; color: inherit; display: block; }
.fp-live-card:hover { color: inherit; }
.fp-live-thumb { width: 140px; flex: 0 0 140px; }
.fp-live-thumb img,
.fp-live-thumb-ph {
  width: 140px;
  height: 95px;
  object-fit: cover;
  border-radius: 6px;
  background: #e9ecef;
  display: block;
}

/* Ad label + premium box (right column) */
.ad-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.ad-box {
  background: #fafafa;
  border: 1px dashed #ddd;
  border-radius: 8px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-box img { max-width: 100%; height: auto; display: block; }

.premium-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
  color: inherit;
}
.premium-box:hover { color: inherit; }
.premium-title {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.premium-source {
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.premium-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
}

/* ================================================================
   WEB STORIES — editorial portrait carousel (Aaj Tak style)
   ================================================================ */
.fp-stories {
  --story-card-w: 150px;     /* card width on desktop */
  --story-aspect: 3 / 4;     /* portrait thumbnail ratio */
  --story-accent: #e60023;
  --story-text:   #1a1a1a;

  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 18px 18px;
  margin-bottom: 22px;
}

/* ── Header ─────────────────────────────────────────── */
.fp-stories-head {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #efefef;
}
.fp-stories-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--story-text);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.fp-stories-icon {
  display: inline-flex;
  color: var(--story-accent);
  width: 14px;
  height: 18px;
}
.fp-stories-viewall {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  white-space: nowrap;
  transition: color .15s ease;
}
.fp-stories-viewall:hover { color: var(--story-accent); }

/* ── Card ───────────────────────────────────────────── */
.fp-story-card {
  flex: 0 0 var(--story-card-w);
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
}
.fp-story-card:hover { color: inherit; }

.fp-story-cover {
  width: 100%;
  aspect-ratio: var(--story-aspect);
  background: #f1f1f1;
  border: 1px solid rgba(0, 0, 0, .04);
}
.fp-story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.fp-story-card:hover .fp-story-img { transform: scale(1.04); }
.fp-story-img--ph {
  background: linear-gradient(135deg, #ddd 0%, #f3f3f3 100%);
}

.fp-story-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

.fp-story-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--story-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.fp-story-card:hover .fp-story-title { color: var(--story-accent); }

/* ── Native scroller fallback (when Swiper is missing) ── */
.fp-stories-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.fp-stories-scroller::-webkit-scrollbar { height: 6px; }
.fp-stories-scroller::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }

/* ================================================================
   CATEGORY NEWS TABS (AJAX)
   ================================================================ */
.fp-tabs {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 18px;
}
.fp-tabs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.fp-tabs-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #e60023;
  text-transform: uppercase;
}
.fp-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fp-tab {
  border: 1px solid #e5e5e5;
  background: #fafafa;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fp-tab:hover { background: #f0f0f0; }
.fp-tab.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.fp-tabs-panel { position: relative; min-height: 120px; }
.fp-tabs-panel.is-loading { opacity: .55; pointer-events: none; }
.fp-tabs-panel.is-loading::after {
  content: '';
  position: absolute;
  top: 18px; left: 50%;
  width: 22px; height: 22px;
  border: 3px solid #eee;
  border-top-color: #e60023;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: fp-tab-spin .7s linear infinite;
}
@keyframes fp-tab-spin { to { transform: translateX(-50%) rotate(360deg); } }

.fp-tabs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fp-tab-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fp-tab-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.fp-tab-card-link { display: block; color: inherit; }
.fp-tab-card-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9ecef;
}
.fp-tab-card-img,
.fp-tab-card-thumb .no-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}
.fp-tab-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 10px 12px 4px;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.fp-tab-card-date {
  display: block;
  font-size: 11px;
  color: #7a7a7a;
  margin: 0 12px 12px;
}
.fp-tabs-footer {
  text-align: right;
  margin-top: 14px;
}
.fp-tabs-viewall {
  font-size: 13px;
  font-weight: 600;
  color: #e60023;
}
.fp-tabs-empty {
  padding: 20px 0;
  text-align: center;
  color: #888;
  font-size: 14px;
}

/* ================================================================
   AD WRAPPERS (homepage slot containers)
   ================================================================ */
.fp-ad-wrap {
  margin: 14px 0;
  text-align: center;
}
.fp-ad-wrap:empty { display: none; }
.fp-ad-wrap .ht-ad-slot {
  display: inline-block;
  max-width: 100%;
}

/* ================================================================
   RESPONSIVE — top panel + new sections
   ================================================================ */
@media (max-width: 1024px) {
  .fp-tabs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .fp-tabs-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-live-thumb, .fp-live-thumb img, .fp-live-thumb-ph { width: 120px; flex-basis: 120px; height: 82px; }
}
@media (max-width: 991.98px) {
  .fp-stories { --story-card-w: 138px; }
  .fp-stories-title { font-size: 15px; }
}
@media (max-width: 768px) {
  .fp-stories { padding: 12px 14px 14px; --story-card-w: 124px; }
  .fp-stories-title { font-size: 14px; }
  .fp-story-title { font-size: 12.5px; }

  .fp-tabs { padding: 12px; }
  .fp-tabs-label { font-size: 11.5px; }
  .fp-tab { font-size: 12.5px; padding: 5px 10px; }

  .latest-box, .premium-box { margin-bottom: 14px; }
}
@media (max-width: 576px) {
  .fp-stories { --story-card-w: 110px; padding: 12px; }
  .fp-stories-scroller { gap: 10px; }
  .fp-story-title { font-size: 12px; -webkit-line-clamp: 2; }
  .fp-stories-prev, .fp-stories-next { display: none; }

  .fp-tabs-grid { grid-template-columns: 1fr; }

  .fp-minicard-thumb { flex: 0 0 104px; width: 104px; height: 78px; }
  .fp-minicard-title { font-size: 13.5px; }

  .fp-live-card .d-flex { flex-direction: row; }
  .fp-live-thumb,
  .fp-live-thumb img,
  .fp-live-thumb-ph { width: 100px; flex-basis: 100px; height: 68px; }
}

/* ================================================================
   WEB STORIES — Swiper carousel overlay (nav arrows)
   ================================================================ */
.fp-stories-swiper {
  position: relative;
  overflow: hidden;
  /* Negative-side padding gives the floating arrows breathing room
     without spilling out of the rounded section frame. */
  padding: 4px 6px 4px;
}
.fp-stories-swiper .swiper-slide {
  width: auto;
  height: auto;
}
.fp-stories-swiper .swiper-wrapper {
  /* Override fallback flex-scroller rules so Swiper takes over layout */
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}

/* Floating nav arrows — circular, outline-style, vertically centred on the thumb */
.fp-stories-prev,
.fp-stories-next {
  width: 32px;
  height: 32px;
  margin-top: 0;
  /* Swiper centers on the slide; nudge up to align with the cover (not the title) */
  top: calc((var(--story-card-w, 150px) * 4 / 3) / 2 + 4px);
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  color: #1a1a1a;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fp-stories-prev:hover,
.fp-stories-next:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
  transform: translateY(-50%) scale(1.05);
}
.fp-stories-prev::after,
.fp-stories-next::after {
  font-size: 13px;
  font-weight: 800;
  color: inherit;
}
.fp-stories-prev { left: 4px; }
.fp-stories-next { right: 4px; }
.fp-stories-swiper .swiper-button-disabled { opacity: 0; pointer-events: none; }

/* The card is a <button> — strip native button chrome so it looks like
   a card, then make the cursor signal it's clickable. */
button.fp-story-card {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.fp-story-card:focus-visible {
  outline: 2px solid var(--story-accent, #e60023);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ================================================================
   WEB STORIES PLAYER (fullscreen, WhatsApp/Instagram style)
   .hsp = "ht stories player"
   ================================================================ */
html.hsp-locked,
body.hsp-locked {
  overflow: hidden;
  /* iOS Safari: lock without losing scroll position */
  position: relative;
}

.hsp {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hsp.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hsp[hidden] { display: none !important; }

.hsp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  cursor: zoom-out;
}

.hsp-stage {
  position: relative;
  width: 100%;
  max-width: 440px;     /* phone-frame proportions on desktop */
  height: 100vh;
  max-height: 100dvh;   /* honour mobile dynamic viewport when supported */
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
  transition: transform .25s ease;
  /* Avoid pull-to-refresh interfering with swipe-down dismiss */
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  .hsp-stage {
    height: 92vh;
    max-height: 880px;
    border-radius: 14px;
  }
}

/* ─ Header (progress bars + title + close) ─ */
.hsp-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 0;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none; /* let taps fall through to the zones; close handles its own */
}
.hsp-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.hsp-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}
.hsp-seg-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width .12s linear;
}
.hsp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: auto; /* re-enable for the close button */
}
.hsp-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.hsp-close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease;
}
.hsp-close:hover { background: rgba(255, 255, 255, .15); }

/* ─ Image stage ─ */
.hsp-image-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.hsp-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.hsp-image.is-ready { opacity: 1; }

/* ─ Footer (caption + Read more link) ─ */
.hsp-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 18px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
  color: #fff;
  z-index: 4;
  pointer-events: none;
}
.hsp-caption {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hsp-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.hsp-link:hover { background: #ffd2d8; color: #111; }
.hsp-link[hidden] { display: none; }

/* ─ Tap zones (left half = prev, right half = next) ─
   Sit BELOW the header/footer so taps near the close button or link
   don't fire navigation. */
.hsp-zone {
  appearance: none;
  background: transparent;
  border: 0;
  position: absolute;
  top: 56px;
  bottom: 96px;
  width: 35%;
  cursor: pointer;
  z-index: 3;
}
.hsp-zone-prev { left: 0; }
.hsp-zone-next { right: 0; }
.hsp-zone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ─ Pause indicator (when user is holding) ─ */
.hsp.is-paused .hsp-image-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(0, 0, 0, .5);
  border-radius: 50%;
  pointer-events: none;
  background-image: linear-gradient(to right, #fff 6px, transparent 6px 18px, #fff 18px 24px);
  background-repeat: no-repeat;
  background-position: 18px 50%;
  background-size: 24px 24px;
  animation: hspFade .2s ease-out;
}
@keyframes hspFade {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 575.98px) {
  .hsp-caption { font-size: 14px; -webkit-line-clamp: 3; }
  .hsp-link    { font-size: 12.5px; padding: 7px 14px; }
}

/* ================================================================
   VIDEO SECTION — editorial 5-card grid (dark navy, Aaj Tak style)
   ================================================================ */
.fp-video {
  --vid-bg: #0a2349;
  --vid-accent: #e60023;
  --vid-text: #ffffff;
  --vid-muted: rgba(255, 255, 255, .75);

  background: var(--vid-bg);
  border-radius: 10px;
  padding: 16px 18px 20px;
  margin-bottom: 22px;
  color: var(--vid-text);
}

/* ── Header (title + view-all) ──────────────────────── */
.fp-video-head {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.fp-video-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--vid-accent);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.fp-video-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--vid-accent);
}
.fp-video-viewall {
  font-size: 13px;
  font-weight: 700;
  color: var(--vid-muted);
  transition: color .15s ease;
  white-space: nowrap;
}
.fp-video-viewall:hover { color: #fff; }

/* ── Trigger (button-as-card) reset ─────────────────── */
/* Cards are <button> so the click target is keyboard-accessible. Strip the
   default button chrome so it visually behaves like a link. */
.fp-vid-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.fp-vid-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Featured (center) card ─────────────────────────── */
.fp-vid-feature {
  display: block;
}
.fp-vid-feature-trigger {
  display: block;
  height: 100%;
}
.fp-vid-feature-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.fp-vid-feature-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 38px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  pointer-events: none;
}
.fp-vid-feature-title {
  display: -webkit-box;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Side cards (left + right columns) ──────────────── */
.fp-vid-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.fp-vid-card-thumb img {
  object-fit: cover;
}
.fp-vid-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.fp-vid-trigger:hover .fp-vid-card-title { color: #ffd2d8; }

/* ── Inline iframe (active playback state) ──────────── */
.fp-vid-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 5;
}
/* When a card is in `is-playing`, hide hover-related decoration. */
.fp-vid-trigger.is-playing { cursor: default; }
.fp-vid-trigger.is-playing .fp-vid-play { display: none; }

/* ── Play button (lives inside any thumb wrapper) ───── */
.fp-vid-play {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vid-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .15s ease, background .15s ease;
}
.fp-vid-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px; /* visually centre the triangle */
}
.fp-vid-play--lg {
  width: 56px;
  height: 56px;
  bottom: 50%;
  right: 14px;
  transform: translateY(50%);
}
.fp-vid-play--lg svg {
  width: 26px;
  height: 26px;
}
.fp-vid-card a:hover .fp-vid-play,
.fp-vid-feature a:hover .fp-vid-play {
  background: #ff1f3d;
  transform: scale(1.06);
}
.fp-vid-feature a:hover .fp-vid-play--lg {
  transform: translateY(50%) scale(1.06);
}

/* Subtle hover lift on the entire feature card image */
.fp-vid-feature a img,
.fp-vid-card a img {
  transition: transform .35s ease;
}
.fp-vid-feature a:hover img,
.fp-vid-card a:hover img {
  transform: scale(1.03);
}

/* ── Responsive tweaks ──────────────────────────────── */
@media (max-width: 991.98px) {
  .fp-vid-feature-title { font-size: 16px; }
  .fp-vid-card-title    { font-size: 13px; }
  .fp-vid-play--lg      { width: 48px; height: 48px; }
  .fp-vid-play--lg svg  { width: 22px; height: 22px; }
}
@media (max-width: 767.98px) {
  .fp-video           { padding: 14px 14px 16px; }
  .fp-video-title     { font-size: 16px; }
  .fp-vid-feature-title { font-size: 15px; }
  /* Keep side columns side-by-side on tablets to avoid super-tall stacks */
  .fp-video-grid > .col-12.col-md-3 .d-flex { gap: .75rem; }
}
@media (max-width: 575.98px) {
  .fp-video           { padding: 12px; }
  .fp-video-title     { font-size: 15px; }
  .fp-video-viewall   { font-size: 12px; }
  .fp-vid-feature-overlay { padding: 28px 12px 10px; }
  .fp-vid-feature-title { font-size: 14px; -webkit-line-clamp: 3; }
  .fp-vid-card-title  { font-size: 12.5px; }
  .fp-vid-play--lg    { width: 42px; height: 42px; }
  .fp-vid-play--lg svg{ width: 18px; height: 18px; }
}

/* ================================================================
   SINGLE POST PAGE — reading progress, breadcrumbs, grid,
   typography, share rail, related grid, nav, author box.
   These rules extend (and in places override) the legacy
   .single-post-* styles in style.css.
   ================================================================ */

/* Reading progress bar (fixed at very top of viewport) */
.ht-reading-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.ht-reading-progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e60023 0%, #ff4d68 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .08s linear;
  will-change: transform;
}

/* Breadcrumbs */
.ht-breadcrumbs {
  font-size: 13px;
  color: #666;
  margin: 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ht-breadcrumbs a {
  color: #555;
  transition: color .2s;
}
.ht-breadcrumbs a:hover { color: #e60023; }
.ht-breadcrumbs .sep { color: #bbb; }
.ht-breadcrumbs .current {
  color: #111;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
  white-space: nowrap;
}

/* Two-column single layout */
.single-main {
  padding-bottom: 40px;
}
.single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.single-content-col { min-width: 0; }
.single-sidebar-col { position: sticky; top: 16px; }

/* Article card — override legacy look to a cleaner card */
.single-post-wrap {
  background: #fff;
  padding: 28px 32px;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}

/* Header */
.single-post-header { margin-bottom: 18px; }
.post-category-badge {
  display: inline-block;
  background: #e60023;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  transition: background .2s;
}
.post-category-badge:hover { background: #c20000; color: #fff; }
.single-post-title {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  color: #111;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.single-post-dek {
  font-size: 17px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 14px;
}

/* Meta bar */
.post-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #666;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}
.post-meta-bar .pmb-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pmb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.post-meta-bar .pmb-author-label { color: #111; font-weight: 600; }
.post-meta-bar .pmb-author-label a { color: #111; }
.post-meta-bar .pmb-author-label a:hover { color: #e60023; }
.post-meta-bar .pmb-sep { color: #bbb; }
.post-meta-bar .pmb-updated,
.post-meta-bar .pmb-date,
.post-meta-bar .pmb-comments a { color: #666; }
.post-meta-bar .pmb-comments a:hover { color: #e60023; }
.post-meta-bar .pmb-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #666;
}
.post-meta-bar .pmb-reading-time svg { color: #e60023; }

/* Featured image */
.featured-image-wrap {
  margin: 0 0 22px;
}
.featured-image-wrap .featured-image,
.featured-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f4f4f4;
}
.featured-image-caption {
  font-size: 12.5px;
  color: #777;
  margin-top: 8px;
  font-style: italic;
}

/* Body wrap (share rail + content side-by-side on desktop) */
.single-body-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Sticky share rail */
.ht-share-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.ht-share-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 4px;
  writing-mode: horizontal-tb;
}
.ht-share-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 50%;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ht-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.ht-share-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.ht-share-btn.is-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.ht-share-btn.is-twitter:hover  { background: #000; border-color: #000; color: #fff; }
.ht-share-btn.is-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.ht-share-btn.is-linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.ht-share-btn.is-copy:hover,
.ht-share-btn.is-native:hover   { background: #e60023; border-color: #e60023; color: #fff; }
.ht-share-btn.is-flash {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.ht-share-btn.is-flash::after {
  content: attr(aria-label);
  position: absolute;
  left: 52px;
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.ht-share-btn { position: relative; }

/* Article body typography (override legacy .post-content with stronger rules) */
.single-post-wrap .post-content {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: 17.5px;
  line-height: 1.75;
  color: #222;
}
.single-post-wrap .post-content > * + * { margin-top: 1.1em; }
.single-post-wrap .post-content p {
  margin: 0 0 1.1em;
}
.single-post-wrap .post-content h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: #111;
  margin: 1.6em 0 .5em;
  letter-spacing: -.005em;
}
.single-post-wrap .post-content h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  color: #111;
  margin: 1.3em 0 .4em;
}
.single-post-wrap .post-content h4 { font-size: 18px; font-weight: 700; margin: 1.2em 0 .4em; color: #111; }
.single-post-wrap .post-content a {
  color: #e60023;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.single-post-wrap .post-content a:hover { color: #c20000; }
.single-post-wrap .post-content strong { color: #111; }
.single-post-wrap .post-content blockquote {
  border-left: 4px solid #e60023;
  margin: 1.4em 0;
  padding: .6em 1em .6em 1.1em;
  background: #fafafa;
  color: #222;
  font-style: italic;
  border-radius: 0 6px 6px 0;
}
.single-post-wrap .post-content blockquote p:last-child { margin-bottom: 0; }
.single-post-wrap .post-content ul,
.single-post-wrap .post-content ol { padding-left: 1.4em; margin: 1em 0; }
.single-post-wrap .post-content li { margin-bottom: .4em; }

/* ── Restore list bullets inside post body & TOC widgets ──
   The global `ul { list-style: none; }` in style.css strips bullets site-wide
   (needed for nav menus / widgets). Re-enable them inside actual article
   content and inside any TOC plugin output that lands in the_content(). */
.entry-content ul,
.ht-content-body ul,
.single-post-wrap .post-content ul,
.ht-toc ul,
.ez-toc-list,
#ez-toc-container ul,
.lwptoc ul,
.toc_list ul,
.toc_list,
.wp-block-tableofcontents ul {
  list-style: disc outside;
  padding-left: 1.4em;
  margin: 1em 0;
}
.entry-content ul ul,
.ht-content-body ul ul,
.single-post-wrap .post-content ul ul,
.ht-toc ul ul,
.ez-toc-list ul,
#ez-toc-container ul ul,
.lwptoc ul ul {
  list-style: circle outside;
  margin: .35em 0;
}
.entry-content ul ul ul,
.ht-content-body ul ul ul,
.single-post-wrap .post-content ul ul ul {
  list-style: square outside;
}
.entry-content ol,
.ht-content-body ol,
.single-post-wrap .post-content ol,
.ht-toc ol,
.wp-block-tableofcontents ol {
  list-style: decimal outside;
  padding-left: 1.6em;
  margin: 1em 0;
}
.entry-content li,
.ht-content-body li,
.ht-toc li {
  margin-bottom: .4em;
}
.single-post-wrap .post-content img,
.single-post-wrap .post-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.single-post-wrap .post-content figure { margin: 1.4em 0; }
.single-post-wrap .post-content figcaption {
  font-size: 13px;
  color: #777;
  text-align: center;
  margin-top: 6px;
  font-style: italic;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.single-post-wrap .post-content pre {
  background: #0f1115;
  color: #eceef1;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.single-post-wrap .post-content code {
  background: #f4f4f5;
  color: #111;
  font-size: .92em;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.single-post-wrap .post-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.single-post-wrap .post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 15px;
}
.single-post-wrap .post-content th,
.single-post-wrap .post-content td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.single-post-wrap .post-content th { background: #fafafa; font-weight: 700; }
.single-post-wrap .post-content hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 2em 0;
}
.single-post-wrap .page-links {
  margin: 24px 0 0;
  font-size: 14px;
  color: #555;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.single-post-wrap .page-links a {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
}
.single-post-wrap .page-links a:hover { background: #e60023; border-color: #e60023; color: #fff; }

/* Tags */
.single-post-wrap .post-tags {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.single-post-wrap .post-tags strong {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #666;
  font-weight: 700;
}
.single-post-wrap .post-tags a {
  background: #f4f4f5;
  border: 1px solid #eee;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #333;
  transition: all .2s;
}
.single-post-wrap .post-tags a:hover {
  background: #e60023;
  border-color: #e60023;
  color: #fff;
}

/* Author box */
.single-post-wrap .post-author-box {
  display: flex;
  gap: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
  margin-top: 28px;
  align-items: flex-start;
}
.post-author-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50%;
  flex-shrink: 0;
}
.post-author-body { flex: 1; min-width: 0; }
.post-author-kicker {
  display: block;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  margin-bottom: 3px;
}
.post-author-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}
.post-author-name a { color: #111; }
.post-author-name a:hover { color: #e60023; }
.post-author-bio {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin: 0 0 8px;
}
.post-author-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #e60023;
}
.post-author-link:hover { color: #c20000; }

/* Prev / Next post navigation */
.single-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.spn-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  color: #111;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  min-height: 68px;
}
.spn-link:not(.spn-empty):hover {
  border-color: #e60023;
  box-shadow: 0 4px 12px rgba(230,0,35,.08);
  transform: translateY(-1px);
}
.spn-empty {
  visibility: hidden;
}
.spn-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #888;
  text-transform: uppercase;
}
.spn-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spn-next { text-align: right; align-items: flex-end; }

/* Related posts grid */
.ht-related {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px 24px 24px;
  margin-top: 24px;
}
.ht-related-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ht-related-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #111;
  position: relative;
  padding-left: 12px;
}
.ht-related-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: #e60023;
  border-radius: 2px;
}
.ht-related-viewall {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  transition: color .2s;
}
.ht-related-viewall:hover { color: #e60023; }
.ht-related-viewall strong { color: #111; font-weight: 700; }
.ht-related-viewall:hover strong { color: #e60023; }

.ht-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ht-related-card { min-width: 0; }
.ht-related-card-link {
  display: block;
  color: inherit;
}
.ht-related-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f4f4f4;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ht-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ht-related-card-link:hover .ht-related-thumb img { transform: scale(1.04); }
.ht-related-thumb-ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ececec, #f6f6f6);
}
.ht-related-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.ht-related-card-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.ht-related-card-link:hover .ht-related-card-title { color: #e60023; }
.ht-related-card-date {
  font-size: 12px;
  color: #888;
}

/* Comments container */
.single-content-col .comments-area {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 22px 24px 24px;
  margin-top: 24px;
}

/* ---- Single post responsive ---- */
@media (max-width: 1024px) {
  .single-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
  }
  .single-post-wrap { padding: 24px; }
  .single-body-wrap { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .ht-share-btn { width: 36px; height: 36px; }
  .ht-related-grid { gap: 14px; }
}
@media (max-width: 900px) {
  .single-grid {
    grid-template-columns: 1fr;
  }
  .single-sidebar-col {
    position: static;
    margin-top: 24px;
  }
  .ht-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .single-post-wrap { padding: 20px; border-radius: 10px; }
  .single-post-title { font-size: 24px; }
  .single-post-dek { font-size: 15.5px; }
  .single-post-wrap .post-content { font-size: 16.5px; line-height: 1.7; }
  .single-post-wrap .post-content h2 { font-size: 22px; }
  .single-post-wrap .post-content h3 { font-size: 19px; }

  /* Move the share rail above the content, horizontal orientation */
  .single-body-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ht-share-rail {
    position: sticky;
    top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 10;
  }
  .ht-share-label { margin: 0 4px 0 0; align-self: center; }
  .ht-share-btn { width: 38px; height: 38px; }
  .ht-share-btn.is-flash::after {
    left: auto;
    right: 0;
    top: 44px;
  }
}
@media (max-width: 576px) {
  .single-main { padding-bottom: 28px; }
  .single-post-wrap { padding: 16px; }
  .single-post-title { font-size: 22px; }
  .ht-related { padding: 16px; }
  .ht-related-grid { grid-template-columns: 1fr; }
  .single-post-nav { grid-template-columns: 1fr; }
  .spn-next { text-align: left; align-items: flex-start; }
  .post-meta-bar { font-size: 12.5px; gap: 6px; }
  .post-meta-bar .pmb-sep { display: none; }
  .post-author-box { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ht-breadcrumbs .current { max-width: 24ch; }
  .single-post-wrap .post-content { font-size: 16px; }
}