/* =========================================================
   INTERIOR PAGE COMPONENTS
   (loaded alongside style.css on every page except index.html)
   ========================================================= */

/* ---- Page hero (solid, no photo dependency) ---- */
.page-hero {
  background: var(--forest-deep);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(224,160,48,0.14) 0, transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(181,72,52,0.16) 0, transparent 40%);
  color: var(--paper);
  padding: 80px 24px 64px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -180px;
  right: -140px;
  background: var(--gold);
  opacity: 0.09;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -100px;
  background: var(--clay);
  opacity: 0.08;
  border-radius: 60% 40% 35% 65% / 55% 45% 55% 45%;
  z-index: 0;
}
.page-hero-content { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }

/* ---- Photo-overlay hero variant ----
   Opt-in with .has-photo + a --hero-photo custom property (set inline
   per page, or per-page classes below). Sits on top of the existing
   .page-hero radial-gradient blobs via background-blend-mode, so the
   same brand-color glow still shows through the photo. A dark
   bottom-weighted gradient keeps the eyebrow/title/subtitle legible
   over any photo without needing per-photo tuning. */
.page-hero.has-photo {
  background-image:
    linear-gradient(180deg, rgba(16,40,29,0.55) 0%, rgba(16,40,29,0.72) 55%, rgba(16,40,29,0.88) 100%),
    radial-gradient(circle at 12% 20%, rgba(224,160,48,0.18) 0, transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(181,72,52,0.2) 0, transparent 40%),
    var(--hero-photo);
  background-size: cover, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.page-hero.has-photo::before,
.page-hero.has-photo::after { display: none; } /* the blob pseudo-elements are redundant once a photo is behind the gradient */
.page-hero.has-photo .page-subtitle { color: rgba(251,248,241,0.88); }

/* Per-page photo assignments — swap the url() to change a page's hero photo */
.about-hero-photo   { --hero-photo: url('../assets/images/photos/about.png'); }
.programs-hero-photo { --hero-photo: url('../assets/images/photos/work.png'); }
.projects-hero-photo { --hero-photo: url('../assets/images/photos/bee.png'); }
.leadership-hero-photo { --hero-photo: url('../assets/images/photos/health.jpg'); }
.gallery-hero-photo  { --hero-photo: url('../assets/images/photos/sports.jpg'); }
.news-hero-photo     { --hero-photo: url('../assets/images/photos/hands.png'); }
.contact-hero-photo  { --hero-photo: url('../assets/images/photos/garden.jpg'); }

@media (max-width: 480px) {
  .page-hero.has-photo { min-height: 340px; }
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: block;
  margin-bottom: 14px;
}
.page-title { font-size: clamp(2rem, 4vw, 2.9rem); color: var(--paper); margin-bottom: 12px; }
.page-subtitle { color: rgba(251,248,241,0.8); font-size: 1.05rem; max-width: 56ch; }

/* JOPA acronym strip (About page) */
.jopa-meaning { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(251,248,241,0.18); max-width: 780px; }
.jopa-meaning h2 { color: var(--paper); font-size: 1.1rem; margin-bottom: 14px; }
.jopa-acronym { display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold-light); margin-bottom: 16px; }
.jopa-acronym .separator { color: rgba(251,248,241,0.3); }
.jopa-description { color: rgba(251,248,241,0.82); font-size: 0.98rem; }

/* ---- Generic two-column content ---- */
.two-column-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.two-column-content p { color: var(--ink-soft); margin-bottom: 16px; }
@media (max-width: 860px) { .two-column-content { grid-template-columns: 1fr; } }
/* Single-column variant — replaces inline style="grid-template-columns: 1fr;"
   used on the Leadership intro section */
.two-column-content--single { grid-template-columns: 1fr; }

/* Contact page: map iframe reset + spacing below it — replaces two inline
   styles (style="border:0;" and style="margin-top:14px;") */
.contact-map-iframe { border: 0; }
.map-note { margin-top: 14px; }

