/* ==========================================================================
   PAGE: Home — composition only. No new visual values.
   ========================================================================== */

.p-home__counters { padding-block: var(--sp-8); }

.p-home__signature { padding-block: clamp(4rem, 7.5vw, 8rem); }

/* The signature section carries the geometry plate behind the thali. */
.p-home__signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../icons/geometry/lattice-tile.svg");
  background-size: 320px;
  opacity: calc(var(--motif-opacity) * 0.6);
  pointer-events: none;
}

.p-home__quote { padding-block: clamp(3.5rem, 6.5vw, 7rem); }

.p-home__cta {
  text-align: center;
  padding-block: clamp(3.5rem, 6.5vw, 7rem);
  position: relative;
  overflow: hidden;
}

.p-home__cta-media {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
}

.p-home__cta-media img { width: 100%; height: 100%; object-fit: cover; }

.p-home__cta-inner {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  max-width: 42rem;
  margin-inline: auto;
}

/* text-decoration: none is a bug fix, not a preference. This class is used on an
   <a> on the home page and on /get-involved/, and 02-reset.css only resets a
   link's COLOUR — the browser's underline survives. The result was a card whose
   heading and whole body paragraph were underlined, which read as three stacked
   links rather than one clickable card. The card's border and hover lift are the
   affordance. */
.p-home__monthly-reason {
  text-decoration: none;
  display: grid;
  /* auto rows for the heading and copy, then a 1fr spacer row so the CTA is
     pinned to the bottom. The three cards carry different amounts of copy, and
     three buttons sitting at three different heights is the single loudest
     "unfinished" signal in a card row. */
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition:
    transform    var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow   var(--d-base) var(--e-out);
}

.p-home__monthly-reason > :last-child {
  align-self: end;
  margin-block-start: var(--sp-3);
}

@media (hover: hover) {
  .p-home__monthly-reason:hover {
    transform: translate3d(0, -4px, 0);
    border-color: var(--c-verdigris);
    box-shadow: var(--shadow-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-home__monthly-reason { transition: none; }
  .p-home__monthly-reason:hover { transform: none; }
}

.p-home__monthly-reason h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}

.p-home__zakat-teaser {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-7);
  background-color: var(--c-indigo);
  color: var(--c-text-inv);
  border-radius: var(--r-xl);
}

@media (min-width: 900px) {
  .p-home__zakat-teaser { grid-template-columns: 1fr auto; }
}

.p-home__zakat-teaser h2 { color: var(--c-text-inv); }

.p-home__nisab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--ff-utility);
  font-size: var(--fs-sm);
  color: var(--c-text-muted-inv);
}