/* community — owned by TASK 16 (My Community photos + lightbox caption). See TASKS.md.
   Separate file so it cannot collide with TASK 15, which owns css/blocks/brand.css. */

/* ---- Lightbox caption, bigger (2026-09-09) ----
   Base rule is in css/style.css (locked, no font-size set there — it falls through to the
   body default). brand.css's mobile-lightbox block (unconditional, not just <=780px) is what
   actually sets the current 14px, plus left/right:12% and, under <=780px, a bottom offset that
   clears the prev/next buttons. This file loads after both (see templates/base.html.twig), so
   a plain override wins without touching either locked/owned file.
   Scaled per breakpoint rather than one fixed size: longest caption in the data is "National Day
   for Truth and Reconciliation" (41 chars) and must still fit in 1-2 lines inside the 76%-wide
   caption box at 360px. Vertical position (bottom offset) is untouched — only font-size/line-height
   change, so it grows upward from the same anchor and the brand.css mobile bottom-offset (which
   clears prev/next) still applies unmodified. */
.lightbox-caption{
  font-size: 22px;
  line-height: 1.3;
}
@media(max-width:780px){
  .lightbox-caption{ font-size: 18px; }
}
@media(max-width:470px){
  .lightbox-caption{ font-size: 16px; }
}

/* ---- Lightbox: thumbnail first, original when it lands (2026-09-10) ----
   The grid loads 620px thumbnails now, so the full photo is normally not cached when the box
   opens. js/site.js paints the thumbnail immediately and adds .lb-loading; the blur is what makes
   an upscaled 620px stand-in read as "loading" rather than as a soft picture. It comes off in the
   same swap that puts the original in, so the transition is a single 250ms defocus. */
.lightbox img{transition:filter .25s ease}
.lightbox img.lb-loading{filter:blur(10px)}
@media(prefers-reduced-motion:reduce){
  .lightbox img{transition:none}
}