/* ============================================================
   Base reset, typography, shared primitives
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.7;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.45}
.icon{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- brand mark (real logo) --- */
.logo{display:flex;align-items:center;gap:10px;line-height:1;flex-shrink:0}
.logo .brand-mark{width:96px;height:auto;color:var(--red);flex-shrink:0}
.logo .brand-mark g{fill:currentColor}
.logo .brand-txt{display:flex;flex-direction:column;line-height:1}
.logo .brand-txt b{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--red);letter-spacing:-.5px}
.logo .brand-txt b span{color:var(--ink)}
.logo .brand-txt>span{font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:2px}

/* --- image placeholders / real media --- */
.ph{background:linear-gradient(135deg,var(--surface-2) 25%,var(--line) 25%,var(--line) 50%,var(--surface-2) 50%,var(--surface-2) 75%,var(--line) 75%);background-size:14px 14px;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative;overflow:hidden}
.ph .icon{width:30px;height:30px;opacity:.55}
.ph.has-img{background:var(--surface-2)}
/* Not scoped to .ph — .ph-dark is used standalone (muwajaha posters). */
.has-img{position:relative;overflow:hidden}
.has-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ph-dark{background:linear-gradient(135deg,#232327 25%,#2c2c31 25%,#2c2c31 50%,#232327 50%,#232327 75%,#2c2c31 75%);background-size:14px 14px}
.ph-dark.has-img{background:#131316}

/* --- badges / tags / meta --- */
.badge{position:absolute;top:14px;right:14px;z-index:3;font-family:var(--font-head);font-weight:800;font-size:11.5px;padding:4px 12px;border-radius:4px;letter-spacing:.3px}
.badge--exclusive{background:var(--red);color:#fff}
.badge--first{background:var(--black-block);color:var(--on-black);border:1px solid rgba(255,255,255,.25)}
.badge--gold{background:var(--gold);color:#fff}
.badge--live{background:#fff;color:var(--red);border:1.5px solid var(--red);display:flex;align-items:center;gap:6px}
.badge--live::before{content:"";width:7px;height:7px;background:var(--red);border-radius:4px;animation:pulse 1.2s infinite}
.cat-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--red);background:var(--red-soft);padding:2px 10px;border-radius:4px}
.meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.meta .icon{width:12px;height:12px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Ad slots are emitted by ka_gam() and styled in ads.css. */

/* --- section headers --- */
.sec-head{display:flex;align-items:center;gap:14px;margin:44px 0 18px}
.sec-head h2{font-size:21px;font-weight:800;display:flex;align-items:center;gap:10px}
.sec-head h2::before{content:"";width:5px;height:24px;background:var(--red);border-radius:3px}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
.sec-head .more{font-size:12.5px;color:var(--red);font-weight:600;display:flex;align-items:center;gap:4px;white-space:nowrap}
.sec-head .more:hover{color:var(--red-deep)}
.sub-links{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}
.sub-links a{font-size:12px;border:1px solid var(--line);border-radius:4px;padding:4px 13px;color:var(--muted);transition:.15s}
.sub-links a:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}

/* --- generic story card --- */
.story{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.story:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.story .ph{aspect-ratio:15/10;height:auto}
.story-body{padding:13px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.story-body h3{font-size:14.5px;font-weight:700;line-height:1.6;flex:1}
.story:hover h3{color:var(--red)}
.story-body .meta{margin-top:auto}

.col-title{font-family:var(--font-head);font-weight:800;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.col-title::before{content:"";width:4px;height:16px;background:var(--red);border-radius:2px}

.empty-note{padding:16px;text-align:center;color:var(--muted);font-size:12.5px;border:1px dashed var(--line);border-radius:var(--radius)}

/* ============================================================
   Article titles: never more than two lines.
   Kept in one place so every card obeys the same rule.
   ============================================================ */
.super-story h1,
.srow h3,
.story-body h3,
.fc-lead h3,
.fc-item p,
.fc-list a,
.cat-block .row p,
.sport-news .rowi p,
.elex-flash h3,
.elex-mini p,
.top-list p,
.writers p,
.mega-story p,
.latest a span,
.pick-txt h3,
.mj-info b,
.deaths p{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
/* the list rows carry their meta inside the anchor — keep it out of the clamp */
.fc-list a{-webkit-line-clamp:3}

/* drag-to-scroll carousels (see app.js) */
.is-draggable{cursor:grab;-webkit-overflow-scrolling:touch}
.is-draggable.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.is-draggable.is-dragging a,
.is-draggable.is-dragging img{pointer-events:none}

/* ---- PageSpeed / WCAG-AA fixes ------------------------------------------ *
 * Contrast: --red (#EF3340) is ~3.4:1 on white and fails AA for small text.
 * Swap small red TEXT to the deeper red (--red-deep, ~5:1) — it also adapts
 * in dark mode. Badges/logo keep the bright brand red (bg with white text). */
.super-story .ss-date b,
.writers .wr-by,
.fc-all,
.standings .pts,
.fx-down{color:var(--red-deep)}
/* Small tile label sat on a light tile — use the stronger ink for AA. */
.u-tile small{color:var(--ink-2)}

/* Touch targets: give icon-only / small controls a ≥44px tap area. */
.ticker-bell{min-width:44px;min-height:44px}
.tk-item{min-height:40px}
.foot-news .nl-form input,
.foot-news .nl-form button{min-height:44px}

/* Breadcrumbs — shared across every page (article/category/city/search/…),
   so a page needs no per-file copy. Last crumb (current page) is bold ink. */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0 14px;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--muted);transition:color .15s}
.crumbs a:hover{color:var(--red)}
.crumbs .sep{color:var(--line-strong);font-size:11px}
.crumbs > span:last-child{color:var(--ink);font-weight:700}