/*
 * TheSybin — FAQ (post 3476, slug `faqs`): templates/page-faqs.html (baner patterns/faq-hero.php) + treść patterns/faq-main.php.
 * Źródło: design-ref/spec/faq-kontakt.md część A (układ); faza LP: docs/STARE-STRONY.md §3 wariant A (K3) — jedna lista pytań 1–20
 * (kotwice #faq-1…#faq-20), bez nawigacji „Kategorie pytań”, box „Kontakt” z e-mailem i telefonem z LP 261.
 * Decyzje D1 (kolory), D3 (h2 grupy, h3 pytań), D9 (core/accordion).
 * Komponenty bez kopiowania CSS: C2 nagłówek (.ts-heading), C3 przycisk, C7 akordeon (.is-style-ts-accordion), fokus i ciemny kontekst (base.css).
 * Tu wyłącznie układ sekcji i box kontaktu (występują tylko na tej stronie).
 * Punkty przełamania: tablet ≤1024, telefon ≤767.
 */

/* ==========================================================================
   S2. Sekcja: kolumny 33,33 % (nawigacja + box, przyklejone ≥1025) i 66,66 % (grupy pytań)
   Kontener 1300 px, kolumny z paddingiem 10 px (treść 1280 px: x 80–1360 przy 1440).
   ========================================================================== */

.ts-page-faqs .wp-block-group.ts-faq-main {
	padding: 100px 10px;
}

/* Odstępy robią kolumny i grupy (gap) — bez domyślnego blockGap 20 px układu „flow” */
body.ts-page-faqs .ts-faq-main :where(.is-layout-flow) > * {
	margin-block: 0;
}

.ts-page-faqs .ts-faq-main__inner {
	display: flex;
	flex-wrap: wrap;
	max-width: 1300px;
	margin-inline: auto;
}

.ts-page-faqs .ts-faq-main__aside {
	flex: 0 0 33.33%;
	box-sizing: border-box;
	min-width: 0;
	padding: 10px 40px 10px 10px;
}

.ts-page-faqs .ts-faq-main__sticky {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* Przyklejenie (wzorzec: sticky top 40 px) tylko gdy box (≈320 px; dawniej z nawigacją ≈630 px) mieści się w oknie —
   na niskim ekranie dół boxu byłby nieosiągalny aż do końca listy pytań (2.4.11, 1.4.10) */
@media (min-width: 1025px) and (min-height: 720px) {
	.ts-page-faqs .ts-faq-main__sticky {
		position: sticky;
		top: 40px;
	}
}

.ts-page-faqs .ts-faq-main__questions {
	display: flex;
	flex: 0 0 66.66%;
	flex-direction: column;
	gap: 60px;
	box-sizing: border-box;
	min-width: 0;
	padding: 10px;
}

/* ==========================================================================
   S4. Box „Kontakt” (LP 261: e-mail i telefon; zdjęcie + nakładka #274A46 × 0,8)
   ========================================================================== */

.ts-page-faqs .wp-block-group.ts-cta-box {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px;
	border-radius: var(--ts-radius-card);
	color: var(--wp--preset--color--white);
}

.ts-page-faqs .ts-cta-box::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.8;
}

.ts-page-faqs .ts-cta-box .ts-cta-box__logo {
	margin: 0 0 37px;
}

.ts-page-faqs .ts-cta-box .ts-cta-box__logo img {
	display: block;
	width: 180px;
	height: auto;
}

.ts-page-faqs .ts-cta-box .ts-cta-box__title {
	margin: 0 0 40px;
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.ts-page-faqs .ts-cta-box .ts-cta-box__buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* Pigułka e-mail: złoto z tekstem #102B28 (D1-A); hover/fokus białe tło, tekst #274A46 (ElementsKit: all .4s ease) */
.ts-page-faqs .ts-cta-box__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 15px 20px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}

