/* ==========================================================================
   Women in Construction page (templates/template-women-in-construction.php)
   Figma 11529:3986 (Batch 4, desktop-only — mobile per mobile-derivation-catalog).
   Spec: roadmap/phase-08-content-pages/artifacts/page-women-in-construction-spec.md
   Blocks here: 5 "How We're Making An Impact" (.wic-impact),
                6 "WIC Partners V2.0" (.wic-partners, cards from partnerships.css),
                7 "Full width image" (.wic-full-width-image).
   Block 4 reuses .about-feature-intro (about.css) + __inner--bordered modifier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Feature Intro (page override on the shared .about-feature-intro)
   -------------------------------------------------------------------------- */

/* QA R1 #1 — the shared lead caps at 900px, which wraps this copy to 5 lines.
   Figma's text box is 1024 wide (11529:4402, h=124 / LH 31.2 = 4 lines). */
.about-feature-intro--wic .about-feature-intro__lead {
  max-width: 1024px;                      /* Figma 11529:4402 box width 1024 */
}

/* --------------------------------------------------------------------------
   Block 5 — How We're Making An Impact
   -------------------------------------------------------------------------- */

.wic-impact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;                              /* Figma 11529:4043 gap 64 */
  padding: 112px 80px;                    /* Figma 11529:4043 Section Padding large 112 80 */
  background-color: var(--color-navy-lightest); /* Figma 11529:4043 fill #E6E7E9 */
}

.wic-impact__intro {
  display: flex;
  flex-direction: column;
  align-items: center;                    /* Figma 11578:1447 counter CENTER */
  max-width: 768px;                       /* Figma 11578:1448 content column 768 */
}

.wic-impact__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11578:1454 FrutigerLTStd-Roman */
  font-size: 48px;                        /* Figma 11578:1454 48px — QA R1 #2 (the 44px "correction" was wrong for this page) */
  line-height: 1.2;                       /* Figma 11578:1454 LH 57.6 / 48 */
  letter-spacing: -0.01em;                /* Figma 11578:1454 LS -1% */
  color: var(--color-navy);               /* Figma 11578:1454 fill #0B1628 */
  text-align: center;                     /* Figma 11578:1454 align CENTER */
}

.wic-impact__rows {
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11578:1430 gap 48 */
  width: 100%;
  max-width: 1280px;                      /* Figma 11578:1310 card width 1280 */
  min-width: 0;                           /* css-architecture.md flex chain */
}

.wic-impact__row {
  display: flex;
  flex-direction: row;
  align-items: center;                    /* Figma 11578:1310 counter CENTER */
  gap: 48px;                              /* Pastel 2026-08-07 #1 — designer asked for 48 on every card; supersedes Figma 11578:1310 gap 64 */
  padding: 36px;                          /* Figma 11578:1310 padding 36 */
  background-color: var(--color-white);   /* Figma 11578:1310 fill #FFFFFF */
  border-radius: var(--radius-sm);        /* Figma 11578:1310 cornerRadius 4 */
  min-width: 0;
}

.wic-impact__row--reverse {
  flex-direction: row-reverse;            /* Figma 11578:1355/1392 — photo RIGHT, checkerboard alternation */
}

.wic-impact__image {
  flex: 1 1 634px;                        /* Figma 11578:1327 image column 634 */
  align-self: stretch;                    /* QA R1 #3 — Figma image height == card inner height on all 4 cards; aspect-ratio below only sets the minimum */
  min-width: 0;
  margin: 0;
  border-radius: var(--radius-sm);        /* Figma 11578:1327 cornerRadius 4 */
  overflow: hidden;
}

.wic-impact__image--r433 { aspect-ratio: 634 / 433; }  /* Figma 11578:1327 634x433 */
.wic-impact__image--r471 { aspect-ratio: 634 / 471; }  /* Figma 11578:1390 634x471 */
.wic-impact__image--r625 { aspect-ratio: 634 / 625; }  /* Figma 11578:1394 634x625 */

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

.wic-impact__content {
  flex: 0 0 510px;                        /* Figma 11578:1344 content column 510 FIXED */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;                              /* Figma 11578:1344 gap 36 */
}

.wic-impact__heading-row {
  display: flex;
  flex-direction: column;                 /* Figma 11578:1312 VERTICAL — icon above heading */
  align-items: flex-start;
  gap: 22px;                              /* Figma 11578:1312 gap 22 */
}

