/**
 * KMG PhotoVault — Frontend Gallery Styles
 * All rules scoped under .kmg-pv-*.
 * Covers 10 layout types: grid, masonry, carousel, filmstrip,
 *   lightbox, blogstyle, justified, list, slideshow, mosaic (alias of grid).
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.kmg-pv-gallery { width:100%; margin:0 auto; box-sizing:border-box; }
.kmg-pv-notice {
	padding:12px 16px; background:#f6f7f7;
	border-left:4px solid #a7aaad; font-style:italic; color:#50575e;
}
.kmg-pv-gallery *, .kmg-pv-gallery *::before, .kmg-pv-gallery *::after { box-sizing:border-box; }

/* ── Shared thumbnail hover overlay ─────────────────────────────────────── */
.kmg-pv-thumb-overlay {
	position:absolute; inset:0;
	background:rgba(0,0,0,.35);
	display:flex; align-items:center; justify-content:center;
	opacity:0; transition:opacity .2s;
	pointer-events:none;
}
.kmg-pv-thumb-overlay .dashicons { color:#fff; font-size:28px; width:28px; height:28px; }
.kmg-pv-thumb:hover .kmg-pv-thumb-overlay,
.kmg-pv-masonry-item:hover .kmg-pv-thumb-overlay,
.kmg-pv-justified-item:hover .kmg-pv-thumb-overlay { opacity:1; }

/* ── GRID (structured N-column thumbnail grid) ───────────────────────────── */
.kmg-pv-grid {
	display:grid;
	grid-template-columns:repeat(var(--kmg-columns,4), 1fr);
	gap:10px;
}
.kmg-pv-thumb {
	position:relative; aspect-ratio:4/3;
	overflow:hidden; border-radius:4px;
	cursor:pointer; background:#f0f0f0;
}
.kmg-pv-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.kmg-pv-thumb:hover img { transform:scale(1.04); }

/* ── MASONRY (variable-height, multi-column) ─────────────────────────────── */
.kmg-pv-masonry {
	columns:3; column-gap:10px;
	/* CSS masonry — widely supported fallback */
}
@supports (grid-template-rows: masonry) {
	.kmg-pv-masonry {
		columns:unset;
		display:grid;
		grid-template-columns:repeat(3,1fr);
		grid-template-rows:masonry;
		gap:10px;
	}
}
.kmg-pv-masonry-item {
	position:relative; display:inline-block;
	width:100%; margin-bottom:10px;
	overflow:hidden; border-radius:4px;
	cursor:pointer; break-inside:avoid;
}
.kmg-pv-masonry-item img { width:100%; height:auto; display:block; transition:transform .25s ease; }
.kmg-pv-masonry-item:hover img { transform:scale(1.03); }

/* ── CAROUSEL / SLIDER ───────────────────────────────────────────────────── */
.kmg-pv-carousel {
	position:relative; overflow:hidden;
	border-radius:4px; background:#000;
}
.kmg-pv-carousel-track {
	display:flex;
	transition:transform .4s cubic-bezier(.25,.46,.45,.94);
	will-change:transform;
}
.kmg-pv-carousel-item {
	min-width:100%; flex-shrink:0;
	cursor:pointer;
}
.kmg-pv-carousel-item img { width:100%; max-height:70vh; object-fit:contain; display:block; margin:0 auto; }
.kmg-pv-car-prev,.kmg-pv-car-next {
	position:absolute; top:50%; transform:translateY(-50%);
	background:rgba(0,0,0,.45); color:#fff; border:none;
	width:48px; height:48px; font-size:22px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; z-index:2; transition:background .15s;
}
.kmg-pv-car-prev { left:12px; }
.kmg-pv-car-next { right:12px; }
.kmg-pv-car-prev:hover,.kmg-pv-car-next:hover { background:rgba(0,0,0,.75); }
.kmg-pv-car-dots { display:flex; justify-content:center; gap:8px; padding:10px 0; background:rgba(0,0,0,.55); }
.kmg-pv-car-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:background .15s; }
.kmg-pv-car-dot.kmg-pv-active { background:#fff; }

/* ── FILMSTRIP ───────────────────────────────────────────────────────────── */
.kmg-pv-filmstrip-wrap { display:flex; flex-direction:column; gap:10px; }
.kmg-pv-filmstrip-main { position:relative; background:#111; border-radius:4px; overflow:hidden; text-align:center; }
.kmg-pv-filmstrip-main img { max-width:100%; max-height:65vh; object-fit:contain; display:block; margin:0 auto; }
.kmg-pv-fs-dl-btn { position:absolute; bottom:12px; right:12px; display:inline-flex; align-items:center; gap:6px; }
.kmg-pv-filmstrip-strip { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kmg-pv-filmstrip-inner { display:flex; gap:8px; padding:4px 0; }
.kmg-pv-fs-thumb {
	flex-shrink:0; width:80px; height:60px;
	overflow:hidden; border-radius:3px; cursor:pointer;
	border:2px solid transparent; transition:border-color .15s;
}
.kmg-pv-fs-thumb.kmg-pv-active { border-color:#2271b1; }
.kmg-pv-fs-thumb img { width:100%; height:100%; object-fit:cover; }

/* ── LIGHTBOX GALLERY (single-hero entry point) ──────────────────────────── */
.kmg-pv-lightbox-single { position:relative; }
.kmg-pv-lightbox-hero {
	position:relative; cursor:zoom-in;
	border-radius:4px; overflow:hidden; background:#111;
}
.kmg-pv-lightbox-hero img { width:100%; max-height:75vh; object-fit:contain; display:block; margin:0 auto; }
.kmg-pv-lightbox-prompt {
	position:absolute; inset:0;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:8px; background:rgba(0,0,0,.3); color:#fff;
	opacity:0; transition:opacity .2s;
}
.kmg-pv-lightbox-hero:hover .kmg-pv-lightbox-prompt { opacity:1; }
.kmg-pv-lightbox-prompt .dashicons { font-size:40px; width:40px; height:40px; }
.kmg-pv-lightbox-count { margin:8px 0 0; font-size:13px; color:#666; text-align:center; }

/* ── BLOG-STYLE / VERTICAL LIST ──────────────────────────────────────────── */
.kmg-pv-blogstyle { display:flex; flex-direction:column; gap:24px; }
.kmg-pv-blog-item { position:relative; }
.kmg-pv-blog-img { width:100%; height:auto; border-radius:4px; display:block; cursor:zoom-in; }
.kmg-pv-blog-actions { margin-top:10px; display:flex; gap:10px; align-items:center; }

/* ── JUSTIFIED GALLERY ───────────────────────────────────────────────────── */
.kmg-pv-justified {
	display:flex; flex-wrap:wrap;
	gap:6px;
	/* JS sets --kmg-row-height; items get explicit width to fill rows */
}
.kmg-pv-justified-item {
	position:relative; overflow:hidden; border-radius:4px;
	cursor:pointer; flex-grow:1;
	/* JS sets width via style attribute */
}
.kmg-pv-justified-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.kmg-pv-justified-item:hover img { transform:scale(1.04); }

/* ── LIST ────────────────────────────────────────────────────────────────── */
.kmg-pv-list { list-style:none; margin:0; padding:0; }
.kmg-pv-list-item { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #dcdcde; }
.kmg-pv-list-item:last-child { border-bottom:none; }
.kmg-pv-list-thumb { width:80px; height:60px; flex-shrink:0; overflow:hidden; border-radius:4px; cursor:pointer; background:#f0f0f0; }
.kmg-pv-list-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.kmg-pv-list-thumb:hover img { transform:scale(1.06); }
.kmg-pv-list-meta { display:flex; align-items:center; gap:16px; flex:1; }
.kmg-pv-list-num { color:#a7aaad; font-size:13px; min-width:24px; }
.kmg-pv-download-btn { margin-left:auto; }

/* ── SLIDESHOW ───────────────────────────────────────────────────────────── */
.kmg-pv-slideshow { position:relative; background:#000; border-radius:4px; overflow:hidden; }
.kmg-pv-slides { position:relative; overflow:hidden; min-height:200px; }
.kmg-pv-slide {
	position:absolute; top:0; left:0; width:100%;
	opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:0;
}
.kmg-pv-slide.kmg-pv-active { position:relative; opacity:1; pointer-events:auto; z-index:1; }
.kmg-pv-slide img { width:100%; max-height:75vh; object-fit:contain; display:block; margin:0 auto; }
.kmg-pv-prev,.kmg-pv-next {
	position:absolute; top:50%; transform:translateY(-50%);
	background:rgba(0,0,0,.45); color:#fff; border:none;
	width:48px; height:48px; font-size:22px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; z-index:2; transition:background .15s;
}
.kmg-pv-prev { left:12px; }
.kmg-pv-next { right:12px; }
.kmg-pv-prev:hover,.kmg-pv-next:hover { background:rgba(0,0,0,.7); }
.kmg-pv-dots { display:flex; justify-content:center; gap:8px; padding:12px 0; background:rgba(0,0,0,.7); }
.kmg-pv-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:background .15s; }
.kmg-pv-dot.kmg-pv-active { background:#fff; }

/* ── LIGHTBOX MODAL ──────────────────────────────────────────────────────── */
.kmg-pv-lightbox {
	position:fixed; inset:0; z-index:99999;
	display:flex; align-items:center; justify-content:center;
}
.kmg-pv-lightbox-overlay { position:absolute; inset:0; background:rgba(0,0,0,.9); cursor:pointer; }
.kmg-pv-lightbox-inner {
	position:relative; z-index:1;
	max-width:94vw; max-height:94vh;
	display:flex; flex-direction:column; align-items:center;
}
.kmg-pv-lightbox-close {
	position:absolute; top:-44px; right:-4px;
	background:none; border:none; color:#fff;
	font-size:38px; line-height:1; cursor:pointer; padding:0 8px; opacity:.8; transition:opacity .15s;
}
.kmg-pv-lightbox-close:hover { opacity:1; }
.kmg-pv-lb-prev,.kmg-pv-lb-next {
	position:absolute; top:50%; transform:translateY(-50%);
	background:rgba(0,0,0,.45); color:#fff; border:none;
	width:44px; height:44px; font-size:20px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; transition:background .15s; z-index:2;
}
.kmg-pv-lb-prev { left:-56px; }
.kmg-pv-lb-next { right:-56px; }
.kmg-pv-lb-prev:hover,.kmg-pv-lb-next:hover { background:rgba(0,0,0,.75); }
.kmg-pv-lightbox-img-wrap { max-width:90vw; max-height:80vh; display:flex; align-items:center; justify-content:center; }
#kmg-pv-lightbox-img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:3px; display:block; }
.kmg-pv-lightbox-footer { margin-top:14px; display:flex; align-items:center; gap:16px; }
.kmg-pv-lb-counter { color:rgba(255,255,255,.7); font-size:13px; }
.kmg-pv-lightbox-dl-btn { display:inline-flex !important; align-items:center; gap:6px; text-decoration:none !important; }
.kmg-pv-lightbox-dl-btn .dashicons { font-size:18px; width:18px; height:18px; }

/* ── Welcome / Thank-you messages ────────────────────────────────────────── */
.kmg-pv-welcome,.kmg-pv-thankyou {
	margin:0 0 24px; padding:16px 20px;
	background:#f9f9f9; border-left:4px solid #a7aaad;
	border-radius:0 4px 4px 0; font-size:15px; line-height:1.7; color:#3c434a;
}
.kmg-pv-thankyou { margin:24px 0 0; }

/* ── Copyright footer ────────────────────────────────────────────────────── */
.kmg-pv-copyright-footer {
	margin-top:32px; padding:20px;
	background:#f6f7f7; border:1px solid #dcdcde; border-radius:4px;
	font-size:13px; line-height:1.6; color:#50575e;
}
.kmg-pv-copyright-heading { margin:0 0 10px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#3c434a; }
.kmg-pv-copyright-text { margin:0 0 12px; }
.kmg-pv-copyright-details summary { cursor:pointer; font-weight:600; color:#2271b1; font-size:12px; }
.kmg-pv-copyright-details summary:hover { text-decoration:underline; }
.kmg-pv-copyright-glossary { margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
.kmg-pv-copyright-glossary dt { font-weight:700; color:#3c434a; white-space:nowrap; }
.kmg-pv-copyright-glossary dd { margin:0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:600px) {
	.kmg-pv-grid { grid-template-columns:repeat(2,1fr) !important; gap:6px; }
	.kmg-pv-masonry { columns:2; }
	.kmg-pv-prev,.kmg-pv-next,.kmg-pv-car-prev,.kmg-pv-car-next { width:36px; height:36px; font-size:16px; }
	.kmg-pv-lb-prev { left:-40px; }
	.kmg-pv-lb-next { right:-40px; }
	.kmg-pv-list-thumb { width:60px; height:48px; }
}