/* Home page only: hero slider, top publications and our activities. Loaded by index.html.
   Sections shared with inner pages (goals, photo rows, point tiles, download band) are in
   sections.css; small pieces (label pill, panel, card, icon badge) in components.css. */

/* ---------- A. Hero ----------
   Warm cream (the same cream as the background of the 3D renders, so each render melts into
   the page) with a faint mosque skyline along the bottom. Each slide: its text on the left and
   one 3D illustration on the right, which floats gently. Previous / next: each half of the
   illustration is a button, marked by a faint arrow at its edge that turns green on hover.
   Slide text: the headline, a short olive rule with a star, one sentence, two
   facts, then its green button, over a large faint eight-pointed star. Each time a slide comes up its text plays in: headline word by
   word, the rule drawing itself, then sentence and button.
   Layout: one grid. Slides use subgrid, so their text and illustration land in the slider's
   own rows and columns, and all slides share the same cells (the tallest sets the size,
   nothing jumps). Phones and tablets: illustration, then text. Desktop: text left,
   illustration right. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-4) var(--space-6);
  background: var(--c-cream);
}

/* Low skyline, repeated across the full width */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: clamp(48px, 7vw, 96px);
  z-index: -1;
  background: var(--c-emerald);
  opacity: 0.06;
  -webkit-mask: url("/assets/images/skyline-mosques.svg") center bottom / auto 100% repeat-x;
  mask: url("/assets/images/skyline-mosques.svg") center bottom / auto 100% repeat-x;
  pointer-events: none;
}

/* Everything in the slider is set in Inter, headline included (client request). */
.hero-slider {
  --art-w: min(80vw, 22rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: var(--space-3);
  font-family: var(--font-body);
  isolation: isolate;
}

.hero-slides {
  display: grid;
  grid-area: 1 / 1 / 3 / 2;
  grid-template-columns: minmax(0, 1fr); /* or wide content stretches it past the screen */
  grid-template-rows: subgrid;
}

.hero-slide {
  display: grid;
  grid-area: 1 / 1 / -1 / -1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
}

/* A large, faint eight-pointed star behind the text, turning very slowly. It stays put while the
   slides change. Phones and tablets: centred behind the text; desktop: off the text's left edge. */
.hero-slider::before {
  content: "";
  z-index: -1;
  grid-area: 2 / 1;
  justify-self: center;
  align-self: center;
  inline-size: min(110vw, 30rem);
  aspect-ratio: 1;
  background: var(--c-brass);
  opacity: 0.16;
  -webkit-mask: url("/assets/images/khatam-outline.svg") center / contain no-repeat;
  mask: url("/assets/images/khatam-outline.svg") center / contain no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slider::before {
    animation: hero-turn 120s linear infinite;
  }
}

@keyframes hero-turn {
  to {
    rotate: 1turn;
  }
}

/* The illustration and the previous / next halves share one square box */
.hero-slide__art,
.hero-controls {
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  inline-size: var(--art-w);
  aspect-ratio: 1;
  margin: 0;
}

/* The render's edges fade out, so any small difference from the page cream disappears */
.hero-slide__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  -webkit-mask: radial-gradient(closest-side, black 90%, transparent);
  mask: radial-gradient(closest-side, black 90%, transparent);
}

.hero-slide__text {
  grid-area: 2 / 1;
  align-self: start;
}

/* Slide text */
/* Headline: Playfair Display in two colours (client request, an exception to design spec 3.2):
   near-black, then the key phrase (.hero-accent) in a warm olive gradient from the brand olive.
   Both colours pass AA for large text on the cream. */
