/*
Theme Name: ACCESS V25
Theme URI: https://accessyyc.com
Author: ACCESS
Description: Elderly-first theme for the Alliance of Calgary Community Ethnic Support Society (ACCESS) — big type, high contrast, large click targets, plain language. News and Events are custom post types editable from wp-admin; Home/About/Contact are WordPress Pages using this theme's page templates. Ported from a React build of the same design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: access-v25
*/

/* =====================================================
   ACCESS V25 — elderly-first full build.
   Ground rules: big type, high contrast on light
   backgrounds, large click targets, plain language.
   NOTE ON UNITS: text is sized in em off the body's base
   rem so everything scales together. Fixed chrome (header)
   uses rem on purpose so it stays put.
   ===================================================== */

.v25 {
  --ink: #1c1f26;
  --muted: #4c5260;
  --paper: #faf7f2;
  --accent: #007f92;
  --accent-soft: #e3f1f3;
  --red: #d40000;
  --red-deep: #ad0000;
  --line: #e8e4dc;
  --max: 1280px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  line-height: 1.7;
}

.v25 a { color: inherit; text-decoration: none; }
.v25 img { max-width: 100%; display: block; }
.v25 ul { list-style: none; margin: 0; padding: 0; }
.v25 h1, .v25 h2, .v25 h3, .v25 h4 { margin: 0; line-height: 1.2; color: var(--ink); letter-spacing: 0; }
.v25 h2 { font-weight: 900; font-size: 2em; margin-bottom: .6em; }
.v25 h3 { font-weight: 800; font-size: 1.2em; }
.v25 p { margin: 0 0 1em; }
.v25-inner { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.v25-lead { max-width: 34em; color: var(--muted); font-size: 1.05em; }

/* ══ Buttons — large targets everywhere ══ */
.v25-btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.5em; border-radius: 12px;
  font-family: inherit; font-weight: 800; font-size: .95em;
  cursor: pointer; border: 3px solid transparent; transition: all .15s;
}
.v25-btn--red { background: var(--red); color: #fff; }
.v25-btn--red:hover { background: var(--red-deep); }
.v25-btn--teal { background: var(--accent); color: #fff; }
.v25-btn--teal:hover { background: #00596a; }
.v25-btn--outline { border-color: var(--accent); color: var(--accent); background: #fff; }
.v25-btn--outline:hover { background: var(--accent); color: #fff; }
.v25-btn--outline-white { border-color: #fff; color: #fff; background: none; }
.v25-btn--outline-white:hover { background: #fff; color: var(--accent); }
.v25-btn--xl { font-size: 1.1em; padding: .85em 1.7em; }
.v25 .v25-btn:focus-visible { outline: 4px solid #7fd0dd; outline-offset: 2px; }

/* ══ Header / nav (fixed rem sizing) ══ */
.v25-header { background: #fff; border-bottom: 1px solid var(--line); font-size: 1rem; position: sticky; top: 0; z-index: 80; }
.v25-header__inner {
  max-width: var(--max); margin: 0 auto; padding: 1.2rem 1.5rem;
  display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;
}
.v25-logo { display: flex; align-items: center; gap: .85rem; }
.v25-logo img { height: 64px; width: 64px; border-radius: 50%; }
.v25-logo span { display: block; font-weight: 900; font-size: 1.5rem; line-height: 1.15; }
.v25-logo em { display: block; font-style: normal; font-weight: 600; font-size: .8rem; color: var(--muted); }

.v25-nav { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.v25-nav a {
  font-weight: 700; font-size: 1.1rem; padding: .7rem 1.1rem; border-radius: 10px;
  transition: background .15s, color .15s;
}
.v25-nav a:hover { background: var(--accent-soft); color: var(--accent); }
.v25-nav a.is-active { background: var(--accent); color: #fff; }
.v25-header .v25-btn { font-size: 1.05rem; }

/* ══ Hero — a plain text-only variant (About, News, Events, Contact,
   single posts) plus a full-bleed image variant (Home) that overlays
   the same eyebrow/h1/sub/tagline pieces on a scrim instead ══ */
.v25-hero { background: var(--paper); padding: 3.5em 0; }
.v25-hero__eyebrow { font-weight: 800; font-size: .9em; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .5em; }
.v25-hero h1 { font-weight: 900; font-size: 2.9em; line-height: 1.1; margin-bottom: .4em; }
.v25-hero__sub { font-size: 1.15em; color: var(--muted); margin: 0; max-width: 26em; }
.v25-hero__tagline { font-weight: 700; font-style: italic; color: var(--accent); margin: .9em 0 0; }
.v25-pagehero__inner { max-width: 38em; }

/* Full-bleed variant — a comfortable min-height, not a viewport-fit
   calculation */
.v25-hero--full { position: relative; min-height: 32em; display: flex; align-items: center; padding: 0; overflow: hidden; background: var(--ink); }
.v25-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.v25-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15, 14, 11, .82) 0%, rgba(15, 14, 11, .55) 45%, rgba(15, 14, 11, .15) 78%); }
.v25-hero__content { position: relative; margin: 0; max-width: 34em; padding: 4.5em 1.5rem 4.5em 5.5rem; }
.v25-hero--full .v25-hero__eyebrow { color: #8fd8e2; }
.v25-hero--full h1 { color: #fff; }
.v25-hero--full .v25-hero__sub { color: rgba(255, 255, 255, .92); }
.v25-hero--full .v25-hero__tagline { color: #fff; }

/* ══ Marquee band — compact, pinned under the hero ══ */
.v25-marqueeband { flex: none; background: var(--paper); padding: 1.8em 0; border-top: 1px solid var(--line); }
.v25-marqueeband__label {
  text-align: center; font-weight: 800; font-size: .95em; color: var(--muted);
  margin: 0 0 1.3em;
}

/* ══ Sections ══ */
.v25-section { padding: 4em 0; }
.v25-section--white { background: #fff; }

/* ══ Help cards ══ */
.v25-helpcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; margin-top: 2em; }
.v25-helpcard {
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 1.8em 1.6em; display: flex; flex-direction: column; gap: .6em; align-items: flex-start;
}
.v25-section--white .v25-helpcard { border-color: var(--line); }
.v25-helpcard__icon {
  width: 2.6em; height: 2.6em; border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.v25-helpcard__icon svg { width: 1.5em; height: 1.5em; }
.v25-helpcard p { color: var(--muted); flex: 1; }
.v25-helpcard__go { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--accent); }

/* ══ About-style text+photo pairing ══ */
.v25-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5em; align-items: center; }
.v25-about > * { min-width: 0; }
.v25-about__text p { color: var(--muted); max-width: 32em; }
.v25-about__text strong { color: var(--ink); }
.v25-about__zh { font-size: .95em; }
.v25-about__photo { margin: 0; min-width: 0; }
.v25-about__photo img { border-radius: 18px; width: 100%; max-width: 100%; height: auto; display: block; }
.v25-about--photo-lg { grid-template-columns: .85fr 1.15fr; }

/* ══ Prose — flowing paragraphs, not cards or lists ══ */
.v25-prose { max-width: 42em; font-size: 1.15em; line-height: 1.8; color: var(--muted); }
.v25-prose strong { color: var(--ink); }
.v25-prose p { color: inherit; }
.v25-prose + .v25-prose { margin-top: 1.4em; }
.v25-prose--zh { font-style: italic; font-size: 1em; }

/* ══ Episode list — a real numbered series index (episode numbers are
   functional here, not decorative), plain rows not boxed cards ══ */
.v25-episodelist { margin-top: 1em; }
.v25-episodelist li { border-bottom: 1px solid var(--line); }
.v25-episodelist li:last-child { border-bottom: none; }
.v25-episodelist a { display: flex; align-items: flex-start; gap: 1em; padding: 1em 0; color: inherit; }
.v25-episodelist__num {
  flex: none; font-weight: 800; font-size: .8em; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-soft); padding: .3em .6em; border-radius: 8px;
}
.v25-episodelist__text { display: flex; flex-direction: column; gap: .3em; }
.v25-episodelist__zh { font-weight: 700; }
.v25-episodelist__zh em { font-style: normal; color: var(--accent); font-weight: 700; font-size: .8em; margin-left: .5em; }
.v25-episodelist__en { color: var(--muted); font-size: .92em; }
.v25-episodelist a:hover .v25-episodelist__zh { color: var(--accent); }

/* ══ Event details/features — plain lists, no cards ══ */
.v25-eventdetails { margin: 1.2em 0 0; }
.v25-eventdetails li { color: var(--muted); padding: .3em 0; }
.v25-eventdetails strong { color: var(--ink); }
.v25-eventfeatures { margin-top: 1.4em; max-width: 44em; display: grid; gap: .8em; }
.v25-eventfeatures li { color: var(--muted); padding: .8em 0; border-bottom: 1px solid var(--line); }
.v25-eventfeatures li:last-child { border-bottom: none; }
.v25-eventfeatures strong { color: var(--ink); }

/* ══ Full image — the entire source photo, no cropping ══ */
img.v25-fullimage { display: block; width: 100%; max-width: 26em; height: auto; margin: 1.8em auto 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(28, 31, 38, .14); }

/* ══ About-style photo stack — several photos, same size, stacked in
   the photo column instead of one big image ══ */
.v25-about__photo--stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
.v25-about__photo--stack img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 8px 22px rgba(28, 31, 38, .12); }
.v25-about__photo--logo { display: flex; justify-content: center; }
.v25-about__photo--logo img { width: auto; max-width: 200px; border-radius: 0; box-shadow: none; }

/* ══ Partner logo grid — a plain static wall (About page); the
   animated marquee is Home's own treatment of the same roster ══ */
.v25-partnergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2em; margin-top: 2em; max-width: 52em; }
.v25-partnerlogo {
  background: #fff; border-radius: 16px; padding: 1.3em 1.1em; min-height: 5.6em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(28, 31, 38, .07);
}
.v25-partnerlogo img { max-width: 100%; max-height: 3em; width: auto; object-fit: contain; }
.v25-partnerlogo__abbr { font-weight: 900; font-size: 1.2em; color: var(--accent); }

/* ══ Programs / News / Events — a real card grid: big photo on top,
   generous text below ══ */
.v25-programs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8em; margin-top: 2em; }
.v25-programrow {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: 20px; overflow: hidden;
  border: 2px solid transparent; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.v25-programrow:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 34px rgba(28, 31, 38, .12); }
.v25-programrow img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.v25-programrow__text { padding: 1.5em 1.7em 1.8em; }
.v25-programrow h3 { font-size: 1.2em; }
.v25-programrow p { color: var(--muted); margin: .5em 0 1em; }
.v25-programrow__go { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--accent); }

/* ══ Partners — scrolling marquee (decorative) + accessible legend ══ */
.v25-marquee {
  margin: 0; display: flex; flex-direction: column; gap: 1em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.v25-marquee__row { overflow: hidden; }
.v25-marquee__track {
  display: flex; width: max-content; gap: 1.2em;
  animation: v25-scroll-left 38s linear infinite;
}
.v25-marquee__row--b .v25-marquee__track { animation-name: v25-scroll-right; animation-duration: 34s; }
.v25-marquee__row:hover .v25-marquee__track,
.v25-marquee__row:focus-within .v25-marquee__track { animation-play-state: paused; }
@keyframes v25-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes v25-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .v25-marquee__track { animation: none; }
}
.v25-marquee__item {
  flex: none; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 18px; padding: 1.1em 1.8em;
  min-width: 9em; min-height: 5.4em; box-shadow: 0 4px 14px rgba(28, 31, 38, .07);
}
.v25-marquee__item img { max-width: 100%; max-height: 3.4em; width: auto; object-fit: contain; }
.v25-marquee__abbr { font-weight: 900; font-size: 1.5em; color: var(--accent); white-space: nowrap; }

/* ══ Contact ══ */
.v25-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; margin-top: 2em; }
.v25-contact__card {
  background: var(--paper); border-radius: 18px; padding: 2em 1.6em; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .4em;
  color: var(--ink); border: 2px solid transparent; transition: border-color .15s;
}
a.v25-contact__card:hover { border-color: var(--accent); }
.v25-contact__card svg { color: var(--accent); width: 2em; height: 2em; }
.v25-contact__card strong { font-weight: 800; font-size: 1.15em; }
.v25-contact__card span { color: var(--muted); font-size: 1.05em; word-break: break-word; }

/* ══ Gallery — real photos grouped into albums; each photo opens the
   lightbox ══ */
.v25-galleryalbum { margin-top: 2.4em; }
.v25-galleryalbum:first-child { margin-top: 1em; }
.v25-galleryalbum h3 { font-size: 1.15em; margin-bottom: .8em; }
.v25-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; }
.v25-gallery__item {
  margin: 0; padding: 0; border: none; border-radius: 16px; overflow: hidden;
  background: var(--paper); cursor: pointer; display: block;
}
.v25-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .3s; }
.v25-gallery__item:hover img, .v25-gallery__item:focus-visible img { transform: scale(1.06); }
.v25-gallery__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ══ Volunteer grid — real photo + name, no border/box ══ */
.v25-volunteergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; margin-top: 2em; }
.v25-volunteer { text-align: center; }
.v25-volunteer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 22px rgba(28, 31, 38, .12); }
.v25-volunteer__name { font-weight: 800; margin: .8em 0 0; }

