/* =====================================================================
   DIRECTION D — MODERN TABLOID
   Almarai (heavy) + Cairo | Charcoal / Neon Cyan / Red
   Maximum density, Youm7 familiarity × Al Jazeera clarity
   Large hero image ticker, sticky colored section tabs, bottom tab mobile
   Mobile-first: 360px → 600px → 768px → 1024px → 1440px
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
  --c-bg:       #F0F2F4;
  --c-card:     #FFFFFF;
  --c-dark:     #111318;
  --c-dark-2:   #1C2028;
  --c-dark-3:   #252B35;
  --c-red:      #D32F2F;
  --c-red-dk:   #9A2222;
  --c-cyan:     #00BCD4;
  --c-cyan-dk:  #0097A7;
  --c-yellow:   #FFD600;
  --c-ink:      #0D0F14;
  --c-ink-2:    #2A2E38;
  --c-ink-3:    #5A6070;
  --c-border:   #DDE2EA;
  --c-border-dk:#C0C8D4;

  /* Section header colors */
  --c-pol-h:  #1A237E;
  --c-eco-h:  #E65100;
  --c-spo-h:  #1B5E20;
  --c-cul-h:  #4A148C;
  --c-wld-h:  #B71C1C;
  --c-ads-h:  #B8860B;   /* gold — إعلانات مؤسسات موثوقة */

  --f-heavy:  'Cairo', 'Almarai', sans-serif;
  --f-body:   'Almarai', 'Cairo', sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px;

  --r:4px; --r-lg:8px; --r-sm:2px;
  --shadow:    0 2px 6px rgba(13,15,20,0.1), 0 4px 16px rgba(13,15,20,0.08);
  --shadow-lg: 0 8px 32px rgba(13,15,20,0.16);

  --ticker-h: 36px;
  --header-h: 54px;
  --subnav-h: 38px;
  --bottom-h: 56px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* Chairperson masthead — appears at top and bottom of every page */
body::before {
  content: "رئيس مجلس الإدارة: زينب مدكور";
  display: block;
  background: var(--c-dark);
  color: #ffffff;
  text-align: center;
  font-family: var(--f-heavy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-block-end: 2px solid var(--c-cyan);
}
body::after {
  content: "رئيس مجلس الإدارة: زينب مدكور";
  display: block;
  background: var(--c-dark);
  color: #ffffff;
  text-align: center;
  font-family: var(--f-heavy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-block-start: 2px solid var(--c-cyan);
}

body{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  padding-block-end: var(--bottom-h);
}
@media(min-width:768px){body{padding-block-end:0;}}
a{color:var(--c-ink);text-decoration:none;}
a:hover{color:var(--c-red);}
ul{list-style:none;}

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap{max-inline-size:1300px;margin-inline:auto;padding-inline:var(--sp-3);}
@media(min-width:768px){.wrap{padding-inline:var(--sp-5);}}
@media(min-width:1024px){.wrap{padding-inline:var(--sp-8);}}

/* ── Top utility bar ─────────────────────────────────────────────────── */
.top-bar{background:var(--c-dark);color:rgba(255,255,255,0.65);font-family:var(--f-heavy);font-size:0.7rem;padding-block:var(--sp-1);display:none;}
@media(min-width:768px){.top-bar{display:block;}}
.top-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);}
.top-bar a{color:rgba(255,255,255,0.55);}
.top-bar a:hover{color:var(--c-cyan);}

/* ── Breaking ticker ─────────────────────────────────────────────────── */
.ticker{
  background:var(--c-red);
  color:white;
  block-size:var(--ticker-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  font-family:var(--f-heavy);
  font-size:0.82rem;
  font-weight:700;
}
.ticker__label{
  flex-shrink:0;
  background:var(--c-dark);
  color:var(--c-yellow);
  font-weight:900;
  font-size:0.65rem;
  letter-spacing:0.12em;
  padding:0 var(--sp-3);
  block-size:100%;
  display:flex;align-items:center;
  position:relative;
  z-index:1;
}
.ticker__label::after{content:'';position:absolute;inset-block:0;inset-inline-start:100%;border-block:calc(var(--ticker-h)/2) solid transparent;border-inline-start:8px solid var(--c-dark);}
.ticker__track{overflow:hidden;flex:1;padding-inline:var(--sp-3);}
.ticker__inner{display:flex;gap:var(--sp-10);white-space:nowrap;animation:ts 38s linear infinite;}
.ticker__inner span::before{content:'● ';font-size:0.5rem;vertical-align:middle;}
@keyframes ts{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ── Main header ─────────────────────────────────────────────────────── */
.site-header{background:var(--c-dark);position:sticky;inset-block-start:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.25);}
.header-row{display:flex;align-items:center;block-size:var(--header-h);gap:var(--sp-3);}

/* Logo centered on mobile, inline-start-ish on desktop */
.brand{
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--f-heavy);font-weight:900;font-size:1.3rem;color:white;
  flex-shrink:0;
}
.brand:hover{text-decoration:none;color:white;}
.brand__accent{color:var(--c-cyan);}

