/* ==========================================================================
   Community page — MBA ACT
   Figma node 10965:7281 (phase-08)
   Desktop-first: all 1440 rules first, then @media (max-width: 768px),
   then @media (max-width: 402px). Mobile queries at end of file.
   Do NOT add overflow-x:hidden here — already global in base.css.
   Reuses from about.css: .about-feature-intro*, .content-block* (NOT redefined here).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site-main: remove default max-width/padding so all sections run edge-to-edge.
   -------------------------------------------------------------------------- */
body.page-template-template-community .site-main {
  max-width: none;
  padding: 0;
}


/* ==========================================================================
   Block 4 — Feature Intro (Community extension)
   Figma node 10965:7857
   Reuses .about-feature-intro / __inner / __tagline-wrap / __tagline / __lead.
   New: .community-stat-cards, .community-stat-card, and children.
   ========================================================================== */

/* Hero content cap: Figma section (10965:7857) is 1440 wide − 160 padding → 1280
   content. about.css:54 sets the inner to width:100% with no cap, so the
   stat-cards row stretches across the full viewport on wide screens. Cap +
   centre the inner so cards keep Figma proportions. QA 2026-06-09 #1 */
.community-feature-intro .about-feature-intro__inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Stat-cards row: flex row, gap 24, full width, stretch.
    Figma 10965:7867 layout_KKEVSZ flex row gap 24 */
.community-stat-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;                  /* Figma layout_KKEVSZ row */
  gap: 24px;                            /* Figma 10965:7867 layout_KKEVSZ gap 24 */
  width: 100%;
  align-items: stretch;
}

/* Stat card: flex column, justify center, stretch; 1px border; radius 4; shadow medium; transparent bg.
    Figma 10965:7868 layout_1VJ0EM column justify-center stretch
    Figma strokes fill_C8YX1Z #CED0D4
    Figma effects medium → --shadow-md
    Figma fill_AM1K83 [] (transparent — cards sit on dark hero overlay) */
.community-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;               /* Figma layout_1VJ0EM column */
  justify-content: center;
  align-items: center;
  background-color: transparent;        /* Figma fill_AM1K83 [] — transparent on dark overlay */
  border: 1px solid var(--color-navy-lighter); /* Figma fill_C8YX1Z #CED0D4 */
  border-radius: var(--radius-sm);      /* Figma borderRadius 4px = --radius-sm */
  box-shadow: var(--shadow-md);         /* Figma effects medium */
  overflow: hidden;
  position: relative;
  padding: 36px;                        /* Figma layout_FDN1EZ padding 36 */
  gap: 24px;                            /* Figma layout_FDN1EZ gap 24 */
}

/* Card icon: 48×48 material symbol.
    Figma layout_O1RE76 48×48 */
.community-stat-card__icon {
  width: 48px;                          /* Figma layout_SJYSWV 48×48 */
  height: 48px;
  color: var(--color-tangerine);        /* Figma fill_MCDRQ4 #FF6600 — tangerine icons on dark overlay */
  flex-shrink: 0;
}

.community-stat-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Card text inner: column, center, gap 4.
    Figma layout_EC7PRV / layout_NAYJ3N column gap 4 */
.community-stat-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                             /* Figma layout_EC7PRV / layout_NAYJ3N gap 4 */
  text-align: center;
}

/* Stat value: 32px 400 #FFFFFF — Heading/H4.
    Figma I…;10503:9821 Heading/H4 32px fill_OKYG1M #FFFFFF — white text on dark overlay */
.community-stat-card__value {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 30px;                      /* Pastel 2026-06-15 — H4 30px (was 32px); Figma I…;10503:9821 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);            /* Figma fill_OKYG1M #FFFFFF */
}

/* Stat label: 20px 400 #FFFFFF — second line of stat card text.
    Figma I…;10503:9822 Text/Large/Bold (115:3262) align CENTER
    fill_OKYG1M #FFFFFF — white text on dark overlay
    QA round-3 #9 — client requested normal weight (was 700) */
.community-stat-card__label {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                     /* QA round-3 #9 — was 700, client requested normal */
  font-size: 20px;                      /* Figma I…;10503:9822 Text/Large/Bold */
  line-height: 1.3;
  color: var(--color-white);            /* Figma fill_OKYG1M #FFFFFF */
  text-align: center;
}

/* Colour strip: full width, height 10, at card bottom.
    Figma layout_FL91MX height 10 full width */
.community-stat-card__strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;                         /* Figma layout_FL91MX height 10 */
  display: block;
}

/* Strip colour per data-accent attribute:
   card-1 (blue)   = --color-accent-light-blue  fill_FK6YNW #CBDAE6
   card-2 (orange) = --color-accent-light-orange fill_3L5NAX #FFAD77
   card-3 (green)  = --color-accent-soft-green   fill_CBUH46 #81B9A2 */
.community-stat-card[data-accent="blue"] .community-stat-card__strip {
  background-color: var(--color-accent-light-blue); /* Figma fill_FK6YNW #CBDAE6 */
}

.community-stat-card[data-accent="orange"] .community-stat-card__strip {
  background-color: var(--color-accent-light-orange); /* Figma fill_3L5NAX #FFAD77 */
}

.community-stat-card[data-accent="green"] .community-stat-card__strip {
  background-color: var(--color-accent-soft-green); /* Figma fill_CBUH46 #81B9A2 */
}


/* ==========================================================================
   Block 5 — Philanthropy Content Block
   Figma node 10965:7843 — white bg, padding 112 80 (matches .content-block--history).
   All inner/box/typography rules reused from about.css (.content-block family).
   ========================================================================== */

/* Section: flex column, padding 112px 80px, bg #FFFFFF.
    Figma 10965:7843 layout_LICG12 padding 112 80 fill_2QZVR4 */
.content-block--philanthropy {
  padding: 112px 80px;                  /* Figma 10965:7843 layout_LICG12 padding 112 80 */
  background-color: var(--color-white); /* Figma fill_2QZVR4 #FFFFFF */
}

/* Image: 82×82 top-right corner cut so the white section bg shows through.
    Figma 10965:7855 Image frame child "Vector 2" (10965:7856) is an IMAGE-SVG
    filled with the section bg (fill_2QZVR4) at layout_Q38Q77 (abs x:638 y:0,
    82×82) — the overlay technique. Same real-cut pattern as .home-hero__image-frame
    and .content-block__image--left (about.css). clip-path supersedes the 4px
    radius; remaining three corners stay square. */
