/* ===========================================================================
   slider.css — the one carousel in the theme (Wave 3)
   ---------------------------------------------------------------------------
   Loaded only on pages that actually render a slider (inc/enqueue.php).
   Deliberately a separate file rather than an addition to components.css so a
   site that never uses a slider never pays for it, and so this feature can be
   reviewed, reverted or re-themed on its own.

   The two states that matter
   --------------------------
   1. No JavaScript (no [data-akwo-slider-ready]): the track is a plain block.
      Every slide is stacked, visible and readable; the controls stay `hidden`.
      This is the state a search engine, a text browser and a failed script all
      get, and it is complete.
   2. Enhanced ([data-akwo-slider-ready]): the track becomes a scroll-snapping
      flex row. Nothing is hidden, nothing is aria-hidden, nothing leaves the
      tab order — the off-screen slides are simply scrolled out of view.

   Because the track keeps the height of its tallest slide in both states,
   paging never moves anything below it. A slider here is not a CLS source.
   =========================================================================== */

.akwo-slider {
  /* `--akwo-per-view-max` is written inline by the renderer (the most slides
     this caller ever wants side by side). `--akwo-per-view` is the effective
     number at this breakpoint, and it is only ever set here — an inline
     custom property outranks every media query, so the renderer must not be
     the one to decide it. */
  --akwo-per-view-max: 1;
  --akwo-per-view: var(--akwo-per-view-max);
  --akwo-slider-gap: var(--akwo-space-4);
  position: relative;
}

/* --- 1. The no-JS state ---------------------------------------------------
   Stacked slides, spaced like any other vertical rhythm. */
.akwo-slider__track > .akwo-slider__slide + .akwo-slider__slide {
  margin-top: var(--akwo-space-6);
}

/* --- 2. The enhanced state ------------------------------------------------
   Gated on `html[data-akwo-js]`, which inc/enqueue.php stamps from a four-line
   inline script in <head>, NOT on `[data-akwo-slider-ready]`, which slider.js
   sets after the deferred module has run. The difference is 0.09 of CLS: with
   the ready-flag gate the browser painted four stacked hero photographs and
   then collapsed them into one row. The ready flag still gates the controls
   and is still the module's own record that it wired this slider up.
   ------------------------------------------------------------------------- */
[data-akwo-js] .akwo-slider .akwo-slider__viewport {
  position: relative;
}

[data-akwo-js] .akwo-slider .akwo-slider__track {
  display: flex;
  gap: var(--akwo-slider-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* The scrollbar is redundant next to the dots and the arrows, and on macOS
     it overlays the bottom of the photograph. The track is still scrollable by
     wheel, trackpad, touch, keyboard and the buttons. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-akwo-js] .akwo-slider .akwo-slider__track::-webkit-scrollbar { display: none; }

[data-akwo-js] .akwo-slider .akwo-slider__slide {
  flex: 0 0 calc((100% - (var(--akwo-per-view) - 1) * var(--akwo-slider-gap)) / var(--akwo-per-view));
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin-top: 0;
}

/* The focus ring belongs on the track, which is the thing that scrolls. */
.akwo-slider__track:focus-visible {
  outline: 3px solid var(--akwo-focus);
  outline-offset: 4px;
  border-radius: var(--akwo-radius-image);
}

@media (prefers-reduced-motion: reduce) {
  [data-akwo-js] .akwo-slider .akwo-slider__track { scroll-behavior: auto; }
}

/* --- 3. Controls ---------------------------------------------------------- */

.akwo-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--akwo-space-3);
  margin-top: var(--akwo-space-5);
  flex-wrap: wrap;
}
.akwo-slider__controls[hidden] { display: none; }
/* With JS available the controls are coming, so their row is reserved from
   first paint. `visibility: hidden` keeps them out of the accessibility tree
   and out of the tab order until slider.js drops the `hidden` attribute, and
   unlike `display: none` it does not make the page jump when they appear. */
[data-akwo-js] .akwo-slider__controls[hidden] { display: flex; visibility: hidden; }

.akwo-slider__middle {
  display: flex;
  align-items: center;
  gap: var(--akwo-space-3);
}

.akwo-slider__btn,
.akwo-slider__play {
  /* 44px is the minimum target the baseline audit kept failing on; these are
     new controls, so they start at 44. */
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--akwo-border);
  border-radius: var(--akwo-radius-pill);
  background: var(--akwo-white);
  color: var(--akwo-green-900);
  cursor: pointer;
  transition: background var(--akwo-dur-hover) var(--akwo-ease),
              border-color var(--akwo-dur-hover) var(--akwo-ease),
              transform var(--akwo-dur-hover) var(--akwo-ease);
}
.akwo-slider__btn:hover,
.akwo-slider__play:hover {
  background: var(--akwo-green-100);
  border-color: var(--akwo-green-500);
}
.akwo-slider__btn:active,
.akwo-slider__play:active { transform: scale(0.94); }

