/* ==========================================================================
   ČASTÉ OTÁZKY — stránka  ·  Figma node 1:1141

   Miery z Figmy:
     nadpis     Inter Bold 66 / 102.4
     témy       Inter 25 / 74, aktívna tučná; stĺpec 320
     akordeón   1040, riadok 68.75, linka pod otázkou
     fotka      320 × 371 s nápisom „faq"
     formulár   805, nadpis Inter Bold 30
   ========================================================================== */

.pc-faq-page {
	padding-block: var(--pc-space-48) var(--pc-space-section);
}

.pc-faq-page__title {
	/* Figma: nadpis 166 → 269, obsah začína na 341 */
	margin-bottom: 72px;
	font-size: 66px;
	font-weight: var(--pc-weight-bold);
	line-height: 102.4px;
}

.pc-faq-page__grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 40px;
	align-items: start;
}

/* ---- Témy -------------------------------------------------------------- */

/*
 * Témy stoja v modrom paneli — rovnako ako filter v obchode. Bez neho
 * sa ľavý stĺpec zlieval s otázkami vpravo.
 */
.pc-faq-page__topics {
	padding: var(--pc-space-24);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-blue);
	color: var(--pc-white);
}

.pc-faq-page__topics ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-faq-page__topic {
	display: block;
	font-size: var(--pc-fs-lead);
	line-height: 50px;
	color: var(--pc-white);
	transition: opacity var(--pc-duration) var(--pc-ease);
}

.pc-faq-page__topic:hover,
.pc-faq-page__topic:focus-visible {
	color: var(--pc-white);
	opacity: 0.75;
	text-decoration: underline;
}

/* Vo Figme je vybraná téma tučná, ostatné bežné. */
.pc-faq-page__topic.is-active {
	font-weight: var(--pc-weight-bold);
}

.pc-faq-page__empty {
	padding-block: var(--pc-space-32);
	font-size: var(--pc-fs-lead);
}

/*
 * Pri „Všetkých otázkach" sú otázky rozdelené podľa kategórií — tridsať
 * otázok za sebou sa nedá prehľadať.
 */
.pc-faq-page__group + .pc-faq-page__group {
	margin-top: var(--pc-space-48);
}

.pc-faq-page__group-title {
	margin: 0 0 var(--pc-space-16);
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
	color: var(--pc-blue);
}

/* Kým beží výmena otázok, zoznam sa stlmí — inak to vyzerá zamrznuto. */
.pc-faq-page__list {
	transition: opacity var(--pc-duration) var(--pc-ease);
}

.pc-faq-page__list.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* Akordeón zdieľa štýly so sekciou na homepage (assets/css/blocks/faq.css),
   preto sa CSS oboch načítava spolu — pozri inc/assets.php. */

/* ---- Spodná časť: fotka + formulár -------------------------------------
   Blok je zdieľaný komponent (`pc_contact_cta()`), jeho vzhľad je
   v components.css. Tu je len odstup od akordeónu podľa Figmy —
   akordeón končí na 1031, fotka začína na 1160.                          */

.pc-faq-page .pc-faq-page__bottom {
	margin-top: 129px;
}

/* ==========================================================================
   RESPONZIVITA

   Pod 900px sa témy presunú nad akordeón — pri 25px riadkovanom na 74px
   by v užšom stĺpci zabrali viac miesta než samotné otázky.
   ========================================================================== */

@media (max-width: 900px) {
	.pc-faq-page__title {
		margin-bottom: var(--pc-space-48);
		font-size: clamp(32px, 5vw, 66px);
		line-height: 1.25;
	}

	.pc-faq-page__grid {
		grid-template-columns: 1fr;
		gap: var(--pc-space-32);
	}

	.pc-faq-page .pc-faq-page__bottom {
		margin-top: var(--pc-space-64);
	}

	/*
	 * Témy ako čipy v jednom riadku, ktorý sa dá posunúť prstom.
	 * Zalamované 25px odkazy zabrali pol obrazovky skôr, než sa
	 * návštevník vôbec dostal k otázkam.
	 */
	.pc-faq-page__topics {
		margin-inline: calc(-1 * var(--pc-gutter));
		padding-inline: var(--pc-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pc-faq-page__topics::-webkit-scrollbar {
		display: none;
	}

	.pc-faq-page__topics ul {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--pc-space-8);
		width: max-content;
	}

	.pc-faq-page__topic {
		padding: 8px 16px;
		border: 1px solid var(--pc-border);
		border-radius: 999px;
		font-size: var(--pc-fs-small);
		line-height: 1.3;
		white-space: nowrap;
	}

	.pc-faq-page__topic.is-active {
		border-color: var(--pc-blue);
		background: var(--pc-sky);
		color: var(--pc-blue);
	}

	.pc-faq-page__group-title {
		font-size: var(--pc-fs-base);
	}
}