/* ط£ظ„ظˆط§ظ† ظˆظ‡ظˆظٹط© ظ…طµط·ظپظ‰ (ط¯ط§ط±ظƒ ظ…ط·ظپط£) */
:root{
  --bg:#1A1A1A;          /* ط±ظ…ط§ط¯ظٹ ظپط­ظ…ظٹ ظ…ط·ظپط£ ط¨ط¯ظ„ #000 */
  --surface:#0F0F0F;
  --card:#121212;
  --text:#F8EEDF;        /* ظ…ظ† ط£ظ„ظˆط§ظ†ظƒ */
  --muted:#C9C3B8;       /* ط¯ط±ط¬ط© ظ„ط·ظٹظپط© */
  --primary:#8E1616;     /* ط£ط­ظ…ط± ظ…ط·ظپط£ */
  --primary-dim:#7A0E0E; /* ط£ظ‡ط¯ط£ */
  --accent:#E8C999;      /* ط¨ظٹط¬ ط¯ط§ظپط¦ */
  --radius:16px;
  --border:#262626;
}

/* ط®ظ„ظپظٹط© ط¨ط§طھط±ظ† طھظ‚ظ†ظٹ SVG ط®ظپظٹظپ (ط´ط¨ظƒط© ظ†ظ‚ط·ظٹط©) */
body{
  margin:0; font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(700px 400px at 80% -10%, rgba(142,22,22,0.12), rgba(0,0,0,0)),
    radial-gradient(800px 500px at 10% 120%, rgba(232,201,153,0.10), rgba(0,0,0,0)),
    var(--bg);
  color:var(--text);
  line-height:1.7;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.25;
  background-image: radial-gradient(#444 1px, transparent 1px);
  background-size: 22px 22px; /* ظ†ظ…ط· ظ†ظ‚ط·ظٹ ط¯ظ‚ظٹظ‚ */
  mix-blend-mode: soft-light;
}

/* ط®ط· Lalezar ظ„ظ„ط¹ظ†ط§ظˆظٹظ† */
h1,h2,h3,.display{ font-family: "Lalezar", sans-serif; letter-spacing:.3px; }
a{ color:var(--accent); text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1100px,92%); margin:0 auto; }
section{ padding:48px 0; }
.card{
  background:linear-gradient(180deg,var(--card),var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }

/* طھط±ظˆظٹط³ط© ط¨ط³ظٹط·ط© */
header{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(0,0,0,.4); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; }
/* ط²ط± ظ…طھط§ط­ ظ„ظ„طھط¹ط§ظˆظ† */
.badge{
  font-size:13px;
  color:#fff; /* ظƒطھط§ط¨ط© ط¨ظٹط¶ط§ط، */
  background: linear-gradient(135deg, #2ecc71, #27ae60); /* ط£ط®ط¶ط± ظ…طھط¯ط±ط¬ */
  border:1px solid #1e874b;
  border-radius:999px;
  padding:6px 14px;
  font-weight:700;
  box-shadow: 0 2px 10px rgba(39,174,96,.25);
  transition: all .25s ease;
}
.badge:hover{
  background: linear-gradient(135deg, #27ae60, #219150);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(39,174,96,.35);
}

/* ط£ط²ط±ط§ط± */
.btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border);
  border-radius:999px; padding:10px 16px; background:linear-gradient(180deg,#161616,#0f0f0f);
  color:var(--text); font-weight:700; transition:.2s ease; }
.btn:hover{ transform:translateY(-1px); border-color:#333; }
.btn.primary{ border-color:transparent; background:linear-gradient(135deg,var(--primary),var(--primary-dim)); }

/* HERO */
.hero{ padding:64px 0 32px; }
.hero h1{ font-size: clamp(28px,5vw,56px); margin: 0 0 6px; }
.hero .slogan{ font-size: clamp(16px,2.6vw,22px); color:var(--accent); }

/* Clients logos */
.clients{ display:grid; grid-template-columns: repeat(6,1fr); gap:12px; }
.logo-tile{ height:86px; display:grid; place-items:center; border:1px solid var(--border);
  border-radius:14px; background:#0e0e0e; transition:.2s; }
.logo-tile:hover{ box-shadow:0 6px 18px rgba(0,0,0,.35); transform:translateY(-2px); }

/* Blog cards */
.post.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--border); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.post .body{ padding:14px; }
.post .body{ padding:14px; }
.post .meta{ color:var(--muted); font-size:12px; margin-top:6px; }

/* Skills */
.section-title{ display:flex; align-items:center; justify-content:space-between; }
.hint{ color:var(--muted); font-size:13px; }
.skills{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.skill{ padding:16px; }
.skill h3{ margin:0 0 8px; }
.bar{ width:100%; height:10px; background:#0e0e0e; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); width:0; transition: width 1.2s ease; }

/* Responsive */
@media (max-width:980px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .skills{ grid-template-columns:1fr; }
  .clients{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:640px){
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .clients{ grid-template-columns: repeat(2,1fr); }
}

:root{
  --bg:#111;
  --bg-soft:#171717;
  --bronze:#b08d57;
  --bronze-2:#d0aa6b;
  --text:#eee;
}

.topbar{
  background: radial-gradient(1200px 400px at 70% -200px, #1b1714 0%, var(--bg) 60%);
  padding: 12px 16px;
}

.pill-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-soft), #0e0e0e);
  border:1px solid rgba(176,141,87,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
              0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  font: 600 14px/1 "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.pill svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill: var(--bronze);
  filter: drop-shadow(0 0 6px rgba(176,141,87,.15));
}

.pill:hover{
  border-color: var(--bronze-2);
  color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset,
              0 8px 22px rgba(208,170,107,.12),
              0 2px 0 0 var(--bronze-2);
  transform: translateY(-1px);
}

.pill:active{ transform: translateY(0); }

.pill--cta{
  background: linear-gradient(180deg, #15110d, #0e0c09);
  border-color: var(--bronze);
}

.pill--cta:hover{
  background: linear-gradient(180deg, #1b1510, #100d0a);
}

@media (max-width:640px){
  .pill{ padding:9px 12px; font-weight:600; }
  .pill svg{ width:16px; height:16px; }
}

/* ===== HERO SLIDER ===== */
.hero{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0f0f0f;
}

/* ط·ط¨ظ‚ط© ط§ظ„طھط¹طھظٹظ… (ظ„طھظ‚ظ„ظٹظ„ ط§ظ„ط¥ظƒط³ط¨ظˆط¬ط±) */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 80% -200px, rgba(27,23,20,.35) 0%, rgba(0,0,0,.0) 40%),
    rgba(0,0,0,.45);
  pointer-events:none;
}

/* ط´ط±ظٹط­طھط§ ط§ظ„ط®ظ„ظپظٹط© ظ„ظ„طھط¨ط¯ظٹظ„ ط¨ظٹظ†ظ‡ط§ ط¨طھط£ط«ظٹط± طھظ„ط§ط´ظٹ */
.hero .bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity 800ms ease;
  will-change: opacity, background-image;
}
.hero .bg.is-active{ opacity:1; }

/* ظ…ط­طھظˆظ‰ ط§ظ„ظ‡ظٹط±ظˆ */
.hero-content{
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* ظ†طµ ظٹظ…ظٹظ† ظˆطµظˆط±ط© ظٹط³ط§ط± (RTL) */
  gap: 24px;
  padding: 48px 0;
}

.hero-text .display{
  font-family: "Lalezar", system-ui;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 8px;
  color: #fff;
}
.hero-text .slogan{
  color: var(--bronze-2, #d0aa6b);
  font: 600 18px/1.6 "Cairo", system-ui;
}

/* ===== HEX PHOTO ===== */
.hero-photo{ display: grid; place-items: center; }

.hex-frame{
  --size: clamp(180px, 28vw, 280px);
  width: var(--size);
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
}
.hex-frame, .hex{
  /* ط´ظƒظ„ ط³ط¯ط§ط³ظٹ */
  clip-path: polygon(
    25% 6%, 75% 6%, 100% 50%,
    75% 94%, 25% 94%, 0% 50%
  );
  border-radius: 22px; /* ظٹط·ط±ظٹ ط§ظ„ط­ظˆط§ظپ */
}

/* ط¥ط·ط§ط± ط¨ط±ظˆظ†ط²ظٹ */
.hex-frame{
  background: linear-gradient(180deg, #d0aa6b, #b08d57);
  padding: 6px;
}

/* ط§ظ„طµظˆط±ط© */
.hex{
  background: #151515;
  overflow: hidden;
}
.hex img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(95%) saturate(95%);
}

/* ظ…ظˆط¨ط§ظٹظ„: ظ†ط®ظ„ظٹ ط§ظ„طµظˆط±ط© طھط­طھ ط§ظ„ظ†طµ */
@media (max-width: 900px){
  .hero-content{
    flex-direction: column-reverse;
    text-align: center;
  }
}

/* ط¥ظ…ظƒط§ظ†ظٹط© ظˆطµظˆظ„ */
.visually-hidden{
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}
/* ===== ظ‡ظˆظٹط© ط§ظ„ط£ظ„ظˆط§ظ† (ظ…ظڈط¯ظ…ط¬) ===== */
:root{
  --bg:#1A1A1A;
  --surface:#0F0F0F;
  --card:#121212;
  --text:#F8EEDF;
  --muted:#C9C3B8;
  --primary:#8E1616;
  --primary-dim:#7A0E0E;
  --accent:#E8C999;
  --radius:16px;
  --border:#262626;

  /* ط¨ط±ظˆظ†ط²ظٹ ظ„ظ„ط£ط²ط±ط§ط± ظˆط§ظ„ط£ظٹظ‚ظˆظ†ط§طھ */
  --bg-soft:#171717;
  --bronze:#b08d57;
  --bronze-2:#d0aa6b;
}

/* ===== ط¶ط¨ط· ط§ظ„ظ€HERO (ط­ط¬ظ… ط£طµط؛ط±طŒ طھظˆط³ظٹط· ط£ظپط¶ظ„) ===== */
.hero{
  position: relative;
  min-height: 60vh;              /* ط£طµط؛ط± ظ…ظ† ظ‚ط¨ظ„ */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0f0f0f;
  padding: 40px 0;               /* طھظ†ظپظ‘ط³ ط¹ظ…ظˆط¯ظٹ */
}

/* طھط¹طھظٹظ… ط¹ط§ظ… (Exposure ط£ظ‚ظ„) */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 80% -200px, rgba(27,23,20,.35) 0%, rgba(0,0,0,0) 40%),
    rgba(0,0,0,.45);
  pointer-events:none;
  z-index:1;
}

/* Fade ظ…ظ† ط§ظ„ط£ط³ظپظ„ ظ„ط§ظ…طھط²ط§ط¬ ظ†ط§ط¹ظ… ظ…ط¹ ط§ظ„طµظپط­ط© */
.hero::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 75%);
  pointer-events:none;
  z-index:1; /* ظپظˆظ‚ ط§ظ„طµظˆط±طŒ طھط­طھ ط§ظ„ظ…ط­طھظˆظ‰ */
}

/* ط´ط±ط§ط¦ط­ ط§ظ„ط®ظ„ظپظٹط© */
.hero .bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity 800ms ease;
  will-change: opacity, background-image;
  z-index:0;
}
.hero .bg.is-active{ opacity:1; }

/* ظ…ط­طھظˆظ‰ ط§ظ„ظ€HERO */
.hero-content{
  position: relative;
  z-index: 2;                     /* ظپظˆظ‚ ط§ظ„طھط¹طھظٹظ… ظˆ ط§ظ„ظ€fade */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;        /* ظˆط³ظژط· */
  gap: 64px;                      /* طھط¨ط§ط¹ط¯ ط£ظˆط¶ط­ ط¨ظٹظ† ط§ظ„ظ†طµ ظˆط§ظ„طµظˆط±ط© */
  flex-wrap: wrap;
  text-align: center;             /* ظٹط¶ظ…ظ† ط¹ط¯ظ… ط§ظ„طھطµط§ظ‚ ط§ظ„ظٹظ…ظٹظ† */
  padding: 0 16px;
}

.hero-text{ max-width: 520px; }
.hero-text .display{
  font-family: "Lalezar", system-ui;
  font-size: clamp(32px, 5vw, 60px);  /* ط£طµط؛ط± */
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
}
.hero-text .slogan{
  color: var(--bronze-2);
  font: 600 17px/1.7 "Cairo", system-ui;
}

/* ===== طµظˆط±ط© ط³ط¯ط§ط³ظٹط© ط£طµط؛ط± ===== */
.hero-photo{ display: grid; place-items: center; }

.hex-frame{
  --size: clamp(110px, 16vw, 160px); /* ط£طµط؛ط± ط¨ظ†ط³ط¨ط© طھظ‚ط±ظٹط¨ط§ظ‹ 25% */
  width: var(--size);
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.4));
}
.hex-frame, .hex{
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  border-radius: 22px;
}
.hex-frame{
  background: linear-gradient(180deg, #d0aa6b, #b08d57);
  padding: 6px;
}
.hex{
  background: #151515;
  overflow: hidden;
}
.hex img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  filter: contrast(95%) saturate(95%);
}

