/* --------------------------------------------------------------------------
 * Home
 * --------------------------------------------------------------------------
 * The one page most visitors see first, and the only one written to be read
 * rather than used. Everything here is layout — no new colours, no new
 * shadows, nothing that could drift from the design tokens the rest of the app
 * shares.
 *
 * Logical properties throughout, so the whole page mirrors for Urdu without a
 * second stylesheet.
 * ----------------------------------------------------------------------- */

/* The pill, the section title and the section head USED TO LIVE HERE and now
   live in shared/assets/css/layout.css: the public directories borrow all
   three, and a class three pages outside this file depend on is not this
   page's class any more. */

/* --------------------------------------------------------------------------
 * The hero
 * --------------------------------------------------------------------------
 * A dark rounded panel rather than a full-bleed band. Full bleed would mean
 * breaking out of .container with a 100vw trick, which is wrong twice over
 * here: this page can also render inside the app shell, where the sidebar has
 * already taken part of the window, and a viewport-width child of a padded
 * column overflows it on every platform that reserves space for a scrollbar.
 * The panel gets the same effect and cannot break the layout it sits in.
 * ----------------------------------------------------------------------- */

.hero-band {
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(66, 170, 151, 0.35), transparent 60%),
    linear-gradient(160deg, var(--panel), var(--panel-deep));
  color: var(--panel-ink);
  overflow: hidden;
}

.hero-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8);
}

.hero-band__title {
  /* base.css gives every heading --ink, which is the ink for a light
     surface and all but invisible on this one. */
  color: var(--panel-ink);
  margin-block: var(--sp-4) 0;
  /* clamp() rather than breakpoints: the title should shrink smoothly on a
     narrow phone instead of jumping at an arbitrary width. */
  font-size: clamp(1.875rem, 3.4vw + 1rem, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  max-inline-size: 16ch;
}

.hero-band__sub {
  margin-block-start: var(--sp-4);
  max-inline-size: 48ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  /* Not --ink-soft: that token is a grey for light surfaces and turns to mud
     on this one. */
  color: var(--panel-ink-soft);
}

.hero-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

/* The second action is an outline on the dark ground: a second filled button
   would compete with the one action this page actually wants. */
.hero-band .btn.hero-band__ghost {
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--panel-ink);
}

.hero-band .btn.hero-band__ghost:hover {
  background: var(--panel-line-hover);
  color: var(--panel-ink);
}

/* -- the proof line -------------------------------------------------------
 * Three real photographs and the real count. See the note in home.php for why
 * there is no star rating here.                                             */

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

.hero-proof__faces {
  display: flex;
  flex: none;
}

/* Overlapped, and each one ringed in the panel's own colour so the stack reads
   as a group rather than as three circles that collided. */
.hero-proof__faces .avatar {
  border: 2px solid var(--panel);
}

.hero-proof__faces .avatar + .avatar {
  margin-inline-start: -12px;
}

.hero-proof__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--panel-ink-soft);
  max-inline-size: 24ch;
}

.hero-proof__count {
  display: inline-block;
  margin-inline-end: 2px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--panel-ink);
  font-variant-numeric: tabular-nums;
}

/* -- the artwork and the badge on it -------------------------------------- */

.hero-band__art {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-inline-size: 0;
}

.hero-band__art::before {
  /* A soft halo behind the rail. Purely light, so it costs no image and cannot
     fail to load. */
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(114, 199, 182, 0.28), transparent 70%);
  filter: blur(28px);
}

/* -- the rail --------------------------------------------------------------
 * Two columns of artwork sliding past each other, one up and one down. The
 * mechanics are the face strip's, turned ninety degrees: each column holds its
 * tiles TWICE and travels exactly half its own height, so the moment the first
 * copy has passed the second is where the first began and the loop has no
 * seam. translate3d keeps both columns on the compositor.
 *
 * The frame is masked top and bottom rather than cut, so a tile fades out of
 * the hero instead of being sliced off by a hard edge.
 * ----------------------------------------------------------------------- */