.hero-slide h2 {
  max-inline-size: 16ch;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  font-weight: 700;
  font-variant-numeric: lining-nums; /* "2008" at full height, not old-style */
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-accent {
  color: var(--c-brass-text);
}

/* The gradient is painted per word (each is its own box, see .hero-word) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-accent,
  .hero-slide h2 .hero-word > .hero-accent {
    background: linear-gradient(100deg, var(--c-brass-text) 0%, color-mix(in srgb, var(--c-brass-text) 72%, var(--c-brass)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* home.js wraps each headline word in a clipping box so the words can rise in one by one.
   The padding keeps descenders (g, y, j) inside the box. */
.hero-word {
  display: inline-block;
  overflow: clip;
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
  vertical-align: top;
}

.hero-word > span {
  display: inline-block;
}

/* Short olive line, eight-pointed star, then a line that fades out */
.hero-rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 10rem;
  margin-block: var(--space-4) var(--space-3);
}

.hero-rule::before,
.hero-rule::after {
  content: "";
  block-size: 2px;
  border-radius: var(--radius-pill);
  transform-origin: left;
}

[dir="rtl"] .hero-rule::before,
[dir="rtl"] .hero-rule::after {
  transform-origin: right;
}

.hero-rule::before {
  inline-size: 2.5rem;
  background: var(--c-brass);
}

.hero-rule::after {
  flex: 1;
  background: linear-gradient(to right, var(--c-brass), transparent);
}

[dir="rtl"] .hero-rule::after {
  background: linear-gradient(to left, var(--c-brass), transparent);
}

.hero-rule svg {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  fill: var(--c-brass);
  fill-rule: evenodd;
}

.hero-lead {
  max-inline-size: 30rem;
  color: var(--c-ink-soft);
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* Two facts, figure over label, split by a short olive divider; a hairline above sets them
   apart from the sentence. (dt holds the label for screen readers; the figure is shown first.) */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  max-inline-size: 30rem;
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--c-rule);
}

.hero-fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end; /* figures line up at the top even when a label wraps */
  gap: 0.125rem;
  min-inline-size: 0;
}

.hero-fact + .hero-fact {
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid color-mix(in srgb, var(--c-brass) 55%, transparent);
}

.hero-fact dd {
  margin: 0;
  color: var(--c-emerald);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero-fact dt {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.hero-slide__text .btn-row {
  margin-block-start: var(--space-5);
}

.hero-slide__text .btn {
  transition:
    translate 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease;
}

.hero-slide__text .btn:hover {
  translate: 0 -2px;
  box-shadow: var(--shadow-card);
}

/* Phones and tablets: the slide text is centred under the illustration. The rule becomes
   symmetric (a line fading out on each side of the star), and both lines draw outward from
   the star. Desktop keeps the text left-aligned beside the illustration. */
@media (max-width: 1023.98px) {
  .hero-slide__text {
    text-align: center;
  }

  .hero-slide h2,
  .hero-lead {
    margin-inline: auto;
  }

  .hero-rule {
    inline-size: 9rem;
    margin-inline: auto;
  }

  .hero-rule::before {
    flex: 1;
    inline-size: auto;
    background: linear-gradient(to left, var(--c-brass), transparent);
    transform-origin: right;
  }

  [dir="rtl"] .hero-rule::before {
    background: linear-gradient(to right, var(--c-brass), transparent);
    transform-origin: left;
  }

  .hero-slide__text .btn-row,
  .hero-facts {
    justify-content: center;
  }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-inline: auto;
  }

  .hero-fact {
    align-items: center;
    padding-inline: var(--space-3);
  }

  .hero-fact + .hero-fact {
    padding-inline-start: var(--space-3);
  }
}

/* Without home.js only the first slide shows. */
.hero-slide + .hero-slide {
  display: none;
}

/* Changing slides: the old text fades out, then the new text fades in. The new illustration
   fades in over the old one, which stays whole underneath until the fade is done. */
.hero-slider.is-ready .hero-slide {
  display: grid;
  visibility: hidden;
  transition: visibility 0s linear 700ms;
}

.hero-slider.is-ready .hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  transition: none;
}

.hero-slider.is-ready .hero-slide__text {
  opacity: 0;
  transition: opacity 250ms ease;
}

.hero-slider.is-ready .is-active .hero-slide__text {
  opacity: 1;
  transition: opacity 450ms ease 250ms;
}

.hero-slider.is-ready .hero-slide__art {
  opacity: 0;
  transition: opacity 0s linear 700ms;
}

.hero-slider.is-ready .is-active .hero-slide__art {
  opacity: 1;
  transition: opacity 700ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* The text block itself stays put; its parts come in one after another instead: the headline
     word by word, the rule drawing itself, the sentence, the facts, the button.
     The outgoing slide's parts all fade out together, quickly. */
  .hero-slider.is-ready .hero-slide__text,
  .hero-slider.is-ready .is-active .hero-slide__text {
    opacity: 1;
    transition: none;
  }

  .hero-slider.is-ready .hero-slide__text > * {
    opacity: 0;
    translate: 0 1rem;
    transition:
      opacity 200ms ease,
      translate 200ms ease;
  }

  .hero-slider.is-ready .is-active .hero-slide__text > * {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 600ms ease var(--d, 0ms),
      translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms);
  }

  .hero-slide__text > .hero-rule { --d: 550ms; }
  .hero-slide__text > .hero-lead { --d: 650ms; }
  .hero-slide__text > .hero-facts { --d: 760ms; }
  .hero-slide__text > .btn-row { --d: 880ms; }

  /* Headline: the block is always there; its words rise out of their boxes */
  .hero-slider.is-ready .hero-slide__text > h2,
  .hero-slider.is-ready .is-active .hero-slide__text > h2 {
    opacity: 1;
    translate: none;
  }

  .hero-slider.is-ready .hero-word > span {
    translate: 0 110%;
    transition: translate 200ms ease;
  }

  .hero-slider.is-ready .is-active .hero-word > span {
    translate: 0 0;
    transition: translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(250ms + var(--i, 0) * 70ms);
  }

  /* Rule: both lines draw out from the star's side, and the star turns into place */
  .hero-slider.is-ready .hero-rule::before,
  .hero-slider.is-ready .hero-rule::after {
    scale: 0 1;
    transition: scale 200ms ease;
  }

  .hero-slider.is-ready .is-active .hero-rule::before,
  .hero-slider.is-ready .is-active .hero-rule::after {
    scale: 1 1;
    transition: scale 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 650ms;
  }

  .hero-slider.is-ready .hero-rule svg {
    rotate: -135deg;
    scale: 0.3;
    transition: rotate 200ms ease, scale 200ms ease;
  }

  .hero-slider.is-ready .is-active .hero-rule svg {
    rotate: 0deg;
    scale: 1;
    transition:
      rotate 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 550ms,
      scale 900ms cubic-bezier(0.2, 0.8, 0.2, 1.4) 550ms;
  }

  /* The new illustration settles in from slightly smaller, then floats gently */
  .hero-slider.is-ready .hero-slide__art {
    scale: 0.94;
    transition: opacity 0s linear 700ms, scale 0s linear 700ms;
  }

  .hero-slider.is-ready .is-active .hero-slide__art {
    scale: 1;
    transition: opacity 700ms ease, scale 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .hero-slide__art img {
    animation: hero-float 6s ease-in-out infinite alternate;
  }
}

@keyframes hero-float {
  to {
    transform: translateY(-10px);
  }
}

/* Previous / next: each half of the illustration is a button, marked by a faint arrow at its
   outer edge. Hovering (or keyboard focus on) a half turns its arrow solid green; no text
   appears. */
.hero-controls {
  z-index: 3;
  pointer-events: none;
}

.hero-peek {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  inline-size: 50%;
  padding: 0.25rem;
  border: 0;
  background: none;
  color: var(--c-ink-soft);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.hero-peek--prev {
  inset-inline-start: 0;
  justify-content: flex-start;
}

.hero-peek--next {
  inset-inline-end: 0;
  justify-content: flex-end;
}

.hero-peek__panel {
  display: flex;
}

.hero-peek__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--c-rule) 80%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
  opacity: 0.75;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease,
    opacity 250ms ease,
    scale 250ms ease;
}

