/* ==========================================================================
   page-faq — FAQ page (/faq/).

   Mobile-first: category tabs are a horizontally scrollable pill row (same
   visual language as .aktualnosc-filter__pill / cennik filter controls,
   --radius-btn), questions below as native <details> accordions on gray
   surface cards. At ≥920px the layout becomes a 2-column grid: tabs turn
   into stacked tiles in a fixed left column (active = brand green), the
   selected category's questions on the right. Mint CTA plate in flow.
   ========================================================================== */

.faq-page__header {
	max-width: 720px;
}

.faq-page__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-sm);
}

.faq-page__lead {
	font-size: var(--fs-base);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Layout — block on mobile, 2-col grid on desktop.
   -------------------------------------------------------------------------- */

.faq-layout {
	margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Category tabs — mobile: horizontal scroll pills.
   -------------------------------------------------------------------------- */

.faq-tabs {
	display: flex;
	gap: var(--space-xs);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.faq-tabs::-webkit-scrollbar {
	display: none;
}

.faq-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	min-height: 40px;
	background-color: var(--color-surface);
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	color: var(--color-text);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: var(--fw-medium);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.faq-tab:hover {
	background-color: var(--color-brand-soft);
	color: var(--color-brand);
}

.faq-tab.is-active {
	background-color: var(--color-brand);
	color: var(--color-text-on-brand);
}

.faq-tab.is-active:hover {
	background-color: var(--color-brand-hover);
	color: var(--color-text-on-brand);
}

.faq-tab:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Question counts hide on the compact mobile pills. */
.faq-tab__count {
	display: none;
}

/* --------------------------------------------------------------------------
   Panels + accordion items.
   -------------------------------------------------------------------------- */

.faq-content {
	margin-top: var(--space-lg);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.faq-item {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__summary:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--radius-lg);
}

.faq-item__q {
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	line-height: var(--lh-snug, 1.35);
	margin: 0;
}

.faq-item__chevron {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--color-text);
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__chevron {
	transform: rotate(180deg);
}

.faq-item__a {
	padding: 0 20px 18px;
	color: var(--color-text-body);
	font-size: 0.95rem;
	line-height: var(--lh-relaxed);
}

.faq-item__a p {
	margin: 0 0 var(--space-xs);
}

.faq-item__a p:last-child {
	margin-bottom: 0;
}

.faq-item__a ul {
	margin: 0 0 var(--space-xs);
	padding-left: 1.25em;
}

.faq-item__a li {
	margin: 4px 0;
}

.faq-item__a a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.faq-item__a a:hover {
	color: var(--color-brand-hover);
}

/* --------------------------------------------------------------------------
   CTA plate — mint surface, text + button. Column on mobile, row on ≥768.
   -------------------------------------------------------------------------- */

.faq-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	background-color: var(--color-mint);
	border-radius: var(--radius-lg);
}

.faq-cta__text {
	margin: 0;
	color: var(--color-brand);
	font-weight: var(--fw-medium);
	line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
	.faq-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------------------
   Desktop ≥920 — 2-col grid, tabs become stacked tiles.
   -------------------------------------------------------------------------- */

@media (min-width: 920px) {
	.faq-layout {
		display: grid;
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: start;
	}

	.faq-tabs {
		flex-direction: column;
		gap: var(--space-sm);
		overflow: visible;
		padding-bottom: 0;
	}

	.faq-tab {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 18px 20px;
		border-radius: var(--radius-lg);
		text-align: left;
	}

	.faq-tab__label {
		font-size: 1.05rem;
		font-weight: var(--fw-semibold);
		line-height: var(--lh-snug, 1.35);
	}

	.faq-tab__count {
		display: block;
		font-size: 0.85rem;
		font-weight: var(--fw-regular);
		color: var(--color-text-muted);
	}

	.faq-tab.is-active .faq-tab__count {
		color: rgba(255, 255, 255, 0.75);
	}

	.faq-content {
		margin-top: 0;
	}
}