/* ==========================================================================
   VIDEÁ — jedno hlavné + mriežka
   ========================================================================== */

.sq-videos__layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sq-space-32);
	align-items: start;
}

.sq-videos__side {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sq-space-24);
}

.sq-video {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-12);
}

.sq-video__title {
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-medium);
	line-height: 1.35;
}

.sq-video--lead .sq-video__title {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-semibold);
	letter-spacing: var(--sq-track-card);
}

/* ---- Prehrávacia značka ------------------------------------------------- */

.sq-video__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sq-video__play svg {
	width: 44px;
	height: 44px;
	color: var(--sq-text);
	transition:
		color var(--sq-duration) var(--sq-ease),
		transform var(--sq-duration) var(--sq-ease);
}

.sq-video:hover .sq-video__play svg {
	color: var(--sq-accent);
	transform: scale(1.08);
}

.sq-video--lead .sq-video__play svg {
	width: 64px;
	height: 64px;
}

.sq-video__duration {
	position: absolute;
	right: var(--sq-space-8);
	bottom: var(--sq-space-8);
	z-index: 2;
	padding: 2px var(--sq-space-8);
	background: rgba(8, 9, 11, 0.85);
	border-radius: var(--sq-radius);
	font-family: var(--sq-font-display);
	font-size: 11px;
	font-weight: var(--sq-weight-bold);
	color: var(--sq-text);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
	.sq-videos__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.sq-videos__side {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sq-space-16);
	}
}

/* ==========================================================================
   ARCHÍV VIDEÍ
   ========================================================================== */

.sq-videos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sq-space-32) var(--sq-space-24);
}

/*
 * Prvé video zaberie dva stĺpce a dva riadky. Bez druhého riadku by vedľa
 * neho ostala prázdna polovica mriežky — takto sa doň vmestia dve bežné
 * karty a riadok je celý.
 */
.sq-videos__grid .sq-video--lead {
	grid-column: span 2;
	grid-row: span 2;
}

/*
 * Obal náhľadu. Bez `position: relative` by ikona prehrávania aj dĺžka
 * odskočili k okraju stránky namiesto k obrázku.
 */
.sq-video__media {
	display: block;
	position: relative;
	min-width: 0;
}

.sq-video__duration {
	position: absolute;
	right: var(--sq-space-8);
	bottom: var(--sq-space-8);
	z-index: 2;
	padding: 2px var(--sq-space-8);
	border-radius: var(--sq-radius-sm);
	background: rgba(8, 9, 11, 0.82);
	font-size: var(--sq-fs-micro);
	font-variant-numeric: tabular-nums;
	color: var(--sq-text);
}

/* ==========================================================================
   DETAIL VIDEA
   ========================================================================== */

.sq-videohead {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-12);
	max-width: var(--sq-container-text);
	padding-block: var(--sq-space-48) var(--sq-space-24);
}

.sq-videohead__title {
	font-size: var(--sq-fs-title);
	line-height: 1.08;
	letter-spacing: var(--sq-track-title);
}

.sq-videohead__games {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8);
	padding-top: var(--sq-space-24);
}

/* ---- Prehrávač ----------------------------------------------------------- */

.sq-player {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
}

.sq-player__poster {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sq-player__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sq-player__play svg {
	width: 72px;
	height: 72px;
	color: var(--sq-text);
	transition:
		color var(--sq-duration) var(--sq-ease),
		transform var(--sq-duration) var(--sq-ease);
}

.sq-player__poster:hover .sq-player__play svg,
.sq-player__poster:focus-visible .sq-player__play svg {
	color: var(--sq-accent);
	transform: scale(1.06);
}

.sq-player__note {
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
}

/* Prehrávač po kliknutí nahradí náhľad — pomer strán ostáva rovnaký. */
.sq-player__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--sq-radius);
	background: var(--sq-elevated);
}

@media (max-width: 1023px) {
	.sq-videos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sq-videos__grid {
		grid-template-columns: 1fr;
	}

	.sq-videos__grid .sq-video--lead {
		grid-column: auto;
	}

	.sq-videohead {
		padding-top: var(--sq-space-32);
	}

	.sq-player__play svg {
		width: 52px;
		height: 52px;
	}
}