/*
 * Dhuq experience layer — learning-first composition and quiet interaction.
 * It intentionally sits after the core and editorial styles so the existing
 * reading tools keep their restrained, text-led behaviour.
 */

/* --------------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------------- */

.home-hero--learning {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 7.5rem) clamp(3.5rem, 6vw, 6.5rem);
  background:
    radial-gradient(42rem 30rem at 92% 14%, color-mix(in srgb, var(--brand-gold) 13%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-warm) 62%, var(--paper)) 0%, var(--paper) 100%);
}

.home-hero--learning::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  inline-size: min(42rem, 60vw);
  block-size: 100%;
  background: url("../images/geometry-pattern.svg") center / 35rem auto repeat;
  opacity: 0.055;
  pointer-events: none;
}

.home-hero--learning .home-hero__inner {
  grid-template-columns: minmax(0, 0.93fr) minmax(22rem, 0.82fr);
  gap: clamp(3rem, 7vw, 7.5rem);
}

.home-hero__text { position: relative; z-index: 1; }

.home-hero--learning .home-hero__title {
  max-inline-size: 12ch;
  text-wrap: balance;
}

.home-hero--learning .home-hero__lede {
  max-inline-size: 44ch;
  font-size: clamp(1.08rem, 0.99rem + 0.32vw, 1.28rem);
}

.home-hero--learning .home-hero__actions { gap: var(--space-3); }

.home-hero--learning .home-hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.home-hero__visual {
  position: relative;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.home-hero__photo {
  overflow: hidden;
  border-radius: clamp(1.25rem, 2.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 42%, transparent);
  box-shadow: 0 1.7rem 4.5rem color-mix(in srgb, var(--brand-green) 16%, transparent);
}

.home-hero__photo .dhuq-figure__img {
  transition: transform 700ms var(--ease-out);
}

.home-hero__visual:hover .home-hero__photo .dhuq-figure__img { transform: scale(1.018); }

.home-hero__proof {
  position: absolute;
  inset-inline-start: clamp(-3rem, -4vw, -1.25rem);
  inset-block-end: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  gap: 0.28rem;
  inline-size: min(20rem, 72%);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 38%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1rem 2.8rem color-mix(in srgb, var(--green-deep) 18%, transparent);
  backdrop-filter: blur(14px);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}

.home-hero__proof:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.25rem 3.1rem color-mix(in srgb, var(--green-deep) 23%, transparent);
  color: var(--text-primary);
}

.home-hero__proof:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.home-hero__proof-label {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.home-hero__proof strong {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  color: var(--brand-green);
}

.home-hero__proof > span:last-child {
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Learning path and commercial spotlights
   -------------------------------------------------------------------------- */

.home-path {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--border-soft);
  background: var(--white);
}

.home-path__inner {
  display: grid;
  grid-template-columns: minmax(11rem, 0.58fr) minmax(0, 1.7fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-6);
}

.home-path__intro .eyebrow { margin-block-end: var(--space-1); }

.home-path__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-path__steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-inline-size: 0;
  padding-inline: var(--space-5);
  border-inline-start: 1px solid var(--border-soft);
}

.home-path__number {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--gold-soft);
  font-size: var(--step-caption);
  font-weight: 700;
  color: var(--brand-green);
}

.home-path__steps h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
}

.home-path__steps p {
  margin: var(--space-1) 0 0;
  font-size: var(--step-caption);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.home-spotlight { overflow: hidden; }

.home-spotlight__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.home-spotlight--lessons .home-spotlight__media { grid-column: 2; grid-row: 1; }
.home-spotlight--lessons .home-spotlight__content { grid-column: 1; grid-row: 1; }

.home-spotlight__media {
  position: relative;
  min-inline-size: 0;
}

.home-spotlight__figure {
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 1.75rem);
  box-shadow: 0 1.35rem 3.2rem color-mix(in srgb, var(--brand-green) 13%, transparent);
}

.home-spotlight__figure .dhuq-figure__img {
  transition: transform 600ms var(--ease-out);
}

.home-spotlight__media:hover .home-spotlight__figure .dhuq-figure__img { transform: scale(1.022); }

.home-spotlight__media-label {
  position: absolute;
  inset-inline-start: var(--space-5);
  inset-block-end: var(--space-5);
  max-inline-size: calc(100% - (2 * var(--space-5)));
  padding: 0.62rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--green-deep) 90%, transparent);
  color: var(--brand-ivory);
  font-size: var(--step-caption);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.home-spotlight__content { min-inline-size: 0; }

