/* WM Gallery - the photo archive block on the home page ([wm_gallery_home]).
   Colour and shadow tokens come from the site's stylesheet when it defines
   them (--wm-*, --awb-*); the fallbacks are the Wakefield Music palette. */
.wmh{--wmh-ink:var(--awb-color8,#201b17);--wmh-muted:var(--awb-color6,#6f6558);--wmh-cream:var(--wm-cream,#fbf6ec);
  --wmh-line:var(--wm-line,#eadfcc);--wmh-accent:var(--awb-color5,#9a352a);--wmh-radius:14px;
  --wmh-lift:var(--wm-sh-lift,0 18px 40px -22px rgba(32,27,23,.45));--wmh-gap:14px;
  font-family:var(--awb-typography4-font-family,Inter,sans-serif)}
.wmh,.wmh *{box-sizing:border-box}
.wmh img{display:block;max-width:100%}

/* ---------- featured mosaic: one big tile + four small per five ---------- */
.wmh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:dense;gap:var(--wmh-gap)}
.wmh-tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;border-radius:var(--wmh-radius);
  background:var(--wmh-cream);border:1px solid var(--wmh-line);box-shadow:var(--wmh-lift);
  transition:transform .25s ease,box-shadow .25s ease}
.wmh-tile img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.wmh-tile.is-big{grid-column:span 2;grid-row:span 2}
.wmh-grid-large .wmh-tile:nth-child(10n+6){grid-column:3/5}
.wmh-tile:hover{transform:translateY(-3px);box-shadow:0 26px 44px -22px rgba(32,27,23,.55)}
.wmh-tile:hover img,.wmh-tile:focus-visible img{transform:scale(1.04)}
.wmh-tile:focus-visible{outline:3px solid var(--wmh-accent);outline-offset:3px}
.wmh-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:13.5px;line-height:1.35;color:var(--wmh-cream);
  background:linear-gradient(180deg,rgba(32,27,23,0) 0%,rgba(32,27,23,.78) 100%);
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.wmh-tile.is-big .wmh-cap{font-size:15px;padding:40px 20px 18px}
.wmh-tile:hover .wmh-cap,.wmh-tile:focus-visible .wmh-cap{opacity:1;transform:none}
@media (max-width:1100px){.wmh{--wmh-gap:10px;--wmh-radius:12px}.wmh-cap{font-size:13px}.wmh-tile.is-big .wmh-cap{font-size:14px}}
@media (max-width:699px){
  .wmh{--wmh-gap:8px;--wmh-radius:10px}
  .wmh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wmh-grid-large .wmh-tile.is-big{grid-column:1/-1;grid-row:auto;aspect-ratio:3/2}
  .wmh-grid-large .wmh-tile:nth-child(10n+6){grid-column:1/-1}
  .wmh-cap{display:none}
  .wmh-tile:hover{transform:none}
}

/* ---------- medium tiles: blocks of nine, one 2x2 accent + eight squares ----------
   6 columns (2 rows per block), 4 on tablets (3 rows), 3 on phones (4 rows) - every
   block fills its rows exactly; the accent swaps sides on every other block */