/* Desktop nav */
.d-nav{display:none;}
@media(min-width:768px){
  .d-nav{
    display:flex;flex:1;justify-content:center;
    overflow-x:auto;scrollbar-width:none;
    gap:0;
  }
  .d-nav::-webkit-scrollbar{display:none;}
  .d-nav a{
    font-family:var(--f-heavy);font-weight:700;font-size:0.82rem;
    color:rgba(255,255,255,0.75);
    padding:var(--sp-2) var(--sp-3);
    white-space:nowrap;
    border-block-end:2px solid transparent;
    transition:color 0.15s,border-color 0.15s;
  }
  .d-nav a:hover,.d-nav a.active{color:white;border-block-end-color:var(--c-cyan);text-decoration:none;}
}

.h-actions{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto;}
.hbtn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.7);padding:var(--sp-2);border-radius:var(--r);transition:color 0.15s,background 0.15s;display:flex;align-items:center;}
.hbtn:hover{color:white;background:rgba(255,255,255,0.08);}
.brk-btn{background:var(--c-red);color:white;border:none;font-family:var(--f-heavy);font-weight:900;font-size:0.68rem;letter-spacing:0.1em;padding:4px var(--sp-3);border-radius:var(--r-sm);cursor:pointer;display:none;align-items:center;gap:var(--sp-1);animation:pulse-bg 2s infinite;}
@media(min-width:768px){.brk-btn{display:flex;}}
.brk-btn::before{content:'';inline-size:5px;block-size:5px;background:white;border-radius:50%;animation:pulse-dot 1.5s infinite;}
@keyframes pulse-bg{0%,100%{background:var(--c-red);}50%{background:#F44336;}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);}}

/* Search */
.search-overlay{display:none;position:fixed;inset:0;background:rgba(13,15,20,0.92);z-index:200;align-items:flex-start;padding-block-start:12vh;padding-inline:var(--sp-4);backdrop-filter:blur(4px);}
.search-overlay.open{display:flex;animation:fade-in 0.2s;}
.search-overlay input{inline-size:100%;max-inline-size:620px;margin-inline:auto;display:block;background:var(--c-dark-2);border:2px solid var(--c-cyan);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);font-family:var(--f-body);font-size:1.1rem;color:white;outline:none;direction:rtl;}
.search-overlay input::placeholder{color:rgba(255,255,255,0.35);}
.search-close{position:absolute;inset-block-start:var(--sp-6);inset-inline-end:var(--sp-6);background:none;border:none;color:white;font-size:2rem;cursor:pointer;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* Section color tabs (desktop, below header) */
.section-tabs{background:var(--c-card);border-block-end:1px solid var(--c-border);display:none;overflow-x:auto;scrollbar-width:none;}
.section-tabs::-webkit-scrollbar{display:none;}
@media(min-width:768px){.section-tabs{display:block;}}
.section-tabs-inner{display:flex;block-size:var(--subnav-h);align-items:stretch;min-inline-size:max-content;}
.stab{
  display:flex;align-items:center;
  font-family:var(--f-heavy);font-weight:800;font-size:0.78rem;
  padding-inline:var(--sp-4);
  color:var(--c-ink-2);
  border-block-end:3px solid transparent;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.15s,border-color 0.15s,background 0.15s;
}
.stab:hover{color:var(--c-ink);text-decoration:none;}
.stab.active{color:white;background:var(--c-dark);border-block-end-color:var(--c-cyan);}
.stab[data-cat="سياسة"].active{background:var(--c-pol-h);}
.stab[data-cat="اقتصاد"].active{background:var(--c-eco-h);}
.stab[data-cat="رياضة"].active{background:var(--c-spo-h);}
.stab[data-cat="ثقافة"].active{background:var(--c-cul-h);}
.stab[data-cat="عالم"].active{background:var(--c-wld-h);}

/* Mobile section pills */
.m-pills{background:var(--c-card);border-block-end:1px solid var(--c-border);overflow-x:auto;scrollbar-width:none;padding-block:var(--sp-2);}
.m-pills::-webkit-scrollbar{display:none;}
.m-pills-inner{display:flex;gap:var(--sp-2);padding-inline:var(--sp-3);min-inline-size:max-content;}
@media(min-width:768px){.m-pills{display:none;}}
.mpill{background:var(--c-bg);border:1px solid var(--c-border);border-radius:999px;padding:4px var(--sp-3);font-family:var(--f-heavy);font-weight:700;font-size:0.75rem;color:var(--c-ink-2);cursor:pointer;white-space:nowrap;transition:all 0.15s;}
.mpill.active,.mpill:hover{background:var(--c-dark);color:white;border-color:var(--c-dark);}

/* Mobile nav drawer */
.nav-drawer{position:fixed;inset-block:0;inset-inline-start:100%;inline-size:min(82vw,300px);background:var(--c-dark);z-index:150;padding:var(--sp-8) var(--sp-5);overflow-y:auto;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:-4px 0 24px rgba(0,0,0,0.5);}
body.nav-open .nav-drawer{transform:translateX(-100%);}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:140;display:none;}
body.nav-open .nav-overlay{display:block;}
.nd-brand{font-family:var(--f-heavy);font-size:1.3rem;font-weight:900;color:white;margin-block-end:var(--sp-6);padding-block-end:var(--sp-5);border-block-end:1px solid rgba(255,255,255,0.1);}
.nd-brand span{color:var(--c-cyan);}
.nav-drawer a{display:block;padding:var(--sp-3) 0;font-family:var(--f-heavy);font-weight:700;font-size:0.95rem;color:rgba(255,255,255,0.8);border-block-end:1px solid rgba(255,255,255,0.07);transition:color 0.15s;}
.nav-drawer a:last-child{border-block-end:none;}
.nav-drawer a:hover,.nav-drawer a.active{color:var(--c-cyan);text-decoration:none;}

/* Bottom tab bar */
.bottom-bar{position:fixed;inset-block-end:0;inset-inline:0;background:var(--c-dark);block-size:var(--bottom-h);display:flex;align-items:stretch;border-block-start:1px solid rgba(255,255,255,0.1);z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,0.4);}
@media(min-width:768px){.bottom-bar{display:none;}}
.btab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,0.5);font-family:var(--f-heavy);font-size:0.6rem;font-weight:700;cursor:pointer;border:none;background:none;padding:var(--sp-2);text-decoration:none;transition:color 0.15s;}
.btab.active,.btab:hover{color:var(--c-cyan);}

