/* ==========================================================================
   ZDIEĽANÉ KOMPONENTY

   Všetko, čo používa viac než jedna sekcia. Pri prenose do témy ide markup
   do inc/components.php a tento súbor ostáva ako assets/css/components.css.
   ========================================================================== */

/* ==========================================================================
   MÉDIÁ

   V prototype nie sú fotky — plochy `.sq-media` sú zástupné kompozície.
   V ostrej prevádzke ich nahradí <img> s rovnakým pomerom strán;
   trieda `.sq-media` (radius, overflow, hover) ostáva.
   ========================================================================== */

/*
 * `display: block` je nutné. Obal býva <span> alebo <a> a na inline prvku
 * sa `aspect-ratio` neuplatní — plocha by mala nulovú výšku a obrázok by
 * z nej vypadol.
 */
.sq-media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--sq-radius);
	background: var(--sq-elevated);
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}

/*
 * Obrázok vypĺňa obal a je orezaný. Obal drží pomer strán, takže výška
 * je známa ešte pred načítaním obrázka a stránka sa neposunie.
 */
.sq-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sq-duration-slow) var(--sq-ease);
}

.sq-item:hover .sq-media__img,
.sq-media-hover:hover .sq-media__img {
	transform: scale(1.03);
}

/*
 * Obal odkazu okolo média. Layout (pozícia v mriežke, šírka, poradie)
 * drží VŽDY obal — `.sq-media` vnútri nesie len vzhľad a pomer strán.
 * Bez tohto rozdelenia by sa mriežkové pravidlá aplikovali na vnorený
 * prvok a obal by sa postavil na jeho miesto.
 */
.sq-feed__media,
.sq-poster__media,
.sq-hero__media,
.sq-hero__story-media,
.sq-release__cover,
.sq-review-card__media,
.sq-gamehero__cover {
	display: block;
	position: relative;
	min-width: 0;
}

.sq-media__art {
	position: absolute;
	inset: 0;
	background-image: var(--art);
	background-size: cover;
	background-position: center;
	transition: transform var(--sq-duration-slow) var(--sq-ease);
}

/* Jemná zrnitosť — bez nej pôsobia zástupné plochy ako ploché prechody. */
.sq-media__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.022) 0 2px,
		transparent 2px 5px
	);
}

/* Jemné stmavenie zdola — text nad obrázkom musí ostať čitateľný. */
.sq-media--scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(8, 9, 11, 0.92) 0%, rgba(8, 9, 11, 0.35) 45%, transparent 75%);
}

.sq-media--square { aspect-ratio: 1 / 1; }
.sq-media--cover { aspect-ratio: 3 / 4; }
.sq-media--wide { aspect-ratio: 21 / 9; }
.sq-media--portrait { aspect-ratio: 4 / 5; }

