/* Home page only: hero slider, top publications, our activities and sponsors. 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 */
/* Slide 1 (the RHSGP introduction): the organisation's name above the headline, with a short
   olive bar before it */
.hero-brandline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  color: var(--c-emerald);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
}

/* "(RHSGP)" after the name: no dotted abbreviation underline */
.hero-brandline abbr {
  text-decoration: none;
}

.hero-brandline::before {
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-brass);
}

/* Slide 1 art: the logo, large and flat in the centre (only white inside its own olive ring,
   since its centre is transparent; no shadow), with eight small 3D icons in the style of the
   other slides evenly around it: blood drop, glucose meter, insulin pen, flask, DNA, chart,
   crescent, Kaaba (assets/images/hero/intro/, cut from intro-3d-*; their background is the page
   cream). The icons float gently, each on its own beat, and pop in when the slide comes up. */
.hero-intro__logo {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 52%;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.hero-intro__logo::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background: var(--c-logo-plate);
}

.hero-slider .hero-intro img {
  -webkit-mask: none;
  mask: none;
  animation: none;
}

.hero-slider .hero-intro__logo img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.hero-intro__icons {
  position: absolute;
  inset: 0;
}

.hero-intro__icon--1 { --x: 65.3%; --y: 13.0%; --i: 0; }
.hero-intro__icon--2 { --x: 87.0%; --y: 34.7%; --i: 1; }
.hero-intro__icon--3 { --x: 87.0%; --y: 65.3%; --i: 2; }
.hero-intro__icon--4 { --x: 65.3%; --y: 87.0%; --i: 3; }
.hero-intro__icon--5 { --x: 34.7%; --y: 87.0%; --i: 4; }
.hero-intro__icon--6 { --x: 13.0%; --y: 65.3%; --i: 5; }
.hero-intro__icon--7 { --x: 13.0%; --y: 34.7%; --i: 6; }
.hero-intro__icon--8 { --x: 34.7%; --y: 13.0%; --i: 7; }

/* Round fade, so each icon's square of cream (and any corner of a neighbour) disappears */
.hero-slider .hero-intro img.hero-intro__icon {
  position: absolute;
  inset: var(--y) auto auto var(--x);
  inline-size: 17%;
  block-size: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(closest-side, black 72%, transparent);
  mask: radial-gradient(closest-side, black 72%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slider .hero-intro img.hero-intro__icon {
    animation: intro-bob 4s ease-in-out calc(var(--i) * -0.55s) infinite alternate;
  }

  .hero-slider.is-ready .hero-intro__icon {
    opacity: 0;
    scale: 0.5;
    transition: opacity 200ms ease, scale 200ms ease;
  }

  .hero-slider.is-ready .is-active .hero-intro__icon {
    opacity: 1;
    scale: 1;
    transition:
      opacity 400ms ease calc(300ms + var(--i) * 90ms),
      scale 600ms cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(300ms + var(--i) * 90ms);
  }
}

@keyframes intro-bob {
  from {
    translate: -50% -50%;
  }

  to {
    translate: -50% calc(-50% - 8px);
  }
}

/* Headline: Poppins Bold 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-head);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  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;
  }

  /* Centred: the name sits on its own, without the bar before it */
  .hero-brandline {
    display: block;
  }

  .hero-brandline::before {
    display: none;
  }

  .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 and illustration fade out quickly, then the new ones fade in.
   They never show together at full strength, so slide 1's art (a logo and icons with page
   showing between them) never has another slide's render showing through it. */
.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 300ms ease;
}

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

@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-brandline { --d: 100ms; }
  .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.96;
    transition: opacity 300ms ease, scale 300ms ease;
  }

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

  .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;
  }
}

/* ---------- B2. Focus areas ----------
   Warm cream band (the hero's cream) with a faint lattice. A centred heading block (label,
   heading with its second part in olive, a star rule) above four white cards; each card has its 3D icon on a soft cream panel at the top, then the name, one
   sentence and a link line. The whole card is clickable; on hover it lifts, the icon grows a
   little and the link's arrow moves. Desktop: the four cards in one row. Tablets: two by two.
   Phones: one column. */
.focus {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-cream);
}

.focus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-emerald);
  opacity: 0.05;
  -webkit-mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
  mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
  pointer-events: none;
}

.focus__layout {
  display: grid;
  gap: var(--space-6);
}

.focus__intro {
  display: grid;
  justify-items: center;
  max-inline-size: 36rem;
  margin-inline: auto;
  text-align: center;
}