/* ── HERO: featured video/image with tab control ─────────────────────── */
.hero-wrap{background:var(--c-dark);padding-block:var(--sp-4);}
.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
@media(min-width:768px){
  .hero-inner{grid-template-columns:2fr 1fr;gap:var(--sp-4);}
}
@media(min-width:1024px){
  .hero-inner{grid-template-columns:2.2fr 1fr;}
}

/* Main hero card */
.hero-big{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:16/9;
  cursor:pointer;
}
@media(min-width:768px){.hero-big{aspect-ratio:16/10;}}

.hbg{position:absolute;inset:0;transition:transform 0.5s;}
.hbg--pol{background:linear-gradient(145deg,#0D1B3E 0%,#1A237E 100%);}
.hbg--eco{background:linear-gradient(145deg,#1A0800 0%,#E65100 100%);}
.hbg--spo{background:linear-gradient(145deg,#001408 0%,#1B5E20 100%);}
.hero-big:hover .hbg{transform:scale(1.02);}
.hbg::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M20 20.5V18H0v5h20v20.5h5V23h20v-5H25V0h-5v20.5z'/%3E%3C/g%3E%3C/svg%3E");}

.h-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,15,20,0.95) 0%,rgba(13,15,20,0.25) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-4);}
@media(min-width:768px){.h-overlay{padding:var(--sp-6);}}
.h-badge{display:inline-block;background:var(--c-red);color:white;font-family:var(--f-heavy);font-weight:900;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;padding:2px var(--sp-2);border-radius:var(--r-sm);margin-block-end:var(--sp-2);}
.h-title{font-family:var(--f-heavy);font-weight:900;font-size:clamp(1rem,3.5vw,1.6rem);line-height:1.25;color:white;margin-block-end:var(--sp-2);}
.h-title a{color:inherit;}
.h-title a:hover{text-decoration:none;opacity:0.9;}
.h-excerpt{font-size:0.82rem;color:rgba(255,255,255,0.75);line-height:1.5;display:none;}
@media(min-width:768px){.h-excerpt{display:block;}}
.h-meta{font-family:var(--f-heavy);font-size:0.7rem;color:rgba(255,255,255,0.55);margin-block-start:var(--sp-2);}

/* Slider dots */
.h-dots{position:absolute;inset-block-end:var(--sp-3);inset-inline-end:var(--sp-3);display:flex;gap:var(--sp-2);z-index:2;}
.h-dots button{inline-size:7px;block-size:7px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);background:transparent;cursor:pointer;padding:0;transition:all 0.2s;}
.h-dots button.active{background:var(--c-cyan);border-color:var(--c-cyan);}

/* Side stack */
.hero-side-stack{display:flex;flex-direction:column;gap:var(--sp-2);}
.side-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  cursor:pointer;
  flex:1;
  min-block-size:90px;
}
@media(min-width:768px){.side-card{min-block-size:unset;}}
.sc-bg{position:absolute;inset:0;}
.sc-bg--eco{background:linear-gradient(135deg,#1A0800,#E65100);}
.sc-bg--wld{background:linear-gradient(135deg,#1A0800,#B71C1C);}
.sc-bg--cul{background:linear-gradient(135deg,#1A0028,#4A148C);}
.sc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,15,20,0.9) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-3);}
.sc-badge{display:inline-block;font-family:var(--f-heavy);font-size:0.6rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;padding:1px var(--sp-2);border-radius:var(--r-sm);margin-block-end:4px;background:rgba(255,255,255,0.2);color:white;}
.sc-title{font-family:var(--f-heavy);font-size:0.82rem;font-weight:800;line-height:1.3;color:white;}
.sc-title a{color:inherit;}

/* ── Section color bands ─────────────────────────────────────────────── */
.sec-band{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-block:var(--sp-8) var(--sp-4);
  padding-inline-start:var(--sp-3);
  border-inline-start:5px solid var(--c-red);
}
.sec-band--pol{border-inline-start-color:var(--c-pol-h);}
.sec-band--eco{border-inline-start-color:var(--c-eco-h);}
.sec-band--spo{border-inline-start-color:var(--c-spo-h);}
.sec-band--cul{border-inline-start-color:var(--c-cul-h);}
.sec-band--wld{border-inline-start-color:var(--c-wld-h);}
.sec-band h2{font-family:var(--f-heavy);font-size:1rem;font-weight:900;color:var(--c-ink);}
.sec-band .more{margin-inline-start:auto;font-family:var(--f-heavy);font-size:0.75rem;font-weight:700;color:var(--c-ink-3);padding:3px var(--sp-3);border:1.5px solid var(--c-border-dk);border-radius:var(--r);transition:all 0.15s;}
.sec-band .more:hover{background:var(--c-dark);color:white;border-color:var(--c-dark);text-decoration:none;}

/* ── Card grids ─────────────────────────────────────────────────────── */
.g4{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
@media(min-width:480px){.g4{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.g4{grid-template-columns:repeat(4,1fr);}}
.g3{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
@media(min-width:480px){.g3{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.g3{grid-template-columns:repeat(3,1fr);}}

/* ── News card ─────────────────────────────────────────────────────── */
.nc{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform 0.2s,box-shadow 0.2s;}
.nc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.nc__img{aspect-ratio:16/9;}
.nc__img--pol{background:linear-gradient(135deg,var(--c-pol-h),#0A0F40);}
.nc__img--eco{background:linear-gradient(135deg,var(--c-eco-h),#7A2800);}
.nc__img--spo{background:linear-gradient(135deg,var(--c-spo-h),#0A2810);}
.nc__img--cul{background:linear-gradient(135deg,var(--c-cul-h),#200840);}
.nc__img--wld{background:linear-gradient(135deg,var(--c-wld-h),#600808);}
.nc__body{padding:var(--sp-3);flex:1;display:flex;flex-direction:column;}
.nc__badge{display:inline-block;font-family:var(--f-heavy);font-size:0.6rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;padding:2px var(--sp-2);border-radius:var(--r-sm);margin-block-end:var(--sp-2);}
.nc__badge--pol{background:#DDEEFF;color:var(--c-pol-h);}
.nc__badge--eco{background:#FFEDE0;color:var(--c-eco-h);}
.nc__badge--spo{background:#E0F5E5;color:var(--c-spo-h);}
.nc__badge--cul{background:#F0E0FF;color:var(--c-cul-h);}
.nc__badge--wld{background:#FFE0E0;color:var(--c-wld-h);}
.nc__title{font-family:var(--f-heavy);font-size:0.88rem;font-weight:800;line-height:1.35;color:var(--c-ink);flex:1;margin-block-end:var(--sp-2);}
.nc__title a{color:inherit;}
.nc__title a:hover{color:var(--c-red);}
.nc__date{font-family:var(--f-heavy);font-size:0.68rem;color:var(--c-ink-3);margin-block-start:auto;font-weight:600;}

/* ── Horizontal scroll row (sport highlights etc.) ───────────────────── */
.h-scroll{overflow-x:auto;scrollbar-width:none;margin-inline:-var(--sp-3);padding-inline:var(--sp-3);}
.h-scroll::-webkit-scrollbar{display:none;}
.h-scroll-inner{display:flex;gap:var(--sp-3);padding-block:var(--sp-2);min-inline-size:max-content;}
.h-card{
  inline-size:220px;flex-shrink:0;
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;
  transition:transform 0.2s;
}
@media(min-width:768px){.h-card{inline-size:260px;}}
.h-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.h-card-img{block-size:130px;}
.h-card-body{padding:var(--sp-3);}
.h-card-title{font-family:var(--f-heavy);font-size:0.82rem;font-weight:800;line-height:1.3;color:var(--c-ink);}
.h-card-title a{color:inherit;}
.h-card-title a:hover{color:var(--c-red);}
.h-card-date{font-family:var(--f-heavy);font-size:0.65rem;color:var(--c-ink-3);margin-block-start:4px;font-weight:600;}

/* ── Popular ticker row ─────────────────────────────────────────────── */
.popular-strip{background:var(--c-dark-2);padding-block:var(--sp-3);margin-block:var(--sp-8);}
.pop-inner{display:flex;align-items:center;gap:var(--sp-4);overflow-x:auto;scrollbar-width:none;}
.pop-inner::-webkit-scrollbar{display:none;}
.pop-label{flex-shrink:0;font-family:var(--f-heavy);font-size:0.7rem;font-weight:900;color:var(--c-cyan);text-transform:uppercase;letter-spacing:0.1em;}
.pop-item{flex-shrink:0;display:flex;align-items:center;gap:var(--sp-2);}
.pop-num{font-family:var(--f-heavy);font-size:1.1rem;font-weight:900;color:rgba(255,255,255,0.2);}
.pop-title{font-family:var(--f-heavy);font-size:0.78rem;font-weight:700;color:rgba(255,255,255,0.8);max-inline-size:160px;line-height:1.3;}
.pop-title a{color:inherit;}
.pop-title a:hover{color:var(--c-cyan);text-decoration:none;}
.pop-divider{inline-size:1px;block-size:28px;background:rgba(255,255,255,0.12);flex-shrink:0;}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--c-dark);color:white;padding-block:var(--sp-10);margin-block-start:var(--sp-12);}
.fg{display:grid;grid-template-columns:1fr;gap:var(--sp-8);}
@media(min-width:768px){.fg{grid-template-columns:2fr 1fr 1fr;}}
.fg__brand{font-family:var(--f-heavy);font-size:1.4rem;font-weight:900;color:white;}
.fg__brand span{color:var(--c-cyan);}
.fg__tag{font-size:0.82rem;color:rgba(255,255,255,0.55);line-height:1.7;margin-block-start:var(--sp-3);max-inline-size:36ch;font-family:var(--f-body);}
.fg h4{font-family:var(--f-heavy);font-size:0.72rem;font-weight:900;color:var(--c-cyan);text-transform:uppercase;letter-spacing:0.1em;margin-block-end:var(--sp-4);}
.fg ul{display:flex;flex-direction:column;gap:var(--sp-3);}
.fg a{font-size:0.85rem;color:rgba(255,255,255,0.65);font-family:var(--f-body);transition:color 0.15s;}
.fg a:hover{color:var(--c-cyan);text-decoration:none;}
.fg-legal{margin-block-start:var(--sp-8);padding-block-start:var(--sp-5);border-block-start:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(255,255,255,0.35);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);}

/* ── Article ─────────────────────────────────────────────────────────── */
.art-wrap{padding-block:var(--sp-5);}
.art-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6);}
@media(min-width:1024px){.art-grid{grid-template-columns:1fr 300px;}}

.art-badge{display:inline-block;background:var(--c-red);color:white;font-family:var(--f-heavy);font-weight:900;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;padding:3px var(--sp-3);border-radius:var(--r-sm);}
.art-title{font-family:var(--f-heavy);font-size:clamp(1.3rem,4vw,2rem);font-weight:900;line-height:1.25;color:var(--c-ink);margin-block:var(--sp-3);}
.art-byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding-block:var(--sp-3);border-block:2px solid var(--c-border);font-family:var(--f-heavy);font-size:0.78rem;color:var(--c-ink-3);margin-block-end:var(--sp-5);}
.art-byline b{color:var(--c-ink-2);}
.art-hero{aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden;margin-block:var(--sp-4);}
.ah--pol{background:linear-gradient(135deg,var(--c-pol-h),#0A0F40);}
.art-lede{font-family:var(--f-heavy);font-size:clamp(0.95rem,2.5vw,1.1rem);font-weight:700;color:var(--c-ink-2);line-height:1.7;margin-block-end:var(--sp-5);padding:var(--sp-4) var(--sp-5);background:var(--c-dark);color:white;border-radius:var(--r-lg);border-inline-start:4px solid var(--c-cyan);}
.art-body{font-family:var(--f-body);font-size:1rem;line-height:1.85;color:var(--c-ink);}
.art-body p{margin-block:var(--sp-4);}
.art-body h2{font-family:var(--f-heavy);font-size:1rem;font-weight:900;color:var(--c-ink);margin-block-start:var(--sp-8);margin-block-end:var(--sp-3);border-inline-start:4px solid var(--c-cyan);padding-inline-start:var(--sp-3);}
.video-el{aspect-ratio:16/9;background:var(--c-dark);border-radius:var(--r-lg);margin-block:var(--sp-6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s;position:relative;overflow:hidden;}
.video-el:hover{transform:scale(1.01);}
.video-el::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,188,212,0.06),transparent 70%);}
.vplay{inline-size:60px;block-size:60px;background:var(--c-cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-dark);font-size:1.4rem;position:relative;z-index:1;transition:transform 0.2s,box-shadow 0.2s;}
.video-el:hover .vplay{transform:scale(1.1);box-shadow:0 0 30px rgba(0,188,212,0.4);}
.vcap{font-family:var(--f-heavy);font-size:0.75rem;color:var(--c-ink-3);text-align:center;margin-block-start:var(--sp-2);}
.share-r{display:flex;align-items:center;gap:var(--sp-3);padding-block:var(--sp-4);border-block:1px solid var(--c-border);margin-block:var(--sp-6);flex-wrap:wrap;}
.share-r span{font-family:var(--f-heavy);font-size:0.78rem;font-weight:700;color:var(--c-ink-3);}
.s-btn{inline-size:36px;block-size:36px;border-radius:var(--r);background:var(--c-dark);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;transition:all 0.15s;}
.s-btn:hover{background:var(--c-cyan);color:var(--c-dark);text-decoration:none;transform:scale(1.1);}

.art-sidebar{display:none;}
@media(min-width:1024px){.art-sidebar{display:block;position:sticky;inset-block-start:calc(var(--header-h)+var(--subnav-h)+var(--sp-4));align-self:start;}}
.sb{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-4);margin-block-end:var(--sp-4);}
.sb h3{font-family:var(--f-heavy);font-size:0.75rem;font-weight:900;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-ink);margin-block-end:var(--sp-4);padding-block-end:var(--sp-3);border-block-end:2px solid var(--c-cyan);}
.sb-row{display:grid;grid-template-columns:56px 1fr;gap:var(--sp-3);padding-block:var(--sp-3);border-block-end:1px solid var(--c-border);}
.sb-row:last-child{border-block-end:none;padding-block-end:0;}
.sb-thumb{block-size:42px;border-radius:var(--r-sm);}
.sb-thumb--pol{background:linear-gradient(135deg,var(--c-pol-h),#0A0F40);}
.sb-thumb--eco{background:linear-gradient(135deg,var(--c-eco-h),#7A2800);}
.sb-thumb--spo{background:linear-gradient(135deg,var(--c-spo-h),#0A2810);}
.sb-title{font-family:var(--f-heavy);font-size:0.8rem;font-weight:700;line-height:1.3;color:var(--c-ink);}
.sb-title a{color:inherit;}
.sb-title a:hover{color:var(--c-red);}
.sb-date{font-family:var(--f-heavy);font-size:0.65rem;color:var(--c-ink-3);margin-block-start:3px;font-weight:600;}

/* Progress bar */
.read-bar{position:fixed;inset-block-start:0;inset-inline-start:0;block-size:3px;background:var(--c-cyan);width:0%;z-index:999;}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity 0.4s,transform 0.4s;}
.rv.on{opacity:1;transform:none;}
.rvg>*{opacity:0;transform:translateY(10px);transition:opacity 0.35s,transform 0.35s;}
.rvg.on>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
.rvg.on>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
.rvg.on>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
.rvg.on>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}

/* ─────────────────────────────────────────────────────────────────────
   PRODUCTION ADDITIONS (FR-043, FR-044, FR-045)
   ───────────────────────────────────────────────────────────────────── */

/* Brand tagline "وكالة إعلامية" beside the logo (FR-044) */
.brand-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.brand__tagline {
  font-family: var(--f-heavy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
  line-height: 1;
}

/* Ads section header chip (إعلانات مؤسسات موثوقة) */
.sec-band--ads { border-inline-start-color: var(--c-ads-h); }
.stab[data-cat="إعلانات"].active { background: var(--c-ads-h); }
.nc__badge--ads { background: #FFF4D9; color: var(--c-ads-h); }
.nc__img--ads { background: linear-gradient(135deg, var(--c-ads-h), #5A4008); }
.hbg--ads { background: linear-gradient(145deg, #1A1100 0%, var(--c-ads-h) 100%); }

/* Sponsored content marker — appears alongside the section badge on ads cards */
.sponsored-badge {
  display: inline-block;
  font-family: var(--f-heavy);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: rgba(184, 134, 11, 0.12);
  color: var(--c-ads-h);
  border: 1px solid rgba(184, 134, 11, 0.4);
  margin-inline-start: var(--sp-2);
}
.sponsored-banner {
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.3);
  color: var(--c-ink-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-family: var(--f-heavy);
  font-weight: 700;
  font-size: 0.82rem;
  margin-block: var(--sp-4);
}

/* Google Ads slot reservations (FR-045) — ready for AdSense/Ad Manager script.
   Slots show a placeholder label only when empty; once real ad markup is
   injected (or [data-empty] is removed), they render whatever the ad network sends. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-card);
  border: 1px dashed var(--c-border-dk);
  border-radius: var(--r);
  color: var(--c-ink-3);
  font-family: var(--f-heavy);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-inline: auto;
}
.ad-slot[data-empty="true"]::before {
  content: "مساحة إعلانية · Google Ads";
  opacity: 0.6;
}
.ad-slot--top {
  inline-size: min(728px, 100%);
  block-size: 90px;
  margin-block: var(--sp-4);
}
@media (max-width: 600px) {
  .ad-slot--top { inline-size: 100%; block-size: 60px; }
}
.ad-slot--mid-article {
  inline-size: min(580px, 100%);
  block-size: 250px;
  margin-block: var(--sp-6);
}
.ad-slot--sidebar {
  inline-size: 300px;
  block-size: 250px;
  margin-block-end: var(--sp-4);
}
.ad-slot--footer {
  inline-size: min(970px, 100%);
  block-size: 200px;
  margin-block: var(--sp-6) var(--sp-3);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 600px) {
  .ad-slot--footer { block-size: 100px; }
}