/* ============================================================
   Single post (blog article) — page-scoped styles.
   Enqueued only by single.php (before get_header). Tokens come
   from .yatharth-page-wrapper in main.css; everything here is
   namespaced .rs-* except .entry-content, which has to style
   Gutenberg output and LuckyWP TOC markup we do not control.
   Mobile-first: base rules target 375px, min-width upgrades.
   ============================================================ */

.rs-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 700px) {
  .rs-shell { padding: 0 24px; }
}

/* Reading measure. One shared value so head, body and TOC align. */
.rs-article {
  --rs-measure: 68ch;
}

.rs-head-inner,
.rs-featured .rs-shell,
.rs-body .rs-shell,
.rs-band .rs-shell {
  max-width: calc(var(--rs-measure) + 32px);
}

@media (min-width: 700px) {
  .rs-head-inner,
  .rs-featured .rs-shell,
  .rs-body .rs-shell,
  .rs-band .rs-shell {
    max-width: calc(var(--rs-measure) + 48px);
  }
}

/* Two-column body: content + a 320px course rail on the RIGHT.
   ---------------------------------------------------------------
   The .rs-body shell wraps .rs-body-grid (content + 320px rail). Capped to the
   reading measure like the prose shells above, the whole two-column block was
   strangled into ~734px: the rail rendered in a cramped band with dead space
   beside it — the "banners are under the topic, not to the right" report — and the
   article body shrank to ~318px.

   The rail only appears at >=1000px (.rs-body-grid becomes two columns there), so
   only there:

   1. Widen every article shell — body, head, featured, band — to the SAME width:
      reading measure + gap + 320px rail. One shared width means one shared left
      edge, so the head/title/featured no longer float centred over a wider,
      left-heavier body (they were misaligning by ~160px otherwise).

   2. Cap the prose and featured image INSIDE the head/featured/band back to the
      reading measure and left-align them, so widening the shell to make room for
      the rail does not stretch a headline or a hero image to the full 1054px.

   The result: title, featured image and body text share one left edge, and the
   320px rail sits to their right. Below 1000px the grid is one column and the
   measure cap above still governs, so tablet and mobile are unchanged. Mirrors
   .ca-layout--sidebar on the current-affairs single, which solves the same thing. */
@media (min-width: 1000px) {
  .rs-body .rs-shell,
  .rs-head-inner,
  .rs-featured .rs-shell,
  .rs-band .rs-shell {
    max-width: calc(var(--rs-measure) + 48px + 48px + 320px);
  }

  .rs-head-inner > *,
  .rs-featured .rs-shell > *,
  .rs-band .rs-shell > * {
    max-width: var(--rs-measure);
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---------- article head ---------- */
.rs-head {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(255, 140, 43, 0.13), transparent 60%),
    radial-gradient(760px 380px at -10% 120%, rgba(231, 29, 57, 0.08), transparent 55%),
    #ffffff;
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-4) 0 var(--s-4);
}

@media (min-width: 700px) {
  .rs-head { padding: var(--s-5) 0; }
}

/* ---------- breadcrumb ---------- */
.rs-crumbs {
  margin-bottom: var(--s-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

.rs-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b6460;
  font-weight: 600;
  min-width: 0;
}

.rs-crumbs li + li::before {
  content: '/';
  color: #c9c2bc;
  font-weight: 500;
}

.rs-crumbs a {
  color: #6b6460;
  text-decoration: none;
}

.rs-crumbs a:hover,
.rs-crumbs a:focus-visible {
  color: #e71d39;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rs-crumbs li[aria-current] {
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- category chip ---------- */
.rs-chip {
  display: inline-block;
  max-width: 100%;
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #b3162c;
  background: #fdeceb;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.rs-chip:hover,
a.rs-chip:focus-visible {
  background: #fbdcd9;
  color: #8e1023;
}

/* ---------- title + meta ---------- */
.rs-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 6.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  margin: 12px 0 0;
  overflow-wrap: break-word;
}

.rs-title[lang="hi"] {
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.rs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: var(--s-3) 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b6460;
}

.rs-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rs-meta-item svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex: none;
}

.rs-meta-updated {
  color: #1faf54;
}

.rs-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c9c2bc;
  flex: none;
}

/* ---------- featured image ---------- */
.rs-featured {
  margin: 0;
  padding: var(--s-4) 0 0;
}

