/* ============================================================================
   Sakar Bharat — FRESH homepage v5 · "BROADSHEET"
   Built from scratch: dense, full-width Hindi daily. Hero + top-stories rail,
   full-width category blocks (1 lead + 4 minis), photo/story rails. Namespaced .sbf-*.
   Image frames use DEFINITE heights (never aspect-ratio) so posters can't balloon.
   ========================================================================== */
.sbf{
  --red:#d11021; --red-dk:#a20c19; --blue:#1552b8; --green:#0a8a4e; --amber:#c9820a; --purple:#7a2fb8;
  --ink:#15181e; --ink2:#3a414c; --muted:#727a86; --line:#e4e7ec; --hair:#eef1f4;
  --bg:#eef1f5; --card:#ffffff; --dark:#12151b; --wash:#f6f8fa;
  --sans:'Mukta','Noto Sans Devanagari',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Noto Serif Devanagari',Georgia,serif;
  --shell:1240px;
  --sh:0 1px 2px rgba(17,20,26,.05),0 1px 8px rgba(17,20,26,.05);
  --shh:0 8px 24px rgba(17,20,26,.13);
  background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
:root{color-scheme:light dark;}
body{background:#eef1f5;}
.sbf *{box-sizing:border-box;margin:0;}
.sbf img{max-width:100%;display:block;}
.sbf a{color:inherit;text-decoration:none;}
.sbf ::selection{background:var(--red);color:#fff;}
.sbf-shell{max-width:var(--shell);margin:0 auto;padding:0 16px;width:100%;}
/* grid children must be allowed to shrink below content min-content, and long Latin/number
   tokens in Hindi headlines must wrap — else a track blows past its share and gets clipped. */
.sbf-hero__main,.sbf-hero__side,.sbf-card,.sbf-cmini,.sbf-clead,.sbf-hi{min-width:0;}
.sbf-hero__main h1,.sbf-card h3,.sbf-cmini h4,.sbf-clead h3,.sbf-hi__t,.sbf-brk__track a,.sbf-photo figcaption,.sbf-story figcaption{overflow-wrap:anywhere;}
.sbf-clead p:empty,.sbf-hero__main p:empty,.sbf-card h3:empty{display:none;}
.sbf-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:10px 16px;font-weight:800;border-radius:0 0 6px 0;}
.sbf-skip:focus{left:0;}

/* ── Image frames: definite height + out-of-flow img (posters can't balloon) ── */
.sbf-fr{display:block;overflow:hidden;position:relative;background:#e7eaee;}
.sbf-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s ease;}
.sbf-fr--ph{display:grid;place-items:center;background:linear-gradient(135deg,#f3f5f8,#e6eaef);}
.sbf-fr--ph span{font-family:var(--serif);font-weight:900;color:#c2c8d0;font-size:clamp(13px,3vw,19px);text-align:center;line-height:1.1;}
.sbf-fig{margin:0;display:block;}
a:hover .sbf-fr img{transform:scale(1.055);}

/* kicker + timestamp */
.sbf-k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--red);}
.sbf-tm{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:6px;}

/* ── Topbar ──────────────────────────────────────────────── */
.sbf-top{background:var(--dark);color:#aeb4bd;font-size:12.5px;}
.sbf-top .sbf-shell{display:flex;align-items:center;gap:16px;height:36px;overflow:hidden;}
.sbf-top__date{color:#fff;font-weight:700;white-space:nowrap;}
.sbf-top__links{display:flex;gap:15px;overflow:hidden;}
.sbf-top__links a{color:#99a1ab;white-space:nowrap;}.sbf-top__links a:hover{color:#fff;}
.sbf-top__right{margin-left:auto;display:flex;gap:14px;align-items:center;white-space:nowrap;flex:0 0 auto;}
.sbf-top__right a{color:#c6ccd4;font-weight:700;}
.sbf-top__epaper{color:var(--amber)!important;}
.sbf-top__lang{border-left:1px solid rgba(255,255,255,.16);padding-left:14px;}
@media(max-width:860px){.sbf-top__links{display:none;}}

/* ── Masthead ────────────────────────────────────────────── */
.sbf-mast{background:var(--card);border-bottom:1px solid var(--line);}
.sbf-mast .sbf-shell{display:flex;align-items:center;gap:22px;padding:15px 16px;}
.sbf-logo__name{font-family:var(--serif);font-weight:900;font-size:clamp(27px,5vw,38px);letter-spacing:-.01em;color:var(--red);line-height:1;}
.sbf-logo__name b{color:var(--ink);}
.sbf-logo__tag{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:700;}
.sbf-ad{margin-left:auto;flex:1;max-width:728px;height:90px;background:repeating-linear-gradient(45deg,#f2f4f7,#f2f4f7 12px,#eceef2 12px,#eceef2 24px);
  border:1px dashed #d1d6dd;border-radius:5px;display:grid;place-items:center;color:#a7aeb8;font-size:11px;font-weight:800;letter-spacing:.14em;}
@media(max-width:1000px){.sbf-ad{display:none;}}

/* ── Nav ─────────────────────────────────────────────────── */
.sbf-nav{background:var(--red);position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(0,0,0,.16);}
.sbf-nav .sbf-shell{display:flex;align-items:stretch;padding:0 16px;}
.sbf-nav__live{display:inline-flex;align-items:center;gap:7px;background:var(--dark);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.05em;padding:0 15px;flex:0 0 auto;}
.sbf-nav__live i{width:7px;height:7px;border-radius:50%;background:#ff6a6a;box-shadow:0 0 0 0 rgba(255,106,106,.7);animation:sbfp 1.4s infinite;}
.sbf-nav__row{display:flex;height:48px;overflow-x:auto;scrollbar-width:none;flex:1;}
.sbf-nav__row::-webkit-scrollbar{display:none;}
.sbf-nav__row a{padding:0 15px;display:inline-flex;align-items:center;white-space:nowrap;font-weight:700;font-size:15px;color:rgba(255,255,255,.92);position:relative;}
.sbf-nav__row a:hover,.sbf-nav__row a.is-active{color:#fff;background:rgba(0,0,0,.15);}
.sbf-nav__row a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:#fff;border-radius:3px 3px 0 0;}
.sbf-nav__search{flex:0 0 auto;display:flex;align-items:center;}
.sbf-nav__search input{width:0;padding:0;border:0;transition:width .22s,padding .22s;background:rgba(255,255,255,.16);color:#fff;height:32px;border-radius:5px;font:inherit;font-size:13px;}
.sbf-nav__search:focus-within input{width:180px;padding:0 12px;}
.sbf-nav__search input::placeholder{color:rgba(255,255,255,.75);}
.sbf-nav__search button{background:transparent;border:0;color:#fff;width:46px;height:48px;cursor:pointer;display:grid;place-items:center;}
@media(max-width:640px){.sbf-nav__live{padding:0 11px;font-size:11px;}.sbf-nav__row a{font-size:14px;padding:0 13px;}}

/* ── Breaking ────────────────────────────────────────────── */
.sbf-brk{background:var(--card);border-bottom:1px solid var(--line);}
.sbf-brk .sbf-shell{display:flex;align-items:center;gap:14px;height:42px;overflow:hidden;padding:0 16px;}
.sbf-brk__tag{background:var(--red);color:#fff;font-weight:800;font-size:12px;letter-spacing:.05em;padding:5px 22px 5px 12px;white-space:nowrap;flex:0 0 auto;clip-path:polygon(0 0,100% 0,90% 100%,0 100%);}
.sbf-brk__track{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent);}
.sbf-brk__track ul{display:flex;gap:44px;list-style:none;white-space:nowrap;animation:sbfm 48s linear infinite;}
.sbf-brk:hover ul{animation-play-state:paused;}
.sbf-brk__track a{font-size:14.5px;font-weight:700;color:var(--ink);}
.sbf-brk__track a::before{content:"●";color:var(--red);font-size:8px;vertical-align:middle;margin-right:11px;}
@keyframes sbfm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sbfp{0%{box-shadow:0 0 0 0 rgba(255,106,106,.7)}70%{box-shadow:0 0 0 7px rgba(255,106,106,0)}100%{box-shadow:0 0 0 0 rgba(255,106,106,0)}}

/* ── Section header (shared) ─────────────────────────────── */
.sbf-shell>section{margin-top:34px;}
.sbf-shell>section:first-of-type{margin-top:24px;}
.sbf-hd{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--line);margin-bottom:18px;}
.sbf-hd h2{font-size:clamp(19px,2.4vw,23px);font-weight:800;letter-spacing:-.01em;color:var(--ink);padding-bottom:11px;border-bottom:3px solid var(--red);margin-bottom:-2px;}
.sbf-hd__more{margin-left:auto;font-size:13px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.04em;padding-bottom:11px;}
.sbf-hd__more:hover{color:var(--red-dk);}

/* ── HERO ────────────────────────────────────────────────── */
.sbf-hero{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);gap:26px;}
.sbf-hero__main .sbf-fr{height:clamp(230px,42vw,430px);border-radius:8px;}
.sbf-hero__main .sbf-k{margin:14px 0 0;font-size:12px;}
.sbf-hero__main h1{font-weight:800;font-size:clamp(23px,3vw,34px);line-height:1.18;margin:7px 0 0;letter-spacing:-.01em;}
.sbf-hero__main:hover h1{color:var(--red);}
.sbf-hero__main p{color:var(--ink2);font-size:16px;margin:9px 0 0;line-height:1.5;}
.sbf-hero__side{display:flex;flex-direction:column;}
.sbf-hero__side .sbf-hd{margin-bottom:6px;}
.sbf-hi{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:center;flex:1 1 0;}
.sbf-hi:last-child{border-bottom:0;}
.sbf-hi__t{font-weight:700;font-size:15px;line-height:1.32;}
.sbf-hi:hover .sbf-hi__t{color:var(--red);}
.sbf-hi .sbf-fr{height:64px;border-radius:5px;}
.sbf-hi__n{grid-column:1/-1;display:none;}
@media(max-width:940px){.sbf-hero{grid-template-columns:1fr;gap:22px;}}

/* ── 5-card row (ताज़ा) ──────────────────────────────────── */
.sbf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.sbf-row--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ── Card ────────────────────────────────────────────────── */
.sbf-card{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;}
.sbf-card:hover{box-shadow:var(--shh);transform:translateY(-2px);}
.sbf-card .sbf-fr{height:clamp(140px,16vw,166px);flex:0 0 auto;}
.sbf-card__b{padding:11px 13px 14px;flex:1;display:flex;flex-direction:column;}
.sbf-card h3{font-weight:700;font-size:15.5px;line-height:1.32;margin:6px 0 0;}
.sbf-card:hover h3{color:var(--red);}
.sbf-card .sbf-tm{margin-top:auto;padding-top:9px;}

/* ── CATEGORY block: 1 lead + 4 minis, fills width ───────── */
.sbf-cat[data-c=politics]{--red:var(--blue);--red-dk:#0f3e8f;}
.sbf-cat[data-c=sports]{--red:var(--green);--red-dk:#076e3d;}
.sbf-cat[data-c=business]{--red:var(--amber);--red-dk:#a56b06;}
.sbf-cat[data-c=entertainment]{--red:var(--purple);--red-dk:#5f259a;}
.sbf-cat__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
/* Lead is a full-width HORIZONTAL card (image | text) so it never leaves a vertical gap. */
.sbf-clead{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,1.05fr) 1.5fr;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--sh);transition:box-shadow .18s,transform .18s;}
.sbf-clead:hover{box-shadow:var(--shh);transform:translateY(-2px);}
.sbf-clead .sbf-fr{height:100%;min-height:240px;}
.sbf-clead__b{padding:20px 26px;display:flex;flex-direction:column;justify-content:center;}
.sbf-clead h3{font-weight:800;font-size:clamp(19px,2.1vw,26px);line-height:1.24;margin:9px 0 0;letter-spacing:-.006em;}
.sbf-clead:hover h3{color:var(--red);}
.sbf-clead p{color:var(--ink2);font-size:15px;margin:11px 0 0;line-height:1.55;}
.sbf-cmini{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;}
.sbf-cmini:hover{box-shadow:var(--shh);transform:translateY(-2px);}
.sbf-cmini .sbf-fr{height:clamp(96px,11vw,116px);flex:0 0 auto;}
.sbf-cmini__b{padding:9px 11px 11px;flex:1;display:flex;flex-direction:column;}
.sbf-cmini h4{font-weight:700;font-size:14px;line-height:1.3;margin:2px 0 0;}
.sbf-cmini:hover h4{color:var(--red);}
.sbf-cmini .sbf-tm{margin-top:auto;padding-top:7px;font-size:11.5px;}

/* ── Rails (photos / stories) ────────────────────────────── */
.sbf-rail{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;}
.sbf-rail::-webkit-scrollbar{height:6px;}
.sbf-rail::-webkit-scrollbar-thumb{background:#c7ccd4;border-radius:6px;}
.sbf-photo{flex:0 0 258px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:var(--sh);display:block;}
.sbf-photo .sbf-fr{height:168px;}
.sbf-photo figcaption{padding:10px 12px 13px;font-weight:700;font-size:14px;line-height:1.3;}
.sbf-photo:hover figcaption{color:var(--red);}
.sbf-story{flex:0 0 152px;scroll-snap-align:start;display:block;}
.sbf-story .sbf-fr{height:252px;border-radius:10px;border:2px solid transparent;}
.sbf-story:hover .sbf-fr{border-color:var(--amber);}
.sbf-story figcaption{font-weight:700;font-size:13px;line-height:1.28;margin-top:8px;}
.sbf-story__p{position:absolute;top:8px;left:8px;background:rgba(18,21,27,.62);backdrop-filter:blur(3px);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;padding:3px 9px;border-radius:99px;z-index:2;}

/* ── ePaper promo (full-width) ───────────────────────────── */
.sbf-ep{margin-top:34px;background:linear-gradient(100deg,var(--dark),#20293a);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 26px;color:#fff;position:relative;}
.sbf-ep::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border:14px solid var(--red);opacity:.25;transform:rotate(12deg);}
.sbf-ep__k{color:var(--amber);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.sbf-ep h3{font-size:clamp(20px,2.4vw,26px);font-weight:900;margin:5px 0 4px;}
.sbf-ep p{color:rgba(255,255,255,.72);font-size:14px;}
.sbf-ep a{display:inline-block;background:var(--red);color:#fff!important;font-weight:800;font-size:14px;padding:12px 24px;border-radius:6px;white-space:nowrap;}
.sbf-ep a:hover{background:#fff;color:var(--red)!important;}
@media(max-width:600px){.sbf-ep{grid-template-columns:1fr;text-align:center;}}

.sbf-end{margin:44px 0 10px;padding:22px 0;border-top:2px solid var(--ink);text-align:center;font-weight:800;font-size:14px;color:var(--muted);}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1000px){
  .sbf-row,.sbf-row--4{grid-template-columns:repeat(2,minmax(0,1fr));}   /* 4 cards → clean 2×2 */
  .sbf-cat__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sbf-clead{grid-template-columns:1fr;}            /* stack image over text */
  .sbf-clead .sbf-fr{height:clamp(200px,44vw,300px);min-height:0;}
  .sbf-clead__b{padding:14px 16px 16px;}
  .sbf-hi{flex:0 1 auto;}                            /* side rail: no stretch when stacked */
}
@media(max-width:620px){
  .sbf-row,.sbf-row--4{gap:13px;}
  .sbf-cat__grid{gap:13px;}
  .sbf-card .sbf-fr{height:clamp(120px,34vw,150px);}
  .sbf-cmini .sbf-fr{height:clamp(84px,26vw,110px);}
  .sbf-hd h2{font-size:19px;}
}
@media(max-width:400px){
  .sbf-row,.sbf-row--4,.sbf-cat__grid{grid-template-columns:1fr;}
  .sbf-clead .sbf-fr{height:200px;}
}

/* ── DARK THEME (intentional, for dark-mode devices) ─────── */
@media (prefers-color-scheme: dark){
  .sbf{
    --ink:#eaeef4;--ink2:#bcc4cf;--muted:#868f9c;--line:#272d37;--hair:#1f242d;
    --bg:#0d1015;--card:#161a21;--dark:#05070b;--wash:#12161c;
    --sh:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.4);--shh:0 10px 26px rgba(0,0,0,.6);
  }
  body{background:#0d1015;}
  .sbf-fr{background:#20252e;}
  .sbf-fr--ph{background:linear-gradient(135deg,#1a1f27,#12161c);}
  .sbf-fr--ph span{color:#3c434c;}
  .sbf-ad{background:repeating-linear-gradient(45deg,#12161c,#12161c 12px,#171c23 12px,#171c23 24px);border-color:#2a3039;color:#5b636e;}
  .sbf-hd,.sbf-hi{border-color:#272d37;}
}