/* Zástupné kompozície — osem variantov, aby sa feed opticky neopakoval. */
.sq-art-1 { --art: radial-gradient(120% 100% at 20% 20%, #2b3a4d 0%, #10151c 55%, #080a0d 100%); }
.sq-art-2 { --art: radial-gradient(100% 120% at 80% 10%, #4a2f2a 0%, #1a1214 60%, #08090b 100%); }
.sq-art-3 { --art: linear-gradient(140deg, #1d2a20 0%, #2f4032 35%, #0d1210 100%); }
.sq-art-4 { --art: radial-gradient(90% 110% at 30% 80%, #3a2b4d 0%, #171320 60%, #08090b 100%); }
.sq-art-5 { --art: linear-gradient(115deg, #14202b 0%, #34505f 45%, #0a1015 100%); }
.sq-art-6 { --art: radial-gradient(110% 90% at 70% 30%, #4d3f22 0%, #1d1811 60%, #08090b 100%); }
.sq-art-7 { --art: linear-gradient(160deg, #262a33 0%, #3d434f 40%, #0e1013 100%); }
.sq-art-8 { --art: radial-gradient(100% 100% at 50% 0%, #23384a 0%, #131b24 55%, #08090b 100%); }

/* ==========================================================================
   ŠTÍTKY A CHIPY
   ========================================================================== */

.sq-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--sq-space-4);
	height: 24px;
	padding-inline: var(--sq-space-8);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
	font-family: var(--sq-font-display);
	font-size: 11px;
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sq-text-secondary);
}

.sq-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sq-space-8);
	height: 30px;
	padding-inline: var(--sq-space-12);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius-pill);
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text-secondary);
	white-space: nowrap;
	transition:
		border-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease),
		background-color var(--sq-duration) var(--sq-ease);
}

.sq-chip:hover {
	border-color: var(--sq-border-strong);
	color: var(--sq-text);
}

/* Sledované = fialová. Redakčný obsah = limetková. Farba nesie význam. */
.sq-chip--followed {
	border-color: rgba(139, 92, 255, 0.4);
	background: var(--sq-personal-soft);
	color: #c9b6ff;
}

.sq-chip--add {
	color: var(--sq-text-tertiary);
}

/* ---- Sledovať ----------------------------------------------------------- */

.sq-follow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sq-space-8);
	height: 32px;
	padding-inline: var(--sq-space-12);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sq-text-secondary);
	transition: all var(--sq-duration) var(--sq-ease);
}

.sq-follow:hover {
	border-color: var(--sq-personal);
	color: var(--sq-text);
}

.sq-follow__icon {
	width: 14px;
	height: 14px;
	transition: transform var(--sq-duration) var(--sq-ease);
}

.sq-follow[aria-pressed="true"] {
	border-color: rgba(139, 92, 255, 0.5);
	background: var(--sq-personal-soft);
	color: #c9b6ff;
}

.sq-follow[aria-pressed="true"] .sq-follow__icon {
	transform: scale(1.15);
	fill: currentColor;
}

.sq-follow--icon {
	width: 32px;
	padding-inline: 0;
	border-color: transparent;
	color: var(--sq-text-tertiary);
}

.sq-follow--icon:hover {
	border-color: var(--sq-border-strong);
}

/* ==========================================================================
   NÁZOV POLOŽKY

   Podčiarknutie v akcentovej farbe je opakujúca sa signatúra celého webu.
   ========================================================================== */

/*
 * Podčiarknutie ide cez text-decoration, nie cez gradient na pozadí.
 * Gradient sa pri viacriadkovom titulku vykreslí len raz a prekryje
 * dotiahnutia písmen; text-decoration sa kreslí pod každým riadkom
 * a offset ho drží pod dotiahnutiami.
 */
.sq-title-link {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--sq-duration) var(--sq-ease);
}

.sq-item:hover .sq-title-link,
.sq-title-link:hover {
	text-decoration-color: var(--sq-accent);
}

.sq-item:hover .sq-media__art,
.sq-media-hover:hover .sq-media__art {
	transform: scale(1.03);
}

/* ==========================================================================
   RIADOK FEEDU (C3)

   Najpoužívanejší komponent webu — novinky, magazín, novinky o hre.
   Bez pozadia a bez rámčeka; položky oddeľuje 1px linka.
   ========================================================================== */

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

.sq-feed__item {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--sq-space-24);
	align-items: start;
	padding-block: var(--sq-space-24);
	border-bottom: 1px solid var(--sq-border);
	transition: background-color var(--sq-duration) var(--sq-ease);
}

/*
 * Zvýraznenie pri prejdení myšou ide o kúsok za okraj kontajnera, aby
 * riadok nepôsobil ako karta zaseknutá v mriežke.
 */
.sq-feed__item:hover {
	background: var(--sq-surface);
	box-shadow: -12px 0 0 var(--sq-surface), 12px 0 0 var(--sq-surface);
}

.sq-feed__body {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
	min-width: 0;
}

.sq-feed__title {
	font-size: var(--sq-fs-feed);
	font-weight: var(--sq-weight-medium);
	letter-spacing: var(--sq-track-card);
	line-height: 1.3;
}

@media (max-width: 767px) {
	/*
	 * Na mobile ide obrázok doprava a je malý. Dôvod: oko skenuje ľavú
	 * hranu — čas a titulok musia začínať na rovnakej osi bez prerušenia.
	 */
	.sq-feed__item {
		grid-template-columns: 1fr 88px;
		gap: var(--sq-space-16);
		padding-block: var(--sq-space-16);
	}

	.sq-feed__media {
		order: 2;
	}

	.sq-feed__media .sq-media {
		aspect-ratio: 1 / 1;
	}

	.sq-feed__body {
		order: 1;
	}

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

/* ==========================================================================
   VODOROVNÝ SCROLL

   Na mobile sa časť sekcií mení na scroll-x. Šetrí to výšku stránky bez
   toho, aby sa obsah skryl pod „zobraziť viac".
   ========================================================================== */

.sq-scroller {
	display: grid;
	gap: var(--sq-space-24);
}

@media (max-width: 767px) {
	.sq-scroller {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sq-gutter);
		margin-inline: calc(-1 * var(--sq-gutter));
		padding-inline: var(--sq-gutter);
		scrollbar-width: none;
	}

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

	.sq-scroller > * {
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.sq-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sq-space-12);
}

.sq-logo__mark {
	width: 28px;
	height: 28px;
	color: var(--sq-accent);
	flex-shrink: 0;
}

/*
 * Wordmark je obrázok, nie sadzba. Je nakreslený vo vlastnom písme, ktoré
 * sa žiadnym dostupným fontom nenahradí — akákoľvek sadzba by bola iné logo.
 */
.sq-logo__type {
	width: auto;
	height: 17px;
}

/* ==========================================================================
   OBAL HRY (C4)

   Jediná karta v systéme, ktorá stojí na obrázku. Používa ju archív hier,
   súvisiace hry aj kalendár.
   ========================================================================== */

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

.sq-poster__media {
	aspect-ratio: 3 / 4;
	border: 1px solid var(--sq-border);
	transition: border-color var(--sq-duration) var(--sq-ease);
}

.sq-poster:hover .sq-poster__media {
	border-color: rgba(204, 255, 51, 0.4);
}

.sq-poster__title {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-semibold);
	line-height: 1.25;
	letter-spacing: var(--sq-track-card);
}

.sq-poster__meta {
	display: flex;
	align-items: center;
	gap: var(--sq-space-8);
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* Sledovanie sa v mriežke ukáže až pri prejdení myšou — inak by šesť
   riadkov obalov pôsobilo ako ovládací panel, nie ako katalóg. */
.sq-poster__follow {
	position: absolute;
	top: var(--sq-space-8);
	right: var(--sq-space-8);
	z-index: 2;
	opacity: 0;
	background: rgba(8, 9, 11, 0.7);
	border-color: var(--sq-border-strong);
	transition: opacity var(--sq-duration) var(--sq-ease);
}

.sq-poster:hover .sq-poster__follow,
.sq-poster__follow:focus-visible,
.sq-poster__follow[aria-pressed="true"] {
	opacity: 1;
}

/* ==========================================================================
   DROBČEKY
   ========================================================================== */

.sq-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--sq-space-8);
	padding-top: var(--sq-space-24);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
}

.sq-breadcrumb a:hover {
	color: var(--sq-text-secondary);
}

.sq-breadcrumb__sep {
	color: var(--sq-accent-dim);
}

/* ==========================================================================
   VNÚTROSTRÁNKOVÁ NAVIGÁCIA

   Detail hry aj recenzie sú dlhé. Bez tejto lišty by sa v nich nedalo
   pohybovať inak než rolovaním.
   ========================================================================== */

.sq-pagenav {
	position: sticky;
	top: var(--sq-header-height);
	z-index: 95;
	background: var(--sq-bg);
	border-bottom: 1px solid var(--sq-border);
}

.sq-pagenav__inner {
	display: flex;
	align-items: center;
	gap: var(--sq-space-24);
	height: 48px;
	overflow-x: auto;
	scrollbar-width: none;
}

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

.sq-pagenav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
	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;
	white-space: nowrap;
	color: var(--sq-text-tertiary);
	transition: color var(--sq-duration) var(--sq-ease);
}

