/* ============================================================
   CM Image-Gallery arrangements — posts image-based main view
   Containers emitted by posts_class.php; per-image markup stays
   Semantic ".card > a.image > img". Arrangement = container + CSS.
   ============================================================ */
.cm-gallery .card { box-shadow: none; border: none; }
.cm-gallery .card > a.image,
.cm-gallery .card > .image { display: block; }
.cm-gallery .card img,
.cm-gallery .card a.image img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ---- MASONRY (pure CSS columns) ---- */
.cm-gallery-masonry { column-count: 4; column-gap: 0.75rem; }
.cm-gallery-masonry .card {
	display: inline-block;
	width: 100%;
	margin: 0 0 0.75rem;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}
@media (max-width: 1200px) { .cm-gallery-masonry { column-count: 3; } }
@media (max-width: 800px)  { .cm-gallery-masonry { column-count: 2; } }
@media (max-width: 500px)  { .cm-gallery-masonry { column-count: 1; } }

/* ---- GRID (uniform square tiles, tighter than cards) ---- */
.cm-gallery-grid .card img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- JUSTIFIED ROWS (JS sets each .card width + row height) ---- */
.cm-gallery-justified { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cm-gallery-justified .card { margin: 0; overflow: hidden; }
.cm-gallery-justified .card > a.image,
.cm-gallery-justified .card > .image { display: block; height: 100%; }
.cm-gallery-justified .card img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* ---- HERO + FILMSTRIP (JS restructures the .card items) ---- */
.cm-gallery-hero .card { display: none; }
.cm-gallery-hero .cm-hero-main { width: 100%; margin-bottom: 0.6rem; border-radius: 8px; overflow: hidden; background: #0b0b0b; }
.cm-gallery-hero .cm-hero-main img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.cm-gallery-hero .cm-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.cm-gallery-hero .cm-strip .cm-thumb { flex: 0 0 auto; width: 96px; height: 72px; border-radius: 5px; overflow: hidden; cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: opacity .15s, border-color .15s; }
.cm-gallery-hero .cm-strip .cm-thumb:hover { opacity: 1; }
.cm-gallery-hero .cm-strip .cm-thumb.active { opacity: 1; border-color: #3b82f6; }
.cm-gallery-hero .cm-strip .cm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- LIGHTBOX overlay ---- */
.cm-gallery[data-cm-lightbox="1"] .card a.image,
.cm-gallery[data-cm-lightbox="1"] .card img { cursor: zoom-in; }
.cm-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(8,8,10,0.93); }
.cm-lightbox.open { display: flex; }
.cm-lightbox img.cm-lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.cm-lightbox .cm-lb-close { position: absolute; top: 16px; right: 22px; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: 0.8; background: none; border: none; }
.cm-lightbox .cm-lb-close:hover { opacity: 1; }
.cm-lightbox .cm-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px; cursor: pointer; user-select: none; padding: 10px 18px; opacity: 0.7; background: none; border: none; }
.cm-lightbox .cm-lb-nav:hover { opacity: 1; }
.cm-lightbox .cm-lb-prev { left: 6px; }
.cm-lightbox .cm-lb-next { right: 6px; }
.cm-lightbox .cm-lb-caption { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #eee; font-size: 0.95rem; padding: 0 1rem; }
.cm-lightbox .cm-lb-caption .cm-lb-count { display: block; color: #9aa; font-size: 0.8rem; margin-top: 2px; }

/* ---- LOAD MORE ---- */
.cm-load-more { text-align: center; margin: 1.1rem 0 0.5rem; }
.cm-load-more-btn { cursor: pointer; border: 1px solid rgba(0,0,0,0.15); background: #fff; padding: 0.6em 1.5em; border-radius: 999px; font: inherit; color: #333; transition: background .15s, border-color .15s; }
.cm-load-more-btn:hover { background: #f3f4f6; border-color: rgba(0,0,0,0.32); }
.cm-lightbox img.cm-lb-img.cm-lb-loading { opacity: 0.35; transition: opacity .15s; }

/* ---- single-image photo page (lightbox-off destination): image-first, full width ---- */
.cm-photo-page { max-width: 1400px; margin: 0 auto; }
.cm-photo-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.cm-photo-frame { flex: 1 1 auto; display: flex; justify-content: center; }
.cm-photo-frame img, .cm-photo-frame .image, .cm-photo-frame .image img {
	display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto;
	margin: 0 auto; border-radius: 8px; box-shadow: 0 6px 28px rgba(0,0,0,0.18);
}
.cm-photo-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.cm-photo-prev { left: 0.5rem; }
.cm-photo-next { right: 0.5rem; }
.cm-photo-arrow .button { opacity: 0.6; transition: opacity .15s; }
.cm-photo-arrow .button:hover { opacity: 1; }
.cm-photo-arrow:empty { display: none; }
.cm-photo-caption { text-align: center; margin: 1.25rem auto 0; max-width: 800px; padding: 0 1rem; }
.cm-photo-title { font-size: 1.5rem; margin: 0 0 0.35rem; font-weight: 600; }
.cm-photo-title:empty { display: none; }
.cm-photo-desc { color: #555; line-height: 1.55; }
.cm-photo-desc:empty { display: none; }
.cm-photo-meta { margin-top: 1rem; display: flex; gap: 1.25rem; align-items: center; justify-content: center; color: #888; font-size: 0.9rem; }
.cm-photo-back { color: #2185d0; }
@media (max-width: 700px) {
	.cm-photo-frame img, .cm-photo-frame .image img { max-height: 70vh; }
	.cm-photo-arrow { position: static; transform: none; }
	.cm-photo-stage { flex-wrap: wrap; gap: 0.5rem; }
}

/* centre the page heading on the single-photo view */
body:has(.cm-photo-page) #main_page_heading { text-align: center; }

/* filmstrip: every photo as a small thumbnail in one horizontal scrolling row */
.cm-photo-filmstrip { max-width: 1100px; margin: 1.5rem auto 0; }
.cm-photo-filmstrip .cards { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; margin: 0 !important; padding-bottom: 8px; justify-content: flex-start; }
.cm-photo-filmstrip .card { width: 96px !important; min-width: 96px; flex: 0 0 auto; margin: 0 !important; box-shadow: none !important; border: 2px solid transparent !important; border-radius: 6px; opacity: 0.75; transition: opacity .15s, border-color .15s; }
.cm-photo-filmstrip .card:hover { opacity: 1; }
.cm-photo-filmstrip .card > .image, .cm-photo-filmstrip .card > a.image, .cm-photo-filmstrip .card .content { padding: 0 !important; }
.cm-photo-filmstrip .card img { display: block; height: 72px !important; width: 96px !important; object-fit: cover; border-radius: 4px; }
.cm-photo-filmstrip .card .meta, .cm-photo-filmstrip .card .header, .cm-photo-filmstrip .card .description, .cm-photo-filmstrip .card .extra { display: none !important; }
.cm-photo-filmstrip .card.cm-active { opacity: 1; border-color: #2185d0 !important; }