/* ===== ط£ط²ط±ط§ط± ط§ظ„ظ‚ط§ط¦ظ…ط© (طھط¨ظ‚ظ‰ ظƒظ…ط§ ظ‡ظٹ) ===== */
.pill-nav{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start;
}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:999px; text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, var(--bg-soft), #0e0e0e);
  border:1px solid rgba(176,141,87,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  font: 600 14px/1 "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.pill svg{
  width:18px; height:18px; flex:0 0 18px; fill: var(--bronze);
  filter: drop-shadow(0 0 6px rgba(176,141,87,.15));
}
.pill:hover{
  border-color: var(--bronze-2); color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 22px rgba(208,170,107,.12), 0 2px 0 0 var(--bronze-2);
  transform: translateY(-1px);
}
.pill--cta{
  background: linear-gradient(180deg, #15110d, #0e0c09);
  border-color: var(--bronze);
}
.pill--cta:hover{ background: linear-gradient(180deg, #1b1510, #100d0a); }

/* ===== ط§ط³طھط¬ط§ط¨ط© ===== */
@media (max-width: 900px){
  .hero-content{ flex-direction: column-reverse; gap: 28px; }
  .hero-text{ max-width: 100%; }
}
@media (max-width:640px){
  .pill{ padding:9px 12px; font-weight:600; }
  .pill svg{ width:16px; height:16px; }
}

/* ===== CONTACT SECTION (ط§ظ„ط§طھط¬ط§ظ‡ ط§ظ„ظ…ط¹ظƒظˆط³) ===== */
.contact-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  direction: rtl; /* ظ„ظ„طھظˆط§ظپظ‚ ظ…ط¹ ط§ظ„ط¹ط±ط¨ظٹط© */
}

/* ط§ظ„ظ†طµظˆطµ ط¹ظ„ظ‰ ط§ظ„ظٹظ…ظٹظ† */
.contact-info{
  text-align: right;
  flex: 1;
}
.contact-info p{
  margin: 4px 0;
  color: var(--text);
  font-size: 15px;
}

/* ط§ظ„ط£ظٹظ‚ظˆظ†ط§طھ ط¹ظ„ظ‰ ط§ظ„ظٹط³ط§ط± */
.social-icons{
  display: flex;
  gap: 16px;
  flex-direction: row-reverse; /* ط­طھظ‰ طھظƒظˆظ† f ط«ظ… insta ط«ظ… linkedin ظ…ظ† ط§ظ„ظٹط³ط§ط± ظ„ظ„ظٹظ…ظٹظ† */
}

/* طھطµظ…ظٹظ… ط§ظ„ط£ط²ط±ط§ط± */
.social-icons a{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(208,170,107,.35);
  transition: all .25s ease;
}
.social-icons a:hover{
  transform: translateY(-3px);
  border-color: var(--bronze-2);
  box-shadow: 0 4px 14px rgba(208,170,107,.2);
}

/* ط§ظ„ط£ظٹظ‚ظˆظ†ط§طھ */
.social-icons svg{
  width: 20px;
  height: 20px;
  fill: var(--bronze-2);
  transition: fill .25s ease;
}
.social-icons a:hover svg{
  fill: var(--accent);
}

/* ظ…ظˆط¨ط§ظٹظ„ */
@media (max-width:768px){
  .contact-card{
    flex-direction: column;
    text-align: center;
  }
  .social-icons{
    flex-direction: row;
    justify-content: center;
  }
  .contact-info p{ text-align: center; }
}

/* ===== Clients Section (cards) ===== */
.clients{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  margin-top:24px;
}

.client-card{
  width: 180px;
  padding: 22px 16px 16px;
  border:1px solid rgba(208,170,107,.15);       /* ط¨ط±ظˆظ†ط²ظٹ ط®ظپظٹظپ */
  border-radius:14px;
  background: rgba(255,255,255,.02);            /* ط´ظپط§ظپ ظ†ط§ط¹ظ… */
  backdrop-filter: blur(6px) brightness(.95);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  display:flex; flex-direction:column; align-items:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.client-card:hover{
  transform: translateY(-4px);
  border-color: var(--bronze-2);
  box-shadow: 0 12px 28px rgba(208,170,107,.15);
}

.logo-wrap{
  width: 120px; height: 120px;
  display:grid; place-items:center;
  border-radius:16px;
  background: radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.06), rgba(0,0,0,0) 70%);
  overflow:hidden;
}
.logo-wrap img{
  width:100%; height:100%;
  object-fit: contain;                          /* ظٹط­ط§ظپط¸ ط¹ظ„ظ‰ ط´ظپط§ظپظٹط© PNG */
  image-rendering: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); /* ظٹط±ظپط¹ ط§ظ„ط´ط¹ط§ط± ط¨ط¯ظˆظ† ط®ظ„ظپظٹط© */
  transition: transform .25s ease;
}
.client-card:hover .logo-wrap img{ transform: scale(1.06); }

