/* Ролик VK на страницах сайта — шорткод [gb_video] (gb-video.php).
   Плеер встаёт в три разных обёртки: колонку UX Builder (.gb-mc-editable__gallery), старый слой
   .gb-geo со встроенным <style> и новые страницы (.gbl-txt), поэтому всё ограничено .gb-video,
   а то, что Flatsome задаёт голому <button> (заглавные, фон, отступы, min-height, тень), сброшено явно.
   Токены — DESIGN.md: медь для фокуса, глубокая медь для действия, плоско, скругление 8px. */

.gb-video {
	--gb-video-muted: #5f625e;
	--gb-video-copper: #b18b66;
	--gb-video-copper-deep: #765033;
	--gb-video-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Тройной класс (0,3,0) перебивает правила фигур из встроенных <style>, которые стоят в документе
   ниже этого файла: «.gb-geo figure { margin; border-radius: 12px; overflow: hidden }» и шаблон
   .gbl (/study/lempwork/): «.gbl figure { фон var(--table); тень-рамка }», «.gbl-solo figure
   { aspect-ratio: 3/4 }», «.gbl-pair figure:first-child { width: 250px }» (0,2,1).
   Без сброса чёрный плеер сидел в бежевой карточке 3:4 с пустотой под роликом. */
.gb-video.gb-video.gb-video {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
	box-shadow: none;
	aspect-ratio: auto;
}

/* Вертикальный ролик ограничен и шириной, и высотой окна: 45vh × 16/9 = 80vh — на ноутбуке
   1366×768 и телефоне 375×667 кадр с кнопкой и панелью VK помещается в экран целиком.
   360px — запасное значение для браузеров без min(), svh — для мобильных с плавающей панелью. */
.gb-video.gb-video.gb-video--9x16 {
	max-width: 360px;
	max-width: min(360px, 45vh);
	max-width: min(360px, 45svh);
	margin-left: auto;
	margin-right: auto;
}

.gb-video .gb-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #111 center / cover no-repeat;
}

.gb-video--9x16 .gb-video__frame {
	aspect-ratio: 9 / 16;
}

/* Без aspect-ratio (Safari до 15, Chrome до 88) рамка схлопывалась в 0: всё внутри неё
   спозиционировано абсолютно. Высоту даёт отступ в процентах от ширины — верно и для 9x16
   с его max-width. Правило 9x16 той же специфичности и ниже — оно и побеждает. */
@supports not (aspect-ratio: 1 / 1) {
	.gb-video .gb-video__frame {
		height: 0;
		padding-top: 56.25%;
	}

	.gb-video--9x16 .gb-video__frame {
		padding-top: 177.78%;
	}
}

.gb-video .gb-video__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
}

/* ── Фасад: обложка-кнопка ─────────────────────────────────── */

.gb-video .gb-video__poster {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: inherit;
	letter-spacing: 0;
	text-align: left;
	text-shadow: none;
	text-transform: none;
	opacity: 1;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.gb-video .gb-video__poster:hover,
.gb-video .gb-video__poster:focus {
	background: transparent;
	box-shadow: none;
	color: #fff;
}

/* Кольцо фокуса — псевдоэлементом поверх обложки: outline самой кнопки закрывает картинка. */
.gb-video .gb-video__poster::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 8px;
	pointer-events: none;
}

.gb-video .gb-video__poster:focus-visible {
	outline: none;
}

.gb-video .gb-video__poster:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--gb-video-copper), inset 0 0 0 5px #fff;
}

/* .gbl img и .gb-geo figure img задают свою высоту и кадрирование (рамку фигуры .gbl сбрасывает
   правило .gb-video.gb-video.gb-video выше). */
.gb-video .gb-video__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

/* Кнопка слева внизу: надписи на обложках роликов стоят сверху или справа. */
.gb-video .gb-video__play {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 4px 18px 4px 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: rgba(37, 37, 37, 0.86);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.2s var(--gb-video-ease), transform 0.2s var(--gb-video-ease);
}

.gb-video .gb-video__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* Отступ полем, а не gap: flex-gap нет в Safari до 14.1, значок слипался с надписью. */
	margin-right: 10px;
	border-radius: 50%;
	background: var(--gb-video-copper-deep);
	color: #fff;
	transition: background-color 0.2s var(--gb-video-ease), color 0.2s var(--gb-video-ease);
}

.gb-video .gb-video__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.gb-video .gb-video__poster:hover .gb-video__play,
.gb-video .gb-video__poster:focus .gb-video__play {
	background: var(--gb-video-copper-deep);
}

.gb-video .gb-video__poster:hover .gb-video__icon,
.gb-video .gb-video__poster:focus .gb-video__icon {
	background: #fff;
	color: var(--gb-video-copper-deep);
}

.gb-video .gb-video__poster:active .gb-video__play {
	transform: scale(0.97);
}

/* ── Подпись ──────────────────────────────────────────────── */

.gb-video .gb-video__caption {
	margin: 10px 0 0;
	padding: 0;
	color: var(--gb-video-muted);
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
	text-align: left;
}

.gb-video .gb-nobr {
	white-space: nowrap;
}

/* Колонка «Галерея работ» шаблона мастер-класса: плитки [ux_gallery] там квадратные
   (gb-masterclass-editable.css), поэтому плеер над ними тоже без скругления. */
.gb-mc-editable__gallery .gb-video .gb-video__frame,
.gb-mc-editable__gallery .gb-video .gb-video__poster,
.gb-mc-editable__gallery .gb-video .gb-video__poster::after {
	border-radius: 0;
}

@media (max-width: 549px) {
	.gb-video .gb-video__play {
		left: 12px;
		bottom: 12px;
		min-height: 44px;
		padding-right: 16px;
		font-size: 15px;
	}

	.gb-video .gb-video__icon {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	.gb-video .gb-video__caption {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-video .gb-video__play,
	.gb-video .gb-video__icon {
		transition: none;
	}

	.gb-video .gb-video__poster:active .gb-video__play {
		transform: none;
	}
}