.rs-featured-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--e-2);
  background: #f6f3f1;
}

@media (min-width: 700px) {
  .rs-featured-img { border-radius: 18px; }
}

.rs-featured-cap {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6b6460;
  text-align: center;
}

/* ---------- body ---------- */
.rs-body {
  padding: var(--s-4) 0 var(--s-5);
}

/* ---------- LuckyWP Table of Contents ----------
   Markup belongs to the plugin (.lwptoc / .lwptoc_i / .lwptoc_items).
   We only reskin the container so 382 posts keep working TOC anchors. */
.rs-toc {
  margin: 0 0 var(--s-4);
}

.rs-toc .lwptoc,
.rs-toc .lwptoc_i {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: #fbf9f8 !important;
  border: 1px solid var(--hairline);
  border-left: 4px solid #FF8C2B;
  border-radius: 12px;
  padding: 16px 18px !important;
  box-sizing: border-box;
}

.rs-toc .lwptoc_i { border: 0; border-left: 0; padding: 0 !important; background: transparent !important; }

.rs-toc .lwptoc_header {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.rs-toc .lwptoc_toggle,
.rs-toc .lwptoc_toggle_label {
  color: #e71d39;
  font-weight: 700;
  cursor: pointer;
}

.rs-toc .lwptoc_items {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.rs-toc .lwptoc_item a,
.rs-toc .lwptoc_items a {
  color: var(--ink-soft);
  text-decoration: none;
}

.rs-toc .lwptoc_item a:hover,
.rs-toc .lwptoc_items a:hover,
.rs-toc .lwptoc_items a:focus-visible {
  color: #e71d39;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   ENTRY CONTENT — Gutenberg output from 382 legacy posts.
   ============================================================ */
.entry-content {
  font-size: 1rem;
  line-height: 1.75;
  color: #3a3430;
  overflow-wrap: break-word;
}

@media (min-width: 700px) {
  .entry-content { font-size: 1.05rem; }
}

.entry-content > * { margin: 0 0 var(--s-3); }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content p {
  margin: 0 0 var(--s-3);
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  scroll-margin-top: 96px; /* fixed 80px header + breathing room for TOC jumps */
}

.entry-content h2 {
  font-size: clamp(1.3rem, 4.8vw, 1.65rem);
  margin: var(--s-5) 0 var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}

.entry-content h3 {
  font-size: clamp(1.12rem, 4.2vw, 1.32rem);
  margin: var(--s-4) 0 12px;
}

.entry-content h4 {
  font-size: 1.05rem;
  margin: var(--s-3) 0 10px;
}

.entry-content h5,
.entry-content h6 {
  font-size: 0.98rem;
  margin: var(--s-3) 0 10px;
}

/* The plugin wraps heading text in <span id="..."> anchors — keep them inline. */
.entry-content h2 > span[id],
.entry-content h3 > span[id],
.entry-content h4 > span[id] {
  scroll-margin-top: 96px;
}

.entry-content a {
  color: #c2152f;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  color: #8e1023;
  text-decoration-thickness: 2px;
}

.entry-content strong,
.entry-content b { color: var(--ink); font-weight: 700; }

.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--s-3);
  padding-left: 22px;
}

.entry-content li {
  margin-bottom: 8px;
}

.entry-content ul li::marker { color: #FF8C2B; }
.entry-content ol li::marker { color: #e71d39; font-weight: 700; }

.entry-content blockquote {
  margin: var(--s-4) 0;
  padding: 16px 18px;
  background: #fbf9f8;
  border-left: 4px solid #e71d39;
  border-radius: 0 12px 12px 0;
  font-size: 1.02rem;
  color: var(--ink);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
}

.entry-content img {
  border-radius: 12px;
}

.entry-content figure {
  margin: var(--s-4) 0;
}

.entry-content figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6b6460;
  text-align: center;
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s-5) 0;
}

.entry-content code,
.entry-content kbd {
  font-size: 0.9em;
  background: #f4f1ef;
  border-radius: 5px;
  padding: 2px 6px;
}

.entry-content pre {
  overflow-x: auto;
  padding: 14px;
  background: #f4f1ef;
  border-radius: 10px;
  font-size: 0.86rem;
}

/* ---------- tables (5+ per legacy post, has-fixed-layout) ---------- */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-4) 0;
}

/* Bare tables (not wrapped by Gutenberg) still need to scroll on 375px. */
.entry-content > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.entry-content table.has-fixed-layout { table-layout: fixed; }

