/* ==========================================================================
   AtTayeb Relief — design system
   Brand anchors are sampled from the foundation logo: green #009933,
   purple #850DAD. Everything else is derived from those two hues.
   ========================================================================== */

:root {
  /* brand anchors — do not change without the foundation's sign-off */
  --at-purple: #850DAD;
  --at-green:  #009933;

  /* derived scale */
  --at-purple-deep: #5B0A79;
  --at-purple-soft: #F5EAFA;
  --at-lilac:       #E9C6F5;
  --at-aubergine:   #1B0725;
  --at-aubergine-2: #2A0F39;
  /* raw green fails WCAG AA with white text (3.75:1); this passes at 5.6:1 */
  --at-green-deep:  #007A29;
  --at-green-lit:   #6EE38F;

  --at-bg:        #FFFFFF;
  --at-bg-2:      #FBF7FD;
  --at-surface:   #FFFFFF;
  --at-text:      var(--at-aubergine);
  --at-text-soft: #4B3A55;
  --at-text-mute: #6F6079;
  --at-rule:      #E9DEF0;
  --at-rule-soft: #F3EBF7;

  --at-shadow: 0 2px 4px rgba(27,7,37,.04), 0 18px 40px -20px rgba(27,7,37,.28);

  --at-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --at-body: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;

  --at-arch: 200px 200px 18px 18px;
  --at-radius: 18px;
  --at-measure: 65ch;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
body.attayeb {
  font-family: var(--at-body);
  color: var(--at-text);
  background: var(--at-bg);
}

.attayeb h1, .attayeb h2, .attayeb h3, .attayeb h4 {
  font-family: var(--at-display);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
}

.attayeb .at-eyebrow {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--at-purple);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons — pill geometry, green for the primary give action
   -------------------------------------------------------------------------- */
.attayeb .at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-size: .91rem;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--at-green-deep);
  background: var(--at-green-deep);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.attayeb .at-btn:hover,
.attayeb .at-btn:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(0,122,41,.75);
}
.attayeb .at-btn--purple {
  background: var(--at-purple);
  border-color: var(--at-purple);
}
.attayeb .at-btn--purple:hover { box-shadow: 0 10px 22px -10px rgba(133,13,173,.8); }
.attayeb .at-btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
.attayeb .at-btn--outline:hover { background: rgba(255,255,255,.1); box-shadow: none; }
.attayeb .at-btn--ink {
  background: transparent;
  color: var(--at-purple);
  border-color: var(--at-rule);
}
.attayeb .at-btn--ink:hover { color: var(--at-purple); border-color: var(--at-purple); box-shadow: none; }

/* --------------------------------------------------------------------------
   Arch — the mihrab-derived image mask used for feature photography
   -------------------------------------------------------------------------- */
.at-arch {
  position: relative;
  margin: 0;
}
.at-arch__main {
  border-radius: var(--at-arch);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--at-shadow);
  border: 1px solid var(--at-rule);
}
.at-arch__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.at-arch__inset {
  position: absolute;
  right: -1rem;
  bottom: -1.2rem;
  width: 44%;
  border-radius: 16px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--at-shadow);
}
.at-arch__inset img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
/* on a dark ground the outline reads instead of the border */
.at-arch--on-dark .at-arch__main { border-color: rgba(255,255,255,.14); }
.at-arch--on-dark::before {
  content: "";
  position: absolute;
  inset: -14px -14px 26px -14px;
  border: 1px solid rgba(233,198,245,.28);
  border-radius: 220px 220px 22px 22px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pillars — rahmah / ihsan / amanah
   -------------------------------------------------------------------------- */
.at-pillars {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.at-pillar {
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  padding: 1.5rem;
  background: var(--at-surface);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.at-pillar:hover { transform: translateY(-3px); box-shadow: var(--at-shadow); }
.at-pillar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--at-purple), var(--at-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.at-pillar.is-in::before { transform: scaleX(1); }
.at-pillar h3 { font-size: 1.55rem; margin: 0 0 .3rem; }
.at-pillar__gloss {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--at-green-deep);
  display: block;
  margin-bottom: .55rem;
}
.at-pillar p { color: var(--at-text-soft); font-size: .93rem; margin: 0; }

/* --------------------------------------------------------------------------
   Typed pillar line (hero)
   -------------------------------------------------------------------------- */
.at-typed {
  font-family: var(--at-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  min-height: 2.3em;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .9rem 0 0;
}
.at-typed__lead { color: rgba(255,255,255,.62); font-family: var(--at-body); font-size: .82em; }
.at-typed__word { color: var(--at-green-lit); font-style: italic; }
.at-typed__gloss { color: rgba(255,255,255,.55); font-family: var(--at-body); font-size: .68em; letter-spacing: .04em; }
.at-typed__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--at-lilac);
  translate: 0 .12em;
  animation: at-blink 1.1s steps(1) infinite;
}
@keyframes at-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Chips — compact quick links
   -------------------------------------------------------------------------- */
.at-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.at-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--at-rule);
  background: var(--at-surface);
  font-size: .86rem;
  color: var(--at-text-soft);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s ease, background .2s ease, color .2s ease;
}
.at-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--at-purple);
  transition: transform .2s ease;
}
.at-chip:nth-child(2n) .at-chip__dot { background: var(--at-green); }
.at-chip__arrow { opacity: 0; translate: -6px 0; transition: opacity .2s ease, translate .2s ease; font-size: .9em; }
.at-chip:hover, .at-chip:focus-visible {
  transform: translateY(-2px);
  border-color: var(--at-purple);
  background: var(--at-purple-soft);
  color: var(--at-purple);
}
.at-chip:hover .at-chip__dot { transform: scale(1.5); }
.at-chip:hover .at-chip__arrow { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   Verse — Qur'an / hadith set piece
   -------------------------------------------------------------------------- */
.at-verse-band { background: var(--at-aubergine-2); color: #F3EAF8; }
.at-verse {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  position: relative;
  padding-block: 2.4rem;
}
.at-verse::before, .at-verse::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--at-lilac), transparent);
}
.at-verse::before { top: 0; }
.at-verse::after { bottom: 0; }
.at-verse blockquote {
  margin: 0;
  font-family: var(--at-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height: 1.45;
  border: 0;
  padding: 0;
}
.at-verse cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--at-green-lit);
}

