:root{
  --ef-max: 1180px;
  --ef-gap: 32px;
  --ef-text: #1f2937;
  --ef-muted: #6b7280;
  --ef-border: #e5e7eb;
  --ef-accent: #111;
  --ef-bg: #fff;
}
.container{ max-width:var(--ef-max); margin-inline:auto; padding-inline:24px; }
.ef-kicker{ letter-spacing:.08em; text-transform:uppercase; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ef-muted); }
.ef-meta{ font:500 14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ef-muted); margin-top:6px; }

/* Arabic fallbacks */
:lang(ar) body, :lang(ar) .ef-hero, :lang(ar) .ef-grid{
  font-family: "Tajawal","Cairo","Noto Naskh Arabic","Amiri",system-ui,serif;
}

/* Hero */
.ef-hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--ef-gap); align-items:center; padding-block:36px; }
.ef-hero__image img{ width:100%; height:540px; object-fit:cover; border-radius:10px; display:block; }
.ef-hero__placeholder{ width:100%; height:540px; border-radius:10px; background:#f3f4f6; }
.ef-hero__title{ font-weight:700; line-height:1.2; font-size:clamp(34px,4vw,56px); margin:8px 0 10px; }
.ef-hero__title a{ color:inherit; text-decoration:none; }
.ef-hero__title a:hover{ text-decoration:underline; }
.ef-hero__excerpt{ font-size:18px; color:#444; margin-top:8px; }

/* Grid */
.ef-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ef-gap); padding-block:20px 40px; }
.ef-card{ display:flex; flex-direction:column; }
.ef-card__image img{ width:100%; height:320px; object-fit:cover; border-radius:10px; display:block; }
.ef-card__placeholder{ width:100%; height:320px; border-radius:10px; background:#f3f4f6; }
.ef-card__title{ font-weight:700; line-height:1.2; font-size:clamp(20px,2vw,26px); margin:12px 0 6px; }
.ef-card__title a{ color:inherit; text-decoration:none; }
.ef-card__title a:hover{ text-decoration:underline; }
.ef-card__excerpt{ color:#444; margin:0 0 6px 0; }
.ef-readmore{ display:inline-block; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:#111; margin-top:6px; }

/* Tags */
.ef-tag{ font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:#111; padding:6px 10px; border:1px solid var(--ef-border); border-radius:999px; }

/* RTL */
[dir="rtl"] .ef-hero{ grid-template-columns:1fr 1.4fr; }
[dir="rtl"] .ef-hero__text{ text-align:right; }
[dir="rtl"] .ef-grid{ direction:rtl; }
[dir="rtl"] .ef-card__body{ text-align:right; }

/* Responsive */
@media (max-width: 1024px){
  .ef-hero{ grid-template-columns:1fr; }
  .ef-hero__image img, .ef-hero__placeholder{ height:420px; }
  .ef-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .ef-grid{ grid-template-columns:1fr; }
  .container{ padding-inline:18px; }
}

/* ===== Blog Post (SheerLuxe-style) ===== */

.ef-post__hero img{
  width:100%; height:64vh; min-height:420px;
  object-fit:cover; display:block;
}

.ef-post__header{ padding-block:28px 10px; }
.ef-post__title{
  font-weight:700; line-height:1.2;
  font-size:clamp(32px,4vw,56px); margin:6px 0 8px;
}
.ef-post__disclosure{
  font:500 13px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#6b7280; margin-top:8px;
}

.ef-post__body{
  padding-block:12px 28px;
}
.ef-post__body p{
  font-size:18px; line-height:1.8; color:#1f2937; margin:16px 0;
}
.ef-post__body h2{ font-size:clamp(22px,2.6vw,34px); margin:28px 0 10px; }
.ef-post__body h3{ font-size:clamp(18px,2.2vw,24px); margin:22px 0 8px; }

.ef-post__body img{
  width:100%; height:auto; display:block;
  border-radius:8px; margin:22px 0;
}

/* Big, elegant pull quotes like SheerLuxe */
.ef-post__body blockquote{
  font-style:italic; font-size:28px; line-height:1.4;
  color:#111; margin:36px 0; padding:0 8%;
}

/* Captions (if your editors use <figcaption>) */
.ef-post__body figcaption{
  text-align:center; font:500 13px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#6b7280; margin-top:6px;
}

/* Footer / tags */
.ef-post__footer{
  border-top:1px solid #e5e7eb;
  padding-block:24px 64px; margin-top:8px;
}
.ef-tags{ display:flex; flex-wrap:wrap; gap:10px; }

/* RTL tweaks */
[dir="rtl"] .ef-post__header{ text-align:right; }
[dir="rtl"] .ef-post__body{ direction:rtl; }

/* ==== Post hero overlay ==== */
.ef-hero-ov{ position:relative; margin:0; }
.ef-hero-ov > img{
  width:100%; height:64vh; min-height:460px; object-fit:cover; display:block;
}
.ef-hero-ov__shade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.ef-hero-ov__cap{
  position:absolute; left:0; right:0; bottom:36px;
  color:#fff;
}
.ef-hero-ov__title{
  font-weight:700; line-height:1.15;
  font-size:clamp(32px,4.5vw,58px); margin:6px 0 6px;
  text-wrap:balance;
}
.ef-hero-ov__strap{
  font-size:18px; line-height:1.7; max-width:900px; margin:6px 0 8px; color:#f3f4f6;
}
.ef-hero-ov__meta{ color:#e5e7eb; }

/* RTL */
[dir="rtl"] .ef-hero-ov__cap{ text-align:right; }

/* Reduce top header spacing since the hero carries the title now */
.ef-post__header{ display:none; }

/* --- Force white text on the hero overlay --- */
.ef-hero-ov__cap,
.ef-hero-ov__cap * {
  color: #fff !important;            /* title, kicker, summary, links, etc. */
}

/* Optional: subtle shadow for readability on bright photos */
.ef-hero-ov__title,
.ef-hero-ov__strap,
.ef-hero-ov__meta,
.ef-hero-ov__cap .ef-kicker {
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* Keep the gradient for contrast (already in your CSS) */
.ef-hero-ov__shade{
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

/* --- Solid transparent black overlay for hero --- */
.ef-hero-ov { position: relative; }
.ef-hero-ov > img { position: relative; z-index: 0; }

.ef-hero-ov__shade{
  position: absolute;
  inset: 0;
  z-index: 1;                 /* sits above the image, below the text */
  pointer-events: none;
  background: rgba(0,0,0,.45); /* adjust opacity: .35 (lighter) → .65 (darker) */
}

/* Keep overlay text above the shade */
.ef-hero-ov__cap{ position: absolute; z-index: 2; }

/* Optional: combine gradient + tint for extra bottom contrast (Sheerluxe-like) */
.ef-hero-ov__shade--gradient{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%),
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35));
}

/* Make it a bit stronger on small screens if needed */
@media (max-width: 640px){
  .ef-hero-ov__shade{ background: rgba(0,0,0,.55); }
}

/* Style for blog-post-sheer
 ///////////////////////////////////////////////////
/* ========== Page tint (SheerLuxe background) ========== */
.ef-page-tint{ background:#f3f1ed; }                /* soft warm grey */
.ef-post--sheerluxe{ background:transparent; }

/* ========== Typography families ========== */
.ef-post--sheerluxe .ef-hero-ov__title,
.ef-post--sheerluxe .ef-post__title,
.ef-post--sheerluxe h1,.ef-post--sheerluxe h2,.ef-post--sheerluxe h3{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
}
.ef-post--sheerluxe .ef-kicker,
.ef-post--sheerluxe .ef-meta,
.ef-postbar__inner,
.ef-chip,
.ef-tag{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ef-article__body,
.ef-article__body p,
.ef-article__body li{
  font-family: Georgia, "Times New Roman", serif;
}

/* ========== Hero overlay ========== */
.ef-hero-ov{ position:relative; margin:0; }
.ef-hero-ov > img{
  width:100%; height:64vh; min-height:460px; object-fit:cover; display:block; position:relative; z-index:0;
}
.ef-hero-ov__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: rgba(0,0,0,.48);                              /* transparent black */
}
.ef-hero-ov__cap{
  position:absolute; left:0; right:0; bottom:36px; z-index:2; color:#fff;
}
.ef-hero-ov__cap, .ef-hero-ov__cap *{ color:#fff !important; }
.ef-hero-ov__title{ font-weight:700; line-height:1.12; font-size:clamp(32px,4.6vw,58px); margin:6px 0; text-wrap:balance; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.ef-hero-ov__strap{ font-size:18px; line-height:1.7; max-width:900px; margin:6px 0 8px; color:#f2f4f7; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.ef-hero-ov__meta{ color:#e5e7eb; text-shadow:0 1px 2px rgba(0,0,0,.35); }
[dir="rtl"] .ef-hero-ov__cap{ text-align:right; }

/* ========== Post toolbar (topics + share) ========== */
.ef-postbar{ background:#fff; border-bottom:1px solid #e5e7eb; }
.ef-postbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
.ef-chip{
  display:inline-block; padding:8px 12px; margin-right:8px;
  font:600 12px/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:#111;
  border:1px solid #e5e7eb; border-radius:999px; background:#fff;
}
.ef-postbar__share{ display:flex; align-items:center; gap:10px; }
.ef-share{ width:28px; height:28px; display:inline-grid; place-items:center; border:1px solid #e5e7eb; border-radius:50%; text-decoration:none; color:#111; font-size:12px; }
.ef-share:hover{ background:#f4f4f4; }

/* ========== Article container ========== */
.ef-article{ background:#fff; padding: 24px 0 40px; }
.ef-article__body{ max-width: 860px; margin: 0 auto; }
.ef-article__body p{ font-size:18px; line-height:1.8; color:#1f2937; margin:16px 0; }
.ef-article__body h2{ font-size:clamp(24px,2.6vw,34px); margin:28px 0 10px; }
.ef-article__body h3{ font-size:clamp(18px,2.2vw,24px); margin:22px 0 8px; }
.ef-article__body img{ width:100%; height:auto; display:block; border-radius:8px; margin:22px 0; }

/* Pull quotes like SheerLuxe */
.ef-article__body blockquote{
  font-style:italic; font-size:28px; line-height:1.4; color:#111;
  margin:36px 0; padding:0 8%;
}

/* Figure captions */
.ef-article__body figcaption{
  text-align:center; font:500 13px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:#6b7280; margin-top:6px;
}

/* Image pairs (two-up layouts) */
.ef-article__body .ef-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin: 12px 0 22px; }
.ef-article__body .ef-grid-2 figure{ margin:0; }
@media (max-width: 860px){
  .ef-article__body .ef-grid-2{ grid-template-columns:1fr; }
}

/* Footer tags */
.ef-article__footer{ max-width:860px; margin: 10px auto 64px; border-top:1px solid #e5e7eb; padding-top:24px; }
.ef-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.ef-tag{ font:600 12px/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:#111; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; }

/* RTL tweaks for body */
[dir="rtl"] .ef-postbar__inner{ flex-direction:row-reverse; }
[dir="rtl"] .ef-postbar__topics{ text-align:right; }
[dir="rtl"] .ef-article__body{ direction:rtl; }

/* Auto image grids in article body */
.ef-article__body .ef-grid-2,
.ef-article__body .ef-grid-3,
.ef-article__body .ef-grid-4{
  display: grid;
  gap: 24px;
  margin: 12px 0 22px;
}
.ef-article__body .ef-grid-2{ grid-template-columns: 1fr 1fr; }
.ef-article__body .ef-grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.ef-article__body .ef-grid-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }

.ef-article__body .ef-grid-2 figure,
.ef-article__body .ef-grid-3 figure,
.ef-article__body .ef-grid-4 figure{ margin: 0; }

.ef-article__body .ef-grid-2 img,
.ef-article__body .ef-grid-3 img,
.ef-article__body .ef-grid-4 img{
  width: 100%; height: auto; display: block; border-radius: 8px;
}

/* Responsive collapse */
@media (max-width: 1024px){
  .ef-article__body .ef-grid-4{ grid-template-columns: 1fr 1fr; }
  .ef-article__body .ef-grid-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .ef-article__body .ef-grid-2,
  .ef-article__body .ef-grid-3,
  .ef-article__body .ef-grid-4{ grid-template-columns: 1fr; }
}

/* brief visual feedback when copied */
.ef-share--ok { background:#111; color:#fff; }
/*---------------------------------------------------------------
/* Comments area width aligns with reading column */
.ef-comments{ max-width:860px; margin: 8px auto 16px; padding: 8px 0; }

/* Related posts */
.ef-related{ padding: 16px 0 64px; }
.ef-related__title{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-weight:700; font-size:28px; line-height:1.2; margin: 6px 0 16px;
}
.ef-related__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.ef-related .ef-card__image img{ height:200px; object-fit:cover; border-radius:10px; }
.ef-related .ef-card__title{ font-size:18px; margin:10px 0 4px; }

@media (max-width: 1024px){
  .ef-related__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px){
  .ef-related__grid{ grid-template-columns:1fr; }
}
/*-----------------------------------------------------------------------