/* Philanthropy link: match text color, not global tangerine — QA bug #2 */
.content-block--philanthropy .content-block__copy a {
  color: var(--color-navy-darkest);     /* Figma fill_YOKHKZ #03060c — same as copy text */
}

.content-block--philanthropy .content-block__image {
  align-self: stretch;                  /* QA R4 2026-06-19 #16 — stretch image to text-column height (supersedes R3 part-2 flex-start); img object-fit:cover fills it */
  flex: 1;                              /* shrink with the viewport */
  min-width: 0;                         /* allow the image to shrink (else the <img> intrinsic width overflows under the text box) */
  min-height: 0;                        /* QA R4 — override base min-height:400 so the stretched height tracks the text column */
  border-radius: 0;                     /* clip-path supersedes radius — Figma 10965:7856 Vector 2 */
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}


/* ==========================================================================
   Block 6 — Activities cards grid
   Figma node 10965:7833 — light-blue band
   ========================================================================== */

/* Section: full-bleed light-blue band. The background must span the full viewport
   width while the content stays centred at 1280 — so the band colour + vertical
   padding live on the section, the flex row moves to __inner.
    Figma 10965:7833 layout_23BBAH padding 64 80 fill_FK6YNW #CBDAE6.
   QA 2026-06-09 #3 (was max-width:1440 on the section, which clipped the band). */
.community-activities {
  padding: 64px 80px;                   /* Figma layout_23BBAH padding 64 80 — full-bleed band */
  background-color: var(--color-accent-light-blue); /* Figma fill_FK6YNW #CBDAE6 */
}

/* Inner: flex row, gap 64, content capped at 1280 centred.
    Figma layout_23BBAH row gap 64; content width 1280 (1440 frame − 160 padding)
   min-width:0 per css-architecture.md (flex row, card grid can overflow) */
.community-activities__inner {
  display: flex;
  flex-direction: row;                  /* Figma layout_23BBAH row */
  gap: 64px;                            /* Figma layout_23BBAH gap 64 */
  align-items: flex-start;
  max-width: 1280px;                    /* Figma content width (1440 − 160 padding) */
  margin-left: auto;
  margin-right: auto;
  min-width: 0;                         /* css-architecture.md: flex row whose card grid can overflow */
}

/* Heading column: column, gap 10, fill height, width 230.
    Figma 10965:7834 layout_VL80BN width 230 */
.community-activities__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;                            /* Figma layout_VL80BN gap 10 */
  width: 230px;                         /* Figma 10965:7834 width 230 */
  flex-shrink: 0;
}

/* Lead text: 20px 700 #0B1628 — Text/Large/Bold, left-aligned.
    Figma 10965:7835 Text/Large/Bold (115:3262) fill_5YE5R5 #0B1628 textAlignHorizontal LEFT */
.community-activities__lead {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;                      /* Figma 10965:7835 Text/Large/Bold */
  line-height: 1.3;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
  text-align: left;                     /* Figma Text/Large/Bold textAlignHorizontal LEFT (was center) */
}

/* Cards grid: repeat(3,1fr), gap 24.
    Figma 10965:7837 x-positions 0/334/668 → 3 cols, ~310px each in 1280px; gap ≈24px */
.community-activities__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Figma 10965:7837 3-col from x-positions 0/334/668 */
  gap: 16px;                            /* Figma 10965:7837 — x-pitch 334 in a 986px column → card 318 + gap 16 (was 24) */
  min-width: 0;                         /* css-architecture.md */
}

/* Activity card: flex column; 1px #E6E7E9 border; radius 4; shadow medium; bg white.
    Figma 10965:7838 layout_OHSE2A column stretch
    Figma strokes fill_RVEXY2 #E6E7E9 (--color-navy-lightest)
    Figma effects medium → --shadow-md */
.community-activity-card {
  display: flex;
  flex-direction: column;
  padding: 24px;                        /* Figma layout_HU03QX / layout_5VEC1P padding 24 */
  gap: 18px;                            /* Figma layout_HU03QX gap 18 */
  background-color: var(--color-white); /* Figma fill_QY4W1D (empty→white) */
  border: 1px solid var(--color-navy-lightest); /* Figma fill_RVEXY2 #E6E7E9 */
  border-radius: var(--radius-sm);      /* Figma borderRadius 4px = --radius-sm */
  box-shadow: var(--shadow-md);         /* Figma effects medium */
}

/* First card (Skills programs) spans 2 columns — it is double-width in Figma.
    Figma 10965:7837 card x-positions: card1 x:0 + card2 x:668 (row1) → card1 = 652px
    (2 cols 318+16+318), card2 = 318px (1 col); cards 3–5 at x:0/334/668 fill row2.
    layout_OHSE2A (card1) horizontal:fill vs layout_V63AVH (card2) inner width 293. */
.community-activity-card:first-child {
  grid-column: span 2;                  /* Figma 10965:7838 spans 2 of 3 columns (x:0→652px) */
}

/* Card icon: 30×30, tangerine.
    Figma layout_7VFJ4G 30×30. Icon glyphs (10306:5644 tools_ladder etc.) render
    tangerine in the Figma export (.tmp/figma-render/figma-activities-block.png);
    the IMAGE-SVG fill is not captured in the token dump, colour taken from the render. */
.community-activity-card__icon {
  font-size: 30px;                      /* Figma layout_7VFJ4G 30×30 */
  line-height: 1;
  color: var(--color-tangerine);        /* Figma render — tangerine #ff6600 (was navy) */
  flex-shrink: 0;
}

/* Card title: 18px 700 #0B1628 — Text/Medium/Bold.
    Figma 10306:5646 Text/Medium/Bold 18px fill_5YE5R5 */
.community-activity-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;                      /* Figma 10306:5646 Text/Medium/Bold */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
}

/* Card list: bulleted list, list-spacing 8px, 14px 400 navy.
    Figma 10306:5647 style_NHRV3L listSpacing 8, Text/Small/Normal 14px fill_5YE5R5
   NOTE: must NOT be display:flex — flex turns the <li> into flex items and drops
   their list-item bullet markers. Keep as a normal list. QA 2026-06-09 #2 */