/* NOTE: .image-placeholder and .section-image (the real-photo container
   used inside .two-column-content above) live in style.css — that is
   the single source of truth. An older "coming soon" variant of
   .image-placeholder used to be defined here too, with img{display:none}
   and a "Replace with real photo" overlay, and because this file loads
   after style.css it was silently winning and hiding every real photo
   on the About page. It has been deleted rather than reconciled, so
   there is exactly one definition of this component going forward. */

/* ---- Mission / Vision / Values ---- */
.mvv-section { background: var(--paper); }
.mvv-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.mvv-card, .values-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.mvv-card:hover, .values-card:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); }
.mvv-icon { font-size: 1.6rem; margin-bottom: 12px; }
.mvv-card h3, .values-card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.mvv-card p { color: var(--ink-soft); }
.values-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 12px; }
.values-list li { color: var(--ink-soft); font-size: 0.94rem; }
.values-list strong { color: var(--forest-deep); }
@media (max-width: 860px) { .mvv-top, .values-list { grid-template-columns: 1fr; } }

/* ---- Numbered approach cards ---- */
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.approach-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease, border-color 0.2s ease;
}
.approach-card:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); border-color: transparent; }
.approach-number { font-family: var(--font-mono); color: var(--clay); font-size: 1.6rem; font-weight: 600; margin-bottom: 10px; }
.approach-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.approach-card p { color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 860px) { .approach-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .approach-grid { grid-template-columns: 1fr; } }

/* ---- Stats (about page "By the Numbers") ---- */
.stats-section { background: var(--forest); color: var(--paper); }
.stats-section .section-title { color: var(--paper); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat-box { border-left: 3px solid var(--gold); padding-left: 18px; transition: border-color 0.2s ease, transform 0.2s ease; }
.stat-box:hover { border-color: var(--gold-light); transform: translateY(-3px); }
.stat-number { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; color: var(--gold-light); }
.stat-label { color: rgba(251,248,241,0.75); font-size: 0.9rem; margin-top: 6px; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; } }

/* ---- Filter buttons (Programs / Gallery) ---- */
.programs-filter-section, .gallery-filter-section { background: var(--cream); padding: 34px 0 6px; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease;
}
.filter-btn:hover { border-color: var(--clay); color: var(--clay); }
.filter-btn.active { background: var(--forest); border-color: var(--forest); color: var(--paper); }

/* ---- Program card header (icon, title, status badge) — shared by
   both the summary cards on Programs and the header block on Projects ---- */