.wmh-grid-medium{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.wmh-grid-medium .wmh-tile{border-radius:8px;box-shadow:0 10px 24px -14px rgba(32,27,23,.45)}
.wmh-grid-medium .wmh-tile:nth-child(18n+10){grid-column:5/7}
.wmh-grid-medium .wmh-tile:hover{transform:translateY(-3px) rotate(-1.2deg) scale(1.03);box-shadow:0 18px 32px -16px rgba(32,27,23,.55);z-index:1}
.wmh-grid-medium .wmh-tile:not(.is-big) .wmh-cap{display:none}
.wmh-grid-medium .wmh-tile.is-big .wmh-cap{font-size:13.5px;padding:32px 16px 14px}
@media (max-width:1100px){
  .wmh-grid-medium{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wmh-grid-medium .wmh-tile:nth-child(18n+10){grid-column:3/5}
}
@media (max-width:699px){
  .wmh-grid-medium{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .wmh-grid-medium .wmh-tile{border-radius:6px}
  .wmh-grid-medium .wmh-tile.is-big{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
  .wmh-grid-medium .wmh-tile:nth-child(18n+10){grid-column:2/4}
  .wmh-grid-medium .wmh-tile:hover{transform:none}
}

/* ---------- small tiles: blocks of eighteen on 8 columns (3 rows) ----------
   a 2x2 accent at the left of rows 1-2, another at the right of rows 2-3, sixteen
   small squares around them; tablets keep 8 columns, phones 4 (6 rows). Every
   block fills its rows exactly; the pattern repeats for a second block. */
.wmh-grid-small{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.wmh-grid-small .wmh-tile{border-radius:7px;box-shadow:0 8px 20px -12px rgba(32,27,23,.45)}
.wmh-grid-small .wmh-tile:nth-child(18n+1){grid-column:1/3}
.wmh-grid-small .wmh-tile:nth-child(18n+10){grid-column:7/9}
.wmh-grid-small .wmh-tile:hover{transform:translateY(-3px) rotate(-1.5deg) scale(1.05);box-shadow:0 16px 28px -14px rgba(32,27,23,.55);z-index:1}
.wmh-grid-small .wmh-tile:not(.is-big) .wmh-cap{display:none}
.wmh-grid-small .wmh-tile.is-big .wmh-cap{font-size:13px;padding:28px 14px 12px}
@media (max-width:1100px){
  .wmh-grid-small{gap:6px}
  .wmh-grid-small .wmh-tile{border-radius:6px}
}
@media (max-width:699px){
  .wmh-grid-small{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .wmh-grid-small .wmh-tile{border-radius:5px}
  .wmh-grid-small .wmh-tile.is-big{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
  .wmh-grid-small .wmh-tile:nth-child(18n+1){grid-column:1/3}
  .wmh-grid-small .wmh-tile:nth-child(18n+10){grid-column:3/5}
  .wmh-grid-small .wmh-tile:hover{transform:none}
}

/* ---------- exactly three photos: a row of three, whatever the size setting ----------
   (a block pattern needs 5 / 9 / 18; three equal squares read better than a
   lopsided block). Phones: the first runs full width at 3:2, two under it. */
.wmh-grid:has(.wmh-tile:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wmh-grid:has(.wmh-tile:nth-child(3):last-child) .wmh-tile{grid-column:auto;grid-row:auto;aspect-ratio:1/1;border-radius:14px}
.wmh-grid:has(.wmh-tile:nth-child(3):last-child) .wmh-tile .wmh-cap{display:block;font-size:14px;padding:34px 16px 14px}
@media (max-width:699px){
  .wmh-grid:has(.wmh-tile:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wmh-grid:has(.wmh-tile:nth-child(3):last-child) .wmh-tile{border-radius:10px}
  .wmh-grid:has(.wmh-tile:nth-child(3):last-child) .wmh-tile:first-child{grid-column:1/-1;aspect-ratio:3/2}
  .wmh-grid:has(.wmh-tile:nth-child(3):last-child) .wmh-tile .wmh-cap{display:none}
}

/* ---------- slideshow ---------- */
.wmh-show{position:relative}
.wmh-stage{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--wmh-radius);background:var(--wmh-ink);
  box-shadow:var(--wmh-lift);isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wmh-stage:focus-visible{outline:3px solid var(--wmh-accent);outline-offset:3px}
.wmh-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;cursor:zoom-in}
.wmh-slide.is-active{opacity:1;z-index:1}
.wmh-mat{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(28px) saturate(1.1);opacity:.75;transform:scale(1.1)}
.wmh-mat::after{content:"";position:absolute;inset:0;background:rgba(32,27,23,.35)}
.wmh-slide img{position:relative;width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.wmh-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--wmh-ink);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease,transform .15s ease,background .15s ease}
.wmh-prev{left:16px}.wmh-prev svg{transform:rotate(180deg)}
.wmh-next{right:16px}
.wmh-stage:hover .wmh-nav,.wmh-stage:focus-within .wmh-nav,.wmh-show.is-touch .wmh-nav{opacity:1}
.wmh-nav:hover{background:#fff;transform:scale(1.06)}
.wmh-nav:focus-visible{opacity:1;outline:3px solid #fff;outline-offset:2px}
.wmh-show[data-n="1"] .wmh-nav,.wmh-show[data-n="1"] .wmh-thumbs,.wmh-show[data-n="1"] .wmh-count{display:none}
.wmh-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 4px 0}
.wmh-caption{margin:0;font-size:15px;line-height:1.45;color:var(--wmh-ink)}
.wmh-count{flex:0 0 auto;font-size:13px;letter-spacing:.04em;color:var(--wmh-muted);font-variant-numeric:tabular-nums}
.wmh-count b{font-weight:600;color:var(--wmh-ink)}
.wmh-thumbs{display:flex;gap:8px;margin-top:14px;padding:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.wmh-thumbs::-webkit-scrollbar{display:none}
.wmh-thumb{flex:0 0 auto;width:72px;height:54px;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--wmh-cream);
  opacity:.55;transition:opacity .2s ease,box-shadow .2s ease;scroll-snap-align:center;position:relative}
.wmh-thumb img{width:100%;height:100%;object-fit:cover}
.wmh-thumb:hover{opacity:.85}
.wmh-thumb[aria-selected="true"]{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--wmh-accent)}
.wmh-thumb:focus-visible{opacity:1;outline:3px solid var(--wmh-accent);outline-offset:2px}
@media (max-width:1100px){.wmh-stage{aspect-ratio:3/2}.wmh-thumb{width:64px;height:48px}}
@media (max-width:699px){
  .wmh-stage{aspect-ratio:4/3;border-radius:10px}
  .wmh-nav{width:40px;height:40px;margin-top:-20px;opacity:1;background:rgba(255,255,255,.85)}
  .wmh-prev{left:10px}.wmh-next{right:10px}
  .wmh-bar{flex-wrap:wrap;padding-top:12px}
  .wmh-caption{font-size:14px}
  .wmh-thumbs{margin-top:10px;gap:6px}.wmh-thumb{width:52px;height:40px;border-radius:6px}
}
@media (prefers-reduced-motion:reduce){
  .wmh-slide,.wmh-tile,.wmh-tile img,.wmh-cap,.wmh-nav,.wmh-thumb{transition:none}
}

/* the lightbox opened from this block gets 96px of breathing room on desktops (home.js);
   iLightbox centres the photo in the reduced box, so the holder moves down by half */
@media (min-width:1100px){html.wmh-lb-offset .ilightbox-holder.metro-white[style*="display: block"]{margin-top:48px}}

/* ---------- the way to the whole gallery ---------- */
.wmh-more{text-align:center;margin:36px 0 0}
.wmh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:999px;
  background:var(--wmh-accent);color:#fff;font-weight:700;font-size:16px;text-decoration:none;
  border:1px solid var(--wmh-accent);transition:transform .15s ease,background .15s ease}
.wmh-btn::after{content:"\2192";font-size:18px;line-height:1;transition:transform .15s ease}
.wmh-btn:hover{background:var(--awb-color7,#6d1f17);color:#fff;transform:translateY(-2px)}
.wmh-btn:hover::after{transform:translateX(3px)}
@media (max-width:699px){.wmh-more{margin-top:26px}.wmh-btn{width:100%}}