/* ── MatchIT item gallery + cards (2026-09-14) ─────────────────────────────────────────────
   templates/matchit-item-gallery.tpl, js/matchit-gallery.js, list cards on the customer page */

/* bounded box: every image fits inside, nothing is cropped */
.mi-gallery { width: 100%; }
.mi-gallery-main { position: relative; width: 100%; height: 60vh; min-height: 280px; max-height: 720px; background: #f4f5f7; border-radius: 6px; overflow: hidden; }
.mi-gallery-main .swiper-slide { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
.mi-gallery-main .swiper-slide a.mi-gallery-zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.mi-gallery-main .swiper-slide a.mi-gallery-zoom { display: flex; align-items: center; justify-content: center; }
.mi-gallery-main .swiper-slide img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; display: block; }
.mi-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; line-height: 1.4; }
.mi-gallery-caption strong { display: block; font-weight: 600; }
.mi-gallery-caption span { display: block; opacity: 0.9; }
/* the theme parks Swiper arrows bottom-right without a glyph: put ours mid-height with a chevron */
.mi-gallery-main .swiper-button-next, .mi-gallery-main .swiper-button-prev { top: 50% !important; bottom: auto !important; width: 36px !important; height: 36px !important; margin-top: -18px !important; line-height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.85) !important; background-repeat: no-repeat; background-position: center; background-size: 10px 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); opacity: 0.9; }
.mi-gallery-main .swiper-button-prev { left: 10px !important; right: auto !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='M8 1 2 8l6 7' fill='none' stroke='%23333' stroke-width='2'/></svg>") !important; }
.mi-gallery-main .swiper-button-next { right: 10px !important; left: auto !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='m2 1 6 7-6 7' fill='none' stroke='%23333' stroke-width='2'/></svg>") !important; }
.mi-gallery-main .swiper-button-next:hover, .mi-gallery-main .swiper-button-prev:hover { background-color: #fff !important; opacity: 1; }
.mi-gallery-main .swiper-button-disabled { opacity: 0.25; }
.mi-gallery-expand { position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #333; font-size: 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.mi-gallery-expand:hover { background: #fff; }

/* thumbnail strip */
.mi-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mi-gallery-thumb { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: #f4f5f7; overflow: hidden; cursor: pointer; opacity: 0.75; transition: opacity 0.15s, border-color 0.15s; }
.mi-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-gallery-thumb:hover, .mi-gallery-thumb.active { opacity: 1; border-color: var(--primary, #3FBAE4); }

/* sticky gallery column beside the text on desktop */
@media (min-width: 992px) {
	.mi-item-sticky { position: sticky; top: 90px; }
}
@media (max-width: 767px) {
	.mi-gallery-main { height: 45vh; min-height: 220px; }
	.mi-gallery-thumb { width: 52px; height: 52px; }
}

/* lightbox: the original file, centred, keyboard + click outside to close */
#mi-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; }
#mi-lightbox[hidden] { display: none; }
#mi-lightbox figure { margin: 0; max-width: 94vw; max-height: 94vh; text-align: center; }
#mi-lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; display: block; margin: 0 auto; }
#mi-lightbox figcaption { color: #fff; font-size: 14px; padding: 8px 0 0; min-height: 1.4em; }
#mi-lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 34px; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
#mi-lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
#mi-lightbox .mi-lb-close { top: 16px; right: 16px; }
#mi-lightbox .mi-lb-prev { left: 16px; top: 50%; margin-top: -24px; }
#mi-lightbox .mi-lb-next { right: 16px; top: 50%; margin-top: -24px; }
body.mi-lb-open { overflow: hidden; }

/* list cards: fixed 4:3 box, image fitted, so a tall cover does not stretch the row */
.mi-card-img { position: relative; width: 100%; padding-top: 75%; background: #f4f5f7; border-radius: 4px; overflow: hidden; }
.mi-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.mi-card-img.mi-card-cover img { object-fit: cover; }