/* Legal Boundary shared homepage design system.
   Extracted verbatim from index.html so that the Hindi section
   (/index-new.html, served at /hi) uses the exact same tokens,
   layout and components as the English homepage. */
    :root {
      --accent: #c41f2a;
      --accent-dark: #8f1820;
      --ink: #161616;
      --muted: #666;
      --surface: #ffffff;
      --line: #e7e3de;
      --soft: #f7f4f1;
    }
    body { background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%); }
    /* overflow-x: clip (not hidden) — overflow-x:hidden on html/body creates a
       scroll container that silently breaks position:sticky for the sidebar,
       which caused the growing blank space beside the article column. */
    html, body { overflow-x: clip; }
    img[src=""] { visibility: hidden; }
    .lb-shell { padding: 0 0 3rem; }
    .lb-utility {
      background: #0f1012; color: #fff; font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .lb-utility-inner, .lb-header-inner, .lb-nav-inner, .lb-main {
      max-width: 1400px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem;
    }
    .lb-live-banner {
      max-width:1400px; margin: .75rem auto 0; padding: .65rem 1rem;
      border:1px solid rgba(196,31,42,.2); border-radius:14px;
      background: linear-gradient(90deg, rgba(196,31,42,.09), rgba(196,31,42,.03));
      color: var(--accent-dark); font-weight: 700; font-size: .92rem;
    }
    .lb-utility-inner { display:flex; justify-content:space-between; gap:1rem; padding-top:.55rem; padding-bottom:.55rem; }
    .lb-utility-links { display:flex; gap:1rem; flex-wrap:wrap; color:#fff; opacity:.92; }
    .lb-utility-links a { color:#fff; text-decoration:none; }
    .lb-header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1000; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
    .lb-header-inner { display:grid; grid-template-columns: 220px 1fr auto; gap:1rem; align-items:center; padding-top:.95rem; padding-bottom:.95rem; }
    .lb-brand img { width: 200px; max-width: 100%; height:auto; display:block; }
    .lb-search {
      display:flex; align-items:center; gap:.6rem; background: var(--soft); border:1px solid var(--line); padding:.75rem 1rem; border-radius:999px;
    }
    .lb-search input { width:100%; border:0; outline:0; background:transparent; font: inherit; }
    .lb-actions { display:flex; gap:.75rem; align-items:center; }
    .lb-pill { border:1px solid var(--line); background:#fff; border-radius:999px; padding:.7rem .95rem; font-weight:600; color:var(--ink); text-decoration:none; }
    .lb-nav { background:#fff; border-bottom:1px solid var(--line); }
    .lb-nav-inner { display:flex; gap:.25rem; align-items:center; overflow:auto; padding-top:.25rem; padding-bottom:.25rem; }
    .lb-nav a { white-space:nowrap; text-decoration:none; color:var(--ink); padding:.9rem 1rem; font-weight:600; border-bottom:3px solid transparent; }
    .lb-nav a:hover, .lb-nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
    .lb-nav-social {
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:.35rem;
      padding-left:.5rem;
      flex:0 0 auto;
    }
    .lb-social-link {
      width:38px;
      height:38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--ink);
      background:#fff;
      text-decoration:none;
      transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
    }
    .lb-social-link:hover {
      transform:translateY(-1px);
      border-color:var(--accent);
      color:var(--accent);
      background:#fff7f8;
    }
    .lb-social-link i { font-size:1rem; line-height:1; }
    .lb-breaking {
      background: linear-gradient(90deg, var(--accent-dark), var(--accent)); color:#fff; margin:1rem auto 0; max-width:1400px;
      display:flex; gap:1rem; align-items:center; padding:.7rem 1rem; border-radius:12px; overflow:hidden;
    }
    .lb-breaking strong { text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; background:#fff; color:var(--accent); padding:.35rem .55rem; border-radius:999px; flex-shrink:0; }
    .lb-breaking #breakingText { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition: opacity .45s ease; opacity:1; }
    .lb-breaking #breakingText a { color:#fff; text-decoration:none; }
    .lb-breaking #breakingText a:hover { text-decoration:underline; }
    /* Video of the day block: spans the full article column width (same grid column) */
    .lb-video-frame {
      position:relative; width:100%; aspect-ratio:16/9; border-radius:14px;
      overflow:hidden; background:#000; border:1px solid var(--line);
    }
    .lb-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
    .lb-video-caption { margin:.7rem 0 0; color:var(--muted); font-size:.95rem; font-weight:600; }
    .lb-breaking #breakingText.lb-ticker-fade { opacity:1; }
    .lb-breaking #breakingText:not(.lb-ticker-fade) { opacity:.35; }
    .lb-layout { display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:1.5rem; margin-top:1.5rem; align-items:start; }
    .lb-hero {
      display:grid; grid-template-columns: 1.35fr .85fr; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
    }
        /* HERO: clean Tribune-style — image full clarity (no heavy overlay), headline BELOW image */
    .lb-hero-featured {
      position:relative; display:flex; flex-direction:column;
      text-decoration:none; color:inherit; background:#1b1b1b;
    }
    .lb-hero-featured img {
      position:static; display:block; width:100%; height:auto;
      aspect-ratio:16/9; object-fit:contain; object-position:center; background:#1b1b1b; filter:saturate(.96);
    }
    /* subtle dark fade ONLY at the bottom ~30% so the photo stays clear above */
    .lb-hero-featured::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.22) 100%);
      pointer-events:none;
    }
    /* headline + kicker sit BELOW the image, on a white card */
    .lb-hero-copy {
      position:relative; z-index:1; margin-top:auto; padding:2.1rem;
      background:#fff; border-radius:20px 0 0 0;
      box-shadow:0 8px 28px rgba(15,23,42,.08);
    }
    .lb-kicker {
      display:inline-block; background:var(--surface); border:1px solid var(--line);
      color:var(--muted); padding:.35rem .65rem; border-radius:999px;
      font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem;
    }
    .lb-hero-copy h1 {
      font-family:'Newsreader', Georgia, serif;
      font-size:clamp(1.9rem, 4vw, 2.8rem); line-height:1.06;
      margin:0 0 .8rem; max-width:38ch; text-decoration:none; color:var(--ink);
    }
    .lb-hero-copy p { color:var(--muted); font-size:1.03rem; max-width:62ch; line-height:1.55; margin:0 0 1rem; }
    .lb-meta { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.9rem; }
    .lb-hero-rail { padding:1rem; display:grid; gap: .8rem; background: linear-gradient(180deg, #fff, #fbfaf8); }
    .lb-rail-item { display:grid; grid-template-columns: 96px 1fr; gap:.8rem; padding:.8rem; border:1px solid var(--line); border-radius:14px; background:#fff; text-decoration:none; color:inherit; }
    .lb-rail-item img { width:96px; height:84px; object-fit:cover; border-radius:10px; }
    .lb-rail-item h3 { margin:0; font-size:1rem; line-height:1.35; }
    .lb-rail-item .meta { font-size:.82rem; color:var(--muted); margin-top:.35rem; }
        .lb-section { margin-top:1.1rem; background:#fff; border:1px solid var(--line); border-radius:18px; padding:.85rem; }
    .lb-section + .lb-section { margin-top:.85rem; }
    .lb-section-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:.8rem; padding-bottom:.65rem; border-bottom:2px solid var(--accent); }
    .lb-section-head h2 { margin:0; font-size:1.35rem; font-family:'Newsreader', serif; }
    .lb-section-head a { color:var(--accent); text-decoration:none; font-weight:700; }
    .lb-top-stories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .lb-lead-card { text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
    .lb-lead-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
    .lb-lead-body { padding:1rem; display:flex; flex-direction:column; flex:1; }
        .lb-tag {
      display:inline-flex; align-items:center;
      background:var(--accent); color:#fff;
      padding:.32rem .7rem; border-radius:999px;
      font-size:.76rem; font-weight:800;
      text-transform:uppercase; letter-spacing:.05em;
    }
    /* tag anchored at the bottom of every card body (consistent across sections) */
    .lb-card-foot, .lb-sub-foot {
      margin-top:auto; padding-top:.7rem; padding-bottom:.2rem;
      display:flex; align-items:center; gap:.5rem;
      border-top:1px solid var(--line);
    }
    .lb-hero-featured h1, .lb-lead-card h3, .lb-mini-card h3, .lb-card h3 { text-decoration:none; }
    .lb-mini-card > div { display:flex; flex-direction:column; flex:1; }
    /* excerpt fills remaining height so the category tag anchors at the card bottom */
    .lb-lead-body h3 { margin:0 0 .55rem; font-family:'Newsreader', serif; font-size:1.55rem; line-height:1.12; }
    .lb-lead-body p { margin:0; color:var(--muted); }
    .lb-stack { display:grid; gap:.85rem; }
    .lb-mini-card { display:grid; grid-template-columns:112px 1fr; gap:.8rem; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:14px; padding:.75rem; background:#fff; }
    .lb-mini-card img { width:112px; height:88px; object-fit:cover; border-radius:10px; }
    .lb-mini-card h3 { margin:0 0 .3rem; font-size:1rem; line-height:1.3; text-decoration:none; }
    .lb-mini-card .meta, .lb-card-meta { color:var(--muted); font-size:.83rem; }
        .lb-card {
      border:1px solid var(--line); border-radius:16px; overflow:hidden;
      background:#fff; text-decoration:none; color:inherit;
      display:flex; flex-direction:column;
    }
    .lb-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
    .lb-card-body { padding:.95rem; display:flex; flex-direction:column; flex:1; }
    .lb-card h3 { margin:.25rem 0 .4rem; font-size:1.05rem; line-height:1.32; text-decoration:none; }
    .lb-card p { margin:0; color:var(--muted); font-size:.92rem; }
        .lb-sidebar { position:sticky; top:110px; display:grid; gap:.75rem; }
    .lb-box { background:#fff; border:1px solid var(--line); border-radius:18px; padding:.65rem .7rem .7rem; }
    .lb-box h3 { margin:0 0 .7rem; font-size:1rem; border-bottom:2px solid var(--accent); padding-bottom:.55rem; }
    .lb-list { display:grid; gap:.55rem; }
    .lb-list a { text-decoration:none; color:inherit; display:flex; justify-content:space-between; gap:.85rem; padding:.65rem .75rem; background:#faf8f6; border:1px solid var(--line); border-radius:12px; }
    .lb-list span:last-child { color:var(--accent); font-weight:800; }
    .lb-empty { padding:1rem; border:1px dashed #d6d1ca; border-radius:14px; color:var(--muted); background:#fcfbfa; text-align:center; }
    .lb-topic-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.75rem; }
    .lb-topic-grid a { display:block; padding:.85rem; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; background:#fff; }
    .lb-topic-grid a strong { display:block; margin-bottom:.2rem; }
    .lb-more { display:grid; gap:1rem; }
    .lb-footer-space { height:2rem; }
    .lb-footer {
      margin-top:2rem; background:#101114; color:#f4f4f2; border-top:1px solid rgba(255,255,255,.08);
    }
    .lb-footer-inner { max-width:1400px; margin:0 auto; padding:2rem 1rem 1rem; }
    .lb-footer-brandrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
    .lb-footer-brand { display:flex; align-items:center; gap:.9rem; text-decoration:none; color:#fff; }
    .lb-footer-brand img { width:150px; height:auto; }
    .lb-footer-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1.25rem; padding:1.25rem 0; }
    .lb-footer h4 { margin:0 0 .75rem; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; }
    .lb-footer a { color:rgba(255,255,255,.82); text-decoration:none; display:block; padding:.2rem 0; }
    .lb-footer a:hover { color:#fff; }
    .lb-footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.72); font-size:.92rem; }
    .lb-card h3, .lb-mini-card h3, .lb-lead-body h3, .lb-hero-copy h1, .lb-section-head h2, .lb-box h3, .lb-topic-grid strong, .lb-footer h4 { color:var(--ink); }
    .lb-card p, .lb-mini-card .meta, .lb-card-meta, .lb-lead-body p, .lb-empty, .meta { color:var(--muted); opacity:1; }
    .lb-nav a, .lb-pill, .lb-list a, .lb-topic-grid a { color:var(--ink); opacity:1; }
    .lb-utility-links, .lb-utility-links a { opacity:1; }
    /* --- Card grid: ONE consolidated rule set for the card container ---
       Desktop = 2 columns, tablet (<=900px) = 2, mobile (<=600px) = 1.
       The orphaned .lb-grid variant (dead CSS, no DOM element uses it) was
       removed so exactly one rule drives the .lb-section-grid container. --- */
    .lb-section-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      justify-items: stretch;
      gap: 12px;
      width: 100%;
      max-width: none;    /* grid spans full width up to the sidebar; never artificially capped */
    }
    .lb-section-grid > * {
      min-width: 0;
    }
    .lb-section-grid .lb-card {
      width: 100%;    /* column size comes from the grid track, never a hard px width */
      min-width: 0;   /* long text can never force a card wider than its track */
    }
    .lb-card, .lb-card-body, .lb-lead-card, .lb-lead-body, .lb-mini-card { width: 100%; min-width: 0; }
    .lb-section-grid .lb-card { height: 100%; }
    .lb-section-grid .lb-card img { min-height: 0; }
    .lb-section-grid .lb-card-body { padding: 1rem .95rem 1.05rem; }
    .lb-section-grid .lb-card h3 { font-size: 1.16rem; line-height: 1.16; }
    .lb-section-grid .lb-card p { font-size: .98rem; line-height: 1.48; }
    @media (max-width: 900px) {
      .lb-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 600px) {
      .lb-section-grid { grid-template-columns: 1fr; }
    }
    /* --- "In Case You Missed It" dense tile grid --- */
    .lb-more-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.85rem; }
    .lb-missed-tile {
      display:grid; grid-template-columns: 112px 1fr; gap:.75rem; align-items:center;
      border:1px solid var(--line); border-radius:14px; padding:.55rem; background:#fff;
      text-decoration:none; color:inherit;
    }
    .lb-missed-tile:hover { background:var(--soft); }
    .lb-missed-tile img { width:112px; height:84px; object-fit:cover; border-radius:9px; display:block; }
    .lb-missed-body h3 { margin:.3rem 0 0; font-family:'Newsreader', serif; font-size:1rem; line-height:1.3; text-decoration:none; }
    @media (max-width: 1100px) {
      .lb-more-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .lb-missed-tile { grid-template-columns: 92px 1fr; }
      .lb-missed-tile img { width:92px; height:72px; }
    }
    @media (max-width: 560px) {
      .lb-sidebar { gap:.6rem; }
    }
            @media (max-width: 1100px) {
      .lb-layout, .lb-hero { grid-template-columns: 1fr; }
      .lb-sidebar { position:static; }
    }
    @media (max-width: 900px) {
      .lb-top-stories { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px) {
      .lb-utility { display:none; }
      .lb-header-inner { grid-template-columns: 1fr auto; row-gap: 0.65rem; }
      .lb-search { grid-column: 1 / -1; order: 3; min-height: 48px; }
      .lb-brand img { width: 150px; max-width: 100%; }
                  .lb-actions .lb-pill { min-height: 48px; padding: 0.75rem 1rem; }
      .lb-topic-grid { grid-template-columns: 1fr; }
      .lb-hero-copy { padding: 1.25rem; }
      .lb-hero-copy h1 { font-size: 1.95rem; max-width: 12ch; }
      .lb-hero-copy p { font-size: .96rem; }
      .lb-utility-inner { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
      .lb-nav a { padding: 0.85rem 0.9rem; }
      .lb-list a { min-height: 48px; align-items: center; }
      .lb-pill, .lb-section-view-all { min-height: 44px; }
      .lb-top-stories { grid-template-columns: 1fr; }
      .lb-lead-card img { aspect-ratio: 16/9; }
      .lb-mini-card { grid-template-columns: 92px 1fr; }
      .lb-mini-card img { width: 92px; height: 76px; }
      .lb-box { padding: .9rem; }
      .lb-box h3 { font-size: 1rem; }
      .lb-box .lb-empty { padding: .85rem; }
      .lb-footer-grid { grid-template-columns: 1fr 1fr; }
      .lb-footer { font-size: .94rem; }
      .lb-footer-brandrow { gap:.75rem; }
    }
    @media (max-width: 560px) {
      .lb-footer-grid { grid-template-columns: 1fr; }
      .lb-footer-brandrow { flex-direction:column; align-items:flex-start; }
      .lb-hero-copy h1 { font-size: 1.7rem; }
      .lb-top-stories { grid-template-columns: 1fr; }
      .lb-section { padding: .95rem; }
    }