/* pnf-pages.css — shared styles for About sub-pages */

:root{
  --cream:#f6efe3; --cream-2:#efe5d2; --ink:#1f1a14; --ink-soft:#3a322a;
  --muted:#7a6f60; --rule:#d9cdb6; --terracotta:#b94a2c; --terracotta-deep:#8a3018;
  --forest:#1f3a2c; --gold:#c08a2e;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--cream); color:var(--ink); overflow-x:hidden; max-width:100%;}
body{font-family:"Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;}
img{max-width:100%; height:auto;}
a{color:inherit}

.ph{display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; text-align:center; padding:12px;
  background:
    repeating-linear-gradient(135deg, rgba(31,26,20,.08) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #d9cdb6, #c8b89c);
  color:#3a322a;}
.ph.dark{background:
  repeating-linear-gradient(135deg, rgba(246,239,227,.08) 0 1px, transparent 1px 10px),
  linear-gradient(180deg, #2c2520, #1f1a14);
  color:#bfae93;}

@media (max-width: 900px){
  /* Grid items must be allowed to shrink below their intrinsic content
     width so images / long words can't blow out a single-column track. */
  [style*="display: grid"] > *,
  [style*="display:grid"] > *{min-width: 0;}

  .pnf-hero-grid{grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; padding-bottom: 44px !important;}
  .pnf-page-grid{grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important;}
  .trustee-bio-grid{grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 28px 20px !important;}
  .pnf-pad{padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important;}
  .pnf-hero.pnf-pad{padding-top: 32px !important; padding-bottom: 0 !important;}

  /* Collapse footer here too so tablet/narrow-browser views stop overflowing */
  .pnf-footer{padding: 72px 24px 32px !important;}
  .pnf-footer-mark{font-size: 112px !important; margin-bottom: 40px !important;}
  .pnf-footer-mark img{height: 132px !important;}
  .pnf-footer-cols{grid-template-columns: 1fr 1fr !important; gap: 36px 28px !important; padding-bottom: 40px !important;}
  .pnf-footer-cols > :first-child{grid-column: 1 / -1 !important;}
  .pnf-footer-bottom{flex-direction: column !important; align-items: flex-start !important; gap: 14px !important;}
  .pnf-footer, .pnf-footer *{overflow-wrap: anywhere !important; word-break: break-word !important;}

  /* ── Mobile patches for every PNF page via inline-style attribute selectors ── */

  /* Section padding shorthands authored in JSX (no .pnf-pad class) */
  [style*="padding: 100px 56px"],
  [style*="padding:100px 56px"],
  [style*="padding: 120px 56px"],
  [style*="padding:120px 56px"],
  [style*="padding: 80px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding: 60px 56px"],
  [style*="padding:60px 56px"],
  [style*="padding: 36px 56px"],
  [style*="padding:36px 56px"]{padding: 56px 20px !important;}
  [style*="padding: 64px 56px 0"],
  [style*="padding:64px 56px 0"],
  [style*="padding: 56px 56px 0"],
  [style*="padding:56px 56px 0"]{padding: 28px 20px 0 !important;}
  [style*="padding: 56px 56px 100px"],
  [style*="padding:56px 56px 100px"]{padding: 32px 20px 64px !important;}

  /* Inline-styled grids → stack to 1 column */
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns:260px"],
  [style*="grid-template-columns: 320px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns: 180px"],
  [style*="grid-template-columns:180px"],
  [style*="grid-template-columns: 140px"],
  [style*="grid-template-columns:140px"],
  [style*="grid-template-columns: minmax"],
  [style*="grid-template-columns:minmax"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]:not(.pnf-footer-cols),
  [style*="grid-template-columns:1fr 1fr"]:not(.pnf-footer-cols),
  /* Trailing-fixed-width tracks (aside layouts) */
  [style*="1fr 320px"],
  [style*="1fr 260px"],
  [style*="1fr 240px"],
  [style*="1fr 200px"],
  [style*="1fr 180px"],
  [style*="1fr 480px"],
  /* Complex multi-track grids that don't fit on mobile */
  [style*="grid-template-columns: 80px 100px"],
  [style*="grid-template-columns: 100px 1fr 100px"],
  [style*="grid-template-columns: 50px 1fr 1fr"]{grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important;}

  /* Strip vertical-only borders when stacked grid kids */
  [style*="border-right: 1px"][style*="rule"],
  [style*="border-right:1px"][style*="rule"]{border-right: none !important;}

  /* Hero breadcrumb / file rows — `space-between` flex of monospace tags */
  header [style*="space-between"][style*="JetBrains"][style*="font-size: 11"],
  header [style*="space-between"][style*="JetBrains"][style*="font-size:11"]{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 9.5px !important;
    letter-spacing: .12em !important;
    margin-bottom: 18px !important;
  }
  /* Honoree hero meta uses fontSize 12 sometimes */
  header [style*="space-between"][style*="JetBrains"][style*="font-size: 12"]{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 18px !important;
  }

  /* Inline-styled hero h1s with hard pixel sizes (about-page 140, honoree 120) */
  header h1[style*="font-size: 140"],
  header h1[style*="font-size:140"]{font-size: clamp(40px, 12vw, 64px) !important; line-height: .94 !important; letter-spacing: -.025em !important;}
  header h1[style*="font-size: 120"],
  header h1[style*="font-size:120"]{font-size: clamp(40px, 11vw, 60px) !important; line-height: .96 !important; letter-spacing: -.025em !important;}

  /* Sticky-nav-style flex rows with chips that overflow */
  [style*="display: flex"][style*="flex-wrap: wrap"][style*="JetBrains"]{font-size: 10px !important;}

  /* Big italic side labels (Mission. / Vision. at 48px) */
  [style*="font-style: italic"][style*="font-size: 48"]{font-size: 30px !important;}

  /* Aside lockups (Trustees board card font 36 → smaller) */
  [style*="font-size: 36"][style*="Fraunces"]{font-size: 28px !important;}

  /* Index strip in trustees pages — wrap better */
  [style*="flex-wrap: wrap"][style*="font-size: 11"]{font-size: 10px !important;}
}

@media (max-width: 640px){
  .pnf-portrait-float{float: none !important; width: 100% !important; max-width: 320px !important; margin: 0 0 28px 0 !important;}
  .pnf-hero h1{font-size: 52px !important; line-height: .96 !important;}
  .pnf-pad{padding-left: 18px !important; padding-right: 18px !important; padding-top: 44px !important; padding-bottom: 44px !important;}
  .pnf-hero.pnf-pad{padding-top: 24px !important;}

  /* Top strip — hidden on mobile; contents relocated to footer (rule 18) */
  .pnf-topstrip{display: none !important;}

  /* Sticky nav — show hamburger, hide inline links + apply + donate (rule 17) */
  .pnf-mainnav{grid-template-columns: 1fr auto !important; padding: 12px 18px !important; gap: 12px !important;}
  .pnf-mainnav nav{display: none !important;}
  .pnf-mainnav .pnf-cta-apply{display: none !important;}
  .pnf-mainnav .pnf-cta-donate{display: none !important;}
  .pnf-mobile-toggle{display: inline-flex !important;}
  .pnf-mobile-menu{display: block !important;}
  .pnf-logo-img{height: 46px !important;}
  .pnf-logo-title{font-size: 14px !important;}
  .pnf-logo-sub{font-size: 9px !important;}

  /* Hero meta row — stack/shrink */
  .pnf-hero-meta{flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; font-size: 9.5px !important; margin-bottom: 20px !important;}

  /* Section headings — tighten */
  .pnf-section-heading{font-size: 30px !important; letter-spacing: -.015em !important;}
  .pnf-section-num{font-size: 11px !important;}
  .pnf-section-label{font-size: 22px !important;}
  .pnf-timeline-h2{font-size: 26px !important;}
  .pnf-timeline-bar{padding-bottom: 12px !important; margin-bottom: 36px !important;}

  /* Drop body type a notch on mobile */
  .pnf-body-lead{font-size: 20px !important; line-height: 1.4 !important;}
  .pnf-body-secondary{font-size: 17px !important;}
  .pnf-columns-2{columns: 1 !important;}

  /* Timeline & quadrant grids: stack with internal borders that work vertically */
  .pnf-grid-4{grid-template-columns: minmax(0, 1fr) !important;}
  .pnf-grid-4 > *{border-right: none !important; border-bottom: 1px solid var(--rule) !important; padding: 24px 20px !important;}
  .pnf-grid-4 > *:last-child{border-bottom: none !important;}
  .pnf-grid-2{grid-template-columns: minmax(0, 1fr) !important;}
  .pnf-grid-2 > *{border-right: none !important; border-bottom: 1px solid var(--rule) !important; padding: 24px 20px !important;}
  .pnf-grid-2 > *:last-child{border-bottom: none !important;}
  .pnf-grid-3{grid-template-columns: minmax(0, 1fr) !important;}
  .pnf-grid-3 > *{border-right: none !important; border-bottom: 1px solid var(--rule) !important;}
  .pnf-grid-3 > *:last-child{border-bottom: none !important;}

  /* Aggressive size cap for any inline-styled h1/h2 that's still huge */
  h1[style*="font-size: clamp(56px"],
  h1[style*="font-size:clamp(56px"]{font-size: clamp(40px, 12vw, 56px) !important;}
  h2[style*="font-size: 72"],
  h2[style*="font-size:72"],
  h2[style*="font-size: 48"]:not(.pnf-timeline-h2),
  h2[style*="font-size:48"]:not(.pnf-timeline-h2){font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.05 !important;}

  /* Footer */
  .pnf-footer{padding: 56px 20px 28px !important;}
  .pnf-footer-mark{font-size: 88px !important; margin-bottom: 32px !important;}
  .pnf-footer-mark img{height: 104px !important;}
  .pnf-footer-cols{grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; padding-bottom: 36px !important;}
  .pnf-footer-cols > :first-child{grid-column: 1 / -1 !important;}
  .pnf-footer-bottom{flex-direction: column !important; align-items: flex-start !important; gap: 14px !important;}
}

/* ─────────────────────────────────────────────────────────────
   Home page (PNF Redesign.html / app.jsx) — mobile patches.
   The home page is inline-styled and needs explicit selectors
   because its paddings/grids differ from the About sub-pages.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px){
  /* Home hero — rearrange to single column with mobile order:
     headline → image → body → CTA (rule 7).                    */
  .pnf-home-hero{padding: 48px 20px 56px !important;}
  .pnf-home-hero-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "head" "image" "body" "cta" !important;
    column-gap: 0 !important;
    row-gap: 24px !important;
  }
  .pnf-home-hero-h1{
    font-size: clamp(28px, 8.5vw, 56px) !important;
    line-height: 1.0 !important;
    margin-top: 16px !important;
  }
  .pnf-home-hero-body{font-size: 17px !important; line-height: 1.55 !important;}
  .pnf-home-hero-cta{display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important;}
  .pnf-home-hero-cta > *{width: 100% !important; justify-content: center !important;}

  /* Home page section padding shorthands — 32px and 60px horiz */
  [style*="padding: 100px 32px"],
  [style*="padding:100px 32px"],
  [style*="padding: 120px 32px"],
  [style*="padding:120px 32px"],
  [style*="padding: 80px 32px"],
  [style*="padding:80px 32px"]{padding: 56px 20px !important;}
  [style*="padding: 100px 60px"],
  [style*="padding:100px 60px"]{padding: 48px 20px !important;}

  /* Home page grids (Programmes 1fr 1.2fr, Story 1fr 1.4fr, Voices 360px 1fr) */
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns:360px 1fr"]{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Programmes tab button: 60px 1fr auto → tighten to fit phone */
  [style*="grid-template-columns: 60px 1fr auto"]{
    grid-template-columns: 40px 1fr 28px !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: 60px 1fr auto"][style*="padding: 32px 32px"],
  [style*="grid-template-columns: 60px 1fr auto"][style*="padding:32px 32px"]{
    padding: 20px 18px !important;
  }

  /* Voices header: title + nav buttons row — wrap nicely */
  /* Story sticky portrait — unstick when stacked */
  [style*="position: sticky"][style*="top: 120"]{position: static !important;}

  /* Donate modal preset grid (5 buttons across) */
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"]{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  /* Donate modal — tighten interior padding */
  [style*="padding: 48px"][style*="cream"]:not(.pnf-footer):not(footer){padding: 32px 22px !important;}

  /* Numbers: padding inside each stat cell was 40px 28px — keep airy but tighten */
  [style*="padding: 40px 28px"]{padding: 28px 20px !important;}

  /* Story columns (2-col text) → 1 col */
  [style*="columns: 2"]{columns: 1 !important;}

  /* Programmes detail padding (48px 48px) → tighten */
  [style*="padding: 48px 48px"]{padding: 28px 20px !important;}

  /* Voices testimonial section grid stacks → image is full-width by default */
  /* Voices "space-between" h2 + nav-buttons row — let it wrap */
  section [style*="space-between"][style*="baseline"]{flex-wrap: wrap !important; gap: 16px !important;}

  /* Voices testimonial inner row (name + counter) — stack */
  [style*="justify-content: space-between"][style*="align-items: end"]{flex-wrap: wrap !important; gap: 18px !important;}
}

@media (max-width: 640px){
  /* Numbers 4-col → 2-col on small phones */
  [style*="grid-template-columns: repeat(4, 1fr)"]:not(.pnf-footer-cols){
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] > *{
    border-right: none !important;
    border-bottom: 1px solid rgba(246,239,227,.18) !important;
  }
  /* Numbers numeric size cap for phone */
  [style*="font-size: clamp(64px, 8vw, 120px)"]{
    font-size: clamp(56px, 16vw, 88px) !important;
  }

  /* Show the relocated topstrip in the footer (rule 18) */
  .pnf-footer-utility{display: flex !important;}

  /* Donate modal preset → 2 cols on small phones */
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"]{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Programmes detail min-height was 480 — let it flow */
  [style*="min-height: 480"]{min-height: 0 !important;}

  /* Get-Involved right column has borderRight to divide on desktop — remove on stack */
  [style*="border-right: 1px solid var(--rule)"]{border-right: none !important;}

  /* GetInvolved preset (₦25k/₦100k…) inner 1fr 1fr stays acceptable */
}

/* ─────────────────────────────────────────────────────────────
   Blog post pages — full sidebar (Recent Posts + Topics)
   responsive: sticky on desktop, stacked below post on mobile.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pnf-blog-post-layout .pnf-blog-aside {
    position: static !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--rule);
    margin-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   Honoree pages — sticky condensed section nav + drop floats
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px){
  /* Sticky § 01 · A life sidebar — becomes a horizontal scrolling strip
     pinned below the header so readers can jump between chapters
     after scrolling past the top (rule 11).                         */
  [style*="position: sticky"][style*="top: 80"]{
    position: sticky !important;
    top: 60px !important;
    z-index: 30 !important;
    background: rgba(246,239,227,.96) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    margin: 0 -20px 20px !important;
    padding: 10px 20px !important;
    border-top: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  [style*="position: sticky"][style*="top: 80"] > div:first-child{
    margin-bottom: 8px !important;
    padding-top: 4px !important;
    border-top: none !important;
  }
  [style*="position: sticky"][style*="top: 80"] ol{
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 18px !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [style*="position: sticky"][style*="top: 80"] ol::-webkit-scrollbar{display: none;}
  [style*="position: sticky"][style*="top: 80"] ol li{
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    grid-template-columns: auto auto !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  /* Honoree inline figures use float: right/left + pixel widths —
     drop the float and let them stack full-width on phones
     (rules 2, 5). Also drop the fixed aspect-ratio wrapper + cover
     so portraits show in full, not as cropped slices.              */
  figure[style*="float"]{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    shape-outside: none !important;
  }
  figure[style*="float"] > div{
    aspect-ratio: auto !important;
    height: auto !important;
  }
  figure[style*="float"] > div > img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Honoree hero chapter h3 sizing — keep readable, no overflow */
  h3[style*="font-size: 30"]{font-size: 24px !important;}

  /* Honoree body Fraunces serif 20/1.7 — slightly tighter on phone */
  [style*='font-family: "Fraunces"'][style*="font-size: 20"][style*="line-height: 1.7"]{
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  /* Pull-quote 48px → fit phone */
  [style*="font-size: 48"][style*="line-height: 1.25"]{
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  /* Scholarship section h2 size 56 */
  h2[style*="font-size: 56"]{
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.04 !important;
  }
  /* Scholarship section inner row (stat + apply) */
  section [style*="background: var(--ink)"] [style*="display: flex"][style*="gap: 32"]{
    flex-wrap: wrap !important;
    gap: 18px !important;
  }
  section [style*="background: var(--ink)"] a[style*="margin-left: auto"]{
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Prev/Next pair → stack */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 32"]:has(a[href*="Honoree"]){
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  /* Honoree timeline row inner: 140px 1fr — already covered by 1fr 320px
     family of selectors. But 140px 1fr needs handling: */
  [style*="grid-template-columns: 140px 1fr"]{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  /* Scholarship application notice — stack the two cells on phones */
  .pnf-scholarship-notice{
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
  }
  .pnf-scholarship-notice-cell{
    border-right: none !important;
  }
  .pnf-scholarship-notice-cell:first-child{
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Scholarship application notice — emphasis colours
   ───────────────────────────────────────────────────────────── */
.pnf-scholarship-notice strong{ font-weight: 600; }
.pnf-scholarship-notice .pnf-scholarship-notice-cell:last-child strong{ color: var(--accent); }