.home-spotlight__content h2 {
  margin-block-start: var(--space-2);
  max-inline-size: 14ch;
  text-wrap: balance;
}

.home-spotlight__lede {
  margin-block-start: var(--space-4);
  max-inline-size: 43ch;
  font-size: var(--step-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.home-spotlight__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.home-spotlight__facts li {
  display: grid;
  align-content: start;
  gap: 0.18rem;
  padding-block-start: var(--space-3);
  border-block-start: 2px solid var(--gold-line);
}

.home-spotlight__facts strong {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  color: var(--brand-green);
}

.home-spotlight__facts span {
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.home-spotlight__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.home-spotlight__topics li {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: var(--step-caption);
  font-weight: 600;
  color: var(--brand-green);
}

.home-spotlight__actions { margin-block-start: var(--space-7); }

/* --------------------------------------------------------------------------
   Sitewide polish for learning and editorial pages
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: var(--space-5);
  padding: clamp(2.4rem, 5vw, 5rem);
  border: 1px solid var(--border-soft);
  border-radius: clamp(1.1rem, 2.4vw, 2rem);
  background:
    radial-gradient(30rem 22rem at 94% 6%, color-mix(in srgb, var(--brand-gold) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-warm) 74%, var(--paper));
}

.page-hero--content { border-block-end: 1px solid var(--border-soft); }

.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  inline-size: 42%;
  background: url("../images/geometry-pattern.svg") center / 28rem auto repeat;
  opacity: 0.045;
  pointer-events: none;
}

.page-hero__media {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 38%, transparent);
  box-shadow: 0 1.1rem 2.8rem color-mix(in srgb, var(--brand-green) 12%, transparent);
}

.page-hero__image .dhuq-figure__img { transition: transform 600ms var(--ease-out); }
.page-hero__media:hover .page-hero__image .dhuq-figure__img { transform: scale(1.018); }

.page-hero__title { text-wrap: balance; }

.course-grid { align-items: stretch; }

.course-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.course-card__media {
  overflow: hidden;
  border-radius: 0;
}

.course-card__media .dhuq-figure__img { transition: transform 600ms var(--ease-out); }
.course-card:hover .course-card__media .dhuq-figure__img { transform: scale(1.024); }

.course-card__body {
  display: block;
  padding: var(--space-6);
}

.card,
.article-card,
.surah-card {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.card:hover,
.article-card:hover,
a.surah-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--brand-green) 9%, transparent);
}

#dhuq-form > .container,
#dhuq-form.container,
article.container #dhuq-form .container--text {
  max-inline-size: 52rem;
}

#dhuq-form form.stack {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--brand-green) 7%, transparent);
}

.btn {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Responsive and motion preferences
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .home-hero--learning .home-hero__inner,
  .home-spotlight__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .home-hero__visual { max-inline-size: 38rem; }

  .home-spotlight--lessons .home-spotlight__media,
  .home-spotlight--lessons .home-spotlight__content {
    grid-column: 1;
  }

  .home-spotlight--lessons .home-spotlight__media { grid-row: 1; }
  .home-spotlight--lessons .home-spotlight__content { grid-row: 2; }

  .home-path__inner { grid-template-columns: 1fr; }
  .home-path__steps li:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 700px) {
  .home-hero--learning { padding-block-start: var(--space-8); }
  .home-hero--learning .home-hero__inner { gap: var(--space-7); }

  .home-hero__proof {
    position: relative;
    inset: auto;
    inline-size: calc(100% - (2 * var(--space-4)));
    margin: calc(-1 * var(--space-7)) auto 0;
  }

  .home-path__steps { grid-template-columns: 1fr; }
  .home-path__steps li,
  .home-path__steps li:first-child {
    padding: var(--space-4) 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-soft);
  }

  .home-spotlight__facts { grid-template-columns: 1fr; }
  .home-spotlight__facts li { grid-template-columns: minmax(6rem, auto) 1fr; align-items: baseline; gap: var(--space-3); }

  .page-hero {
    margin-inline: calc(-1 * var(--gutter));
    margin-block-start: 0;
    padding-inline: var(--gutter);
    border-inline: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__photo .dhuq-figure__img,
  .home-spotlight__figure .dhuq-figure__img,
  .page-hero__image .dhuq-figure__img,
  .course-card__media .dhuq-figure__img,
  .home-hero__proof,
  .card,
  .article-card,
  .surah-card,
  .btn {
    transition: none !important;
    transform: none !important;
  }
}