/* Native image buttons retain each photo's existing layout and crop. */
.image-trigger { display: block; position: relative; width: 100%; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 0; cursor: zoom-in; overflow: hidden; object-fit: contain; }
.image-trigger > img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: inherit; object-position: inherit; }
.image-trigger:focus-visible { outline: 3px solid #ff4450; outline-offset: -4px; }
.image-trigger:not(.board-photo)::after { content: "⤢"; position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff70; border-radius: .3rem; background: #111b; color: #fff; font: 22px/1 Arial,sans-serif; pointer-events: none; }
.terrain-photo > .image-trigger, .club-life-gallery .image-trigger { aspect-ratio: 4 / 3; object-fit: cover; }
.parcours-gallery .image-trigger, .champion-gallery .image-trigger, .event-photo > .image-trigger { position: absolute; inset: 0; height: 100%; }
.parcours-gallery .image-trigger, .event-photo > .image-trigger { object-fit: cover; }
.terrain-photo figcaption, .club-life-gallery figcaption, .parcours-gallery figcaption, .champion-gallery figcaption, .event-photo figcaption { pointer-events: none; }
.image-trigger.board-photo { position: static; inset: auto; width: 5.5rem; height: 5.5rem; grid-column: 2; grid-row: 1 / 5; border: 2px solid #d20a16; border-radius: 50%; object-fit: cover; }
.guest-payment > .image-trigger { width: min(100%, 11rem); margin: auto; aspect-ratio: 1; background: #fff; }
.guest-payment .image-trigger > img { width: 100%; max-width: 100%; }
.directions-route-plan > .image-trigger { width: 100%; aspect-ratio: 4 / 3; min-height: 0; max-height: 38rem; object-fit: contain; }

/* A translucent, softly blurred backdrop leaves the enlarged photo sharp. */
.image-lightbox { width: min(calc(100% - 2rem), 90rem); height: min(calc(100dvh - 2rem), 64rem); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; color: #fff; background: transparent; overflow: visible; }
.image-lightbox::backdrop { background: linear-gradient(#c4c8c224, #aeb5b01f), #0e1215bd; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.image-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .75rem; }
.lightbox-toolbar, .lightbox-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-toolbar { justify-content: flex-end; }
.lightbox-button { position: relative; flex: 0 0 44px; display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
.lightbox-button::before { content: ""; position: absolute; inset: 5px; border: 1px solid #ffffff45; border-radius: 50%; background: #172025b3; }
.lightbox-button svg { position: relative; display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-button:hover::before { background: #ffffff30; }
.lightbox-button:disabled { opacity: .3; cursor: default; }
.lightbox-button:focus-visible { outline: 0; }
.lightbox-button:focus-visible::before { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-navigation { justify-self: center; width: min(100%, 18rem); gap: .75rem; }
.lightbox-figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; min-height: 0; min-width: 0; margin: 0; }
.lightbox-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 1rem 2rem #0005); }
.lightbox-image[src$=".svg"] { background: #fff; }
.lightbox-caption { max-height: 18dvh; overflow: auto; padding: .5rem 1rem; border-radius: .35rem; background: #11181ca6; color: #fff; font: 400 1rem/1.5 Inter,Arial,sans-serif; text-align: center; overflow-wrap: break-word; }
.lightbox-caption a { color: inherit; text-decoration: underline; }
.lightbox-caption:empty { display: none; }
.lightbox-counter { flex: 1; margin: 0; text-align: center; font-size: .9rem; }
.lightbox-navigation [hidden] { display: none; }
@media (max-width: 39.999rem) {
  .image-lightbox { width: calc(100% - 1rem); height: calc(100dvh - 1rem); }
  .lightbox-caption { padding: .5rem; font-size: .9rem; }
}
@media (max-width: 23rem) {
  .image-trigger.board-photo { grid-column: 1; grid-row: 1; width: 4.5rem; height: 4.5rem; }
}
@media (max-height: 30rem) {
  .image-lightbox[open], .lightbox-figure { gap: .25rem; }
  .lightbox-button { min-width: 44px; min-height: 44px; }
  .lightbox-caption { max-height: 20dvh; padding: .25rem .5rem; }
}