/* ==========================================================================
   KALENDÁR VYDANÍ

   Východiskové zobrazenie je zoznam, nie mesačná mriežka. Hry nevychádzajú
   rovnomerne — mesačný kalendár by bol z väčšiny prázdny.
   ========================================================================== */

.sq-calendar__nav {
	position: sticky;
	top: var(--sq-header-height);
	z-index: 95;
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
	padding-block: var(--sq-space-12);
	background: var(--sq-bg);
	border-block: 1px solid var(--sq-border);
}

.sq-calendar__month {
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
}

.sq-calendar__month-name {
	min-width: 180px;
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-card);
	text-transform: uppercase;
	text-align: center;
}

.sq-calendar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	color: var(--sq-text-secondary);
	transition:
		border-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.sq-calendar__arrow:hover {
	border-color: var(--sq-accent);
	color: var(--sq-accent);
}

.sq-calendar__arrow svg {
	width: 14px;
	height: 14px;
}

.sq-calendar__arrow--prev svg {
	transform: rotate(180deg);
}

.sq-calendar__tools {
	display: flex;
	align-items: center;
	gap: var(--sq-space-8);
	margin-left: auto;
}

/* ---- Prepínač zobrazenia ------------------------------------------------ */

.sq-switch {
	display: inline-flex;
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	overflow: hidden;
}

.sq-switch button {
	height: 34px;
	padding-inline: var(--sq-space-12);
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text-secondary);
	transition:
		background-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.sq-switch button[aria-pressed="true"] {
	background: var(--sq-accent-soft);
	color: var(--sq-accent);
}

/* ---- Skupiny ------------------------------------------------------------ */

.sq-calendar__group {
	padding-top: var(--sq-space-48);
}

.sq-calendar__group-title:not(:first-child) {
	margin-top: var(--sq-space-48);
}

.sq-calendar__group-title {
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
	margin-bottom: var(--sq-space-8);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-accent);
}

.sq-calendar__group-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sq-border);
}

.sq-calendar__group--past .sq-calendar__group-title:not(:first-child) {
	margin-top: var(--sq-space-48);
}

.sq-calendar__group-title {
	color: var(--sq-text-tertiary);
}

/* ---- Deň ---------------------------------------------------------------- */

/*
 * Dátum je lepivý v ľavom stĺpci — pri dlhom zozname tak vždy vidno,
 * ku ktorému dňu patrí riadok, na ktorý sa práve pozeráš.
 */
.sq-day {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--sq-space-32);
	padding-block: var(--sq-space-24);
	border-top: 1px solid var(--sq-border);
}

.sq-day__date {
	position: sticky;
	top: calc(var(--sq-header-height) + 72px);
	align-self: start;
}

.sq-day__number {
	display: block;
	font-family: var(--sq-font-display);
	font-size: 32px;
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sq-day__month {
	display: block;
	margin-top: var(--sq-space-4);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-text-tertiary);
}

.sq-day__list {
	display: flex;
	flex-direction: column;
}

.sq-day__item {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	align-items: center;
	gap: var(--sq-space-16);
	padding-block: var(--sq-space-12);
	transition: background-color var(--sq-duration) var(--sq-ease);
}

.sq-day__item + .sq-day__item {
	border-top: 1px solid var(--sq-border);
}

.sq-day__item:hover {
	background: var(--sq-surface);
	box-shadow: -12px 0 0 var(--sq-surface), 12px 0 0 var(--sq-surface);
}

.sq-day__cover {
	width: 48px;
	aspect-ratio: 3 / 4;
}

.sq-day__title {
	display: block;
	font-size: var(--sq-fs-base);
	font-weight: var(--sq-weight-medium);
	letter-spacing: var(--sq-track-card);
}

.sq-day__platforms {
	display: flex;
	gap: var(--sq-space-4);
}

.sq-day__note {
	display: block;
	margin-top: 2px;
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
}

@media (max-width: 767px) {
	/* Lišta sa na mobile posúva vodorovne — inak by roztiahla stránku. */
	.sq-calendar__nav {
		gap: var(--sq-space-8);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sq-calendar__nav::-webkit-scrollbar {
		display: none;
	}

	.sq-calendar__nav > * {
		flex-shrink: 0;
	}

	.sq-calendar__month-name {
		min-width: 0;
		font-size: var(--sq-fs-base);
		white-space: nowrap;
	}

	.sq-calendar__tools .sq-switch {
		display: none;
	}

	.sq-day {
		grid-template-columns: 1fr;
		gap: var(--sq-space-12);
		padding-block: var(--sq-space-16);
	}

	.sq-day__date {
		position: static;
		display: flex;
		align-items: baseline;
		gap: var(--sq-space-8);
	}

	.sq-day__number {
		font-size: var(--sq-fs-card);
	}

	.sq-day__month {
		margin-top: 0;
	}

	.sq-day__item {
		grid-template-columns: 40px 1fr auto;
		gap: var(--sq-space-12);
	}

	.sq-day__item .sq-release__platforms,
	.sq-day__platforms {
		display: none;
	}

	.sq-day__cover {
		width: 40px;
	}

	.sq-day__item:hover {
		background: transparent;
		box-shadow: none;
	}
}