.wic-impact__icon {
  width: 48px;                            /* Figma 11578:1331 icon 48x48 */
  height: 48px;
  display: block;
}

.wic-impact__card-heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11578:1316 FrutigerLTStd-Roman */
  font-size: 36px;                        /* Figma 11578:1316 H3 36 */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma 11578:1316 fill #0B1628 */
}

.wic-impact__body {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11578:1388 blank-line paragraph break = one 22.4px line */
}

.wic-impact__body p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                        /* Figma 11578:1320 Text Regular 16 */
  line-height: 1.4;                       /* Figma 11578:1320 LH 140% */
  color: #000000;                         /* Figma 11578:1320 fill #000000 — untokenized, cards 1-3 raw value (designer Q: differs from card 4 navy) */
}

.wic-impact__row--events .wic-impact__body p {
  color: var(--color-navy);               /* Figma 11578:1423 fill #0B1628 */
}

.wic-impact__list {
  margin: 0;
  padding: 0 0 0 24px;                    /* bullet indent — Figma 11578:1424 lineIndentations 1 */
  list-style: disc;                       /* Figma 11578:1424 lineTypes UNORDERED */
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11578:1424 style run 8 — description FrutigerLTStd-Roman 400 */
  font-size: 16px;                        /* Figma 11578:1424 16 */
  line-height: 1.4;
  color: var(--color-navy);               /* Figma 11578:1424 fill #0B1628 */
}

.wic-impact__list li + li {
  margin-top: 14px;                       /* Figma 11578:1424 listSpacing 14 */
}

.wic-impact__list strong {
  font-weight: 700;                       /* Figma 11578:1424 style run 9 — lead-in FrutigerLTStd-Bold */
}

.wic-impact__list li::marker {
  font-size: 1.5em;                       /* QA R1 #4 — browser-default disc reads much smaller than the Figma bullet (no px given by QA) */
}

.wic-impact__actions {
  display: flex;
  gap: 24px;                              /* Figma 11578:1417 gap 24 */
}

/* --------------------------------------------------------------------------
   Block 6 — WIC Partners
   Card anatomy comes from partnerships.css (.partner-card--small family),
   enqueued for this template in functions.php.
   -------------------------------------------------------------------------- */

.wic-partners {
  padding: 112px 80px;                    /* Figma 11922:567 Section Padding large 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11922:567 fill #CBDAE6 */
}

.wic-partners__inner {
  max-width: 1280px;                      /* Figma 11922:568 content wrapper 1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* QA R1 #6 — Figma copy 11922:582 bottom → card 11922:584 top measures 48 (the wrapper's own 36 is not the rendered gap) */
}

.wic-partners__intro {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11922:574 content gap 22 */
  max-width: 768px;                       /* Figma 11922:574 content column 768 */
}

.wic-partners__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11922:580 FrutigerLTStd-Roman */
  font-size: 48px;                        /* Figma 11922:580 48px — QA R1 #5 */
  line-height: 1.2;                       /* Figma 11922:580 LH 57.6 / 48 */
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma 11922:580 fill #0B1628 */
}

.wic-partners__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                        /* Figma 11922:582 Text Regular 16 */
  line-height: 1.4;                       /* Figma 11922:582 LH 140% */
  color: var(--color-navy-darkest);       /* Figma 11922:582 fill #03060C */
}

.wic-partners__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;                              /* Figma 11922:583 gap 24 — differs from partnerships tab grid 16 */
  min-width: 0;
}

/* QA R1 #7 — the card's own gap must stay the shared 18px (Figma 11922:584, same
   as the 4 unlabelled siblings); only the name↔role pair inside it is 8px
   (Figma 11922:589). The earlier flat 8px override squeezed logo↔name. */
.wic-partners__row .partner-card--labelled {
  gap: 18px;                              /* Figma 11922:584 card gap 18 */
}

.wic-partners__row .partner-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                               /* Figma 11922:589 name+role gap 8 */
}

.wic-partners__row .partner-card__role--italic {
  font-style: italic;                     /* Figma 11922:591 FrutigerLTStd-Italic */
}

.wic-partners__empty {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-navy);               /* defined empty state per cms-data.md */
}