.program-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.program-icon-large { width: 46px; height: 46px; border-radius: 12px; background: rgba(224,160,48,0.18); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.program-header h3 { font-size: 1.1rem; flex: 1; }
.program-status-badge { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 10px; border-radius: 999px; }
.program-status-badge.launching { background: rgba(224,160,48,0.2); color: #96660f; }

/* ---- Contact page ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); border-color: transparent; }
.card h3 { font-size: 1rem; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 0.94rem; }
.card a:hover { color: var(--clay); }
.section.light { background: var(--paper); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

.form-tabs { display: flex; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.form-tab {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--cream); color: var(--ink-soft); cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.form-tab:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-1px); }
.form-tab.active { background: var(--clay); border-color: var(--clay); color: var(--paper); }
.form-panel { display: none; }
.form-panel.active { display: block; animation: heroRise 0.4s ease both; }

form.contact-form, form.stack-form {
  display: flex; flex-direction: column; gap: 16px; max-width: 720px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input, select, textarea {
  font-family: var(--font-body); font-size: 0.95rem;
  padding: 13px 16px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink); width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(181,72,52,0.12); }
textarea { resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--ink-soft); }
button.btn-primary { align-self: flex-start; border: none; }

.amount-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.amount-chip {
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem;
  cursor: pointer; color: var(--forest-deep);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.amount-chip.selected, .amount-chip:hover { border-color: var(--clay); color: var(--clay); }
.amount-chip.selected { transform: scale(1.04); background: rgba(181,72,52,0.06); }
.give-methods { display: flex; gap: 14px; flex-wrap: wrap; }
.give-method {
  flex: 1; min-width: 180px; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px; cursor: pointer; background: var(--paper);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.give-method:hover { transform: translateY(-2px); }
.give-method.selected { border-color: var(--forest); background: rgba(27,67,50,0.06); }
.give-method h4 { font-size: 0.92rem; margin-bottom: 4px; }
.give-method p { font-size: 0.82rem; color: var(--ink-soft); }

.form-success {
  display: none;
  background: rgba(27,67,50,0.08);
  border: 1.5px solid var(--forest);
  border-radius: var(--radius);
  padding: 20px 24px;
  color: var(--forest-deep);
  font-size: 0.94rem;
}
.form-success.visible { display: block; animation: heroRise 0.4s ease both; }

.map-box { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

.faq { max-width: 780px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item:hover { border-color: var(--clay); }
.faq-item.active { box-shadow: var(--shadow-sm); }
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 0.96rem;
}
.faq-question span { color: var(--clay); font-size: 1.2rem; transition: transform 0.2s ease; }
.faq-item.active .faq-question span { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 22px; color: var(--ink-soft); font-size: 0.92rem; }
.faq-item.active .faq-answer { max-height: 200px; padding-bottom: 18px; }

.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px;
  background: #25D366; color: white; width: 54px; height: 54px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,0.25); z-index: 999;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(0,0,0,0.32); }

/* ---- Leadership ---- */
.leadership-intro-section { background: var(--paper); }
.director-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; background: var(--cream); border-radius: var(--radius); padding: 40px; }
.director-image {
  aspect-ratio: 3/3.4;
  border-radius: var(--radius);
  overflow: visible; /* visible, not hidden — lets .floating-badge hang over the corner; the
                         photo is clipped individually below instead */
  background: #eee;
  position: relative;
}

.director-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.5s ease;
}
.director-card:hover .director-image img { transform: scale(1.04); }
.director-badge { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clay); text-transform: uppercase; letter-spacing: 0.06em; }
.director-name { font-size: 1.6rem; margin: 8px 0 2px; }
.director-position { color: var(--ink-soft); margin-bottom: 14px; }
.director-divider { width: 46px; height: 3px; background: var(--gold); margin-bottom: 16px; }
.director-bio { color: var(--ink-soft); margin-bottom: 12px; }
.director-quote { border-left: 3px solid var(--clay); padding-left: 16px; font-style: normal; color: var(--forest-deep); margin: 18px 0; font-size: 1.02rem; }
.director-actions { display: flex; gap: 12px; margin-top: 8px; }
@media (max-width: 860px) { .director-card { grid-template-columns: 1fr; } }

.executive-section { background: var(--cream); }
.board-grid, .executive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.executive-grid { grid-template-columns: repeat(4, 1fr); }
.executive-card, .board-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: left;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.executive-card:hover, .board-card:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); }
.executive-image, .board-image {
  width: 100%;
  aspect-ratio: 1/1.05;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--gold) 0%, var(--forest) 130%);
}

.executive-image img,
.board-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.executive-card:hover .executive-image img,
.board-card:hover .board-image img { transform: scale(1.06); }
.executive-name, .board-card h3 { font-size: 1rem; margin-bottom: 3px; }
.executive-role, .board-card span { color: var(--clay); font-size: 0.84rem; font-weight: 600; }
.executive-description, .board-card p { color: var(--ink-soft); font-size: 0.86rem; margin-top: 8px; }
.board-section { background: var(--paper); }
@media (max-width: 900px) { .board-grid, .executive-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .board-grid, .executive-grid { grid-template-columns: 1fr; } }

.values-section { background: var(--cream); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-align: center;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.value-card:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); }
.value-icon { font-size: 1.6rem; margin-bottom: 10px; }
.value-card h3 { font-size: 1rem; margin-bottom: 8px; }
.value-card p { color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr; } }

