/* ============================================================================
   home.css — home-page components. Loaded ONLY on the home template, injected
   into the head region via pw-append. Image URLs are relative to this file.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-block-size: clamp(440px, 60vh, 540px);
  --hero-halo: rgba(244,239,226,.85);   /* soft page-coloured glow that hugs the hero text */
}

/* Full masjid scene shown as a faint watermark so text stays legible over it;
   edges masked so the band melts into the page. Light + dark are the same
   composition, so switching modes only changes the sky. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../images/masjids-hero-mobile.webp') bottom center / cover no-repeat;
  opacity: .30;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
}
html.theme-dark .hero__bg { background-image: url('../images/masjids-hero-dark-mobile.webp'); opacity: .34; }
html.theme-dark .hero { --hero-halo: rgba(14,36,27,.85); }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding-block: var(--space-7);
}

.hero__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.hero__title, .hero__verse { text-shadow: 0 0 10px var(--hero-halo), 0 0 4px var(--hero-halo); }
.hero__title { margin: 0; font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--heading); line-height: 1.1; }
.hero__verse {
  margin: 0;
  max-inline-size: 40ch;
  color: var(--text-secondary);
  font-family: var(--font-quran);
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  line-height: 2.1;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-2); }

/* Scholar niche — dome-arched frame with a fine gold border */
.hero__scholar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
}
.hero__scholar-frame {
  display: block;
  inline-size: 128px;
  block-size: 158px;
  border-radius: 64px 64px 12px 12px;
  overflow: hidden;
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-card);
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(201,168,80,.22), rgba(0,0,0,0) 70%),
    var(--bg-card);
}
.hero__scholar-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; }
.hero__scholar-meta { text-align: center; }
.hero__scholar-name { display: block; color: var(--heading); font-weight: 700; font-size: 1.15rem; margin-block-end: var(--space-2); text-shadow: 0 0 10px var(--hero-halo), 0 0 4px var(--hero-halo); }

.hero__scholar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.hero__scholar-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: .4rem .9rem;
  border: 1.5px solid var(--link);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
/* Scholar-link icons: to HIDE them, change the rule below to `display: none`.
   To CHANGE which icon a pill uses, edit the mstnr_icon('…') names in home.php
   (biographies / lessons / books) — see inc/_icons.php for the full icon list. */
.hero__scholar-links a svg { inline-size: 18px; block-size: 18px; }
.hero__scholar-links a:hover { background: var(--link); color: var(--pill-text); }

.hero__scholar-frame:hover { border-color: var(--_gold-400); box-shadow: var(--shadow-pop); }

/* Desktop: content centred over the scene; the masjid image is flipped so the
   open space beside the Dome of the Rock falls next to the scholar's portrait. */
@media (min-width: 900px) {
  .hero { min-block-size: clamp(480px, 54vh, 560px); }
  .hero__bg { background-image: url('../images/masjids-hero.webp'); }
  html.theme-dark .hero__bg { background-image: url('../images/masjids-hero-dark.webp'); }

  .hero__inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: start;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .hero__intro { align-items: flex-start; }
  .hero__actions { justify-content: flex-start; }
  .hero__scholar-frame { inline-size: 176px; block-size: 216px; border-radius: 88px 88px 12px 12px; }
  .hero__scholar { position: relative; }
  .hero__scholar-links { flex-wrap: nowrap; }
  .hero__scholar-meta {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---- Home sections ------------------------------------------------------- */
.home-section { padding-block: var(--space-6); }

/* Sections grid — one card per section, with icon, title and live count */
.sections-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--space-4);
}
.section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  block-size: 100%;
  padding: var(--space-5) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.section-card:hover { border-color: var(--link); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.section-card__icon { color: var(--link); }
.section-card__icon svg { inline-size: 34px; block-size: 34px; }
.section-card__title { color: var(--heading); font-weight: 700; font-size: 1.05rem; }
.section-card__count { color: var(--accent); font-weight: 700; font-size: 1.35rem; line-height: 1; }

/* جديد الموقع — a tinted band that divides the page; a swipeable snap-carousel
   on mobile, and a featured item + grid on desktop. */
.home-band { background: var(--bg-band); }
.home-band .home-section { padding-block: var(--space-7); }

.updates-feed {
  margin-block-start: var(--space-5);
  display: flex;                      /* mobile: horizontal snap carousel */
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-2);
  scrollbar-width: thin;
}
.updates-feed .update-card { flex: 0 0 82%; scroll-snap-align: start; }

.home-section__more { margin-block-start: var(--space-4); }
.home-section__more a { color: var(--link); font-weight: 700; text-decoration: none; }
.home-section__more a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 720px) {
  .updates-feed {
    display: grid;                    /* desktop: featured item + grid */
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    gap: var(--space-4);
  }
  .updates-feed .update-card { flex: initial; }
  .updates-feed .update-card:first-child { grid-column: 1 / -1; }
  .updates-feed .update-card:first-child .update-card__title { font-size: 1.3rem; }
}