/* ============================================================
   MTSP — Галерея (v2 canon)
   Верстка за docs-claude/mockups/Галерея v2.html.
   Токени — canon --mtsp-* (tokens.css). Скоуп .mtsp-gallery-page (лендинг)
   + .mtsp-album-page (альбом). YouTube-модалка + фото-лайтбокс — canon.
   ============================================================ */

.mtsp-gallery-page,
.mtsp-album-page {
	font-family: var(--mtsp-font-body);
	color: var(--mtsp-gray-800);
}
.mtsp-gallery-page { padding: 0 0 72px; } /* верхній відступ дає canon page-head band */
.mtsp-album-page { padding: 0 0 72px; } /* верхній відступ дає canon page-head band (як лендинг) */
/* контент лендинга після page-head band */
.mtsp-gallery-page > .container { padding-top: 8px; }
.mtsp-gallery-page .container,
.mtsp-album-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}
/* ============ PAGE HEAD ============ */
/* Заголовок лендинга Й альбому — спільний page-head-компонент (template-parts/page-head.php),
   стиль = page-head.css (.mtsp-info-page .page-head band + eyebrow + H1). Старі
   .gal-head/.gal-title/.gal-sub/.section-eyebrow + .mtsp-album-page>.container padding-top:48px
   прибрано як мертві — band компонента сам дає ритм band→заголовок. */

/* ============ SECTION HEAD (label rule) ============ */
.mtsp-gallery-page .sec-head {
	display: flex; align-items: baseline; gap: 14px;
	margin: 52px 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mtsp-gray-300);
}
.mtsp-gallery-page .sec-head h2 {
	font-family: var(--mtsp-font-display);
	font-size: 24px; font-weight: 600;
	color: var(--mtsp-navy); letter-spacing: -0.4px;
	margin: 0;
}
.mtsp-gallery-page .sec-head .sec-count {
	font-family: var(--mtsp-font-mono);
	font-size: 12px; color: var(--mtsp-gray-400);
}

/* ============ ALBUMS ============ */
.mtsp-gallery-page .albums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mtsp-gallery-page .album {
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px; overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mtsp-gallery-page .album:hover {
	border-color: var(--mtsp-accent);
	box-shadow: 0 14px 28px -12px rgba(15, 36, 64, 0.2);
	transform: translateY(-3px);
}
.mtsp-gallery-page .album-cover {
	position: relative; aspect-ratio: 4/3;
	background: var(--mtsp-gray-100); overflow: hidden;
}
.mtsp-gallery-page .album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtsp-gallery-page .album-cover-ph {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: var(--mtsp-gray-400);
}
.mtsp-gallery-page .album-cover-ph i[data-lucide],
.mtsp-gallery-page .album-cover-ph svg { width: 40px; height: 40px; }
.mtsp-gallery-page .cover-count {
	position: absolute; top: 10px; right: 10px;
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 600;
	color: #fff; background: rgba(8, 22, 40, 0.72);
	padding: 4px 9px; border-radius: 100px;
	backdrop-filter: blur(3px);
	display: inline-flex; align-items: center; gap: 5px;
}
.mtsp-gallery-page .cover-count i[data-lucide],
.mtsp-gallery-page .cover-count svg { width: 12px; height: 12px; }
.mtsp-gallery-page .album-body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.mtsp-gallery-page .album-name { font-size: 15px; font-weight: 700; color: var(--mtsp-navy); line-height: 1.35; }
.mtsp-gallery-page .album:hover .album-name { color: var(--mtsp-accent); }
.mtsp-gallery-page .album-meta { font-family: var(--mtsp-font-mono); font-size: 12px; color: var(--mtsp-gray-500); }

/* ============ VIDEOS ============ */
.mtsp-gallery-page .videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mtsp-gallery-page .video { display: flex; flex-direction: column; cursor: pointer; }
.mtsp-gallery-page .video-thumb {
	position: relative; aspect-ratio: 16/9;
	border-radius: 8px; overflow: hidden;
	background: var(--mtsp-gray-100);
	border: 1px solid var(--mtsp-gray-200);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.mtsp-gallery-page .video:hover .video-thumb {
	border-color: var(--mtsp-accent);
	box-shadow: 0 12px 24px -12px rgba(15, 36, 64, 0.22);
}
.mtsp-gallery-page .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtsp-gallery-page .video-play {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mtsp-accent);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(8, 22, 40, 0.35);
	transition: transform 0.2s, background 0.2s;
}
.mtsp-gallery-page .video:hover .video-play { transform: scale(1.08); background: var(--mtsp-accent-hover); }
.mtsp-gallery-page .video-play svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; }
.mtsp-gallery-page .video-title { font-size: 14px; font-weight: 600; color: var(--mtsp-navy); line-height: 1.4; margin-top: 12px; }

/* ============ HELP-BANNER ============ */
/* .help-banner / .help-actions / .help-cta / .help-phone → канон у page-head.css (sitewide).
   Gallery-дельти: верхній відступ + одиночний action-стовпець. Кнопка = глобальний
   canon .btn.btn--primary.btn--sm (buttons.css, трек E). p max-width 520→540 (= канон). */