.hero-peek__arrow .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  stroke-width: 1.75;
}

@media (hover: hover) and (pointer: fine) {
  .hero-peek:hover .hero-peek__arrow {
    border-color: var(--c-emerald);
    background: var(--c-emerald);
    color: var(--c-on-emerald);
    opacity: 1;
    scale: 1.08;
  }
}

/* The halves draw their own focus: a ring on the arrow, not around half the art */
.hero-peek:focus-visible {
  outline: none;
}

.hero-peek:focus-visible .hero-peek__arrow {
  border-color: var(--c-emerald);
  background: var(--c-emerald);
  color: var(--c-on-emerald);
  opacity: 1;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .hero-slider {
    --art-w: 24rem;
  }
}

/* Desktop: text left, illustration right. Rows: space, text, space (the illustration spans
   all three, so the text block sits centred beside it). */
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-5) var(--space-4);
  }

  .hero-slider {
    --art-w: min(100%, 31rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr auto 1fr;
    column-gap: var(--space-7);
    row-gap: 0;
  }

  .hero-slides {
    grid-area: 1 / 1 / 4 / 3;
    grid-template-columns: subgrid;
  }

  .hero-slide {
    grid-template-columns: subgrid;
  }

  .hero-slide__text {
    grid-area: 2 / 1;
  }

  /* Facts stay on one row; a long label wraps instead */
  .hero-facts {
    flex-wrap: nowrap;
  }

  .hero-slider::before {
    grid-area: 1 / 1 / 4 / 2;
    justify-self: start;
    inline-size: 32rem;
    translate: -38% 0;
  }

  .hero-slide__art,
  .hero-controls {
    grid-area: 1 / 2 / 4 / 3;
  }
}

/* ---------- C2. Top publications ----------
   Heading and "All publications" on one line (same as Our activities), then three
   publication cards (styles in components.css) built by publications.js. */
.top-pubs__list {
  margin-block-start: var(--space-5);
}

/* Tablets (two columns): the third card would sit alone at half width, so centre it */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .top-pubs__list > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--space-5)) / 2);
  }
}

.top-pubs__status {
  margin-block-start: var(--space-4);
  color: var(--c-ink-soft);
}

.acts__head,
.top-pubs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.acts__all,
.top-pubs__all {
  font-weight: 700;
}

/* ---------- D. Our activities ----------
   Heading and "All activities" on one line; four photo cards, one per kind of activity, each
   linking to its section on the Activities page. A label on the photo, then the title, one
   sentence and a line with a tick. Four across on desktop, two on tablets, one on phones. The
   whole card is the link; the photo zooms slightly and the card lifts on hover. */
.act-cards {
  display: grid;
  gap: var(--space-5);
  max-inline-size: none;
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .act-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .act-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.act-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition:
    translate 200ms ease,
    box-shadow 200ms ease;
}

.act-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-photo);
}

.act-card__photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--c-dawn);
}

.act-card__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 500ms ease;
}

.act-card:hover .act-card__photo img {
  scale: 1.05;
}

/* Label on the photo, top left */
.act-card__tag {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  color: var(--c-emerald);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.act-card__tag .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--c-brass-text);
}

.act-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.act-card h3 {
  font-size: 1.125rem;
  line-height: 1.35;
}

/* The title link covers the whole card; underline only on hover */
.act-card h3 a {
  color: var(--c-ink);
  text-decoration: none;
}

.act-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.act-card:hover h3 a {
  color: var(--c-emerald);
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-underline-offset: 3px;
}

.act-card h3 a:focus-visible {
  outline: none;
}

.act-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.act-card__body > p {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.act-card__body > .act-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--c-rule);
  color: var(--c-emerald);
  font-weight: 700;
}

.act-card__meta .icon {
  color: var(--c-brass-text);
}