/* ============================================================
   CHES design system — layer 2: reusable components.
   ============================================================ */

/* ---------- utility bar ---------- */

.utility-bar {
  background: var(--navy-band);
  color: color-mix(in srgb, var(--white) 85%, var(--navy-band));
  font-size: 0.83rem;
}
.utility-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  min-height: 38px;
}
.utility-bar a { color: inherit; }
.utility-bar a:hover { color: var(--white); }

/* ---------- header + nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s var(--ease), padding 0.25s var(--ease);
}
.site-header.is-condensed { box-shadow: var(--shadow-lg); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  transition: padding 0.25s var(--ease);
}
.site-header.is-condensed .nav { padding-block: 0.5rem; }

.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__brand:hover { text-decoration: none; }
.nav__logo { height: 46px; width: auto; transition: height 0.25s var(--ease); }
.site-header.is-condensed .nav__logo { height: 38px; }
.nav__brand-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.1;
}
.nav__brand-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.96rem;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--green-ink); text-decoration: none; border-bottom-color: var(--green); }
/* the CTA must never inherit the link colour above — this was a v1 bug */
.nav__links a.btn--primary,
.nav__links a.btn--primary:hover { color: var(--white); border-bottom-color: transparent; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--navy); display: block; }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem var(--gutter) 1.2rem;
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding-block: 0.75rem; border-bottom: 1px solid var(--border); }
  .nav__links a.btn--primary { margin-top: 0.8rem; text-align: center; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); color: var(--white); box-shadow: var(--shadow-lg); }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--navy); }

/* ---------- cards ---------- */

.card-grid { display: grid; gap: 1.4rem; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 0.45rem; }
.card p:last-child { margin-bottom: 0; }
.section--alt .card { background: var(--cream); }

/* Rows of identical cards read as one repeated block — alternate the top
   accent between blue and green so a row has visible rhythm. */
.card-grid .card:nth-child(even) { border-top-color: var(--green); }

.photo-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  display: block;
}
/* The hover lift/shadow implies clickability — only apply it where the card
   is actually a link. Plain <figure> photo-cards (gallery, strip) stay static. */
a.photo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
/* 912/638 is the sliced photos' real pixel ratio (1.43, upscaled 1.5x from the
   608x425 crop) — not 4:3 (1.333) or 3:2 (1.5), both of which were guesses that
   cropped into the image. Matching the real ratio means object-fit:cover shows
   the complete photo, zero crop. */
.photo-card img { width: 100%; aspect-ratio: 912 / 638; object-fit: cover; }
.photo-card__label {
  display: block;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- soft section dividers ---------- */
/* Fixes the "stacked cement blocks" complaint: bands meet on a curve, not a hard edge. */

.divider { display: block; width: 100%; height: 48px; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider--flip svg { transform: scaleY(-1); }

/* ---------- carousel (hero) and photo strip (our work) ---------- */

.carousel { position: relative; overflow: hidden; background: var(--white); }
.carousel__track { position: relative; }
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  /* Both properties settle together, quickly — the slide must go still and stay
     still for the rest of the dwell. A slow multi-second transform here (the v1
     bug) meant the image was always mid-zoom, which read as "never stops". */
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  color: var(--navy);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.carousel__btn:hover { background: var(--white); }
.carousel__btn--prev { left: 14px; }
.carousel__btn--next { right: 14px; }

.carousel__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.carousel__dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--navy) 30%, var(--white));
  cursor: pointer;
}
.carousel__dot.is-active { background: var(--green); width: 26px; border-radius: 5px; }

.strip { position: relative; }
/* scroll-snap so a card is never left sitting half cut-off in the viewport */
.strip__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.strip__viewport::-webkit-scrollbar { display: none; }
.strip__rail { display: flex; gap: 1.1rem; padding-bottom: 0.5rem; }
.strip__rail > * { scroll-snap-align: start; }
/* The card's aspect-ratio already matches the source photos exactly (608x425),
   so cropping isn't the remaining issue — the photos are just displayed small.
   560px is close to the photos' native width (608px) without exceeding it, so
   this is close to the largest the strip can go before upscaling softens them. */
.strip__rail > * { flex: 0 0 clamp(320px, 40vw, 560px); }

/* ---------- form ---------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.form__group { margin-bottom: 1rem; }
.form__group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.32rem;
}
.form__group input,
.form__group select,
.form__group textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--navy);
  background: var(--cream);
}
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.form__group textarea { min-height: 118px; resize: vertical; }
.form__status { margin: 0.9rem 0 0; font-size: 0.92rem; font-weight: 600; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-band); color: var(--white); padding-top: 3rem; }
.footer { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 780px) { .footer { grid-template-columns: 1fr; } }

.site-footer h3, .site-footer h4 { color: var(--white); }
/* the global `p` rule is a single class-free selector and beats inheritance here —
   both of these overrides are load-bearing, they were v1 bugs */
.footer__col p, .footer__col a { color: color-mix(in srgb, var(--white) 85%, var(--navy-band)); }
.footer__col a { display: block; margin-bottom: 0.4rem; }
.footer__col a:hover { color: var(--white); }

.footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--white) 18%, var(--navy-band));
  padding-block: 1.2rem;
}
.footer__bottom p {
  color: color-mix(in srgb, var(--white) 78%, var(--navy-band));
  margin: 0;
  font-size: 0.86rem;
  text-align: center;
}

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- partnership prompt ---------- */
/* Delayed and dismissible — never fires on page load. An immediate popup would
   hurt exactly the audience this site is built for: a skeptical CSR reviewer who
   was told to go check the NGO out. It appears centred, using the same
   fade-and-rise motion as the site's scroll-reveal, for visual consistency. */

.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.promo-overlay.is-visible { opacity: 1; pointer-events: auto; }

.promo-prompt {
  position: relative;
  width: min(420px, 100%);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.9rem;
  /* Same opacity/translateY pattern as .reveal elsewhere on the site. */
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.promo-overlay.is-visible .promo-prompt { transform: none; opacity: 1; }

.promo-prompt__close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
}
.promo-prompt h4 { font-size: 1.15rem; margin-bottom: 0.5rem; padding-right: 1.4rem; }
.promo-prompt p { font-size: 0.94rem; margin-bottom: 1.1rem; }
.promo-prompt .btn { width: 100%; text-align: center; padding: 0.65rem 1rem; font-size: 0.95rem; }

/* ---------- lightbox ---------- */
/* Any gallery photo, strip photo or document scan opens full-size here.
   Click again to toggle native-pixel zoom; the image scrolls if it overflows. */

.photo-card img,
.doc-scan img,
.collage-photo img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-visible { opacity: 1; pointer-events: auto; }

.lightbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.lightbox.is-visible .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__img.is-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  cursor: zoom-out;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.5rem, 2vw, 1.5rem);
  text-align: center;
  color: var(--white);
  font-size: 0.92rem;
  padding-inline: 3rem;
  pointer-events: none;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.2rem);
  right: clamp(0.6rem, 2vw, 1.2rem);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--white) 16%, transparent);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: color-mix(in srgb, var(--white) 26%, transparent); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--white) 16%, transparent);
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox__nav:hover { background: color-mix(in srgb, var(--white) 26%, transparent); }
.lightbox__nav--prev { left: clamp(0.4rem, 2vw, 1.2rem); }
.lightbox__nav--next { right: clamp(0.4rem, 2vw, 1.2rem); }
.lightbox__nav[hidden] { display: none; }