.community-activity-card__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;                     /* restore bullet markers */
}

.community-activity-card__list li {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;                      /* Figma 10306:5647 Text/Small/Normal */
  line-height: 1.4;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
}

.community-activity-card__list li + li {
  margin-top: 8px;                      /* Figma style_NHRV3L listSpacing 8 */
}


/* ==========================================================================
   Block 7 — Charity Houses Intro
   Figma node 10965:7805 — white bg
   ========================================================================== */

/* Section: flex column, gap 48, padding 112px 80px, bg white.
    Figma 10965:7805 layout_I31OGT flex column gap 48 padding 112 80 fill_QY4W1D */
.charity-houses {
  display: flex;
  flex-direction: column;               /* Figma layout_I31OGT column */
  gap: 48px;                            /* Figma layout_I31OGT gap 48 */
  padding: 112px 80px;                  /* Figma 10965:7805 layout_I31OGT padding 112 80 */
  background-color: var(--color-white); /* Figma fill_QY4W1D (empty→white) */
}

/* Charity intro: column, gap 10.
    Figma 10965:7806 layout_P5VXOJ column gap 10 */
.charity-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;                            /* Figma layout_P5VXOJ gap 10 */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Content area: column, gap 22.
    Figma 10965:7809 layout_W8PZT3 column gap 22 */
.charity-intro__content {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma layout_W8PZT3 gap 22 */
}

/* H2 — two-tone: navy "Charity" + tangerine "houses".
    Figma 10965:7815 Heading/H2 48px 400 LS -1%
    ts1 = #0B1628 (navy), ts6 = #FF6600 (tangerine) */
.charity-intro__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 44px;                      /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 10965:7815 */
  line-height: 1.1;                     /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* base color */
}

.charity-intro__heading--navy {
  color: var(--color-navy);             /* Figma ts1 #0B1628 */
}

.charity-intro__heading--orange {
  color: var(--color-tangerine);        /* Figma ts6 #FF6600 */
}

/* Copy: column, gap 18, 16px 400.
    Figma layout_JMDX2P column gap 18; 10965:7817 Text/Regular/Normal 16px fill_YOKHKZ */
.charity-intro__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma layout_JMDX2P gap 18 */
  max-width: 640px;                     /* copy constrained to ~half the 1280 content (user decision 2026-06-04; Intro row gap 96 + heading Frame 648) */
}

.charity-intro__copy p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                      /* Figma 10965:7817 Text/Regular/Normal */
  line-height: 1.4;
  color: var(--color-navy-darkest);     /* Figma fill_YOKHKZ #03060c */
}

/* Gallery slider: full-bleed row under intro, drag carousel.
    Figma 10965:7818 layout_ALBCQW rendered in normal flow (not absolute).
   min-width:0 on track per css-architecture.md (flex chain with overflowing children). */
.charity-gallery {
  width: calc(100% + 160px);           /* QA bug #5 — full-bleed: break out of parent 80px padding */
  margin-left: -80px;
  margin-right: -80px;
  min-width: 0;                         /* css-architecture.md: flex chain overflow */
}

.charity-gallery .splide__track {
  min-width: 0;                         /* css-architecture.md */
}

/* Gallery item: inline-block in Splide track.
    Mixed widths per spec (310/499/383/383) — autoWidth Splide handles these.
    QA round-3 #8 — cap at 55vw so 1.5–2 slides are visible on desktop (was
    uncapped, slides stretched near full-screen width). Slider variant: gallery
    (data-slider="gallery", autoWidth:true — width is CSS-controlled). */
.charity-gallery__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 33vw;                      /* QA R4 2026-06-19 #14 — narrower still (~475px @1440 → ~3 slides visible); the R3 #8 55vw cap (~792px) never bit, slides rendered ~573px. autoWidth measures this capped width; media cover-crops to the narrower frame */
}

/* Gallery media: cover image, fixed height 383.
    Figma layout_OOCY5G / layout_OKFA4V height 383 */
.charity-gallery__media {
  margin: 0;
  height: 383px;                        /* Figma layout_OOCY5G height 383 */
  overflow: hidden;
  border-radius: var(--radius-sm);      /* Figma borderRadius 4px = --radius-sm */
  background-color: var(--color-navy-lightest); /* placeholder */
  position: relative;
}

.charity-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video media: rgba overlay.
    Figma fill_2CYLTF rgba(11,22,40,0.6) — untokenized one-off */
.charity-gallery__media--video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(11, 22, 40, 0.6); /* Figma fill_2CYLTF — untokenized one-off */
  z-index: 1;
  pointer-events: none;
}

/* Play button: centered over video tile.
    Figma 7044:4488 play_circle 59×59 */
.charity-gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-tangerine);        /* orange play button #FF6600 */
  transition: opacity 0.15s ease;
}

.charity-gallery__play:hover,
.charity-gallery__play:focus-visible {
  opacity: 0.8;
}

.charity-gallery__play .material-symbols-outlined {
  font-size: 59px;                      /* Figma 7044:4488 play_circle 59×59 */
  line-height: 1;
}

/* Gallery caption: 12px 300 #000000 — Text/Tiny/Light.
    Figma 10965:7822 Text/Tiny/Light fill_VDF5GG #000000 — untokenized one-off */
.charity-gallery__caption {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 12px;                      /* Figma 10965:7822 Text/Tiny/Light */
  line-height: 1.3;
  color: #000000;                       /* Figma fill_VDF5GG #000000 — untokenized one-off */
}

/* Video popup overlay and dialog.
    role="dialog" aria-modal="true" — see video-popup.js */
.video-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.85);
}

.video-popup[hidden] {
  display: none;
}

.video-popup__dialog {
  position: relative;
  width: min(900px, 90vw);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.video-popup__dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-popup__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-white);
  border-radius: var(--radius-xs);
  transition: opacity 0.15s ease;
}

.video-popup__close:hover,
.video-popup__close:focus-visible {
  opacity: 0.7;
}

.video-popup__close .material-symbols-outlined {
  font-size: 28px;
  line-height: 1;
}


