/* ==========================================================================
   Gallery (page 9895) - block styling, valid on the FRONT END and in the
   BLOCK EDITOR. Same conventions as the Prospective Students sheet:
     - nothing is scoped on body.page-id-9895 (the editor canvas has no such
       class); every selector is anchored on an idobe-gal-* / idobe-gallery
       class;
     - full-bleed groups are centred with
       padding-inline:max(20px,(100% - 1120px)/2), which works with or without
       .wp-block-group__inner-container;
     - `.wp-block-group` is prefixed on padding rules because Neve's
       `.alignfull{padding:0 7.5px}` shorthand loads later and would win.

   The photo grid is a masonry layout (CSS columns): every photo is shown
   whole, uncropped, whatever its shape, so portrait and landscape shots mix
   without heads being cut off, and photos added later need no adjustment.
   Photos flow top-to-bottom down each column.
   ========================================================================== */

.idobe-gal-head, .idobe-gal-body{
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.wp-block-group.idobe-gal-head,
.wp-block-group.idobe-gal-body{
  padding-inline:max(20px, calc((100% - 1120px) / 2));
  box-sizing:border-box;
}

/* ---- page header (matches Prospective Students) -------------------------- */
.wp-block-group.idobe-gal-head{
  background:linear-gradient(90deg,var(--idobe-green-deep,#00522b),var(--idobe-green-ink,#00331c));
  padding-block:64px 56px;
}
.idobe-gal-title{
  color:#fff !important; font-size:42px !important; font-weight:700;
  line-height:1.15 !important; letter-spacing:-0.015em;
  margin:0 0 18px !important; text-align:left !important;
}
.idobe-gal-lead{
  color:#d8e8de !important; font-size:18px; line-height:1.65;
  max-width:62ch; margin:0 !important;
}

/* ---- photos ---------------------------------------------------------------- */
.wp-block-group.idobe-gal-body{padding-block:48px 88px; background:#fff;}

/* Core lays the gallery out as a flex row of fixed-width figures; the
   `:not(#individual-image)` in its width rules is an id-level selector, so
   these need !important to turn it into columns. */
.wp-block-gallery.has-nested-images.idobe-gallery{
  display:block !important;
  columns:3; column-gap:16px;
  margin:0 !important;
}
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image:not(#individual-image){
  display:block !important;
  width:100% !important;
  margin:0 0 16px !important;
  break-inside:avoid;
  border-radius:10px;
  overflow:hidden;
  background:var(--idobe-band,#f1f7f3);
  box-shadow:0 1px 2px rgba(0,51,28,.08);
  transition:box-shadow .25s ease;
}
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image > div,
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image > a{
  display:block;
}
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image img{
  display:block;
  width:100% !important; height:auto !important;
  transition:transform .35s ease;
}

/* Hover: a slight lift and zoom, no colour wash over the photo. */
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image:not(#individual-image):hover{
  box-shadow:0 8px 22px rgba(0,51,28,.18);
}
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image:hover img{
  transform:scale(1.03);
}
/* Core's lightbox trigger appears on hover; make it visible on keyboard focus too. */
.idobe-gallery .lightbox-trigger:focus-visible{
  outline:2px solid var(--idobe-gold,#f2cd00); outline-offset:2px; opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image img,
  .wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image:not(#individual-image){transition:none;}
  .wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image:hover img{transform:none;}
}

/* ---- narrow ------------------------------------------------------------- */
@media (max-width:900px){
  .wp-block-gallery.has-nested-images.idobe-gallery{columns:2;}
}
@media (max-width:781px){
  .wp-block-group.idobe-gal-head{padding-block:44px 40px;}
  .idobe-gal-title{font-size:32px !important;}
  .idobe-gal-lead{font-size:17px;}
  .wp-block-group.idobe-gal-body{padding-block:28px 64px;}
}
@media (max-width:520px){
  .wp-block-gallery.has-nested-images.idobe-gallery{columns:1;}
}

/* ---- captions (event + date) -------------------------------------------- */
/* Overlaid on the bottom of the photo over a dark gradient. Core does this
   too, but its position:absolute shares a selector list with a :has()
   selector, so browsers without :has() (e.g. Firefox ESR 115) drop the whole
   rule and the caption falls below the photo as a grey bar. Set it here. */
.wp-block-gallery.has-nested-images.idobe-gallery figure.wp-block-image figcaption{
  position:absolute; left:0; right:0; bottom:0; max-height:100%; margin:0;
  font-family:inherit; font-size:13px; font-weight:500; line-height:1.4;
  text-align:left; padding:28px 14px 10px;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 100%);
}