/* aria-disabled, not disabled: the button keeps focus and keeps its name, it
   simply reads as unavailable and looks it. */
.akwo-slider__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.akwo-slider__btn[aria-disabled="true"]:hover {
  background: var(--akwo-white);
  border-color: var(--akwo-border);
}

.akwo-slider__btn .akwo-icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

/* Dots carry their number: an indicator you can read beats one you have to
   count. They stay circular and 44px-tall for the target size. */
.akwo-slider__dots {
  display: flex;
  align-items: center;
  gap: var(--akwo-space-1);
}
.akwo-slider__dot {
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--akwo-muted);
}
.akwo-slider__dot-mark {
  inline-size: 26px;
  block-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--akwo-radius-pill);
  border: 1px solid var(--akwo-border);
  background: var(--akwo-white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--akwo-dur-hover) var(--akwo-ease),
              color var(--akwo-dur-hover) var(--akwo-ease),
              border-color var(--akwo-dur-hover) var(--akwo-ease);
}
.akwo-slider__dot:hover .akwo-slider__dot-mark { border-color: var(--akwo-green-500); }
.akwo-slider__dot[aria-current="true"] .akwo-slider__dot-mark {
  background: var(--akwo-green-900);
  border-color: var(--akwo-green-900);
  color: var(--akwo-white);
}

.akwo-slider__count {
  margin: 0;
  font-size: var(--akwo-size-small, 0.9375rem);
  font-variant-numeric: tabular-nums;
  color: var(--akwo-muted);
}
/* With dots present the numeric readout is duplication; it exists for the long
   galleries where the dots are suppressed. */
.akwo-slider__dots + .akwo-slider__count { display: none; }

.akwo-slider__play .akwo-slider__glyph {
  display: inline-flex;
  inline-size: 1.05rem;
  block-size: 1.05rem;
}
.akwo-slider__play svg { inline-size: 100%; block-size: 100%; fill: currentColor; }
.akwo-slider__play .akwo-slider__play-icon { display: none; }
.akwo-slider__play.is-paused .akwo-slider__pause-icon { display: none; }
.akwo-slider__play.is-paused .akwo-slider__play-icon { display: inline; }

/* --- 4. Hero --------------------------------------------------------------
   Client review, 2026-09-16. Four things were asked for and all four are
   scoped to `.akwo-hero--slides`, the class only a slideshow hero carries, so
   nothing here can reach the 39 other heroes on the site:

     1. the whole hero inside one viewport, no scrolling
     2. clean photographs — no grain, tint, gradient or wedge on a slide
     3. the controls never colliding with the "This Friday" card
     4. minimal indicators, or none when the cluster carries "1 / 4"
   ------------------------------------------------------------------------- */

.akwo-hero--slides {
  /* The photograph's height is a named value because three other rules key off
     it: the caption sits under it, the floating card hangs off its bottom
     edge, and the control cluster sits inside its top-right corner. */
  --akwo-hero-photo-h: min(50vh, 440px);

  /* 1. The hero has to end above the fold, so it gives back the padding it was
        spending on the stat ledge (which is allowed to stay below the fold). */
  padding-block: clamp(0.75rem, 1.6vw, 1.25rem) clamp(0.875rem, 1.8vw, 1.25rem);
}
.akwo-hero--slides .akwo-hero__grid { gap: clamp(1.25rem, 2.8vw, 2.5rem); }
.akwo-hero--slides .akwo-hero__h1 { margin-bottom: var(--akwo-space-3); }
.akwo-hero--slides .akwo-hero__lede { margin-block: 0; }
.akwo-hero--slides .akwo-hero__buttons { margin-top: var(--akwo-space-4); }
/* Tighter than the display token, because every pixel of h1 leading is a
   pixel the fold does not have. Latin only: Bengali matras sit above and below
   the baseline and a leading of 1 collides them, so Bengali keeps its own
   token. `:lang()` rather than `[lang]` so it inherits to the whole Bengali
   tree even where the attribute is on an ancestor. */