/* Ikona koperty (ElementsKit „icon-envelope2”, 20 px) jako maska — dekoracja poza drzewem dostępności */
.ts-page-faqs .ts-cta-box__button .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M1023 266Q1023 244 1008 229Q993 214 971 214L52 215Q42 215 32.5 219Q23 223 15 230Q8 238 4 247.5Q0 257 0 267L1 784Q1 794 5 803.5Q9 813 16 821Q24 828 33.5 832Q43 836 53 836L972 835Q993 835 1008.5 819.5Q1024 804 1024 782L1023 266ZM913 266L512 545L110 267L913 266ZM682 598L920 782L104 783L343 598Q352 591 353 580.5Q354 570 348 561Q341 552 330.5 551Q320 550 311 556L53 756L52 291L497 599Q501 601 504.5 602Q508 603 512 603Q516 603 520 602Q524 601 527 599L971 290L972 756L714 556Q705 550 694.5 551Q684 552 677 561Q670 570 671.5 580.5Q673 591 682 598Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M1023 266Q1023 244 1008 229Q993 214 971 214L52 215Q42 215 32.5 219Q23 223 15 230Q8 238 4 247.5Q0 257 0 267L1 784Q1 794 5 803.5Q9 813 16 821Q24 828 33.5 832Q43 836 53 836L972 835Q993 835 1008.5 819.5Q1024 804 1024 782L1023 266ZM913 266L512 545L110 267L913 266ZM682 598L920 782L104 783L343 598Q352 591 353 580.5Q354 570 348 561Q341 552 330.5 551Q320 550 311 556L53 756L52 291L497 599Q501 601 504.5 602Q508 603 512 603Q516 603 520 602Q524 601 527 599L971 290L972 756L714 556Q705 550 694.5 551Q684 552 677 561Q670 570 671.5 580.5Q673 591 682 598Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pigułka telefonu (LP 261): ikona słuchawki motywu (assets/icons/phone.svg — Font Awesome Free „phone-alt”, CC BY 4.0) zamiast koperty */
.ts-page-faqs .ts-cta-box__button--phone .wp-block-button__link::before {
	-webkit-mask: url("../../icons/phone.svg") center / 16px no-repeat;
	mask: url("../../icons/phone.svg") center / 16px no-repeat;
}

.ts-page-faqs .ts-cta-box__button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

@media (hover: hover) {
	.ts-page-faqs .ts-cta-box__button .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
	}
}

/* ==========================================================================
   S5. Pytania 1–20: nagłówek h2 (C2) → jeden akordeon (C7), odstęp 40 (≤1024 30);
   pod listą informacja o suplemencie diety (LP 22) i przycisk (LP 17)
   ========================================================================== */

.ts-page-faqs .ts-faq-group {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ts-page-faqs .ts-faq-group .ts-faq-group__title {
	margin: 0;
}

/* Kotwica #faq-N na akapicie odpowiedzi (panel rozwija się po wejściu z linku): odstęp nad akapitem mieści pytanie (h3 do 3 wierszy przy 320 px),
   więc po przewinięciu widać pytanie i odpowiedź (2.4.3, 2.4.11) */
.ts-page-faqs .ts-faq-group .wp-block-accordion-panel [id^="faq-"] {
	scroll-margin-top: 140px;
}

@media (max-width: 767px) {
	.ts-page-faqs .ts-faq-group .wp-block-accordion-panel [id^="faq-"] {
		scroll-margin-top: 190px;
	}
}

.ts-page-faqs .ts-faq-main__after {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ts-page-faqs .ts-faq-main__after .ts-faq-main__note {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

/* ==========================================================================
   Tablet ≤1024: kolumny jedna pod drugą (box → pytania), bez przyklejania
   ========================================================================== */

@media (max-width: 1024px) {
	.ts-page-faqs .wp-block-group.ts-faq-main {
		padding: 50px 10px;
	}

	.ts-page-faqs .ts-faq-main__inner {
		gap: 10px;
	}

	.ts-page-faqs .ts-faq-main__aside,
	.ts-page-faqs .ts-faq-main__questions {
		flex-basis: 100%;
	}

	.ts-page-faqs .ts-faq-main__aside {
		padding: 10px;
	}

	.ts-page-faqs .ts-faq-main__sticky {
		gap: 30px;
	}

	.ts-page-faqs .ts-faq-main__questions {
		gap: 40px;
	}

	.ts-page-faqs .wp-block-group.ts-cta-box {
		padding: 30px;
	}

	.ts-page-faqs .ts-cta-box .ts-cta-box__logo {
		margin-bottom: 27px;
	}

	.ts-page-faqs .ts-cta-box .ts-cta-box__title {
		margin-bottom: 20px;
	}

	.ts-page-faqs .ts-cta-box__button .wp-block-button__link {
		padding: 12px 15px;
	}

	.ts-page-faqs .ts-faq-group {
		gap: 30px;
	}
}

@media (max-width: 767px) {
	.ts-page-faqs .wp-block-group.ts-cta-box {
		padding: 20px;
	}
}