/* ==========================================================================
   Simple long-form pages: /upsc-or-judiciary, /is-law-a-good-optional-for-upsc,
   /law-optional-for-non-law-students. Requires tokens.css + base.css.
   Hero band, jump bar (phone) / sticky TOC (desktop), numbered red-ruled H2s,
   check/number cards, key-figure cards, pull quote, closing card.
   Mobile-first (360), enhanced at 640 / 960.
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero ------------------------------------------------------------------- */
.lf-hero { background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding-block: var(--s-2) var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { text-decoration: underline; }
.lf-kicker { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-red-text); margin-top: var(--s-1); }
.lf-hero__title { font-size: var(--fs-h1); margin-top: var(--s-1); color: var(--c-charcoal); max-width: 22ch; }
.lf-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch; margin-top: var(--s-2); padding-left: var(--s-2); border-left: 4px solid var(--c-red-text); color: var(--c-text); }
.lf-hero__pills { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.lf-pill {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--s-2);
  font-family: var(--ff-display); font-size: 1rem; color: var(--c-slate); background: var(--c-white);
  border: 1px solid var(--c-slate); border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.lf-pill:hover { background: var(--c-slate); color: var(--c-white); }

/* Jump bar (phone) and sticky TOC (desktop) -------------------------------- */
.lf-jump { position: sticky; top: 0; z-index: 20; background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.lf-jump ul { display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-1) var(--gutter); scrollbar-width: none; }
.lf-toc { display: none; }

/* Layout ------------------------------------------------------------------ */
.lf-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4) var(--s-5); }
.lf-main { min-width: 0; display: grid; gap: var(--s-3); align-content: start; }
.lf-prose { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.lf-prose p { max-width: 68ch; }
.lf-prose p + p { margin-top: var(--s-2); }
.lf-intro { display: grid; gap: var(--s-2); }
.lf-intro p { max-width: 68ch; }

/* Section headings: numbered, red-ruled ----------------------------------- */
.lf-sec { display: grid; gap: var(--s-2); scroll-margin-top: 72px; margin-top: var(--s-3); }
.lf-sec > h2 { position: relative; padding-top: var(--s-2); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--c-charcoal); display: flex; align-items: center; gap: var(--s-2); }
.lf-sec > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--c-red-text); border-radius: 2px; }
.lf-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-white); font-family: var(--ff-display); font-size: 1.25rem; }

/* Cards: lists, tiles, pairs, tips ---------------------------------------- */
.lf-cards { display: grid; gap: var(--s-1); counter-reset: lfc; }
.lf-cards li { counter-increment: lfc; }
.lf-cards a {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min); padding: var(--s-2);
  background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-red-text);
  border-radius: var(--radius); box-shadow: var(--shadow-card); color: var(--c-charcoal); text-decoration: none;
  font-family: var(--ff-display); font-size: 1.0625rem; line-height: 1.3; transition: box-shadow var(--ease);
}
.lf-cards a:hover { box-shadow: var(--shadow-card-hover); }
.lf-cards a::before { content: counter(lfc); flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-red-text); color: var(--c-white); font-size: 1rem; }
.lf-cards--check a::before { content: "\2713"; }
.lf-cards--plain li:not(:has(a)) { padding: var(--s-2); background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-red-text); border-radius: var(--radius); box-shadow: var(--shadow-card); font-family: var(--ff-display); }

.lf-pair { display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); background: var(--c-white); border: 1px solid var(--c-line); border-left: 5px solid var(--c-red-text); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.lf-pair--j { border-left-color: var(--c-navy); }
.lf-pair p + p { margin-top: 0; }
.lf-grid { display: grid; gap: var(--s-2); }
.lf-tile { padding: var(--s-2); background: var(--c-surface); border-top: 3px solid var(--c-red-text); border-radius: var(--radius); }
.lf-tile--card { background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-red-text); box-shadow: var(--shadow-card); display: grid; gap: var(--s-1); align-content: start; }
.lf-tile--card h2 { font-size: var(--fs-h3); color: var(--c-charcoal); }
.lf-tile--card p + p { margin-top: 0; }
.lf-note { padding: var(--s-2); background: var(--c-surface); border-radius: var(--radius); border-left: 4px solid var(--c-gold); display: grid; gap: var(--s-1); }
.lf-tips { display: grid; gap: var(--s-2); }
.lf-tip { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-red-text); border-radius: var(--radius); box-shadow: var(--shadow-card); display: grid; gap: var(--s-1); }
.lf-tip h3 { font-size: var(--fs-h3); color: var(--c-charcoal); }
.lf-tip p + p { margin-top: 0; }

/* Key figures ------------------------------------------------------------- */
.lf-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-block: var(--s-2); }
.lf-figs--3 { grid-template-columns: minmax(0, 1fr); }
.lf-fig { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-2); background: var(--c-charcoal); color: var(--c-white); border-radius: var(--radius-lg); }
.lf-fig__n { font-family: var(--ff-display); font-size: 2.25rem; line-height: 1; color: var(--c-gold-light); }
.lf-fig__t { font-size: 1rem; line-height: 1.45; }

/* Pull quote -------------------------------------------------------------- */
.lf-pull { margin: var(--s-3) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); border-left: 6px solid var(--c-red-text); }
.lf-pull p { max-width: none; font-family: var(--ff-serif); font-style: italic; font-size: 1.375rem; line-height: 1.4; color: var(--c-charcoal); }

/* Video cards (non-law page; .vcard styles come from toppers.css) ---------- */
.lf-sub { color: var(--c-text-muted); }
.lf-vgrid { display: grid; gap: var(--s-3); }
.lf-vmore { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.lf-vmore a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* Closing card ------------------------------------------------------------ */
.lf-close { padding-block: var(--s-4) var(--s-6); }
.lf-contact { display: grid; gap: var(--s-3); padding: var(--s-3); background: var(--c-charcoal); color: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.lf-contact__title { font-size: var(--fs-h2); color: var(--c-white); }
.lf-contact__sub { color: var(--c-gold-light); margin-top: var(--s-1); }
.lf-contact .btn--outline { color: var(--c-white); border-color: var(--c-white); }
.lf-contact .btn--outline:hover { background: var(--c-white); color: var(--c-charcoal); }
.lf-next { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-top: var(--s-2); border-top: 1px solid rgba(255,255,255,.25); }
.lf-next span { width: 100%; font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--c-gold-light); }
.lf-next a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--c-white); font-family: var(--ff-display); font-size: 1.0625rem; }
.btn--whatsapp { background: #1DA851; border-color: #1DA851; color: var(--c-white); }
.btn--whatsapp:hover { background: #178A42; border-color: #178A42; color: var(--c-white); }
.btn__icon { width: 20px; height: 20px; flex: 0 0 auto; }

@media (min-width: 640px) {
  .lf-prose { font-size: 1.0625rem; }
  .lf-lead { font-size: 1.25rem; }
  .lf-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-hero { padding-block: var(--s-3) var(--s-5); }
  .lf-fig__n { font-size: 2.75rem; }
}
@media (min-width: 960px) {
  .lf-jump { display: none; }
  .lf-wrap { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); }
  .lf-toc { display: block; position: sticky; top: var(--s-3); align-self: start; }
  .lf-toc h2 { font-size: var(--fs-sm); font-family: var(--ff-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: var(--s-1); }
  .lf-toc ol { border-left: 2px solid var(--c-line); }
  .lf-toc a { display: flex; align-items: center; min-height: var(--tap-min); padding-left: var(--s-2); margin-left: -2px; border-left: 2px solid transparent; color: var(--c-slate); text-decoration: none; font-family: var(--ff-display); }
  .lf-toc a:hover { color: var(--c-red-text); border-left-color: var(--c-red-text); }
  .lf-hero__title { font-size: 2.75rem; }
  .lf-contact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-6); padding: var(--s-5); }
  .lf-contact .btn-row { justify-content: flex-end; }
  .lf-next { grid-column: 1 / -1; }
}
.lf-fig__n--long { font-size: 1.75rem; white-space: nowrap; }
@media (min-width: 640px) { .lf-fig__n--long { font-size: 2.25rem; } }

/* GS overlap blocks with real Mains questions (/is-law-a-good-optional-for-upsc) */
.gs-block { display: grid; gap: var(--s-2); margin-top: var(--s-4); scroll-margin-top: 72px; }
.gs-block > h3 { position: relative; padding-top: var(--s-2); margin-top: 0; font-size: var(--fs-h3); color: var(--c-charcoal); }
.gs-block > h3::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--c-red-text); border-radius: 2px; }
.gs-block > p:not([class]) { padding: var(--s-2); background: var(--c-surface); border-radius: var(--radius); border-left: 4px solid var(--c-red-text); }
.gs-count { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--c-red-text); }
.gs-label { font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-slate); margin-top: calc(-1 * var(--s-1)); }
.gs-qs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.gs-q { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2); background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.gs-q p { max-width: none; }
.gs-q p + p { margin-top: 0; }
.gs-q__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.gs-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-1); background: var(--c-red-text); color: var(--c-white); font-family: var(--ff-display); font-size: var(--fs-sm); border-radius: 999px; }
.gs-chip--m { background: var(--c-slate); }
.gs-q__text { font-size: 1rem; line-height: 1.55; }
.gs-q__topic { margin-top: auto !important; padding-top: var(--s-1); border-top: 1px dashed var(--c-line); display: grid; gap: 2px; font-size: var(--fs-sm); }
.gs-q__topic span { font-family: var(--ff-display); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.gs-q__topic a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: 1rem; line-height: 1.35; }
.gs-more a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-family: var(--ff-display); }
@media (min-width: 760px) { .gs-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.gs-ex { display: grid; gap: var(--s-2); padding-top: var(--s-2); }
.gs-ex p { max-width: 68ch; }
.gs-ex__q { padding-left: var(--s-2); border-left: 3px solid var(--c-gold); font-weight: 700; }
.gs-ex__note { padding: var(--s-1) var(--s-2); background: var(--c-surface); border-radius: var(--radius); color: var(--c-text-muted); }
.gs-sub { font-size: var(--fs-h3); color: var(--c-charcoal); margin-top: var(--s-2); }