.sq-pagenav__link:hover,
.sq-pagenav__link[aria-current="true"] {
	color: var(--sq-accent);
}

.sq-pagenav__link[aria-current="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--sq-accent);
}

.sq-pagenav__follow {
	margin-left: auto;
	flex-shrink: 0;
}

/* ==========================================================================
   SÚVISIACE (C2)
   ========================================================================== */

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

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

.sq-related__title {
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--sq-track-card);
}

@media (max-width: 767px) {
	.sq-related {
		grid-template-columns: 1fr;
		gap: var(--sq-space-24);
	}
}

/* ==========================================================================
   VÝZVA NA SLEDOVANIE

   Objaví sa na konci každého článku, recenzie aj detailu hry. Je to jediné
   miesto, kde personalizácia oslovuje čitateľa priamo.
   ========================================================================== */

.sq-followcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-24);
	padding: var(--sq-space-24);
	border: 1px solid rgba(139, 92, 255, 0.3);
	border-radius: var(--sq-radius);
	background: var(--sq-personal-soft);
}

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

.sq-followcta__note {
	margin-top: var(--sq-space-4);
	font-family: var(--sq-font);
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-regular);
	letter-spacing: 0;
	color: var(--sq-text-secondary);
}

.sq-followcta .sq-follow {
	height: 40px;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.sq-followcta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   DISKUSIA
   ========================================================================== */

.sq-comments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-16);
	padding-bottom: var(--sq-space-16);
	border-bottom: 1px solid var(--sq-border);
}

.sq-comments__title {
	font-size: var(--sq-fs-heading);
	letter-spacing: var(--sq-track-heading);
	text-transform: uppercase;
}

.sq-comment {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--sq-space-16);
	padding-block: var(--sq-space-24);
	border-bottom: 1px solid var(--sq-border);
}

.sq-comment__author {
	display: flex;
	align-items: baseline;
	gap: var(--sq-space-12);
	margin-bottom: var(--sq-space-8);
	font-size: var(--sq-fs-ui);
	font-weight: var(--sq-weight-semibold);
}

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

.sq-comment__text {
	color: var(--sq-text-secondary);
	line-height: 1.6;
}

/* ==========================================================================
   PANEL A INFORMÁCIE O HRE

   Používa ich recenzia aj detail hry, preto sú tu a nie v jednej sekcii.
   ========================================================================== */

.sq-panel {
	padding: var(--sq-space-24);
	border: 1px solid var(--sq-border);
	border-radius: var(--sq-radius);
}

.sq-panel__title {
	margin-bottom: var(--sq-space-16);
	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-gameinfo {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
	font-size: var(--sq-fs-ui);
}

.sq-gameinfo__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--sq-space-16);
}

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