/* Premium visual pilot — additive layer only; existing site architecture remains unchanged. */
:root{--visual-radius:24px;--visual-shadow:0 28px 72px rgba(0,0,0,.28)}
.hero-card-premium{padding:0!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}.hero-card-premium:before{display:none!important}.home-hero-media{position:relative;border:1px solid rgba(231,200,117,.24);border-radius:30px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.38);background:#0b211d;isolation:isolate}.home-hero-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.home-hero-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(6,18,16,.1),transparent 45%,rgba(6,18,16,.3));z-index:1}.home-hero-overlay{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;gap:7px;flex-direction:column;max-width:370px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(135deg,rgba(6,18,16,.88),rgba(11,33,29,.7));backdrop-filter:blur(12px)}.home-hero-overlay .mini-title{color:var(--gold);font-size:11px;letter-spacing:1.7px;text-transform:uppercase}.home-hero-overlay strong{font-size:18px;line-height:1.25;color:#f7f2e8;text-shadow:0 1px 2px rgba(0,0,0,.35)}.home-hero-overlay span:last-child{color:#c9d8d3;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.hero{position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:640px;height:640px;right:-260px;top:-280px;border:1px solid rgba(231,200,117,.08);border-radius:50%;box-shadow:0 0 0 70px rgba(79,183,162,.025),0 0 0 140px rgba(231,200,117,.018);pointer-events:none}
.card{position:relative;overflow:hidden}.card-thumb{position:relative;height:164px;margin:-25px -25px 20px;border-radius:20px 20px 0 0;overflow:hidden;border-bottom:1px solid var(--line);background:#0b211d}.card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .38s ease,filter .38s ease}.card:hover .card-thumb img{transform:scale(1.035);filter:saturate(1.04)}.card-badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:999px;border:1px solid rgba(244,223,155,.32);background:rgba(6,18,16,.76);backdrop-filter:blur(10px);color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.page-hero:has(.article-header-layout){padding-bottom:20px}.article-header-layout{max-width:1040px}.article-hero-image{margin:26px 0 0;border:1px solid rgba(231,200,117,.2);border-radius:26px;overflow:hidden;background:#0b211d;box-shadow:var(--visual-shadow);max-height:510px}.article-hero-image img{display:block;width:100%;height:clamp(320px,38vw,500px);object-fit:cover}.article-hero-image.is-premium{border-color:rgba(231,200,117,.3)}.takeaway{margin:0 0 36px;padding:22px 24px;border:1px solid rgba(79,183,162,.3);border-radius:18px;background:linear-gradient(135deg,rgba(79,183,162,.105),rgba(231,200,117,.045));box-shadow:0 18px 44px rgba(0,0,0,.12)}.takeaway span,.related-heading span{display:block;color:var(--teal);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.takeaway p{margin:7px 0 0!important;color:#e0ebe7!important;font-size:17px}.inline-topic-visual{margin:38px 0;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 52px rgba(0,0,0,.2)}.inline-topic-visual img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.content>h2{scroll-margin-top:96px}.content p{max-width:74ch}
.related-reading{margin:64px 0 18px;padding-top:36px;border-top:1px solid var(--line)}.related-heading{margin-bottom:22px}.related-heading h2{margin:5px 0 0!important;color:var(--text)!important}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-grid .card{padding:20px}.related-grid .card-thumb{height:126px;margin:-20px -20px 17px}.related-grid .card h3{font-size:17px}.related-grid .card p{font-size:13px}.page-hero:has(.article-hero-image)+section{padding-top:30px}
main>section:nth-of-type(2){background:linear-gradient(180deg,rgba(18,53,45,.2),rgba(6,18,16,0));border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035)}main>section:nth-of-type(3){position:relative}main>section:nth-of-type(3):before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,rgba(231,200,117,.045),transparent 28rem),radial-gradient(circle at 85% 70%,rgba(79,183,162,.055),transparent 30rem)}main>section:nth-of-type(3)>.wrap{position:relative;z-index:1}

/* Batch 1 sprite fix: SVG-as-image cannot reliably load an external WebP. Paint the shared
   5x2 WebP sprite directly behind each transparent crop wrapper instead. */
img[src*="/assets/images/articles/batch1/"][src$=".svg"]{background-image:url('/assets/images/articles/batch1/batch1-sprite.webp');background-repeat:no-repeat;background-size:500% 200%;background-color:#0b211d}
img[src$="/returning-to-quran-after-a-break.svg"]{background-position:0% 0%}
img[src$="/reading-quran-with-understanding.svg"]{background-position:25% 0%}
img[src$="/calm-quran-reading-space.svg"]{background-position:50% 0%}
img[src$="/helping-children-love-quran.svg"]{background-position:75% 0%}
img[src$="/quran-reflection-journal.svg"]{background-position:100% 0%}
img[src$="/building-day-around-prayer.svg"]{background-position:0% 100%}
img[src$="/finding-calm-before-salah.svg"]{background-position:25% 100%}
img[src$="/protecting-salah-during-workday.svg"]{background-position:50% 100%}
img[src$="/returning-to-prayer-consistency.svg"]{background-position:75% 100%}
img[src$="/a-peaceful-muslim-morning.svg"]{background-position:100% 100%}

@media(max-width:1100px){.home-hero-overlay{max-width:320px}.card-thumb{height:150px}}@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-card-premium{max-width:760px;width:100%;margin-inline:auto}.related-grid{grid-template-columns:1fr 1fr}.article-hero-image{border-radius:20px}.article-hero-image img{height:clamp(300px,55vw,460px)}.card-thumb{height:150px}.home-hero-overlay{max-width:430px}}@media(max-width:580px){.hero{overflow:hidden}.home-hero-media{border-radius:20px}.home-hero-overlay{position:relative;left:auto;right:auto;bottom:auto;margin:-1px 0 0;max-width:none;border-radius:0 0 20px 20px;border-left:0;border-right:0;border-bottom:0;background:#0b211d}.home-hero-image{aspect-ratio:4/3;object-position:62% center}.related-grid{grid-template-columns:1fr}.article-hero-image{margin-top:22px;border-radius:17px;max-height:none}.article-hero-image img{height:260px}.takeaway{padding:18px}.card-thumb{height:160px}.related-grid .card-thumb{height:145px}.inline-topic-visual{margin:30px 0;border-radius:16px}}

html[data-site-theme="light"] .home-hero-media{
  border-color:rgba(122,89,24,.24);
  box-shadow:0 28px 70px rgba(23,49,42,.16);
}
html[data-site-theme="light"] .home-hero-overlay{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(6,18,16,.92),rgba(11,33,29,.82));
}
html[data-site-theme="light"] .home-hero-overlay .mini-title{color:#f0c96f}
html[data-site-theme="warm"] .home-hero-media{
  border-color:rgba(229,191,104,.30);
  box-shadow:0 30px 76px rgba(0,0,0,.34);
}
html[data-site-theme="warm"] .home-hero-overlay{
  border-color:rgba(243,216,149,.20);
  background:linear-gradient(135deg,rgba(27,21,13,.92),rgba(44,33,19,.82));
}
html[data-site-theme="warm"] .home-hero-overlay .mini-title{color:#f3d895}