.logo-placeholder{
  font: 700 14px/1 "Cairo", system-ui;
  color:#999;
}

.client-name{
  margin-top:10px;
  text-align:center;
  font-weight:600;
  font-size:15px;
  letter-spacing:.2px;
  color: var(--accent);
}

/* Responsive */
@media (max-width:768px){
  .client-card{ width:150px; }
  .logo-wrap{ width:100px; height:100px; }
}


/* Clamp long summaries; toggle via .is-expanded */
\.post \.summary{ word-break:break-word; overflow-wrap:anywhere;  margin-top:8px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.post.is-expanded .summary{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.post .read-more{ margin-top:8px; border:1px solid var(--border); background:#0f0f0f; color:var(--accent); border-radius:10px; padding:6px 10px; font-weight:700; cursor:pointer; }
/* ==== Blog card hard sizing ==== */
#blog-list.post-grid, #blog-list.grid, #blog-list{ grid-auto-rows: auto; }
.post.card{ overflow:hidden; border-radius: var(--radius); }
.post.card > img{ width:100%; height: clamp(180px, 26vw, 320px); object-fit: cover; display:block; }
.post .body b{ display:block; font-size: clamp(16px, 2.2vw, 20px); margin: 6px 0 4px; }


/* Read-more override: let JS control text, not CSS clamp */
.post .summary{ display:block !important; -webkit-line-clamp: initial !important; overflow:visible !important; }
.post.is-expanded .summary{ display:block !important; }
/* Force summary to expand fully on toggle */
.post .summary{ height:auto !important; max-height:none !important; }
/* Ensure wrapping regardless of inherited white-space */
.post .summary{ white-space: normal !important; }


/* ===== Mobile header polish ===== */
@media (max-width: 640px){

  /* الهيدر سطرين: البراند فوق – الأزرار تحت */
  .nav{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 0;
  }

  .brand{
    display:flex; justify-content: space-between; align-items:center;
    gap: 10px;
  }

  /* شريط الأزرار يصير أفقي قابل للتمرير */
  .menu{ margin-top: 2px; }
  .pill-nav{
    display:flex;
    flex-wrap: nowrap;           /* لا لف */
    gap: 8px;
    overflow-x: auto;            /* سحب بالإصبع */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;        /* مساحة تحت حتى ما تنقصّ */
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to left, transparent 0, black 16px, black calc(100% - 16px), transparent 100%); /* تلاشي حواف */
  }
  .pill-nav li{ flex: 0 0 auto; }  /* كل زر بقياسه */

  /* حجم الأزرار أصغر شوي */
  .pill{
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 9999px;
  }
  .pill svg{
    width: 14px; height: 14px;
  }

  /* اخفي الظل الثقيل على الموبايل لتخفيف الازدحام */
  .pill{
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 12px rgba(0,0,0,.28);
  }

  /* تثبيت الهيدر وحساب حافة الآيفون العلوية */
  header{
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: rgba(0,0,0,.55);
    backdrop-filter: saturate(120%) blur(8px);
  }
  /* مساحة بسيطة تحت الهيدر حتى ما يلامس المحتوى */
  .hero{ margin-top: 2px; }
}

/* اختياري: إخفاء شريط التمرير الأفقي */
.pill-nav::-webkit-scrollbar{ display:none; }
.pill-nav{ scrollbar-width: none; }

/* هيدر يظهر/يختفي حسب التمرير */
header{
  transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease;
}
header.header--hidden{
  transform: translateY(calc(-100% - 6px));
}
header.header--scrolled{
  background: rgba(0,0,0,.65);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  border-bottom-color: rgba(255,255,255,.06);
}

section{opacity:0;transform:translateY(30px);transition:.6s ease;}
section.reveal{opacity:1;transform:none;}

.blog-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.btn.more {
  background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.btn.more:hover {
  transform: translateY(-1px);
  border-color: #3a3a3a;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}