/* =====================================================
   PINTEREST MASONRY GALLERY
===================================================== */

.gallery-section{
    background:var(--cream);
    padding:80px 0;
}

.gallery-masonry{
    columns:4 280px;
    column-gap:22px;
}

.gallery-item{
    position:relative;
    break-inside:avoid;
    margin-bottom:22px;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.gallery-item:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.gallery-image{
    display:block;
    width:100%;
    height:auto;
}

/* Size-variant modifiers (large/tall/wide/square) previously forced
   each photo into a fixed aspect-ratio box via object-fit: cover for
   visual rhythm — but that crops whatever doesn't fit the forced
   shape, cutting off real content in real photos. Removed: every
   photo now displays at its own natural aspect ratio via the
   height: auto baseline above, so nothing gets cropped. */

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:20px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,0)
    );
    opacity:0;
    transition:.3s;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-info h3{
    color:#fff;
    margin-bottom:6px;
}

.gallery-info p{
    color:#eee;
    font-size:.9rem;
}

.gallery-expand{
    position:absolute;
    inset:0;
    border:none;
    background:none;
    cursor:pointer;
}

/* ---- Gallery lightbox ----
   Previously had zero CSS anywhere: the JS toggled an "open" class
   with nothing listening for it, so the modal never appeared — it
   just sat in normal document flow. This is the full implementation.
   Also note: gallery.html's markup didn't originally include an <img>
   inside the lightbox at all, so even with this CSS it would only ever
   have shown the caption text again — that's fixed in gallery.html. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: rgba(16,40,29,0.92);
  padding: 32px 20px;
}
.lightbox.open { display: flex; }
.lightbox-content {
  position: relative;
  max-width: 860px;
  width: 100%;
  max-height: 88vh;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 16px;
  overflow-y: auto;
  animation: heroRise 0.25s ease both;
}
.lightbox-image {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--cream);
}
.lightbox-caption {
  padding: 14px 4px 4px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.lightbox-caption strong { color: var(--forest-deep); font-family: var(--font-display); font-size: 1.05rem; }
.lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--forest-deep);
  color: var(--paper);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover { background: var(--clay); transform: scale(1.08); }
@media (max-width: 560px) {
  .lightbox-content { padding: 12px; }
  .lightbox-close { top: -12px; right: -4px; }
}

/* Tablets */

@media(max-width:1100px){

.gallery-masonry{
columns:3;
}

}

/* Phones */

@media(max-width:768px){

.gallery-masonry{
columns:2;
}

}

@media(max-width:520px){

.gallery-masonry{
columns:1;
}

}

/* =========================================================
   PROGRAMS PAGE v2 — compact, equal-height summary cards
   ========================================================= */
.programs-detailed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 640px) {
  .programs-detailed-grid { grid-template-columns: 1fr; }
}
.program-detailed-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.program-detailed-card:hover { transform: translateY(var(--lift-md)); box-shadow: var(--shadow-md); }
.program-detailed-card.is-hidden { display: none; }
.program-body { display: flex; flex-direction: column; flex: 1; }
.program-overview { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin-bottom: 14px; }

.program-budget-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.budget-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.budget-value { font-family: var(--font-mono); font-weight: 600; color: var(--forest-deep); font-size: 0.92rem; }

.program-activities-compact { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.program-activities-compact li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.program-activities-compact li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--clay);
}

.program-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   REAL RESPONSIVE TABLES — budget breakdowns, summary figures.
   Uses genuine <table> markup wrapped in a horizontally-scrolling
   container so wide tables never break page layout on narrow
   phones, without ever squeezing table data into a fixed-width card.
   ========================================================= */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 480px; /* ensures columns stay legible; scrolls on narrow screens rather than crushing */
}
table.data-table caption { display: none; }
table.data-table thead th {
  background: var(--forest-deep);
  color: var(--paper);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 12px 16px;
  white-space: nowrap;
}
table.data-table thead th:last-child,
table.data-table tbody td:last-child { text-align: right; }
table.data-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--cream); }
table.data-table tfoot td {
  padding: 12px 16px;
  font-weight: 700;
  color: var(--forest-deep);
  background: var(--cream);
  border-top: 2px solid var(--gold);
}
table.data-table tfoot td:last-child { text-align: right; font-family: var(--font-mono); }
.table-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }

/* ---- Wide-table enhancements (added by script.js) ----
   .table-scroll-wrapper is the positioned ancestor the injected
   scroll-arrow buttons anchor to — without position:relative here,
   those buttons position against whatever ancestor is positioned
   further up the page, landing in the wrong place entirely (the
   same class of bug the About page's floating badge had). */
.table-scroll-wrapper { position: relative; }

/* Collapsed state: only the first 3 body rows show, with a soft
   fade at the bottom hinting there's more. table-expanded removes
   both once "View All" is clicked. */
.table-responsive.table-row-limit { position: relative; }
.table-responsive.table-row-limit tbody tr:nth-child(n+4) { display: none; }
.table-responsive.table-row-limit::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(251,248,241,0) 0%, var(--paper) 100%);
  pointer-events: none;
}
.table-responsive.table-row-limit.table-expanded tbody tr { display: table-row; }
.table-responsive.table-row-limit.table-expanded::after { display: none; }

.table-view-all-btn {
  display: flex;
  margin: 4px auto 36px;
  padding: 10px 22px;
  font-size: 0.88rem;
}

/* =========================================================
   PROJECTS PAGE v2 — full-width stacked project blocks
   (tables need room to breathe; a narrow card column is exactly
   what caused misalignment before, so these are never squeezed
   into a multi-column grid)
   ========================================================= */
.projects-list { display: flex; flex-direction: column; gap: 24px; }
.project-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  position: relative;
  overflow: hidden; /* clips the full-bleed image below to the card's rounded corners */
  transition: box-shadow 0.25s ease;
}
.project-block:hover { box-shadow: var(--shadow-sm); }
.project-block.hidden-project { display: none; }

/* ---- Project image ----
   Bleeds edge-to-edge above the text content instead of sitting
   inset inside the card's own padding. Negative margins pull it out
   to the card edges; overflow:hidden on .project-block (above) clips
   its top corners to match the card's border-radius. object-fit:cover
   guarantees every photo fills the same box regardless of its native
   dimensions, so five different source images all render at a
   consistent height instead of each keeping its own aspect ratio. */
.project-image {
  aspect-ratio: 16/9;
  margin: -28px -30px 22px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--clay) 0%, var(--forest-deep) 100%);
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.project-block:hover .project-image img { transform: scale(1.04); }

/* Fallback gradient color rotation — shows through if a photo is
   missing or fails to load (onerror removes the <img> itself) */
.project-block:nth-child(3n+2) .project-image { background: linear-gradient(155deg, var(--gold) 0%, var(--forest) 100%); }
.project-block:nth-child(3n+3) .project-image { background: linear-gradient(155deg, var(--forest) 0%, var(--clay-deep) 100%); }

.project-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.project-block-header h3 { font-size: 1.15rem; flex: 1; min-width: 200px; }
.project-overview { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; margin-bottom: 18px; max-width: 74ch; }
.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.project-meta-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.84rem;
  color: var(--forest-deep);
}
.project-meta-chip strong { font-family: var(--font-mono); }
.project-table-toggle summary {
  cursor: pointer;
  list-style: none;
  color: var(--clay);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.project-table-toggle summary::-webkit-details-marker { display: none; }
.project-table-toggle summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.1rem; transition: transform 0.2s ease; }
.project-table-toggle[open] summary::after { transform: rotate(45deg); }
.project-block-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; }

.view-all-projects-wrap { text-align: center; margin-top: 8px; }

@media (max-width: 640px) {
  .project-block { padding: 22px 18px; }
  .project-image { margin: -22px -18px 18px; }
  .project-block-header h3 { min-width: 0; }
}