.akwo-hero--slides .akwo-hero__h1 { line-height: 1; }
.akwo-hero--slides .akwo-hero__h1:lang(bn),
[lang="bn"] .akwo-hero--slides .akwo-hero__h1,
.akwo-hero--slides .akwo-hero__h1[lang="bn"] {
  line-height: var(--akwo-lh-bn-display, 1.3);
}
.akwo-hero--slides .akwo-hero__lede:lang(bn),
[lang="bn"] .akwo-hero--slides .akwo-hero__lede,
.akwo-hero--slides .akwo-hero__lede[lang="bn"] {
  line-height: var(--akwo-lh-bn, 1.75);
}
.akwo-hero--slides .akwo-hero__caption:lang(bn),
[lang="bn"] .akwo-hero--slides .akwo-hero__caption {
  line-height: var(--akwo-lh-bn, 1.75);
}
.akwo-hero--slides .akwo-hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}
.akwo-hero--slides .akwo-hero__trust {
  margin-top: var(--akwo-space-4);
  padding-top: var(--akwo-space-3);
  gap: var(--akwo-space-3);
}
/* The certification seals are capped at 56px by components.css, but the site
   inlines its stylesheets and Elementor's `.elementor img { height: auto }`
   has the same specificity and is printed later, so the seals were painting at
   their intrinsic 135px — 158px of hero height spent on two logos, which is
   most of the reason the hero would not fit a 900px viewport. This selector is
   specific enough to win, and it reads `--akwo-seal-h` first so the design
   system stays in charge of the number if it defines one. Scoped to the
   slideshow hero: the rest of the site is untouched. */
.akwo-hero--slides .akwo-hero__trust .akwo-hero__seals img {
  height: var(--akwo-seal-h, 44px);
  width: auto;
}

/* 2. Clean photographs. The 3% grain ::before is not emitted on a slide at all
      (inc/render/sections.php passes $grain = false); this is the belt to that
      brace, and it also kills any wedge or scrim that might reach a slide. */
.akwo-hero--slides .akwo-hero__main::before,
.akwo-hero--slides .akwo-hero__main::after,
.akwo-hero--slides .akwo-slider__slide::before,
.akwo-hero--slides .akwo-slider__slide::after { content: none !important; }
.akwo-hero--slides .akwo-hero__scrim { display: none; }

/* 1. A fixed photograph height, so every slide is the same height, the hero
      has a known total, and a portrait and a landscape source crop to the same
      frame instead of the hero jumping between 4:5 and 3:2. */
.akwo-hero--slides .akwo-hero__stack { padding-bottom: 0; }
.akwo-hero--slides .akwo-hero__main img {
  aspect-ratio: auto;
  height: var(--akwo-hero-photo-h);
  width: 100%;
  object-fit: cover;
}
.akwo-hero__media--slider .akwo-slider { width: 100%; }

/* The caption shares its row with the floating card, which hangs over the
   bottom-left corner of the photograph, so on the home composition it takes
   the right-hand end of the row instead of disappearing behind the card. */
.akwo-hero--slides.akwo-hero--home .akwo-hero__caption {
  padding-inline-start: min(17.5rem, 50%);
  text-align: right;
}
.akwo-hero__caption {
  margin: var(--akwo-space-3) 0 0;
  font-size: var(--akwo-size-small, 0.9375rem);
  color: var(--akwo-muted);
  /* Every slide reserves the same caption band whether it has a caption or
     not, so paging cannot change the hero's height. */
  min-height: 2.25rem;
  max-width: 34rem;
}

/* 3. The control cluster: inside the photograph, top right, diagonally opposite
      the floating card in the bottom left. It is positioned against
      `.akwo-slider`, whose box is the track — that is, the photograph — so it
      cannot drift onto the caption or the card however long either gets. */
.akwo-hero--slides .akwo-slider__controls {
  position: absolute;
  /* Inside the photograph's BOTTOM right, not the top right. The top-right
     corner of a photograph of a crowd is where heads are — on three of the
     four Home slides the cluster sat over somebody's face. The bottom edge is
     torsos, hands, sacks and a blood-pressure cuff on all four. Anchored off
     the known photograph height rather than off the slider's own bottom, so
     it stays inside the picture and leaves the caption row below it clear. It
     costs the same nothing in height as the top corner did. */
  top: calc(var(--akwo-hero-photo-h) - 3.5rem);
  right: var(--akwo-space-3);
  bottom: auto;
  z-index: 6;
  margin: 0;
  gap: var(--akwo-space-1);
  padding: 4px;
  border-radius: var(--akwo-radius-pill);
  background: rgb(255 255 255 / .94);
  box-shadow: 0 2px 10px rgb(15 61 46 / .18);
  flex-wrap: nowrap;
}
.akwo-hero--slides .akwo-slider__btn,
.akwo-hero--slides .akwo-slider__play {
  inline-size: 40px;
  block-size: 40px;
  border-color: transparent;
  background: transparent;
}
.akwo-hero--slides .akwo-slider__btn:hover,
.akwo-hero--slides .akwo-slider__play:hover { background: var(--akwo-green-100); }