/* ==========================================================================
   Block 8 — Charity Houses Featured
   Figma node 10965:7735 — bg rgba(230,231,233,0.5) = --color-navy-lightest-50
   ========================================================================== */

/* Section: flex column, gap 10, padding 112px 80px, bg --color-navy-lightest-50.
    Figma 10965:7735 layout_YOAPIG flex column gap 10 padding 112 80 fill_9T1J0Z */
.charity-featured {
  display: flex;
  flex-direction: column;
  gap: 10px;                            /* Figma layout_YOAPIG gap 10 */
  padding: 112px 80px 48px;             /* Pastel R2 2026-06-15 #5 — pb 48 so the featured→past gap is 96 (was 112+112=224); both sections share the navy-lightest-50 band */
  background-color: var(--color-navy-lightest-50); /* Figma fill_9T1J0Z rgba(230,231,233,0.5) */
}

/* Intro: column, gap 8, max w1280, pad-bottom 36.
    Figma 10965:7738 layout_283X7T / layout_50S4YL */
.charity-featured__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma layout_283X7T gap 8 */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 24px;                 /* Pastel 2026-06-15 #5 — reduce gap a little (was 36) */
}

/* Heading: 40px 400 #0B1628 — Heading/H3.
    Figma 10965:7742 Heading/H3 fill_5YE5R5 #0B1628 */
.charity-featured__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 36px;                      /* Pastel 2026-06-15 — H3 36px (was 40px); Figma 10965:7742 */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
}

/* Subtitle: 20px 700 #FF6600 — Text/Large/Bold.
    Figma 10965:7744 Text/Large/Bold (115:3262) fill_WLKUSK #FF6600 */
.charity-featured__subtitle {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;                      /* Figma 10965:7744 Text/Large/Bold */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_WLKUSK #FF6600 */
}

/* Body wrapper: column, gap 96.
    Figma 10965:7745 layout_UBUUU8 column gap 96 */
.charity-featured__body {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Pastel R2 2026-06-15 #3 — gap between photos and text = 36 (was 48) */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;                         /* css-architecture.md: flex column with wide children */
}

/* Montage: 3-image collage (2-row: full-width top + 2 bottom).
    Figma 10965:7747 children layout_QF7IU3/NO2OZU/N6RRT9 — rendered as CSS grid */
.charity-featured__montage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.charity-featured__img {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy-lightest);
}

.charity-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main image spans both columns (full width top row).
    Figma 10965:7747 Frame1 fill top */
.charity-featured__img--main {
  grid-column: 1 / -1;                 /* spans both columns */
  min-height: 300px;
}

.charity-featured__img--2,
.charity-featured__img--3 {
  min-height: 240px;
}

/* Detail row (spec list + copy): flex row, gap 64.
    Figma 10965:7751 layout_FGN852 flex row gap 64 w1280
   min-width:0 per css-architecture.md (flex row with text that can overflow) */
.charity-featured__detail {
  display: flex;
  flex-direction: row;                  /* Figma layout_AB5GF0 row */
  gap: 64px;                            /* Figma layout_AB5GF0 gap 64 */
  max-width: 1280px;                    /* Figma layout_AB5GF0 width 1280 — QA bug #7 */
  width: 100%;
  min-width: 0;                         /* css-architecture.md */
}

/* Box inside detail: column, gap 36, fill.
    Figma 10965:7752 layout_5VWCRU column gap 36 */
.charity-featured__box {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma layout_5VWCRU gap 36 */
  flex: 1;
  min-width: 0;
}

/* Spec list: 3 cells SIDE BY SIDE (row), each cell an equal-width column.
    Re-pulled Figma 10965:7753 layout_7BKWNK — mode:row, padding 3 1, cells fill.
    (Superseded the stale single-column/inline cache — see
    .tmp/mcp/figma-charity-spec-list-10965-7753.md. QA R3 part-2 #10.) */
.charity-featured__spec-list {
  list-style: none;
  margin: 0;
  padding: 3px 1px;                     /* Figma layout_7BKWNK padding 3 1 */
  display: flex;
  flex-direction: column;               /* default (accordion past-charities, narrow): stacked cells */
  align-items: stretch;
}

/* Featured house: 3 cells SIDE BY SIDE (Figma 10965:7753 layout_7BKWNK mode:row).
   Scoped to the featured box so the narrow accordion past-charity lists stay stacked. */
.charity-featured__box > .charity-featured__spec-list {
  flex-direction: row;
}

/* Spec cell: column — bold label on TOP, value BELOW; 1px bottom border tangerine.
    Figma 10965:7754 Cell layout_J87UV1 mode:column, padding 16 0, fill width,
    bottom stroke 1px #FF6600 (fill_6M6UEV). Label = style_7ZBIP5 (Frutiger Bold 700 16px),
    value = Text/Regular/Normal (400 16px), both #0B1628. No colon. */
.charity-featured__spec-row {
  flex: 1;                              /* equal-width columns (Figma cells fill) */
  min-width: 0;                         /* css-architecture.md — allow long values to wrap */
  display: flex;
  flex-direction: column;               /* label over value */
  padding: 16px 0;                      /* Figma layout_J87UV1 padding 16 0 */
  border-bottom: 1px solid var(--color-tangerine); /* Figma fill_6M6UEV #FF6600 */
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma 16px */
  line-height: 1.4;
  color: var(--color-navy);             /* Figma fill_5MOIIC #0B1628 */
}

.charity-featured__spec-row strong {
  font-weight: 700;                     /* Figma style_7ZBIP5 Frutiger Bold — label, no colon */
  font-style: normal;
}

.charity-featured__spec-row span {
  font-weight: 400;                     /* Figma Text/Regular/Normal — value */
}

/* Body copy: column, gap 18, 16px 400.
    Figma layout_JMDX2P column gap 18; 10965:7762 Text/Regular/Normal fill_YOKHKZ */
.charity-featured__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma layout_JMDX2P gap 18 */
}

.charity-featured__copy p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                      /* Figma 10965:7762 Text/Regular/Normal */
  line-height: 1.4;
  color: var(--color-navy-darkest);     /* Figma fill_YOKHKZ #03060c */
}

/* Contrib panel: column, gap 10, padding 36, radius 4, bg white.
    Figma 10965:7763 layout_9V1QBK column gap 10 padding 36 radius 4 fill_2QZVR4 */
