/* ============================================================================
   blog.css, Screens blog (index), ported to the v2 design system.
   Reuses tokens/nav/footer from home.css + home-sections.css + service.css.
   ========================================================================= */

/* nav: highlight the current top-level item (Blog) */
.nav-links > li > a[aria-current="page"]{color:var(--blue);}
.nav-links > li > a[aria-current="page"]::after{transform:scaleX(1);}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.blog-head{position:relative; overflow:hidden; padding:calc(var(--nav-h) + 56px) 0 60px;
  background:linear-gradient(180deg,#fff 0%,#F0F4FC 68%,#fff 100%);}
.blog-head::before{content:""; position:absolute; top:-60px; inset-inline-end:-100px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(47,107,255,.12) 0%, transparent 62%); pointer-events:none;}
.blog-head .wrap{position:relative; z-index:2;}
.blog-crumb{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin-bottom:22px;}
.blog-crumb a{color:var(--muted); text-decoration:none; transition:color .18s;}
.blog-crumb a:hover{color:var(--blue);}
.blog-crumb .sep{opacity:.5;}
.blog-crumb .cur{color:var(--ink);}
.blog-head-top{display:flex; flex-direction:column; align-items:flex-start; gap:22px;}
.blog-h1{font-size:clamp(46px,6.2vw,88px); font-weight:800; line-height:.98; letter-spacing:-.035em; color:var(--ink);}
.blog-h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.blog-h1-ar{display:none;}
html[lang="ar"] .blog-h1-en{display:none;}
html[lang="ar"] .blog-h1-ar{display:inline-flex; align-items:center; gap:.26em; vertical-align:middle;}
.blog-h1-logo{height:.8em; width:auto; display:block;}
.blog-head-sub{font-size:18px; color:var(--muted); line-height:1.55; max-width:430px; padding-bottom:8px;}
.blog-head-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.blog-head-media{border-radius:22px; overflow:hidden; aspect-ratio:16/10.5; position:relative; box-shadow:0 30px 70px -28px rgba(10,21,45,.42), inset 0 0 0 1px rgba(10,21,45,.05);}
.blog-head-media img{width:100%; height:100%; object-fit:cover; display:block;}

/* ── TOOLBAR ────────────────────────────────────────────────────────────── */
.blog-toolbar{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top:44px; padding-bottom:8px;}
.blog-filters{display:flex; gap:8px; flex-wrap:wrap;}
.blog-chip{font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer; transition:background .18s, color .18s, border-color .18s, box-shadow .18s;}
.blog-chip:hover{border-color:var(--blue); color:var(--blue);}
.blog-chip.active{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 4px 14px rgba(10,21,45,.18);}
.blog-search{position:relative; display:flex; align-items:center;}
.blog-search svg{position:absolute; inset-inline-start:16px; width:17px; height:17px; color:var(--muted-2); pointer-events:none;}
.blog-search input{font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 20px 11px 42px; width:240px; outline:none; transition:border-color .18s, box-shadow .18s, width .25s;}
.blog-search input::placeholder{color:var(--muted-2);}
.blog-search input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,107,255,.12); width:280px;}