.mtsp-gallery-page .help-banner { margin-top: 60px; }
.mtsp-gallery-page .help-actions { position: relative; }

/* ============ BREADCRUMBS альбому — зведено на спільний канон ============ */
/* Крихти тепер через \mtsp_render_breadcrumbs() + клас .mtsp-info-page на корені;
   стиль — єдине джерело .mtsp-info-page .breadcrumbs (page-head.css). Власні plain-
   стилі прибрано. Кнопку «Назад» прибрано (дубль крихти «Галерея») — стилі .back-btn видалено. */
.mtsp-album-page .album-meta { font-family: var(--mtsp-font-mono); font-size: 13px; color: var(--mtsp-gray-500); margin: 20px 0 0; } /* лічильник під page-head band */

.mtsp-album-page .photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.mtsp-album-page .photo {
	position: relative; aspect-ratio: 1/1;
	border-radius: 8px; overflow: hidden;
	background: var(--mtsp-gray-100);
	border: 1px solid var(--mtsp-gray-200);
	cursor: pointer; transition: border-color 0.18s;
}
.mtsp-album-page .photo:hover { border-color: var(--mtsp-accent); }
.mtsp-album-page .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.mtsp-album-page .photo:hover img { transform: scale(1.04); }
.mtsp-album-page .photo .zoom {
	position: absolute; inset: 0;
	background: rgba(8, 22, 40, 0);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: background 0.2s, opacity 0.2s;
}
.mtsp-album-page .photo:hover .zoom { background: rgba(8, 22, 40, 0.28); opacity: 1; }
.mtsp-album-page .photo .zoom svg { width: 26px; height: 26px; stroke: #fff; }
.mtsp-album-page .album-empty { padding: 40px 0; color: var(--mtsp-gray-500); }

/* ============ LIGHTBOX ============ */
.mtsp-album-page .lightbox {
	display: none;
	position: fixed; inset: 0; z-index: 200;
	background: rgba(8, 22, 40, 0.92);
	align-items: center; justify-content: center;
	padding: 40px;
}
.mtsp-album-page .lightbox.open { display: flex; }
.mtsp-album-page .lb-stage {
	max-width: 1000px; width: 100%;
	background: var(--mtsp-navy-deep);
	border-radius: 10px; overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.mtsp-album-page .lb-img { aspect-ratio: 3/2; background: var(--mtsp-navy-deep); }
.mtsp-album-page .lb-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mtsp-album-page .lb-bar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 20px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--mtsp-font-mono); font-size: 13px;
}
.mtsp-album-page .lb-close {
	position: absolute; top: 24px; right: 28px;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.1); border: none;
	border-radius: 8px; color: #fff; cursor: pointer; font-size: 22px;
	transition: background 0.16s;
}
.mtsp-album-page .lb-close:hover { background: var(--mtsp-accent); }
.mtsp-album-page .lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.1); border: none;
	border-radius: 50%; color: #fff; cursor: pointer;
	transition: background 0.16s;
}
.mtsp-album-page .lb-nav:hover { background: var(--mtsp-accent); }
.mtsp-album-page .lb-nav.prev { left: 28px; }
.mtsp-album-page .lb-nav.next { right: 28px; }
.mtsp-album-page .lb-nav svg { width: 22px; height: 22px; }

/* ============ YOUTUBE MODAL ============ */
.mtsp-yt-modal-overlay {
	display: none;
	position: fixed; inset: 0; z-index: 200;
	background: rgba(8, 22, 40, 0.92);
	align-items: center; justify-content: center;
	padding: 40px;
}
.mtsp-yt-modal-overlay.is-open { display: flex; }
.mtsp-yt-modal {
	position: relative;
	width: 100%; max-width: 960px;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 10px; overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.mtsp-yt-modal iframe { width: 100%; height: 100%; border: 0; display: block; }
.mtsp-yt-modal-close {
	position: absolute; top: -48px; right: 0;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.1); border: none;
	border-radius: 8px; color: #fff; cursor: pointer; font-size: 22px;
	transition: background 0.16s;
}
.mtsp-yt-modal-close:hover { background: var(--mtsp-accent); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
	.mtsp-gallery-page .albums,
	.mtsp-gallery-page .videos { grid-template-columns: repeat(2, 1fr); }
	.mtsp-album-page .photos { grid-template-columns: repeat(3, 1fr); }
	.mtsp-gallery-page .help-banner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
	.mtsp-gallery-page .albums,
	.mtsp-gallery-page .videos { grid-template-columns: 1fr; }
	.mtsp-album-page .photos { grid-template-columns: repeat(2, 1fr); }
	.mtsp-album-page .lb-nav.prev { left: 10px; }
	.mtsp-album-page .lb-nav.next { right: 10px; }
	.mtsp-yt-modal-close { top: 8px; right: 8px; }
}