/* 4. The indicator is the cluster's own readout, not a row of dots. */
.akwo-hero--slides .akwo-slider__middle { gap: 0; }
.akwo-hero--slides .akwo-slider__count {
  padding-inline: var(--akwo-space-2);
  color: var(--akwo-green-900);
  font-weight: 700;
  font-size: 0.8125rem;
}

/* 3. The card keeps the bottom-left corner. Anchored from the top against the
      known photograph height rather than from the bottom, because the caption
      band sits between the photograph and the bottom of the media column. */
.akwo-hero--slides.akwo-hero--home .akwo-hero__float {
  top: calc(var(--akwo-hero-photo-h) - 3.5rem);
  bottom: auto;
  left: 4%;
  right: auto;
  /* Never wide enough to reach the control cluster. 14.5rem is the cluster plus
     its inset plus a clear gap; at 1440 the 264px ceiling binds instead and
     the card is unchanged, but on a 1024x768 laptop the photograph column is
     443px and the percentage rule used to run the card straight into the
     arrows. */
  max-width: min(264px, calc(100% - 14.5rem));
}

/* A hero whose slides are whole compositions: each slide is a full grid, so
   the track has to be allowed the container's width. */
.akwo-slider--hero .akwo-hero__grid { width: 100%; }

/* --- 4a. The phone fold (client decision, 2026-09-16) ---------------------
   Two swaps, both server-rendered and switched here, so neither depends on
   JavaScript and exactly one copy of each is ever in the accessibility tree
   (`display: none` takes the other out of it entirely).

     · the registration line and seals leave the copy column below 600px and
       become a compact full-width band under the hero
     · a second, shorter lede replaces the long one below 600px

   Both second copies are emitted only on a slideshow hero, because this is the
   stylesheet that hides them and it only ships where a slider does.
   ------------------------------------------------------------------------- */

.akwo-hero__trust--below { display: none; }
.akwo-hero__lede--short { display: none; }

@media (max-width: 600px) {
  .akwo-hero--slides .akwo-hero__trust--inline { display: none; }
  .akwo-hero--slides .akwo-hero__lede:not(.akwo-hero__lede--short) { display: none; }
  .akwo-hero--slides .akwo-hero__lede--short { display: block; }

  .akwo-hero--slides .akwo-hero__trust--below {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--akwo-space-3);
    width: 100%;
    margin-top: var(--akwo-space-3);
    padding-top: var(--akwo-space-2);
    border-top: 1px solid var(--akwo-border);
  }
  /* Compact: the line and the seals share a row rather than stacking. */
  .akwo-hero--slides .akwo-hero__trust--below p {
    flex: 1 1 14rem;
    margin: 0;
    font-size: var(--akwo-size-caption, 0.8125rem);
    line-height: 1.4;
  }
  .akwo-hero--slides .akwo-hero__trust--below .akwo-hero__seals {
    display: flex;
    gap: var(--akwo-space-2);
    align-items: center;
  }
  .akwo-hero--slides .akwo-hero__trust--below .akwo-hero__seals img {
    height: var(--akwo-seal-h, 44px);
    width: auto;
  }
}

/* --- 4b. Short laptops ----------------------------------------------------
   A 1280x800 or 1536x864 screen is a laptop, so the hero is still the two-column
   composition, but there are 64-100 fewer pixels to put it in than the 900 the
   desktop layout was tuned against. Keyed on height rather than width, because
   that is the axis that is actually short. */
@media (min-width: 1024px) and (max-height: 880px) {
  .akwo-hero--slides {
    --akwo-hero-photo-h: min(38vh, 360px);
    padding-block: 0.375rem 0.75rem;
  }
  .akwo-hero--slides .akwo-hero__grid { gap: clamp(1rem, 2.4vw, 2rem); }
  .akwo-hero--slides .akwo-hero__buttons { margin-top: var(--akwo-space-3); }
  .akwo-hero--slides .akwo-hero__trust {
    margin-top: var(--akwo-space-3);
    padding-top: var(--akwo-space-2);
  }
  .akwo-hero--slides .akwo-hero__caption { min-height: 1.75rem; }
}

/* Below 820px of viewport height the copy column is what is over, not the
   photograph, so the laptop takes the short lede too. 1536x864 does not: it
   already fits, and a lede should only be shortened where the alternative is
   a hero that runs off the screen. */