.hero-rail {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  inline-size: 100%;
  max-inline-size: 34rem;
  /* Taller than it is wide, which is what makes a vertical drift read as
     movement rather than as a picture that will not sit still. */
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-xl);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.hero-rail__col {
  flex: 1 1 0;
  min-inline-size: 0;
}

.hero-rail__track {
  display: grid;
  gap: var(--sp-3);

  /* Time proportional to the number of tiles, so one column of four and one of
     five travel at the same speed rather than the shorter one racing. */
  animation: hero-rail-drift calc(var(--rail-count, 4) * 4s) linear infinite;
}

.hero-rail__col--reverse .hero-rail__track {
  animation-direction: reverse;
}

@keyframes hero-rail-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.hero-rail__tile {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  background-size: cover;
  background-color: var(--panel-deep);
  box-shadow: var(--sh-3);
}

/* Movement is the decoration, not the content: with it off the rail is simply
   a panel of pictures, which is what it was going to be anyway. */
@media (prefers-reduced-motion: reduce) {
  .hero-rail__track { animation: none; }
}

@media (max-width: 60rem) {
  .hero-band__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-6);
  }

  /* The artwork goes UNDER the words on a phone rather than above them: the
     sentence is what the visitor came for, and a picture at the top pushes it
     off the first screen. */
  .hero-band__art { order: 2; }

  /* Shallower on a phone: a 5:4 frame the width of the screen is most of the
     first scroll, and the words above it are what the visitor came for. */
  .hero-rail { aspect-ratio: 16 / 11; }
}

/* --------------------------------------------------------------------------
 * The feature row — one picture, three doors, on a dark panel
 * ----------------------------------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--sp-3);
}

.feature-shot {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 12rem;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--panel-ink);
  text-decoration: none;
}

.feature-shot__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease);
}

/* The picture is dimmed by a gradient rather than by opacity, so the words at
   the bottom stay legible whatever the photograph happens to be. */
.feature-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--panel-scrim), var(--panel-scrim-soft));
}

.feature-shot__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-1);
}

.feature-shot__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.feature-shot__more {
  font-size: var(--fs-sm);
  color: var(--panel-accent);
}

.feature-shot:hover .feature-shot__art { transform: scale(1.05); }

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.feature-card {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  color: var(--panel-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.feature-card:hover { background: var(--panel-line-hover); }

.feature-card__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.feature-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--panel-ink-faint);
}

/* The two tints of the icon tile this page adds: bright on a dark card, and
   quiet on a white one. The base .icon-tile in base.css is neither. */
.icon-tile--accent {
  background: var(--panel-accent);
  color: var(--panel);
}

.icon-tile--soft {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

@media (max-width: 60rem) {
  .feature-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
 * The about split — picture beside the four claims
 * ----------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--sp-8);
}

.about-split__image {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background-size: cover;
  background-position: center;
}

.about-claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-5);
}

.about-claim {
  display: grid;
  gap: var(--sp-2);
}

.about-claim__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.about-claim__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

.about-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  padding-block: var(--sp-3);
  padding-inline: var(--sp-5) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--panel);
  color: var(--panel-ink);
}

.about-strip__icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--panel-accent);
}

.about-strip__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-sm);
}

@media (max-width: 60rem) {
  .about-split { grid-template-columns: minmax(0, 1fr); }
  .about-strip { border-radius: var(--r-lg); }
}

/* --------------------------------------------------------------------------
 * The stat row
 * --------------------------------------------------------------------------
 * A rule above each figure rather than a box around it: four bordered cards
 * would read as four more links on a page that already has plenty, and these
 * are not clickable.
 * ----------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-5);
}

.stat-cell {
  display: grid;
  gap: var(--sp-2);
  padding-block-start: var(--sp-4);
  border-block-start: 3px solid var(--border);
}

.stat-cell:first-child { border-block-start-color: var(--brand); }

.stat-cell__value {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-cell__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  max-inline-size: 26ch;
}

/* --------------------------------------------------------------------------
 * Sections
 * ----------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * THE RHYTHM BETWEEN SECTIONS
 * --------------------------------------------------------------------------
 * One custom property, read by every band on the page — .home-section, the
 * feature row and the employers band all take their top margin from it. That
 * is deliberate: with three literals instead, the gaps drift apart the first
 * time one of them is tuned, and a landing page whose sections are 32, 40 and
 * 64px apart reads as an accident even when nobody can say why.
 * ----------------------------------------------------------------------- */

.hero-band,
.home-section,
.feature-row,
.home-band {
  --home-rhythm: var(--sp-16);
  margin-block-start: var(--home-rhythm);
}

/* The hero is the top of the page; its margin would be a gap under the
   header and nothing else. */
.hero-band { margin-block-start: 0; }

/* The strip belongs TO the hero — it is the faces of the people the sentence
   above it is about — so it keeps the closer gap. */
.faces { --home-rhythm: var(--sp-10); }

@media (max-width: 60rem) {
  .hero-band,
  .home-section,
  .feature-row,
  .home-band { --home-rhythm: var(--sp-12); }
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}

.home-section__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-block-end: var(--sp-5);
}

.home-section__head .home-section__title { margin-block-end: 0; }

/* --------------------------------------------------------------------------
 * The doors — one card per public listing
 * ----------------------------------------------------------------------- */

.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

/*
 * A DOOR IS A COLUMN NOW, not a row: picture on top where the module owns one,
 * and the label block underneath. The picture is a modifier because three of
 * the doors (courses, events, the needs board) belong to no module and have no
 * artwork of their own — and a card with a grey rectangle where the others
 * have a photograph looks broken rather than plain.
 */
.door {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.door:hover {
  border-color: var(--brand-border);
  box-shadow: var(--sh-3);
}

/*
 * THE PICTURE IS THE CARD, not a strip along the top of it.
 *
 * It used to be a 10rem band with the label block underneath, which made
 * every card two things stacked — a photograph, then a panel — and left the
 * cards with short labels shorter than the cards with long ones. Filling the
 * card and floating the label ON it is one object instead of two, and every
 * card in the row is the same height whatever its label says.
 *
 * Absolute rather than a background on .door itself: the picture has to be
 * able to scale on hover without dragging the label with it, and a
 * background cannot be transformed on its own.
 */
.door__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease);
}

/*
 * A scrim under the label, because the label's own panel is opaque but its
 * rounded corners are not — without this the four corners of the panel sit
 * on whatever the photograph happens to be, and on a bright picture they
 * read as damage.
 */
.door--art::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 60%;
  background: linear-gradient(to top, var(--panel-scrim), transparent);
  pointer-events: none;
}

.door:hover .door__art { transform: scale(1.04); }

.door__body {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

/*
 * The label floats ON the picture, at the foot of the card. Pushed there by
 * margin-block-start:auto rather than positioned, so a two-line label and a
 * four-line one both sit against the bottom and the panels line up across a
 * row however much each of them says.
 */
.door--art {
  position: relative;

  /* Room for the photograph to be a photograph. Without a floor the card is
     only as tall as its label, and an absolutely-positioned picture has no
     height of its own to give it. */
  min-block-size: 17rem;
}

.door--art .door__body {
  position: relative;
  z-index: 1;
  margin-block-start: auto;
  margin-inline: var(--sp-3);
  margin-block-end: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--panel-ink);
}

.door--art .door__text { color: var(--panel-ink-soft); }
.door--art .door__stat { color: var(--panel-accent); }

.door__label {
  display: block;
  font-weight: var(--fw-semibold);
}