/* ══ Photo grid — one featured photo, then a clean row of thumbnails ══ */
.v25-photogrid { margin: 1.8em 0 0; max-width: 52em; }
.v25-photogrid__featured { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 26px rgba(28, 31, 38, .14); display: block; }
.v25-photogrid__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; margin-top: .9em; }
.v25-photogrid__row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 16px rgba(28, 31, 38, .1); }
.v25-photogrid figcaption { color: var(--muted); font-size: .9em; margin-top: .8em; }

/* ══ Video — same treatment as the photo above it, plus a caption ══ */
.v25-videoblock { margin: 1.8em 0 0; max-width: 52em; }
.v25-video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px;
  background: #000; display: block; box-shadow: 0 10px 26px rgba(28, 31, 38, .14);
}
.v25-videoblock figcaption { color: var(--muted); font-size: .9em; margin-top: .8em; }

/* ══ Gallery lightbox ══ */
.v25-lightbox {
  position: fixed; inset: 0; background: rgba(20, 18, 14, .92); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 3em 1.5em;
}
/* The React build never renders these elements at all when closed; the
   WordPress port instead toggles the `hidden` attribute via JS, so this
   theme's own `display: flex` above (needed while open) has to be
   overridden explicitly here — otherwise it outranks the browser's
   default [hidden]{display:none} and the modal never actually hides. */