.charity-featured__contrib-panel {
  display: flex;
  flex-direction: row;                  /* Figma layout_IPCP0W row, gap 64, stretch */
  gap: 64px;                            /* Figma 10965:7764 layout_IPCP0W gap 64 */
  padding: 36px;                        /* Figma layout_9V1QBK padding 36 */
  border-radius: var(--radius-sm);
  background-color: var(--color-white); /* Figma fill_2QZVR4 #FFFFFF */
  align-items: stretch;
  width: 100%;                          /* fill to the cap — auto side margins otherwise shrink this flex child to its content (the flex:1 image collapses) */
  max-width: 1280px;                    /* QA 2026-06-09 — match the 1280 content width of __intro/__body (panel was full-bleed, wider than other sections) */
  margin: 112px auto 0;                 /* QA 2026-06-09 40px → R3 #11 64px → R3 part-2 112px — gap between featured text and Member box */
  min-width: 0;                         /* css-architecture.md */
}

/* Contrib text box: column, gap 36, width 348.
    Figma 10965:7765 layout_RGSR6Q column gap 36 width 348 */
.charity-featured__contrib {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma layout_RGSR6Q gap 36 */
  width: 348px;                         /* Figma layout_RGSR6Q width 348 */
  flex-shrink: 0;
  min-width: 0;                         /* css-architecture.md */
}

/* Contrib head: row, center.
    Figma 10965:7767 layout_20N15M row center */
.charity-featured__contrib-head {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Contrib title: 20px 700 #000000 — Heading/H6.
    Figma 10965:7768 Heading/H6 (115:3256) fill_VDF5GG #000000 — untokenized one-off */
.charity-featured__contrib-title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;                      /* Figma 10965:7768 Heading/H6 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000000;                       /* Figma fill_VDF5GG #000000 — untokenized one-off */
}

/* Contrib list: column, gap 16.
    Figma 10965:7766 layout_R7GUNC column gap 16 */
.charity-featured__contrib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Contrib row: row, space-between, padding 8px 0, 1px bottom border #CED0D4.
    Figma 10965:7770 layout_1W7KEQ row space-between padding 8 0 stroke fill_5U4BGS #CED0D4 */
.charity-featured__contrib-row {
  display: flex;
  align-items: center;
  padding: 8px 0;                       /* Figma layout_1W7KEQ padding 8 0 */
  border-bottom: 1px solid var(--color-navy-lighter); /* Figma fill_5U4BGS #CED0D4 */
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;                      /* Figma 10965:7771 Text/Small/Normal */
  line-height: 1.4;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
}

/* Contrib image: fill stretch, radius 4, object-fit cover.
    Figma 10965:7803 layout_EJ179L fill/fill, fill_3O3HLX scaleMode FILL objectFit cover.
   The <img> is absolutely positioned so it does NOT contribute its natural aspect
   height to the flex row — otherwise the photo renders at full size and drives the
   panel taller than the contributor list. The list column now sets the height and
   the image covers it. QA 2026-06-09 #5/#8 (image was shown at natural size). */
.charity-featured__contrib-img {
  position: relative;
  flex: 1;
  align-self: stretch;                  /* QA R4 2026-06-19 #15 — stretch image to the names-list column height (supersedes R3 part-2 flex-start); absolutely-positioned img object-fit:cover fills it */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  min-width: 0;
  background-color: var(--color-navy-lightest);
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

.charity-featured__contrib-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================================
   Block 9 — Charity Houses Past (accordion)
   Figma node 10965:7683 — bg --color-navy-lightest-50
   ========================================================================== */

/* Section: flex column, gap 48, padding 112px 80px, bg --color-navy-lightest-50.
    Figma 10965:7683 layout_J7KSJW flex column gap 48 padding 112 80 fill_9T1J0Z */
.charity-past {
  display: flex;
  flex-direction: column;
  gap: 48px;                            /* Figma layout_J7KSJW gap 48 */
  padding: 48px 80px 112px;             /* Pastel R2 2026-06-15 #5 — pt 48 so the featured→past gap is 96 */
  background-color: var(--color-navy-lightest-50); /* Figma fill_9T1J0Z rgba(230,231,233,0.5) */
}

/* Heading wrap: column, gap 22, max w1280.
    Figma layout_OKA3LU column gap 22 */
.charity-past__heading-wrap {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* H3 "Past charity houses": 40px 400 #0B1628 — Heading/H3.
    Figma 10965:7690 Heading/H3 fill_5YE5R5 */
.charity-past__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 36px;                      /* Pastel 2026-06-15 — H3 36px (was 40px); Figma 10965:7690 */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
}

/* Accordion wrapper: column, gap 16, max w1280.
    Figma 10965:7691 layout_XL9YLH column gap 16 */
.charity-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma layout_XL9YLH gap 16 */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Accordion item: 1px #CED0D4 border; radius 4; bg white.
    Figma 10965:7692 layout_YJMGOQ fill_2QZVR4 strokes fill_5U4BGS radius 4 */
.charity-accordion__item {
  padding: 24px;                        /* Figma layout_YJMGOQ padding 24 */
  background-color: var(--color-white); /* Figma fill_2QZVR4 */
  border: 1px solid var(--color-navy-lighter); /* Figma fill_5U4BGS #CED0D4 */
  border-radius: var(--radius-sm);      /* Figma borderRadius 4px = --radius-sm */
  transition: border-color 0.15s ease;
}

/* Open item: tangerine border.
    Figma 10965:7700 strokes fill_WLKUSK #FF6600 */
.charity-accordion__item[open] {
  border-color: var(--color-tangerine); /* Figma fill_WLKUSK #FF6600 */
}

/* Summary: row, space-between, center; no default marker.
    Figma layout_VEG90K row space-between center */
.charity-accordion__summary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.charity-accordion__summary::-webkit-details-marker {
  display: none;
}

/* Left group: row, center, gap 24.
    Figma 10965:7695 layout_RJSTHI row center gap 24 */
.charity-accordion__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;                            /* Figma layout_RJSTHI gap 24 */
}

/* Tag: row, padding 4px 8px, 1px #545B68 border, radius 2.
    Figma 10965:7696 layout_CAES83 padding 4 8 stroke fill_BULLZV #545B68 radius 2 */