.door__text {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* The count, shown only when it is worth showing — see stat() in home.php. */
.door__stat {
  flex: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * How it works
 * ----------------------------------------------------------------------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.step {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.step__number {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: var(--fw-bold);
}

.step__title { font-weight: var(--fw-semibold); }

.step__text {
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

.home-cta {
  margin-block-start: var(--sp-6);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .door { transition: none; }
}

/* --------------------------------------------------------------------------
 * Why Silah, and the safety points — same shape, two lists
 * ----------------------------------------------------------------------- */

.why-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.why__title {
  margin-block: var(--sp-3) var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.why__text {
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
 * The employers band
 * --------------------------------------------------------------------------
 * The one block on the page that inverts, because it addresses a different
 * reader than everything around it and a heading alone would not signal the
 * change. It uses the brand surface token rather than a colour of its own, so
 * it follows the theme instead of fighting it.
 * ----------------------------------------------------------------------- */

.home-band {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--panel), var(--panel-deep));
  color: var(--panel-ink);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.home-band__title {
  /* Same reason as the hero title: base.css colours a heading for a light
     surface, and this band is no longer one. */
  color: var(--panel-ink);
  font-size: clamp(1.375rem, 1.5vw + 1rem, 1.875rem);
  font-weight: var(--fw-bold);
}

.home-band__sub {
  margin-block-start: var(--sp-2);
  max-inline-size: 52ch;
  color: var(--panel-ink-soft);
  line-height: var(--lh-normal);
}

.home-band__note {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--panel-ink-faint);
}

/* --------------------------------------------------------------------------
 * The FAQ teaser — <details>, so it works with scripting off
 * ----------------------------------------------------------------------- */

.faq-list {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.faq + .faq { border-block-start: 1px solid var(--border); }

.faq__q {
  padding: var(--sp-4);
  font-weight: var(--fw-semibold);
  cursor: pointer;

  /* The default triangle is placed by the browser and does not mirror in RTL.
     list-style removes it; the marker below is drawn on the correct side by
     logical properties. */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '';
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-end: 2px solid var(--ink-muted);
  border-inline-end: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}

.faq__a p + p { margin-block-start: var(--sp-3); }

/* -- the face strip --------------------------------------------------------
 * Circular photographs of members who have published something, drifting
 * sideways above the doors. All of the motion is one animation on the track;
 * the markup holds the same links twice, so when the first copy has moved a
 * full half-width the second copy is exactly where the first started and the
 * reset is invisible.
 *
 * translate3d with a percentage keeps the whole thing on the compositor — no
 * layout is recalculated per frame, on a page that must stay cheap.
 * ----------------------------------------------------------------------- */

.faces__viewport {
  /* The strip runs edge to edge inside the section, and the mask fades both
     rims so a face is never cut in half by a hard border. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.faces__viewport::-webkit-scrollbar { display: none; }

.faces__track {
  display: flex;
  gap: var(--sp-5);
  inline-size: max-content;
  padding-block: var(--sp-2);
  list-style: none;
  margin: 0;

  /* Time proportional to the number of people, so the strip moves at one
     speed whether there are eight members or forty. */
  animation: faces-drift calc(var(--faces-count, 12) * 2.5s) linear infinite;
}

/* Always leftward in visual terms, in both directions of text: the track is
   laid out by the flow, so a plain negative-X translate follows it. */
@keyframes faces-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

[dir="rtl"] .faces__track {
  animation-name: faces-drift-rtl;
}

@keyframes faces-drift-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}

/* Reading a name means stopping the row first. Hover and keyboard focus both
   pause it — a link you cannot click is not a link. */
.faces__viewport:hover .faces__track,
.faces__track:focus-within {
  animation-play-state: paused;
}

.faces__item { flex: 0 0 auto; }

.faces__link {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  inline-size: 5.5rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.faces__link .avatar {
  border: 2px solid var(--surface);
  box-shadow: var(--sh-2);
  transition: transform var(--dur-base) var(--ease);
}

.faces__link:hover .avatar,
.faces__link:focus-visible .avatar {
  transform: scale(1.06);
}

.faces__name {
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  text-align: center;

  /* One line, cut cleanly: a long name must not widen its own cell and make
     the track's half-width unpredictable. */
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Motion is the decoration, not the content — with it off the strip is a row
   the reader scrolls themselves. */
@media (prefers-reduced-motion: reduce) {
  .faces__track { animation: none; }
}