/* --------------------------------------------------------------------------
   Block 7 — Full width image
   -------------------------------------------------------------------------- */

.wic-full-width-image {
  display: flex;                          /* QA R1 #8 — image is a stretched flex child, not a 100%-height block */
  width: 100%;                            /* Figma 11529:4042 full-bleed 1440 */
  aspect-ratio: 1440 / 624;               /* Figma 11529:4042 frame 1440x624 */
  overflow: hidden;
}

.wic-full-width-image__img {
  align-self: stretch;                    /* QA R1 #8 */
  width: 100%;
  object-fit: cover;                      /* Figma 11529:4042 scaleMode STRETCH — rendered cover per careers band precedent, designer Q in spec */
  display: block;
}

/* ==========================================================================
   Mobile — derived per roadmap/mobile-derivation-catalog.md (no B4 mobile frames)
   ========================================================================== */

@media (max-width: 1100px) {

  /* 634+64+510 no longer fits content width — release the fixed columns before
     stacking (same intermediate treatment as content-block rows). */
  .wic-impact__content {
    flex: 1 1 480px;
  }
}

@media (max-width: 768px) {

  /* --- Block 5 — Impact --------------------------------------------------- */
  .wic-impact {
    padding: 50px 20px;                   /* Section Padding large 112 -> 50, gutter 20 */
    gap: 36px;                            /* Pastel 2026-08-07 #4 — heading → first card gap on mobile (was 48 per QA R1 #9) */
  }

  .wic-impact__heading {
    font-size: 32px;                      /* Figma Variables mobile H2 -> 32 (desktop 48 per Figma 11578:1454) */
  }

  .wic-impact__rows {
    gap: 24px;                            /* card list gap 48 -> 24 on mobile stack */
  }

  .wic-impact__row,
  .wic-impact__row--reverse {
    flex-direction: column-reverse;       /* figure-first DOM: content leads on mobile for every card */
    align-items: stretch;
    gap: 32px;                            /* stacked card gap — independent of the desktop column gap (48 per Pastel 2026-08-07 #1); designer reviewed mobile in that round without flagging it */
    padding: 24px;                        /* inner Padding medium 36 -> 24 */
  }

  .wic-impact__image {
    flex: 0 0 auto;
  }

  .wic-impact__content {
    flex: 0 0 auto;
    gap: 24px;
  }

  .wic-impact__card-heading {
    font-size: 28px;                      /* Figma Variables mobile H3 36 -> 28 */
  }

  /* Pastel QA 2026-07-22 #1 pattern: long CTA labels wrap instead of overflowing
     the screen edge (base .btn is white-space:nowrap; body overflow-x:hidden then
     clips the fixed-width button at the right edge on narrow phones). */
  .wic-impact__actions .btn {
    white-space: normal;
    max-width: 100%;
  }

  /* --- Block 6 — Partners -------------------------------------------------- */
  .wic-partners {
    padding: 50px 20px;                   /* Section Padding large 112 -> 50 */
  }

  .wic-partners__heading {
    font-size: 32px;                      /* Figma Variables mobile H2 -> 32 (desktop 48 per Figma 11922:580) */
  }

  /* QA R1 #10 — partner cards sit 16px apart on mobile (desktop keeps the
     Figma 11922:583 gap 24). Card basis follows the mobile gap so two cards
     still fit a row without wrapping; 1-up below 490 is restated further down. */
  .wic-partners__row {
    gap: 16px;
  }

  .wic-partners__row .partner-card--small {
    flex: 0 0 calc(50% - 8px);            /* 2-up with the mobile gap 16 */
    min-width: 0;
  }

  /* --- Block 7 — Full width image ------------------------------------------ */
  .wic-full-width-image {
    aspect-ratio: auto;                   /* full-bleed band, no height ladder — careers precedent */
  }

  .wic-full-width-image__img {
    min-height: 300px;                    /* reasonable floor until designer provides mobile frame, careers precedent */
    height: auto;
  }
}

@media (max-width: 490px) {

  /* Full mobile 1-up at the partner-card family's own documented 490 cutoff
     (partnerships.css, client 2026-06-19) — restated at this row's specificity
     because the 768 2-up rule above would otherwise win below 490. */
  .wic-partners__row .partner-card--small {
    flex: 0 0 100%;
  }
}