.v25-lightbox[hidden] { display: none; }
.v25-lightbox figure { margin: 0; max-width: min(90vw, 900px); text-align: center; }
.v25-lightbox img { max-width: 100%; max-height: 78vh; border-radius: 10px; display: block; margin: 0 auto; }
.v25-lightbox figcaption { color: #fff; margin-top: 1em; font-size: 1em; opacity: .85; }
.v25-lightbox__close {
  position: absolute; top: 1.2em; right: 1.2em; width: 2.6em; height: 2.6em; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; border: none; font-size: 1.6em; line-height: 1;
  cursor: pointer;
}
.v25-lightbox__close:hover { background: rgba(255, 255, 255, .25); }
.v25-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3em; height: 3em; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; border: none; font-size: 2em; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.v25-lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.v25-lightbox__nav--prev { left: 1em; }
.v25-lightbox__nav--next { right: 1em; }

/* ══ Gallery FAB — fixed chrome, sized in rem so it doesn't scale with
   the text-size control; a big can't-miss pill, not a bare icon ══ */
.v25-galleryfab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  background: var(--red); color: #fff; border: none; border-radius: 999px;
  padding: .95rem 1.5rem; font-family: inherit; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .15s, background .15s;
}
.v25-galleryfab:hover { background: var(--red-deep); transform: translateY(-2px); }
.v25-galleryfab svg { width: 1.4rem; height: 1.4rem; flex: none; }
.v25-galleryfab:focus-visible { outline: 4px solid #7fd0dd; outline-offset: 2px; }

/* ══ Gallery modal — the album grid, opened from the FAB; the
   lightbox (z-index 100) still stacks above this (z-index 95). The
   header is a fixed flex row above a scrolling body, so the close
   button is always reachable no matter how far you've scrolled ══ */
.v25-gallerymodal {
  position: fixed; inset: 0; background: rgba(20, 18, 14, .82); z-index: 95;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 2em 1.2em;
}
.v25-gallerymodal[hidden] { display: none; }
.v25-gallerymodal__panel {
  background: #fff; border-radius: 24px; max-width: 1100px; width: 100%;
  max-height: 88vh; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; overflow: hidden;
}
.v25-gallerymodal__header {
  flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em;
  padding: 1.8em 4.2em 1.8em 2em; border-bottom: 1px solid var(--line); position: relative;
}
.v25-gallerymodal__header p { color: var(--muted); margin: .5em 0 0; max-width: 34em; }
.v25-gallerymodal__close {
  position: absolute; top: 1.4em; right: 1.6em;
  flex: none; width: 2.8em; height: 2.8em; border-radius: 50%; border: none;
  background: var(--red); color: #fff; font-size: 1.6em; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s;
}
.v25-gallerymodal__close:hover { background: var(--red-deep); transform: scale(1.06); }
.v25-gallerymodal__close:focus-visible { outline: 4px solid #7fd0dd; outline-offset: 2px; }
.v25-gallerymodal__body { flex: 1; overflow-y: auto; padding: 1.8em 2em 2.2em; }

@media (max-width: 640px) {
  .v25-galleryfab { right: 1rem; bottom: 1rem; padding: .85rem 1.2rem; font-size: 1rem; }
  .v25-gallerymodal { padding: 0; }
  .v25-gallerymodal__panel { max-height: 100vh; height: 100%; border-radius: 0; }
  .v25-gallerymodal__header { padding: 1.4em 3.6em 1.4em 1.4em; }
  .v25-gallerymodal__body { padding: 1.4em; }
}

/* ══ Footer — light, big links ══ */
.v25-footer { background: #fff; border-top: 1px solid var(--line); padding: 3em 0 2em; }
.v25-footer__inner { display: flex; align-items: center; gap: 3em; flex-wrap: wrap; }
.v25-footer__brand { display: flex; align-items: center; gap: 1em; max-width: 34em; }
.v25-footer__brand img { height: 3.4em; width: 3.4em; border-radius: 50%; flex: none; }
.v25-footer__brand p { margin: 0; font-size: .92em; color: var(--muted); }
.v25-footer__nav { display: flex; gap: 1.6em; flex-wrap: wrap; margin-left: auto; }
.v25-footer__nav a { font-weight: 700; font-size: 1em; }
.v25-footer__nav a:hover { color: var(--accent); }
.v25-footer__social { display: flex; gap: .7em; }
.v25-footer__social a {
  width: 2.6em; height: 2.6em; border-radius: 50%; border: 2px solid var(--accent);
  color: var(--accent); display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.v25-footer__social a:hover { background: var(--accent); color: #fff; }
.v25-footer__legal { text-align: center; font-size: .85em; color: var(--muted); margin: 2em 1.5rem 0; }

/* ══ Responsive ══ */
@media (max-width: 1100px) {
  .v25-helpcards, .v25-contact { grid-template-columns: 1fr; max-width: 34em; margin-left: auto; margin-right: auto; }
  .v25-about { grid-template-columns: 1fr; gap: 2em; }
  .v25-programs { grid-template-columns: 1fr; max-width: 34em; margin-left: auto; margin-right: auto; }
}

@media (max-width: 960px) {
  .v25-nav { display: none; }
  .v25-hero { padding: 2.5em 0; }
  .v25-hero--full { min-height: 26em; }
  .v25-hero__scrim { background: rgba(15, 14, 11, .72); }
  .v25-hero__content { max-width: none; padding: 2.5em 1.5rem; }
  .v25-hero h1 { font-size: 2.3em; }
  .v25-gallery { grid-template-columns: repeat(3, 1fr); }
  .v25-volunteergrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .v25-programs { grid-template-columns: 1fr; }
  .v25-footer__inner { flex-direction: column; align-items: flex-start; gap: 1.5em; }
  .v25-footer__nav { margin-left: 0; }
  .v25-gallery { grid-template-columns: repeat(2, 1fr); gap: .8em; }
  .v25-volunteergrid { grid-template-columns: 1fr; max-width: 20em; margin-left: auto; margin-right: auto; }
  .v25-photogrid__row { grid-template-columns: repeat(2, 1fr); }
  .v25-lightbox__nav { width: 2.4em; height: 2.4em; font-size: 1.5em; }
  .v25-lightbox__nav--prev { left: .4em; }
  .v25-lightbox__nav--next { right: .4em; }
}

/* ══ WordPress-specific bits the React build didn't need ══ */
.v25 .alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.v25 .alignfull { max-width: none; width: 100%; }
.v25 .wp-block-image img,
.v25 .wp-block-media-text__media img { border-radius: 18px; }
.v25 .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v25 .navigation.pagination { display: flex; gap: .6em; margin-top: 1em; }
.v25 .navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; height: 2.4em; padding: 0 .6em; border-radius: 8px;
  background: #fff; border: 2px solid var(--line); font-weight: 700;
}
.v25 .navigation.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }