/* ==========================================================================
   EXAPC Gaming – pagrindinis puslapis
   ========================================================================== */

.home-section { margin-top: var(--s-8); }
@media (max-width: 47.99rem) { .home-section { margin-top: var(--s-7); } }

/* Hero: žaidimų kompiuteriai ---------------------------------------------
   Sritys: head / promo / perks / actions – kairėje, media – dešinėje.
   Telefone: head → promo → actions → media → perks. */
.pc-hero {
	position: relative;
	overflow: clip;
	padding-block: var(--s-6) var(--s-7);
	background:
		radial-gradient(46rem 30rem at 76% 48%, rgb(57 216 117 / 0.10), transparent 65%),
		linear-gradient(180deg, transparent 65%, rgb(23 29 34 / 0.55));
	border-bottom: 1px solid var(--c-line);
}
/* Subtilus techninis tinklelis fone */
.pc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(244 247 245 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(244 247 245 / 0.035) 1px, transparent 1px);
	background-size: 3rem 3rem;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 50%, #000, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 72% 50%, #000, transparent 75%);
	pointer-events: none;
}
.pc-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "promo" "actions" "media" "perks";
	gap: var(--s-5);
}
@media (min-width: 64rem) {
	.pc-hero { padding-block: var(--s-6) var(--s-7); }
	.pc-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto auto 1fr;
		grid-template-areas:
			".       media"
			"head    media"
			"promo   media"
			"perks   media"
			"actions media"
			".       media";
		column-gap: var(--s-7);
		row-gap: var(--s-5);
		min-height: min(36rem, calc(100svh - 12rem));
	}
}

.pc-hero__head { grid-area: head; }
.pc-hero__label {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-4);
	padding: 0.375rem 0.75rem;
	border: 1px solid rgb(57 216 117 / 0.28);
	border-radius: 999px;
	background: rgb(57 216 117 / 0.08);
	color: var(--c-accent);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
}
.pc-hero__dot {
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 3px rgb(57 216 117 / 0.18), 0 0 10px rgb(57 216 117 / 0.8);
}
.pc-hero__title {
	margin: 0 0 var(--s-4);
	font-size: clamp(2rem, 1rem + 2.9vw, 3.5rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.pc-hero__accent {
	color: var(--c-accent);
	text-shadow: 0 0 2rem rgb(57 216 117 / 0.35);
}
.pc-hero__text { max-width: 36rem; margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--c-muted); }

/* Išsimokėjimo akcentas */
.pc-hero__promo {
	grid-area: promo;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	max-width: 30rem;
	padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
	overflow: hidden;
	border: 1px solid rgb(57 216 117 / 0.38);
	border-radius: var(--r-panel);
	background: linear-gradient(100deg, rgb(57 216 117 / 0.16), rgb(57 216 117 / 0.04) 55%, rgb(23 29 34 / 0.6));
	box-shadow: inset 0 1px 0 rgb(244 247 245 / 0.05), 0 18px 40px -24px rgb(57 216 117 / 0.55);
}
/* Lėtas šviesos perbėgimas */
.pc-hero__promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgb(244 247 245 / 0.08) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: pc-sheen 7s ease-in-out 1.5s infinite;
	pointer-events: none;
}
.pc-hero__promo-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--r-control);
	background: var(--c-accent);
	color: var(--c-on-accent);
	box-shadow: 0 0 24px rgb(57 216 117 / 0.45);
}
.pc-hero__promo-icon svg { width: 1.5rem; height: 1.5rem; }
.pc-hero__promo-copy { display: grid; gap: 0.15rem; }
.pc-hero__promo-title {
	font-family: var(--f-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	color: var(--c-text);
}
.pc-hero__promo-text { font-size: var(--fs-sm); color: var(--c-muted); }

/* Privalumai */
.pc-hero__perks {
	grid-area: perks;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pc-hero__perks li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text); }
.pc-hero__perks svg { width: 1.25rem; height: 1.25rem; color: var(--c-accent); flex: none; }

/* Mygtukai */
.pc-hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pc-hero__actions .btn { letter-spacing: 0.04em; }
.pc-hero__cta { gap: var(--s-2); box-shadow: 0 10px 30px -12px rgb(57 216 117 / 0.7); }
.pc-hero__cta svg { transition: transform var(--t-base) ease; }
.pc-hero__cta:hover svg { transform: translateX(3px); }
.pc-hero__secondary { --btn-bg: var(--c-surface); --btn-bd: var(--c-line-strong); }
.pc-hero__secondary:hover { --btn-bd: var(--c-accent); }
@media (max-width: 29.99rem) { .pc-hero__actions .btn { flex: 1 1 100%; } }

/* Kompiuterio nuotrauka */
.pc-hero__media {
	grid-area: media;
	position: relative;
	display: grid;
	place-items: center;
	min-height: 18rem;
	isolation: isolate;
}
.pc-hero__glow {
	position: absolute;
	z-index: -1;
	width: min(88%, 34rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(57 216 117 / 0.30), rgb(57 216 117 / 0.09) 55%, transparent 74%);
	animation: pc-glow 6s ease-in-out infinite;
}
/* „Grindų“ atspindys po kompiuteriu */
.pc-hero__media::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 3%;
	width: 58%;
	height: 7%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(57 216 117 / 0.22), transparent);
	filter: blur(6px);
}
.pc-hero__frame { position: relative; display: block; animation: pc-float 7s ease-in-out infinite; }
.pc-hero__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: clamp(18rem, 62vw, 24rem);
	margin-inline: auto;
	filter: drop-shadow(0 28px 36px rgb(0 0 0 / 0.55));
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pc-hero__media:hover .pc-hero__image { transform: translateY(-4px) scale(1.015); }
@media (min-width: 64rem) {
	.pc-hero__media { min-height: 26rem; }
	.pc-hero__image { max-height: min(32rem, calc(100svh - 14rem)); }
}
/* Nuotrauka su šviesiu fonu (fono šalinimas išjungtas arba nepavyko) */
.pc-hero__media--studio .pc-hero__frame {
	padding: var(--s-5);
	border-radius: var(--r-panel);
	background: var(--c-well);
	box-shadow: 0 0 0 1px var(--c-line), 0 30px 80px -24px rgb(57 216 117 / 0.45);
}
.pc-hero__media--studio .pc-hero__image { mix-blend-mode: multiply; filter: none; max-height: clamp(16rem, 56vw, 30rem); }

.pc-hero__badge {
	position: absolute;
	top: 8%;
	left: 4%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.375rem 0.75rem;
	border: 1px solid rgb(57 216 117 / 0.4);
	border-radius: 999px;
	background: rgb(11 15 18 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-family: var(--f-display);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--c-text);
}
@media (min-width: 64rem) { .pc-hero__badge { top: 12%; left: 8%; } }

.pc-hero__placeholder {
	display: grid;
	place-items: center;
	gap: var(--s-3);
	width: min(100%, 22rem);
	aspect-ratio: 3 / 4;
	padding: var(--s-5);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-panel);
	color: var(--c-muted);
	text-align: center;
	animation: none;
}
.pc-hero__placeholder .cat-icon { width: 45%; }
.pc-hero__placeholder-note { font-size: var(--fs-xs); }

/* Įžanginė animacija – tik transform/opacity, H1 lieka matomas (LCP) */
.pc-hero__head { animation: pc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pc-hero__promo,
.pc-hero__perks,
.pc-hero__actions { animation: pc-fade 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pc-hero__promo { animation-delay: 0.08s; }
.pc-hero__perks { animation-delay: 0.16s; }
.pc-hero__actions { animation-delay: 0.22s; }

@keyframes pc-rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes pc-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pc-glow { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes pc-sheen { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
	.pc-hero__head,
	.pc-hero__promo,
	.pc-hero__perks,
	.pc-hero__actions,
	.pc-hero__frame,
	.pc-hero__glow,
	.pc-hero__promo::after { animation: none; }
	.pc-hero__image,
	.pc-hero__cta svg { transition: none; }
	.pc-hero__media:hover .pc-hero__image { transform: none; }
}

/* Lizdų pasirinkimas: „klavišai“ su apatiniu kraštu ----------------------- */
.socket-picker {
	padding: var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-panel);
}
@media (min-width: 48rem) { .socket-picker { padding: var(--s-6); } }
.socket-picker__head { margin-bottom: var(--s-5); }
.socket-picker__title { margin: 0 0 var(--s-1); font-size: var(--fs-xl); letter-spacing: -0.01em; }
.socket-picker__text { margin: 0; color: var(--c-muted); }
.socket-picker__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.25rem), 1fr));
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.socket {
	display: grid;
	gap: 0.1rem;
	height: 100%;
	padding: var(--s-3) var(--s-3) calc(var(--s-3) - 2px);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-bottom: 3px solid var(--c-line-strong);
	border-radius: var(--r-control);
	text-decoration: none;
	color: var(--c-text);
	transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.socket:hover { color: var(--c-text); border-color: var(--c-line-strong); border-bottom-color: var(--c-accent); }
.socket:active { transform: translateY(1px); }
.socket__name { font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.socket__count { font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* Privalumai ------------------------------------------------------------- */
.benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-panel);
	overflow: hidden;
}
.benefit { padding: var(--s-5); border-top: 1px solid var(--c-line); margin-top: -1px; }
@media (min-width: 48rem) {
	.benefit { border-left: 1px solid var(--c-line); margin-left: -1px; }
}
.benefit__icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--s-3);
	border-radius: var(--r-control);
	background: var(--c-surface-2);
	color: var(--c-text);
}
.benefit__icon svg { width: 1.375rem; height: 1.375rem; }
.benefit__title { margin-bottom: var(--s-2); font-size: var(--fs-base); letter-spacing: 0; }
.benefit__text { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Prekių blokai – tiksliai 4 / 3 / 2 stulpeliai (kiekiai 4, 8, 12 dalijasi) */
@media (min-width: 30.01rem) { .product-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .product-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .product-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); } }