/* The label pill aligns itself to the start by default (components.css): centre it here */
.focus__intro .label-pill {
  justify-self: center;
}

.focus__intro h2 {
  margin-block-start: var(--space-4);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

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

.focus__rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 9rem;
  margin-block: var(--space-4);
}

.focus__rule::before,
.focus__rule::after {
  content: "";
  flex: 1;
  block-size: 2px;
  border-radius: var(--radius-pill);
}

.focus__rule::before {
  background: linear-gradient(to left, var(--c-brass), transparent);
}

.focus__rule::after {
  background: linear-gradient(to right, var(--c-brass), transparent);
}

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

/* Cards */
.focus-cards {
  display: grid;
  gap: var(--space-4);
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.focus-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 250ms ease,
    box-shadow 250ms ease;
}

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

/* 3D icon on a soft cream panel; its edges fade into the panel */
.focus-card__art {
  display: grid;
  place-items: center;
  margin: var(--space-3) var(--space-3) 0;
  padding-block: var(--space-2);
  border-radius: calc(var(--radius-l) - 14px);
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--c-emerald) 8%, var(--c-cream)), var(--c-cream));
}

.focus-card__art img {
  inline-size: 9rem;
  block-size: auto;
  aspect-ratio: 1;
  -webkit-mask: radial-gradient(closest-side, black 70%, transparent);
  mask: radial-gradient(closest-side, black 70%, transparent);
  transition: scale 350ms ease;
}

.focus-card:hover .focus-card__art img {
  scale: 1.08;
}

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

.focus-card h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.focus-card p {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* The link line; its ::after covers the whole card */
.focus-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  color: var(--c-emerald);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}

.focus-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.focus-card__link .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  transition: translate 250ms ease;
}

.focus-card:hover .focus-card__link {
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-underline-offset: 3px;
}

.focus-card:hover .focus-card__link .icon {
  translate: 3px 0;
}

.focus-card__link:focus-visible {
  outline: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .focus-card:hover {
    translate: none;
  }

  .focus-card:hover .focus-card__art img {
    scale: none;
  }
}

/* From 1024px (desktop) the four cards sit in one row under the centred heading; on tablets
   two by two, on phones one column. */
@media (min-width: 1024px) {
  .focus-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .focus-card__art img {
    inline-size: 7.5rem;
  }

  .focus-card__body {
    padding: var(--space-4);
  }

  .focus-card h3 {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1100px) {
  .focus__layout {
    gap: var(--space-6);
  }

  .focus__rule {
    margin-block-end: 0;
  }

  .focus-card__art img {
    inline-size: 8.5rem;
  }

  .focus-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
}

/* ---------- 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);
}

/* ---------- F. Sponsors ----------
   Centred heading (the focus areas' style), then the logos on white plates in one row that
   slides slowly to the left and loops, fading out at both edges; it holds still under the
   pointer. home.js adds a second copy of the list (hidden from screen readers) and the
   is-ready class. Without the script, or when the visitor prefers reduced motion, the logos sit
   in centred rows. Each logo image is 320 x 128 with its own white margin; shown at 180 x 72,
   140 x 56 on phones. */
.sponsors {
  padding-block: var(--space-2) var(--space-8);
}

.sponsors__intro h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
}

.sponsors__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-inline-size: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}

.sponsor {
  flex: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-m);
  background: var(--c-logo-plate);
  box-shadow: var(--shadow-raise);
}

.sponsor img {
  display: block;
  inline-size: 140px;
  block-size: 56px;
}

@media (min-width: 768px) {
  .sponsor img {
    inline-size: 180px;
    block-size: 72px;
  }
}

/* The copy home.js adds is only for the moving row */
.sponsor[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sponsors__viewport.is-ready {
    overflow: hidden;
    padding-block: var(--space-3);
    -webkit-mask: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  /* Every logo carries its own right margin (no gap), so one copy of the list is exactly half
     the track and moving by -50% loops without a jump. */
  .is-ready .sponsors__track {
    flex-wrap: nowrap;
    gap: 0;
    inline-size: max-content;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    animation: sponsors-slide 70s linear infinite;
  }

  .is-ready .sponsor {
    margin-inline-end: var(--space-5);
  }

  .is-ready .sponsor[aria-hidden="true"] {
    display: block;
  }

  .sponsors__viewport.is-ready:hover .sponsors__track {
    animation-play-state: paused;
  }
}

@keyframes sponsors-slide {
  to {
    translate: -50% 0;
  }
}