/* ---------- Photo gallery (acf/mcpl-gallery) ----------
   Full-width section, content column .mcpl-site-container. Shared eyebrow
   and section heading: .mcpl-landing-eyebrow / .mcpl-landing-section-heading
   in global.css. Colors: --mcpl-* tokens only (light/dark mode); the photo
   overlay and lightbox sit on photos / a fixed dark scrim, so their text is
   a fixed light color on purpose. */
.mcpl-gallery{ padding-top: 56px; padding-bottom: 56px; background: var(--mcpl-bg); }
@media (min-width: 992px){ .mcpl-gallery{ padding-top: 96px; padding-bottom: 96px; } }
.mcpl-gallery--bg-surface{ background: var(--mcpl-surface); }

.mcpl-gallery__head{ max-width: 680px; margin-bottom: 32px; }
@media (min-width: 992px){ .mcpl-gallery__head{ margin-bottom: 56px; } }
.mcpl-gallery__intro{ color: var(--mcpl-text-muted); font-size: 17px; line-height: 1.6; margin: 0; }

/* ---------- Layouts ---------- */
.mcpl-gallery__list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px){ .mcpl-gallery__list{ gap: 16px; } }
@media (min-width: 992px){
  .mcpl-gallery--cols-2 .mcpl-gallery__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcpl-gallery--cols-3 .mcpl-gallery__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mcpl-gallery--cols-4 .mcpl-gallery__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991px){
  .mcpl-gallery--cols-3 .mcpl-gallery__list,
  .mcpl-gallery--cols-4 .mcpl-gallery__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Masonry: CSS columns, no JS. Columns follow the same counts as the grid. */
.mcpl-gallery--masonry .mcpl-gallery__list{ display: block; column-count: 2; column-gap: 8px; }
@media (min-width: 768px){ .mcpl-gallery--masonry .mcpl-gallery__list{ column-gap: 16px; } }
@media (min-width: 768px) and (max-width: 991px){
  .mcpl-gallery--masonry.mcpl-gallery--cols-3 .mcpl-gallery__list,
  .mcpl-gallery--masonry.mcpl-gallery--cols-4 .mcpl-gallery__list{ column-count: 3; }
}
@media (min-width: 992px){
  .mcpl-gallery--masonry.mcpl-gallery--cols-2 .mcpl-gallery__list{ column-count: 2; }
  .mcpl-gallery--masonry.mcpl-gallery--cols-3 .mcpl-gallery__list{ column-count: 3; }
  .mcpl-gallery--masonry.mcpl-gallery--cols-4 .mcpl-gallery__list{ column-count: 4; }
}
.mcpl-gallery--masonry .mcpl-gallery__item{ break-inside: avoid; margin-bottom: 8px; }
@media (min-width: 768px){ .mcpl-gallery--masonry .mcpl-gallery__item{ margin-bottom: 16px; } }

/* ---------- Photo ---------- */
.mcpl-gallery__item{ margin: 0; min-width: 0; }
.mcpl-gallery__frame{
  position: relative; display: block; overflow: hidden;
  border-radius: 8px; background: var(--mcpl-surface);
  border: 1px solid var(--mcpl-border);
}
.mcpl-gallery--bg-surface .mcpl-gallery__frame{ background: var(--mcpl-bg); }
@media (min-width: 768px){ .mcpl-gallery__frame{ border-radius: 12px; } }
.mcpl-gallery__img{ display: block; width: 100%; height: auto; transition: transform 500ms cubic-bezier(.2,.65,.3,1); }

/* Optional dark-mode variant: only rendered when one is set, so a photo
   without it simply stays visible in both modes. Same [data-theme] /
   prefers-color-scheme pair as global.css's theme toggle. */
.mcpl-gallery__img--dark{ display: none; }
:root[data-theme="dark"] .mcpl-gallery__img--light{ display: none; }
:root[data-theme="dark"] .mcpl-gallery__img--dark{ display: block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mcpl-gallery__img--light{ display: none; }
  :root:not([data-theme="light"]) .mcpl-gallery__img--dark{ display: block; }
}

.mcpl-gallery--ratio-landscape .mcpl-gallery__frame{ aspect-ratio: 4 / 3; }
.mcpl-gallery--ratio-square .mcpl-gallery__frame{ aspect-ratio: 1 / 1; }
.mcpl-gallery--ratio-portrait .mcpl-gallery__frame{ aspect-ratio: 3 / 4; }
.mcpl-gallery--grid .mcpl-gallery__img{ height: 100%; object-fit: cover; }

a.mcpl-gallery__link{ cursor: zoom-in; text-decoration: none; color: inherit; }
a.mcpl-gallery__link:focus-visible{ outline: 3px solid var(--mcpl-accent); outline-offset: 2px; }
@media (hover: hover){ a.mcpl-gallery__link:hover .mcpl-gallery__img{ transform: scale(1.04); } }

/* ---------- Caption on the photo ---------- */
.mcpl-gallery__caption{ display: block; }
.mcpl-gallery__title{
  display: block; font-family: var(--mcpl-font-heading); font-weight: 700;
  font-size: 15px; line-height: 1.25;
}
.mcpl-gallery__desc{ display: block; font-size: 13px; line-height: 1.45; margin-top: 4px; }

.mcpl-gallery--caption-overlay .mcpl-gallery__caption{
  position: absolute; inset: auto 0 0 0;
  padding: 40px 12px 12px;
  background: linear-gradient(to top, rgba(16,19,48,0.88) 0%, rgba(16,19,48,0.55) 60%, rgba(16,19,48,0) 100%);
  color: #FFFFFF; /* fixed: sits on the gradient above, same in light and dark mode */
  pointer-events: none;
}
.mcpl-gallery--caption-overlay .mcpl-gallery__desc{
  color: rgba(255,255,255,0.88);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
@media (min-width: 768px){
  .mcpl-gallery--caption-overlay .mcpl-gallery__caption{ padding: 56px 20px 18px; }
  .mcpl-gallery--caption-overlay .mcpl-gallery__title{ font-size: 17px; }
  .mcpl-gallery--caption-overlay .mcpl-gallery__desc{ font-size: 14px; }
}
/* Mouse users: the description slides in on hover/focus; the title is always
   there. Touch users never have hover, so everything stays visible. */
@media (hover: hover) and (min-width: 768px){
  .mcpl-gallery--caption-overlay .mcpl-gallery__desc{
    max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height var(--mcpl-transition), opacity var(--mcpl-transition), margin-top var(--mcpl-transition);
  }
  .mcpl-gallery--caption-overlay .mcpl-gallery__frame:hover .mcpl-gallery__desc,
  .mcpl-gallery--caption-overlay .mcpl-gallery__frame:focus-within .mcpl-gallery__desc{ max-height: 4.5em; opacity: 1; margin-top: 4px; }
}

/* ---------- Caption below the photo ---------- */
.mcpl-gallery--caption-below .mcpl-gallery__caption{ padding: 10px 2px 0; }
.mcpl-gallery--caption-below .mcpl-gallery__title{ color: var(--mcpl-text); }
.mcpl-gallery--caption-below .mcpl-gallery__desc{ color: var(--mcpl-text-muted); }

/* Phones: two narrow columns made masonry tiles uneven (only the caption
   length differs), so it becomes the plain grid with equal tiles: title and
   description each clamped to two lines, one fixed caption height. The
   lightbox still shows the full text. */
@media (max-width: 767px){
  .mcpl-gallery--masonry .mcpl-gallery__list{ display: grid; column-count: auto; }
  .mcpl-gallery--masonry .mcpl-gallery__item{ margin-bottom: 0; }
  .mcpl-gallery--caption-below .mcpl-gallery__caption{ height: calc(10px + 15px * 1.25 * 2 + 4px + 13px * 1.45 * 2); overflow: hidden; }
  .mcpl-gallery--caption-below .mcpl-gallery__title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .mcpl-gallery--caption-below .mcpl-gallery__desc{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* ---------- Lightbox (built by assets/js/gallery.js) ---------- */
/* Lightbox tokens. Light: the ink scrim over a white page. Dark: the page
   behind is dark too and its light text and buttons showed through at the
   sides, so the scrim is the (near-solid) dark page colour with a blur, and
   the arrows are calm elevated circles instead of white glows. */
.mcpl-lightbox{
  --mcpl-lightbox-scrim: rgba(10,12,28,0.94);
  --mcpl-lightbox-btn: rgba(255,255,255,0.12);
  --mcpl-lightbox-btn-hover: rgba(255,255,255,0.24);
  --mcpl-lightbox-btn-border: transparent;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mcpl-lightbox{
    --mcpl-lightbox-scrim: color-mix(in srgb, var(--mcpl-bg) 97%, transparent);
    --mcpl-lightbox-btn: var(--mcpl-bg-elevated);
    --mcpl-lightbox-btn-hover: color-mix(in srgb, var(--mcpl-bg-elevated) 82%, #FFFFFF);
    --mcpl-lightbox-btn-border: var(--mcpl-border);
  }
}
:root[data-theme="dark"] .mcpl-lightbox{
  --mcpl-lightbox-scrim: color-mix(in srgb, var(--mcpl-bg) 97%, transparent);
  --mcpl-lightbox-btn: var(--mcpl-bg-elevated);
  --mcpl-lightbox-btn-hover: color-mix(in srgb, var(--mcpl-bg-elevated) 82%, #FFFFFF);
  --mcpl-lightbox-btn-border: var(--mcpl-border);
}
.mcpl-lightbox{
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: var(--mcpl-lightbox-scrim); color: #FFFFFF;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: hidden;
}
.mcpl-lightbox::backdrop{ background: transparent; }
.mcpl-lightbox[open]{ display: flex; flex-direction: column; animation: mcpl-lightbox-in 200ms ease-out; }
@keyframes mcpl-lightbox-in{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .mcpl-lightbox[open]{ animation: none; }
  .mcpl-gallery__img{ transition: none; }
}
/* Both lightbox <img>s share one grid cell: gallery.js slides the outgoing
   photo away and the next one in (transform/opacity only). */
.mcpl-lightbox__stage{
  flex: 1 1 auto; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: 56px 12px 8px; touch-action: pan-y pinch-zoom; overflow: hidden;
}
.mcpl-lightbox__img{ grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.mcpl-lightbox__img:not(.is-current){ visibility: hidden; }
/* Caption: always title + description, one fixed height (one title line,
   three description lines) so the photo never jumps between short and long
   texts. Longer text is clipped with an ellipsis. */
.mcpl-lightbox__caption{
  flex: 0 0 auto; box-sizing: border-box; padding: 8px 16px 20px; text-align: center; max-width: 720px; margin: 0 auto; width: 100%;
  height: calc(28px + 17px * 1.3 + 4px + 14px * 1.5 * 3); overflow: hidden;
}
.mcpl-lightbox__title{ display: block; font-family: var(--mcpl-font-heading); font-weight: 700; font-size: 17px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcpl-lightbox__desc{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); margin-top: 4px;
}
.mcpl-lightbox__counter{ position: absolute; top: 18px; left: 16px; font-family: var(--mcpl-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); }
.mcpl-lightbox__btn{
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mcpl-lightbox-btn); color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--mcpl-lightbox-btn-border);
  transition: background var(--mcpl-transition);
}
.mcpl-lightbox__btn:hover{ background: var(--mcpl-lightbox-btn-hover); }
.mcpl-lightbox__btn:focus-visible{ outline: 3px solid var(--mcpl-accent); outline-offset: 2px; }
.mcpl-lightbox__btn .material-symbols-outlined{ font-size: 26px; }
.mcpl-lightbox__close{ top: 8px; right: 8px; }
.mcpl-lightbox__prev,
.mcpl-lightbox__next{ top: 50%; transform: translateY(-50%); }
.mcpl-lightbox__prev{ left: 8px; }
.mcpl-lightbox__next{ right: 8px; }
/* Phones: swipe is the primary gesture, so the arrows get out of the way of the photo. */
@media (max-width: 767px){
  .mcpl-lightbox__prev,
  .mcpl-lightbox__next{ top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
  .mcpl-lightbox__prev{ left: 12px; }
  .mcpl-lightbox__next{ right: 12px; }
  /* Room for the arrow row under the caption (44px + 14px + a gap). */
  .mcpl-lightbox__caption{ padding-bottom: 70px; height: calc(78px + 17px * 1.3 + 4px + 14px * 1.5 * 3); }
}
@media (min-width: 768px){ .mcpl-lightbox__stage{ padding: 64px 88px 8px; } }

/* "+N" tile (8th tile when there are more than 7 photos): the photo stays
   visible under a dark wash, the count on top. The wash is the fixed ink
   brand colour, so the white count reads in both modes (same as the
   overlay captions above). */
.mcpl-gallery__more{
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mcpl-ink) 64%, transparent);
  color: #fff; font-family: var(--mcpl-font-heading); font-weight: 700;
  font-size: 28px; letter-spacing: 0.01em;
  transition: background-color var(--mcpl-transition);
}
@media (min-width: 768px){ .mcpl-gallery__more{ font-size: 36px; } }
@media (hover: hover){ a.mcpl-gallery__link:hover .mcpl-gallery__more{ background: color-mix(in srgb, var(--mcpl-ink) 52%, transparent); } }
.mcpl-gallery__item--more a.mcpl-gallery__link{ cursor: pointer; }