.charity-accordion__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;                     /* Figma layout_CAES83 padding 4 8 */
  border: 1px solid var(--color-navy-light); /* Figma fill_BULLZV #545B68 */
  border-radius: var(--radius-xs);      /* Figma borderRadius 2px = --radius-xs */
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;                      /* Figma I…;10239:38544 Text/Tiny/Bold */
  line-height: 1.3;
  color: var(--color-navy);             /* Figma fill_5YE5R5 #0B1628 */
  white-space: nowrap;
}

/* Title: 20px 700 #FF6600 — Text/Large/Bold.
    Figma 10965:7697 Text/Large/Bold fill_WLKUSK #FF6600 */
.charity-accordion__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;                      /* Figma 10965:7697 Text/Large/Bold */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_WLKUSK #FF6600 */
}

/* Chevron: 36×36 material symbol, rotates 180° when open.
    Figma 10965:7699 layout_V2YGJ1 36×36 */
.charity-accordion__chevron {
  font-size: 36px;                      /* Figma layout_V2YGJ1 36×36 */
  line-height: 1;
  color: var(--color-tangerine);        /* Figma — open/close chevron is tangerine #ff6600 (was navy) */
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.charity-accordion__item[open] .charity-accordion__chevron {
  transform: rotate(180deg);            /* Figma chevron rotates on open state */
}

/* Panel content wrapper: row, gap 36, full width, padding-top 24.
    Figma 10965:7708 layout_O74ZX8 row gap 36
   min-width:0 per css-architecture.md */
.charity-accordion__panel {
  /* Pastel R2 2026-06-15 #4 — hidden when closed so the native <details> actually
     collapses. The unconditional display:flex defeated the collapse: the panel
     stayed full-height and accordion.js animated to 0 then snapped back (= the
     "freeze" QA saw). Shown only on [open]; accordion.js keeps [open] during the
     close animation, then drops it. */
  display: none;
  flex-direction: row;                  /* Figma layout_O74ZX8 row */
  gap: 36px;                            /* Figma layout_O74ZX8 gap 36 */
  padding-top: 24px;                    /* Figma layout_BTJIML gap 24 between summary and panel */
  min-width: 0;
}

.charity-accordion__item[open] .charity-accordion__panel {
  display: flex;
}

/* Panel image: fill, fixed h398, radius 4.
    Figma 10965:7709 layout_22W3TV fill h398 radius 4 */
.charity-accordion__panel-img {
  flex: 1;
  margin: 0;
  height: 398px;                        /* Figma layout_22W3TV h398 */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy-lightest);
  min-width: 0;
}

.charity-accordion__panel-img--empty {
  min-height: 200px;
}

.charity-accordion__panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Panel text: column, top-aligned, padding 10, fill.
    Figma 10965:7710 layout_XVWED9 padding 10.
   Top-aligned (not space-between): with placeholder copy shorter than the 398px
   image, space-between pushed the copy to the very bottom of the panel leaving a
   gap. Group spec-list + copy at the top with a fixed gap. QA 2026-06-09 #6 */
.charity-accordion__panel-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px;                        /* Figma layout_XVWED9 padding 10 */
  flex: 1;
  min-width: 0;
  gap: 24px;
}

/* Panel copy: 14px 400 #000000 — Text/Small/Normal.
    Figma 10965:7718 Text/Small/Normal fill_VDF5GG #000000 — untokenized one-off */
.charity-accordion__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;                      /* Figma 10965:7718 Text/Small/Normal */
  line-height: 1.4;
  color: #000000;                       /* Figma fill_VDF5GG #000000 — untokenized one-off */
}


/* ==========================================================================
   Block 10 — Menslink dark CTA band
   Figma node 10965:7656 — dark image bg
   ========================================================================== */

/* Section: flex column, gap 96, padding 112px 80px, dark image bg + overlay.
    Figma 10965:7656 layout_9Y5NAD flex column gap 96 padding 112 80
    fill_7SWGVJ imageRef 434a0445… + rgba(8,17,32,0.95) overlay — untokenized one-off */
.menslink {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 96px;                            /* Figma layout_9Y5NAD gap 96 */
  padding: 112px 80px;                  /* Figma layout_9Y5NAD padding 112 80 */
  background-color: var(--color-navy-dark); /* fallback when no image */
  background-image: var(--menslink-bg-image, none);
  background-size: cover;
  background-position: center;
}

.menslink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 17, 32, 0.95); /* Figma fill_7SWGVJ rgba(8,17,32,0.95) — untokenized one-off */
  pointer-events: none;
}

/* Inner: flex column, relative (above ::before overlay), max w1280.
    Figma 10965:7657 layout_1EBOCD + 10965:7658 layout_Y9M7G8 */
.menslink__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 96px;                            /* matches section gap */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Row: flex row, gap 64, stretch.
    Figma layout_Y9M7G8 row gap 64 stretch
   min-width:0 per css-architecture.md (flex row) */
.menslink__row {
  display: flex;
  flex-direction: row;                  /* Figma layout_Y9M7G8 row */
  gap: 64px;                            /* Figma layout_Y9M7G8 gap 64 */
  align-items: stretch;
  min-width: 0;                         /* css-architecture.md */
}

/* Row 2: image first in DOM AND on the left — matches Figma 10965:7674 child order
    (Images Wrapper 10965:7675 is the first/left child, Content Box 10965:7677 second/right).
    On mobile it stacks naturally (image first = image top). */
.menslink__row--reverse {
  flex-direction: row;                  /* Figma 10965:7674 layout_Y9M7G8 — image left, text right */
}

/* Content box: transparent (spec decision — fill_QY4W1D white but text is white → inversion).
    Figma 10965:7659 layout_L1H8B1 flex column gap 48
    NOTE: boxes are TRANSPARENT — text white on dark band */
.menslink__box {
  display: flex;
  flex-direction: column;
  gap: 48px;                            /* Figma layout_L1H8B1 gap 48 */
  flex: 1;
  min-width: 0;
}

.menslink__box--copy-only {
  justify-content: center;
  flex: 1 1 476px;                      /* QA R3 part-2 #5 — was 0 0 476px (rigid); allow shrink below 476 so the row fits <1440 */
  max-width: 476px;                     /* Figma 10965:7677 layout_JIVAH9 width 476 (cap) */
  min-width: 0;                         /* css-architecture.md — allow shrink below content size */
  overflow-wrap: break-word;            /* guard long words from overflowing the narrowed box */
}

/* Tagline: 16px 700 tangerine — Heading/Tagline.
    Figma 10965:7662 Heading/Tagline (10546:13144) fill_WLKUSK #FF6600
   Underline uses currentColor (tangerine on dark bg) */
.menslink__tagline {
  position: relative;
  margin: 0;
  display: block;
  width: fit-content;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 16px;                      /* Figma 10965:7662 Heading/Tagline */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_WLKUSK #FF6600 */
  text-transform: uppercase;
  padding-bottom: 14px;
}

.menslink__tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 7px;
  height: 1px;
  background-color: currentColor;       /* tangerine on dark bg */
}

.menslink__tagline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 7px;
  background-image: url('../images/tagline-hook.svg');
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(44%) sepia(99%) saturate(2000%) hue-rotate(1deg); /* orange tint for tagline hook on dark bg */
}

/* H2: 48px 400; "Menslink:" tangerine, tail white.
    Figma 10965:7667 Heading/H2 fill_WLKUSK → tangerine for name, ts2=#FFFFFF for tail
    Spec: .menslink__heading { color: tangerine } .menslink__heading--soft { color: white } */
.menslink__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 44px;                      /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 10965:7667 */
  line-height: 1.1;                     /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-tangerine);        /* Figma fill_WLKUSK #FF6600 — H2 lead color */
}

.menslink__heading--soft {
  color: var(--color-white);            /* Figma ts2 #FFFFFF — descriptive tail */
}

/* Copy: 16px 400 white.
    Figma 10965:7669 Text/Regular/Normal fill_2QZVR4 #FFFFFF */
.menslink__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma layout_RAZTQ5 gap 18 */
}

.menslink__copy p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                      /* Figma 10965:7669 Text/Regular/Normal */
  line-height: 1.4;
  color: var(--color-white);            /* Figma fill_2QZVR4 #FFFFFF */
}

/* ts5 emphasis: 20px 700 italic tangerine.
    Figma 10965:7681 ts5 #FF6600 20px italic 700.
    Selector scoped under .menslink__copy so it outranks `.menslink__copy p` (0,1,1)
    which would otherwise paint it white. */
.menslink__copy .menslink__emphasis {
  font-weight: 700;
  font-style: italic;
  font-size: 16px;                      /* USER DECISION 2026-06-04: match body 16px (Emphasis style panel pins no size); ts5 override resolved to 20 but matches body per design intent */
  line-height: 1.4;
  color: var(--color-tangerine);        /* Figma ts5 #FF6600 */
}

.menslink__copy a {
  color: var(--color-white);
  text-decoration: underline;
  opacity: 0.85;
}

/* Footnote superscripts — QA bug #10 */
.menslink__copy sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

.menslink__copy sup a {
  text-decoration: none;
}

.menslink__copy a:hover,
.menslink__copy a:focus-visible {
  opacity: 1;
}

/* Images: radius 4.
    Figma 10965:7672 layout_J9NQQL 608×563 radius 4
    Figma 10965:7676 layout_FB5KJ0 740×512 radius 4 */
.menslink__image {
  flex-shrink: 1;                       /* QA R3 part-2 #5 — allow image to shrink so the row fits viewports <1440 (was flex-shrink:0 → row stayed 1280 and the copy box clipped off-screen at 1241-1359) */
  min-width: 0;                         /* css-architecture.md */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  width: 608px;                         /* Figma layout_J9NQQL 608×563 — flex-basis; scales down via aspect-ratio */
  aspect-ratio: 608 / 563;
  background-color: var(--color-navy-dark);
}

.menslink__image--wide {
  width: 740px;                         /* Figma layout_FB5KJ0 740×512 */
  aspect-ratio: 740 / 512;
}

.menslink__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* (Former max-width:1240px menslink shrink block removed — the desktop rules now
   allow the image + copy box to shrink at any width, so the row fits 1241-1440 too.
   QA R3 part-2 #5: the 1240 breakpoint started too low and left 1241-1359 clipped.) */


/* ==========================================================================
   WIDE TABLET — max-width: 1200px
   Block 10 (Menslink) rows stack — fixed-width images (608/740) overflow
   at narrow viewports when flex-shrink:0 is set.
   ========================================================================== */

@media (max-width: 1200px) {

  /* --- Block 10 — Menslink row stacking ----------------------------------- */
  .menslink__row,
  .menslink__row--reverse {
    flex-direction: column;             /* derived — stack to single column */
    gap: 32px;
  }

  .menslink__box--copy-only {
    width: 100%;
    flex: 0 0 auto;
    max-width: none;                    /* reset the 1240 max-width when stacked */
  }

  .menslink__image,
  .menslink__image--wide {
    width: 100%;
    aspect-ratio: 4 / 3;               /* derived — natural on stack */
  }
}


/* ==========================================================================
   TABLET — max-width: 1100px
   Block 6 (Activities) switches to its stacked variant here — the heading
   moves from the left column to the top, and the cards go 2-up. The band
   gutter still changes at 900 (below) to stay aligned with neighbouring
   sections. QA 2026-06-09 (was 900).
   ========================================================================== */

@media (max-width: 1100px) {

  .community-activities__inner {
    flex-direction: column;             /* stack heading on top of grid */
    align-items: stretch;               /* override desktop flex-start — else children keep content width and cling to the left, leaving empty space on the right */
    gap: 32px;
  }

  .community-activities__heading {
    width: auto;                        /* full width when stacked */
    flex-shrink: 1;
  }

  .community-activities__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cols when stacked */
  }
}


/* ==========================================================================
   TABLET — max-width: 900px
   Blocks 4, 6, and 7 need earlier breakpoint per QA.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Block 4 — Stat cards (QA bug #11) ---------------------------------- */
  .community-stat-cards {
    flex-direction: column;             /* derived — stack to 1 column */
    gap: 16px;                          /* derived — mobile-derivation-catalog */
  }

  /* --- Block 7 — Charity Houses Intro (QA bug #11) ------------------------ */
  .charity-houses {
    padding: 50px 20px;                 /* derived */
    gap: 32px;                          /* derived */
  }

  .charity-intro__heading {
    font-size: 32px;                    /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  .charity-gallery {
    width: calc(100% + 40px);          /* full-bleed with 20px mobile padding */
    margin-left: -20px;
    margin-right: -20px;
  }

  .charity-gallery__media {
    height: 260px;                      /* derived — reduce height */
  }

  /* Pastel 2026-06-15 #7 — caption gets left padding so it isn't flush with
     the screen edge (the gallery is full-bleed with -20px side margins). */
  .charity-gallery__caption {
    padding-left: 20px;
  }

  /* --- Block 6 — Activities band gutter (stacking moved to 1100px) -------- */
  .community-activities {
    padding: 50px 20px;                 /* derived — full-bleed band, reduced gutter (kept at 900 to match neighbouring sections' gutters) */
  }

  /* --- Block 8 — Member contributions panel (QA — move from 768 to 900) --- */
  .charity-featured__contrib-panel {
    flex-direction: column;             /* derived — stack */
    gap: 32px;
  }

  .charity-featured__contrib {
    width: 100%;                        /* full width when stacked */
    flex: 0 0 auto;
  }

  .charity-featured__contrib-img {
    min-height: 240px;
  }

  /* --- Block 9 — Accordion title fit (QA) --------------------------------- */
  .charity-accordion__left {
    gap: 12px;                          /* tighten gap so title fits in one row */
  }

  .charity-accordion__title {
    font-size: 14px;                    /* QA R3 part-2 #13 — all accordion text 14px on mobile (was 15px) */
  }

  .charity-accordion__chevron {
    font-size: 28px;                    /* scale down with title */
  }

  /* --- Block 9 — Charity Past (QA — move from 768 to 900) ---------------- */
  .charity-past {
    padding: 50px 20px;                 /* derived */
    gap: 32px;
  }

  .charity-past__heading {
    font-size: 28px;                    /* derived */
  }

  .charity-accordion__panel {
    flex-direction: column;             /* derived — image top when stacked */
    gap: 24px;
  }

  .charity-accordion__panel-img {
    height: 240px;                      /* derived — reduce at 900 */
  }
}


/* ==========================================================================
   MOBILE — max-width: 768px
   All 768 overrides after all desktop rules. Desktop-first per css-architecture.md.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Block 4 — Stat card value: H4 mobile 24px (Pastel 2026-06-15 #1) ---- */
  .community-stat-card__value {
    font-size: 24px; /* Pastel 2026-06-15 — H4 mobile 24px (was 30px) */
  }

  /* --- Block 5 — Philanthropy ----------------------------------------------- */
  .content-block--philanthropy {
    padding: 50px 20px;                 /* derived — match about.css:835-838 */
  }

  /* Show the full image on mobile instead of cover-cropping it. about.css:885
     forces min-height:300 + object-fit:cover, which crops the sides of the
     1024×683 photo when stacked full-width. Let it keep its natural ratio.
     QA 2026-06-09 — Philanthropy image truncated on mobile. */
  .content-block--philanthropy .content-block__image {
    min-height: 0;
    height: auto;
  }

  .content-block--philanthropy .content-block__image img {
    height: auto;
  }

  /* Block 6 — moved to 900px breakpoint (QA Activities) */
  /* Block 7 — moved to 900px breakpoint (QA bug #11) */

  /* --- Block 8 — Charity Houses Featured ------------------------------------ */
  .charity-featured {
    padding: 50px 20px;                 /* derived */
  }

  .charity-featured__heading {
    font-size: 28px;                    /* derived */
  }

  .charity-featured__body {
    gap: 48px;                          /* derived */
  }

  .charity-featured__detail {
    flex-direction: column;             /* derived — stack column */
    gap: 32px;
  }

  /* Spec list: stack the 3 featured cells vertically when the section is narrow (QA R3 part-2 #10).
     Scoped to match the desktop .charity-featured__box > … specificity so it actually overrides. */
  .charity-featured__box > .charity-featured__spec-list {
    flex-direction: column;
  }

  .charity-featured__montage {
    grid-template-columns: 1fr;         /* derived — single column */
  }

  .charity-featured__img--main {
    grid-column: 1;
  }

  /* Contrib panel — moved to 900px breakpoint (QA) */

  /* Block 9 — moved to 900px breakpoint (QA) */

  /* --- Block 10 — Menslink (stacking moved to 1200px) ---------------------- */
  .menslink {
    padding: 50px 20px;                 /* derived */
    gap: 48px;                          /* derived */
  }

  .menslink__inner {
    gap: 48px;
  }

  .menslink__heading {
    font-size: 32px;                    /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

}


/* ==========================================================================
   MOBILE — max-width: 500px
   Activities cards cling to a 2-col layout down to small phones; break to a
   single column earlier so cards aren't cramped. QA 2026-06-09 #10 (was 402).
   ========================================================================== */

@media (max-width: 500px) {

  /* --- Block 6 — Activities: 2→1 column ------------------------------------ */
  .community-activities__grid {
    grid-template-columns: 1fr;         /* derived — 1 col at ≤500 */
  }

  /* Reset the desktop 2-col span — in a single-col grid `span 2` would force a
     phantom second column. First card stacks full-width like the rest. */
  .community-activity-card:first-child {
    grid-column: auto;                  /* derived — no 2-col span at ≤500 */
  }

  /* Block 9 — Accordion left wrap moved to 900px breakpoint (QA bug #12) */

  /* --- Block 9 — Accordion panel text: 14px at 374px mobile (QA round-3 #13) */
  /* Target: .charity-accordion__item .charity-accordion__panel and all nested text */
  .charity-accordion__panel,
  .charity-accordion__panel .charity-featured__spec-list,
  .charity-accordion__panel .charity-featured__spec-row,
  .charity-accordion__panel .charity-accordion__copy {
    font-size: 14px;                    /* QA round-3 #13 — 14px for all panel text on mobile 374px */
  }

  /* Also reset the gallery item max-width on small screens — the 55vw cap is desktop-only */
  .charity-gallery__item {
    max-width: none;                    /* QA round-3 #8 — remove desktop cap; mobile uses fixedWidth:85% via Splide */
  }

}