/* =========================================================================
   CIWA — COMPONENTS
   Loads after tokens.css and base.css.
   Every class here is applied via the Elementor "CSS Classes" field.
   No sizing is ever set in the Elementor UI.
   ========================================================================= */


/* =========================================================================
   1. THE CIRCLE GRID  —  "How we can help you?" / "Join us and support CIWA"
   =========================================================================
   This is the hardest element in the design to make responsive, and it is
   where the previous build almost certainly needed the most per-breakpoint
   patching.

   THE PROBLEM
   A circle's usable text area is the inscribed square: only ~70% of its
   bounding box. Text sized in vw does not know how wide its own circle is,
   so when the grid drops from 3 columns to 2, every circle gets wider but
   the text does not — or it overflows the curve.

   THE FIX
   Container queries. Each circle declares itself a container, and its text
   is sized in `cqi` (1cqi = 1% of the circle's own width). The text now
   scales with the circle rather than the viewport, so it fits correctly at
   3-up, 2-up, or 1-up with zero breakpoint overrides.

   Browser support: Safari 16+, Chrome 105+, Firefox 110+ (~94% globally).
   The @supports fallback below covers the rest.
   ------------------------------------------------------------------------- */

.circle-grid.circle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2.75rem);
  align-items: start;
}

/* Two-up below 700px. One-up is deliberately NOT used: a full-width circle
   would be as tall as the viewport is wide, which pushes the button off
   screen on a phone. */
@media (max-width: 700px) {
  .circle-grid.circle-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
}

.circle-card.circle-card {
  container-type: inline-size;

  aspect-ratio: 1;
  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5cqi;

  /* 16% inset keeps content inside the inscribed square, so text never
     collides with the curve. Percentage padding is relative to width,
     which is exactly what a circle needs. */
  padding: 16%;

  text-align: center;
  color: var(--c-on-dark);
  background: var(--circle-bg, var(--c-plum));

  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.circle-card:hover,
.circle-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.circle-card__title {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-ui);
  letter-spacing: 0.01em;

  /* Scales with the circle, not the viewport. The clamp caps it so the
     text never becomes absurd in a very large or very small circle. */
  font-size: clamp(0.8125rem, 9.5cqi, 1.5rem);

  margin: 0;
  text-wrap: balance;
  max-width: 100%;
}

.circle-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;

  font-size: clamp(0.6875rem, 4.4cqi, 0.875rem);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1;

  padding: 0.85em 1.4em;
  border-radius: var(--radius-pill);
  background: var(--c-cream);
  color: var(--c-plum);
  text-decoration: none;

  transition: background var(--dur-fast) var(--ease-out);
}

.circle-card__cta:hover { background: var(--c-white); }

/* Colour variants — apply ONE of these alongside .circle-card */
.circle-card--plum    { --circle-bg: var(--c-plum);    }
.circle-card--magenta { --circle-bg: var(--c-magenta); }
.circle-card--orange  { --circle-bg: var(--c-orange);  }
.circle-card--coral   { --circle-bg: var(--c-coral);   }
.circle-card--citron  { --circle-bg: var(--c-citron);  }

/* Citron and orange are light — dark text meets contrast requirements */
.circle-card--citron,
.circle-card--orange {
  color: var(--c-plum);
}
.circle-card--citron .circle-card__cta,
.circle-card--orange .circle-card__cta {
  background: var(--c-plum);
  color: var(--c-cream);
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  .circle-card__title { font-size: clamp(0.8125rem, 1.6vw, 1.5rem); }
  .circle-card__cta   { font-size: clamp(0.6875rem, 0.8vw, 0.875rem); }
}


/* =========================================================================
   2. BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  min-height: 44px;                 /* WCAG 2.2 target size */
  padding: 0.85em 1.75em;

  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-ui);
  text-decoration: none;

  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;

  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--primary   { background: var(--c-orange); color: var(--c-cream); }
.btn--primary:hover { background: var(--c-orange-dark); }

.btn--magenta   { background: var(--c-magenta); color: var(--c-cream); }
.btn--magenta:hover { background: var(--c-magenta-dark); }

.btn--plum      { background: var(--c-plum); color: var(--c-cream); }
.btn--plum:hover{ background: var(--c-plum-dark); }

/* Outline variant — the second hero CTA */
.btn--outline {
  background: transparent;
  color: var(--c-plum);
  border-color: var(--c-plum);
}
.btn--outline:hover { background: var(--c-plum); color: var(--c-cream); }

.btn--outline-light {
  background: transparent;
  color: var(--c-on-dark);
  border-color: var(--c-on-dark);
}
.btn--outline-light:hover { background: var(--c-on-dark); color: var(--c-plum); }