/* ── shared image placeholder (branded gradient + S watermark) ──────────── */
.blog-img{position:relative; overflow:hidden; background:linear-gradient(135deg,#12244a 0%,#2F6BFF 100%);}
.blog-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.blog-img:not(:has(img))::after{content:""; position:absolute; inset:0; background:url("assets/screens-s-white.png") no-repeat center/38%; opacity:.14;}
.blog-img.alt{background:linear-gradient(135deg,#3B5BFF 0%,#5BA3FF 100%);}
.blog-img.alt2{background:linear-gradient(135deg,#1E3A8A 0%,#3B82F6 100%);}
.blog-img.alt3{background:linear-gradient(135deg,#2F6BFF 0%,#12244a 100%);}

/* ── FEATURED ───────────────────────────────────────────────────────────── */
.featured{padding:60px 0 40px; background:#fff;}
.featured-card{display:grid; grid-template-columns:1.12fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(10,21,45,.08); transition:box-shadow .3s, transform .3s;}
.featured-card:hover{transform:translateY(-4px); box-shadow:0 34px 80px rgba(47,107,255,.14);}
.featured-media{position:relative; min-height:430px;}
.featured-flag{position:absolute; top:22px; inset-inline-start:22px; z-index:3; display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff; border-radius:999px; padding:8px 15px; font-family:'DM Sans',monospace; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}
.featured-flag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-light);}
.featured-body{padding:54px 56px; display:flex; flex-direction:column; justify-content:center;}
.post-meta{display:flex; align-items:center; gap:10px; font-family:'DM Sans',monospace; font-size:11.5px; letter-spacing:.04em; color:var(--muted-2); text-transform:uppercase; margin-bottom:20px;}
.post-cat{color:var(--blue); font-weight:600;}
.meta-dot{width:3px; height:3px; border-radius:50%; background:var(--line-2);}
.featured-h2{font-family:'DM Sans',sans-serif; font-size:clamp(28px,3vw,40px); font-weight:800; line-height:1.06; letter-spacing:-.025em; color:var(--ink); margin-bottom:18px;}
.featured-h2 a{color:inherit; text-decoration:none;}
.featured-excerpt{font-size:17px; color:var(--muted); line-height:1.6; margin-bottom:28px; max-width:480px;}
.byline{display:flex; align-items:center; gap:12px; margin-top:auto;}
.byline-av{width:42px; height:42px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#5B8CFF,#2F6BFF);}
.byline-name{font-size:14.5px; font-weight:600; color:var(--ink);}
.byline-role{font-size:12.5px; color:var(--muted-2); margin-top:1px;}

/* ── GRID ───────────────────────────────────────────────────────────────── */
.posts{padding:40px 0 110px; background:#fff;}
.posts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.post-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; transition:transform .25s, box-shadow .25s, border-color .25s;}
.post-card:hover{transform:translateY(-6px); border-color:var(--blue); box-shadow:0 22px 48px rgba(47,107,255,.13);}
.post-card .blog-img{width:100%; aspect-ratio:16/10;}
.post-card-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.post-card-h3{font-family:'DM Sans',sans-serif; font-size:21px; font-weight:800; line-height:1.18; letter-spacing:-.015em; color:var(--ink); margin-bottom:10px;}
.post-card-h3 a{color:inherit; text-decoration:none;}
.post-card-h3 a:hover{color:var(--blue);}
.post-card-excerpt{font-size:14.5px; color:var(--muted); line-height:1.55; margin-bottom:22px;}
.post-card-foot{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line);}
.foot-av{width:30px; height:30px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#9DBEFF,#2F6BFF);}
.foot-name{font-size:13px; font-weight:600; color:var(--ink);}
.foot-date{font-family:'DM Sans',monospace; font-size:11px; color:var(--muted-2); margin-inline-start:auto; letter-spacing:.03em;}
.posts-more{display:flex; justify-content:center; margin-top:56px;}

/* ── NEWSLETTER ─────────────────────────────────────────────────────────── */
.news{padding:0 0 110px; background:#fff;}
.news-card{position:relative; overflow:hidden; background:radial-gradient(120% 130% at 85% 15%, #12244a 0%, #0A152D 60%); border-radius:28px; padding:72px 64px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;}
.news-card::before{content:""; position:absolute; top:-120px; inset-inline-end:-80px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, rgba(47,107,255,.34) 0%, transparent 70%); pointer-events:none;}
.news-eyebrow{font-family:'DM Sans',monospace; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#A6C8FF; margin-bottom:18px;}
.news-h2{font-family:'DM Sans',sans-serif; font-size:clamp(28px,3vw,40px); font-weight:800; line-height:1.06; letter-spacing:-.025em; color:#fff; margin-bottom:14px; position:relative; z-index:2;}
.news-h2 .accent{background:linear-gradient(135deg,#85B7EB,#378ADD 55%,#5BA3FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.news-sub{font-size:16px; color:rgba(255,255,255,.62); line-height:1.55; max-width:420px; position:relative; z-index:2;}
.news-form{position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap;}
.news-form input{flex:1; min-width:220px; font-family:inherit; font-size:15px; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:15px 22px; outline:none; transition:border-color .18s, background .18s;}
.news-form input::placeholder{color:rgba(255,255,255,.5);}
.news-form input:focus{border-color:var(--blue-light); background:rgba(255,255,255,.1);}
.news-form button{font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); background:#fff; border:none; border-radius:999px; padding:15px 28px; cursor:pointer; transition:transform .15s; white-space:nowrap;}
.news-form button:hover{transform:scale(1.04);}
.news-note{font-family:'DM Sans',monospace; font-size:11px; color:rgba(255,255,255,.4); letter-spacing:.04em; margin-top:14px; position:relative; z-index:2;}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .blog-head-wrap{grid-template-columns:1fr; gap:34px;}
  .blog-head-media{aspect-ratio:16/9; max-height:360px;}
  .featured-card{grid-template-columns:1fr;}
  .featured-media{min-height:300px;}
  .featured-body{padding:40px 36px;}
  .posts-grid{grid-template-columns:repeat(2,1fr);}
  .news-card{grid-template-columns:1fr; padding:48px 40px; gap:32px;}
}
@media (max-width:640px){
  .blog-head{padding:calc(var(--nav-h) + 32px) 0 40px;}
  .blog-head-top{flex-direction:column; align-items:flex-start; gap:18px;}
  .blog-search, .blog-search input, .blog-search input:focus{width:100%;}
  .featured-body{padding:32px 24px;}
  .posts-grid{grid-template-columns:1fr;}
  .posts{padding:32px 0 72px;}
  .news{padding:0 0 72px;}
  .news-card{padding:40px 24px; border-radius:20px;}
}