@media (min-width: 1024px) and (max-height: 820px) {
  .akwo-hero--slides .akwo-hero__lede:not(.akwo-hero__lede--short) { display: none; }
  .akwo-hero--slides .akwo-hero__lede--short { display: block; }
}

/* Phone: the composition is already one column with the photograph under the
   copy. The card goes below the photograph and its caption, in the flow; the
   control cluster stays inside the photograph's top-right corner. */
@media (max-width: 900px) {
  /* 22vh, per the orchestrator's decision of 2026-09-16: after the short lede
     and the trust row moving below the hero, this is the last lever that does
     not take content off the page. It does not close the gap on its own — see
     the remaining delta in planning/qa/WAVE3-SYMLINK-SLIDER-REPORT.md §2.8. */
  .akwo-hero--slides {
    --akwo-hero-photo-h: min(20vh, 200px);
    /* The next section brings its own top padding, so the hero's own bottom
       padding is the cheapest 8px on the page. */
    padding-block: 0.375rem 0.25rem;
  }
  .akwo-hero--slides.akwo-hero--home .akwo-hero__float {
    position: static;
    top: auto;
    max-width: none;
    margin-top: var(--akwo-space-3);
  }
  /* Orchestrator decision, 2026-09-16: the clinic card comes out of the hero
     on a phone. It is the last 117 px between the hero and one screen, and it
     is the only thing in the hero that is said twice — the utility bar at the
     top of every page already carries "Free clinic every Friday 10:00–14:00",
     and the clinic band further down the Home page carries the venue, the
     hours, the doctors and what to bring. `display: none` rather than
     `visibility`, so it is out of the accessibility tree too and a screen
     reader is not read the same clinic three times. Desktop keeps the card. */
  .akwo-hero--slides.akwo-hero--home .akwo-hero__float { display: none; }
  .akwo-hero--slides .akwo-hero__grid { gap: var(--akwo-space-4); }

  /* The card is in the flow below the photograph on a phone, so the caption
     row is its own again. */
  .akwo-hero--slides .akwo-hero__caption { min-height: 0; }
  .akwo-hero--slides.akwo-hero--home .akwo-hero__caption {
    padding-inline-start: 0;
    text-align: start;
  }
  .akwo-hero--slides .akwo-slider__btn,
  .akwo-hero--slides .akwo-slider__play { inline-size: 38px; block-size: 38px; }
}

/* --- 5. Gallery ----------------------------------------------------------- */

.akwo-gallery--slider {
  display: block;
}
.akwo-gallery--slider .akwo-gallery__item {
  margin: 0;
  position: relative;
  border-radius: var(--akwo-radius-image);
  overflow: hidden;
}
/* Two up on a tablet, one and a bit on a phone: the sliver of the next
   photograph is the affordance that says the row scrolls. `min()` keeps a
   two-column gallery from being widened to three on a desktop. */
.akwo-slider--gallery { --akwo-per-view: min(3, var(--akwo-per-view-max)); }
@media (max-width: 1180px) {
  .akwo-slider--gallery { --akwo-per-view: min(2, var(--akwo-per-view-max)); }
}
@media (max-width: 640px) {
  .akwo-slider--gallery { --akwo-per-view: min(1.15, var(--akwo-per-view-max)); }
}

/* --- 6. Story cards ------------------------------------------------------- */

/* Cards are equal height in a row, so the slide has to stretch. */
.akwo-slider--stories .akwo-slider__slide { display: flex; }
.akwo-slider--stories .akwo-card { width: 100%; }
.akwo-storygrid--slider { display: block; }

/* Two and a bit, not three: a three-card row that shows all three cards is a
   grid with two dead arrows bolted on. The cut edge of the third card is the
   affordance that says the row moves, and it means Next always does something.
   min() keeps a two-story section from being stretched past its own count. */
.akwo-slider--stories { --akwo-per-view: min(2.4, var(--akwo-per-view-max)); }
@media (max-width: 1180px) {
  .akwo-slider--stories { --akwo-per-view: min(1.6, var(--akwo-per-view-max)); }
}
@media (max-width: 760px) {
  .akwo-slider--stories { --akwo-per-view: min(1.08, var(--akwo-per-view-max)); }
}

/* --- 7. Print ------------------------------------------------------------- */

@media print {
  .akwo-slider__controls { display: none !important; }
  [data-akwo-js] .akwo-slider .akwo-slider__track {
    display: block;
    overflow: visible;
  }
  [data-akwo-js] .akwo-slider .akwo-slider__slide {
    break-inside: avoid;
    margin-top: var(--akwo-space-4);
  }
}