/* --------------------------------------------------------------------------
   Giving tiers
   -------------------------------------------------------------------------- */
.at-tiers { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.at-tier {
  background: var(--at-surface);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.at-tier:hover { transform: translateY(-4px); box-shadow: var(--at-shadow); }
.at-tier--featured {
  background: var(--at-aubergine);
  color: #fff;
  border-color: var(--at-aubergine);
}
.at-tier--featured p { color: rgba(255,255,255,.78); }
.at-tier__amount {
  font-family: var(--at-display);
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--at-purple);
  white-space: nowrap;
}
.at-tier--featured .at-tier__amount { color: var(--at-green-lit); }
.at-tier__unit { font-size: .33em; letter-spacing: 0; color: var(--at-text-mute); }
.at-tier--featured .at-tier__unit { color: rgba(255,255,255,.6); }
.at-tier h3 { font-size: 1.08rem; margin: 0; }
.at-tier p { font-size: .87rem; color: var(--at-text-soft); margin: 0; }
.at-tier .at-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Impact stats
   -------------------------------------------------------------------------- */
.at-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.at-stat {
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  padding: 1.5rem 1.4rem;
  background: var(--at-surface);
}
.at-stat__figure {
  display: block;
  font-family: var(--at-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--at-purple);
  white-space: nowrap;
}
.at-stat__unit { font-size: .4em; letter-spacing: 0; }
.at-stat__label { display: block; margin-top: .5rem; font-size: .87rem; color: var(--at-text-soft); }
.at-stat__meta {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--at-text-mute);
}

/* --------------------------------------------------------------------------
   Carousel — the project photo strip. Scroll-snap does the work, so touch
   swipe and trackpad scroll come for free with no carousel library.
   -------------------------------------------------------------------------- */
.at-carousel {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  /* thin, unobtrusive scrollbar — kept visible so the strip reads as scrollable */
  scrollbar-width: thin;
  scrollbar-color: var(--at-rule) transparent;
}
.at-carousel::-webkit-scrollbar { height: 6px; }
.at-carousel::-webkit-scrollbar-track { background: transparent; }
.at-carousel::-webkit-scrollbar-thumb {
  background: var(--at-rule);
  border-radius: 999px;
}
.at-carousel:focus-visible {
  outline: 2px solid var(--at-purple);
  outline-offset: 4px;
}

.at-carousel figure {
  margin: 0;
  flex: 0 0 clamp(15rem, 86vw, 26rem);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--at-purple-soft);
}
.at-carousel figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
}

@media (min-width: 700px) {
  .at-carousel figure { flex-basis: 26rem; }
}

/* header row with the arrows sitting opposite the heading */
.at-section__head--split {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.at-carousel__nav { display: flex; gap: .5rem; }
.at-carousel__btn {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--at-rule);
  background: var(--at-surface);
  color: var(--at-purple);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.at-carousel__btn:hover:not(:disabled) {
  border-color: var(--at-purple);
  background: var(--at-purple-soft);
}
.at-carousel__btn:disabled { opacity: .35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .at-carousel { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.at-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.4,0,.2,1);
}
.at-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .at-reveal { opacity: 1; transform: none; transition: none; }
  .at-btn, .at-chip, .at-tier, .at-pillar,
  .at-gallery img, .at-arch__main img { transition: none; }
  .at-typed__caret { animation: none; }
  .at-pillar::before { transform: scaleX(1); }
}