/* =========================================================================
   3. SECTION HEADINGS
   The design uses a consistent two-tone heading: first line in plum,
   second line in magenta or orange. Build it as ONE heading element with
   a span, not two stacked headings — two headings breaks the document
   outline for screen readers.
   ========================================================================= */

.section-head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--sp-lg);
}

.section-head__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--c-plum);
  margin: 0 0 var(--sp-xs);
  text-wrap: balance;
}

.section-head__title em {
  font-style: normal;
  color: var(--c-magenta);
  display: block;
}

.section-head__title .accent-orange { color: var(--c-orange); }

.section-head__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  margin: 0 auto;
  max-width: 42rem;
}


/* =========================================================================
   4. SPLIT SECTIONS  —  Hero, Welcome, Impact, Get In Touch
   =========================================================================
   Pattern: content column + media column, where the media bleeds to one
   page edge. Built with grid so it collapses cleanly with no overrides.
   ========================================================================= */

.split-bleed.split-bleed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.split-bleed__content {
  padding-block: var(--sp-xl);
  padding-inline: var(--section-px);
  /* Pushes content to align with the boxed grid while the panel itself
     runs full-bleed. Replaces the old fixed-width approach. */
  padding-inline-start: max(var(--section-px), (100vw - var(--w-content)) / 2);
}

.split-bleed__media {
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

.split-bleed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crops rather than distorts — the key property */
  object-position: center;
}

/* Reverse variant: media on the left */
.split-bleed--reverse .split-bleed__content { order: 2; }
.split-bleed--reverse .split-bleed__media   { order: 1; }

@media (max-width: 900px) {
  .split-bleed.split-bleed { grid-template-columns: 1fr; }
  .split-bleed__content {
    padding-inline: var(--section-px);
    padding-block: var(--sp-lg);
  }
  .split-bleed__media { min-height: 42vh; }
  .split-bleed--reverse .split-bleed__content,
  .split-bleed--reverse .split-bleed__media { order: initial; }
}


/* =========================================================================
   5. PROGRAM / NEWS CARDS
   ========================================================================= */

.card.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  height: 100%;                    /* equal heights in a carousel track */

  padding: var(--sp-md);
  background: var(--c-surface-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);

  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-magenta);
}

.card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--c-plum);
  margin: 0;
}

.card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  margin: 0;
  flex: 1;                          /* pushes the link to the card bottom */
}

.card__link {
  align-self: flex-start;
  font-weight: var(--fw-semibold);
  color: var(--c-orange);
  text-decoration: none;
}
.card__link:hover { text-decoration: underline; }

/* Media card (news) — image locked to a ratio so rows stay aligned */
.card__media {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-block-end: var(--sp-xs);
}


/* =========================================================================
   6. IMPACT STATS
   ========================================================================= */

.stat-grid.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--gap-grid);
}

.stat {
  padding: var(--sp-md);
  background: var(--c-surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
}

.stat__figure {
  font-family: var(--ff-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-tight);
  color: var(--c-magenta);
  display: block;
}

.stat__label {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
  display: block;
  margin-block: var(--sp-3xs) var(--sp-2xs);
}

.stat__note {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}


/* =========================================================================
   7. TESTIMONIAL  —  "Voices from our community"
   ========================================================================= */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  height: 100%;
  padding: var(--sp-md);
  background: var(--c-surface-card);
  border-radius: var(--radius-md);
}

.testimonial__quote {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  flex: 1;
  margin: 0;
  max-width: none;      /* overrides the global prose measure inside cards */
}

.testimonial__avatar {
  width: clamp(3rem, 6cqi, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__name {
  font-size: var(--fs-h4);
  color: var(--c-plum);
  margin: 0;
}

.testimonial__role {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}


/* =========================================================================
   8. DECORATIVE BLOB  —  "Get in touch" image
   Replaces a masked PNG. Pure CSS, so it scales to any size with no
   resolution loss and no extra HTTP request.
   ========================================================================= */

.blob-media {
  border-radius: var(--radius-blob);
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
}

.blob-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================================
   9. INSTAGRAM STRIP
   ========================================================================= */

.ig-strip.ig-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-sm);
}

.ig-strip img {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}


/* =========================================================================
   10. UTILITY BAR + BANDS
   ========================================================================= */

.band-plum   { background: var(--c-plum);    color: var(--c-on-dark); }
.band-blush  { background: var(--c-blush);   color: var(--c-ink); }
.band-peach  { background: var(--c-peach);   color: var(--c-ink); }
.band-cream  { background: var(--c-cream);   color: var(--c-ink); }

.band-plum :is(h1,h2,h3,h4) { color: var(--c-on-dark); }
.band-plum p                { color: var(--c-on-dark-mut); }

.utility-bar {
  background: var(--c-magenta);
  color: var(--c-cream);
  font-size: var(--fs-small);
  text-align: center;
  padding-block: var(--sp-2xs);
  padding-inline: var(--section-px);
}