.entry-content th,
.entry-content td {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.entry-content thead th {
  background: #fdeceb;
  color: #8e1023;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
}

.entry-content tbody tr:nth-child(even) td { background: #fbf9f8; }

/* ---------- multi-page article links ---------- */
.rs-pagelinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 0.9rem;
}

.rs-pagelinks a,
.rs-pagelinks > span:not(:first-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}

.rs-pagelinks a:hover,
.rs-pagelinks a:focus-visible {
  border-color: #e71d39;
  color: #e71d39;
}

/* ============================================================
   AUTHOR + CTA BAND
   ============================================================ */
.rs-band {
  padding: 0 0 var(--s-5);
}

.rs-author {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: #fbf9f8;
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.rs-author-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e71d39, #FF8C2B);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
}

.rs-author-avatar img,
.rs-author-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

/* Flex text column — min-width:0 so a long unbroken token in an editor-set
   author bio wraps instead of stretching the card. */
.rs-author-body { min-width: 0; }

.rs-author-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #e71d39;
}

.rs-author-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 4px 0 6px;
  letter-spacing: -0.015em;
}

.rs-author-bio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* ---------- lead CTA ---------- */
.rs-cta {
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 20px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)),
    linear-gradient(135deg, #FF515A 0%, #FF8C2B 100%);
  box-shadow: 0 10px 30px rgba(255, 81, 90, 0.2);
  color: #ffffff;
  text-align: center;
}

.rs-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.28;
  color: #ffffff;
  margin: 0 0 10px;
}

.rs-cta p {
  margin: 0 auto var(--s-3);
  max-width: 58ch;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.94);
}

.rs-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rs-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: none;
}

.rs-btn--call {
  background: #ffffff;
  color: #e71d39;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.rs-btn--wa {
  background: #1faf54;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.rs-btn--apply {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.rs-btn:hover,
.rs-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.rs-btn--apply:hover,
.rs-btn--apply:focus-visible {
  background: #ffffff;
  color: #e71d39;
}

.rs-cta-note {
  margin: var(--s-2) 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.rs-cta-tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rs-cta-tel:hover,
.rs-cta-tel:focus-visible { text-decoration: none; }

@media (min-width: 700px) {
  .rs-cta { padding: var(--s-5) var(--s-4); }
  .rs-author { padding: var(--s-3); gap: 18px; }
}

/* ============================================================
   RELATED POSTS
   ============================================================ */
.rs-related {
  padding: var(--s-5) 0;
  background: #fbf9f8;
  border-top: 1px solid var(--hairline);
}

.rs-related .global-section-title {
  text-align: center;
  margin-bottom: var(--s-4);
}

.rs-rel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .rs-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .rs-rel-grid { grid-template-columns: repeat(3, 1fr); }
}

.rs-rel-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--e-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rs-rel-card:hover,
.rs-rel-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--e-2);
}

.rs-rel-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: #f1ede9;
  overflow: hidden;
}

.rs-rel-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The no-image tile moved to .riyasat-tile in main.css — shared with the archive
   grid. .rs-rel-media above still owns this rail's sizing. */

.rs-rel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  padding: 16px 16px 18px;
}

.rs-rel-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.rs-rel-title a {
  color: inherit;
  text-decoration: none;
}

.rs-rel-title a:hover,
.rs-rel-title a:focus-visible {
  color: #e71d39;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rs-rel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b6460;
}

.rs-rel-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rs-rel-read svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex: none;
}

.rs-rel-more {
  margin: var(--s-4) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}

.rs-rel-more a {
  color: #e71d39;
  text-decoration: none;
  border-bottom: 2px solid rgba(231, 29, 57, 0.28);
  padding-bottom: 2px;
}

.rs-rel-more a:hover,
.rs-rel-more a:focus-visible {
  border-bottom-color: #e71d39;
}

/* ---------- 375px polish ---------- */
@media (max-width: 420px) {
  .rs-btn {
    width: 100%;
    padding: 13px 16px;
  }
  .rs-cta { padding: var(--s-3) 16px; }
  .rs-author { flex-direction: column; }
  .entry-content table { font-size: 0.84rem; }
  .entry-content th,
  .entry-content td { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-rel-card,
  .rs-btn { transition: none; }
  .rs-rel-card:hover,
  .rs-btn:hover { transform: none; }
}