/*
Theme Name: Alawi Clinic Media
Author: Alawi Clinic
Description: Lightweight Arabic-first media theme for articles and videos.
Version: 1.0.1
*/
:root{--blue:#0f75bc;--green:#20a47a;--ink:#0f2537;--muted:#607486;--soft:#f4f9fb;--line:#dbe8ef}
*{box-sizing:border-box}
body{margin:0;font-family:"Cairo","Tahoma",Arial,sans-serif;background:#f6fbfd;color:var(--ink);direction:rtl}
a{text-decoration:none;color:inherit}
.site-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.wrap{max-width:1500px;margin:0 auto;padding:0 22px}
.nav{align-items:center;display:flex;gap:22px;justify-content:space-between;min-height:76px}
.brand{align-items:center;display:flex;gap:12px;font-weight:900;font-size:24px;color:var(--blue)}
.brand-mark{align-items:center;background:#e7f7f2;border-radius:16px;color:var(--green);display:flex;font-size:23px;height:48px;justify-content:center;width:48px}
.menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.menu a{color:#385269;font-weight:800}
.menu a:hover{color:var(--blue)}
.hero{background:linear-gradient(135deg,#eaf7ff 0%,#f7fffb 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{align-items:center;display:grid;gap:36px;grid-template-columns:1.05fr .95fr;padding:72px 0}
.eyebrow{color:var(--green);font-weight:900;margin:0 0 12px}
h1{font-size:48px;line-height:1.25;margin:0 0 18px}
.lead{color:var(--muted);font-size:19px;line-height:1.9;margin:0 0 26px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{border-radius:12px;display:inline-flex;font-weight:900;padding:13px 18px}
.btn.primary{background:var(--blue);color:#fff}
.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--blue)}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 50px rgba(25,80,120,.1);padding:26px}
.hero-card img{border-radius:18px;display:block;height:auto;width:100%}
.section{padding:54px 0}
.section-head{align-items:end;display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head h2{font-size:32px;margin:0}
.section-head p{color:var(--muted);line-height:1.8;margin:6px 0 0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 35px rgba(20,70,105,.07);overflow:hidden}
.thumb{aspect-ratio:16/9;background:#e8f3f7;display:block;position:relative}
.thumb img{height:100%;object-fit:cover;width:100%}
.play{align-items:center;background:rgba(255,255,255,.92);border-radius:50%;color:var(--blue);display:flex;font-size:22px;height:58px;justify-content:center;position:absolute;right:50%;top:50%;transform:translate(50%,-50%);width:58px}
.card-body{padding:18px}
.card h3{font-size:21px;line-height:1.55;margin:0 0 9px}
.card p{color:var(--muted);display:-webkit-box;line-height:1.75;margin:0 0 14px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.read{color:var(--blue);font-weight:900}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:28px}
.pagination .page-numbers{background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--blue);font-weight:900;min-width:42px;padding:10px 14px;text-align:center}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.feature-band{background:#fff;border:1px solid var(--line);border-radius:24px;display:grid;gap:26px;grid-template-columns:1fr 1fr;padding:28px}
.footer{background:#0f2537;color:#dbe8ef;margin-top:40px;padding:34px 0}
.footer .wrap{display:flex;justify-content:space-between;gap:18px}
.page-hero{background:#eaf7ff;border-bottom:1px solid var(--line);padding:48px 0}
.content{background:#fff;border:1px solid var(--line);border-radius:18px;line-height:2;margin:30px auto;max-width:900px;padding:28px}
.content h1{font-size:38px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.hero-grid,.feature-band{grid-template-columns:1fr}h1{font-size:38px}.menu{flex-wrap:wrap;justify-content:center}.nav{align-items:flex-start;flex-direction:column;padding:16px 0}}
@media(max-width:620px){.grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.footer .wrap{flex-direction:column}h1{font-size:31px}.hero-grid{padding:44px 0}}