/* Sekcja: Masz pytania przed zamówieniem? (skrócone FAQ strony głównej) */

.oai-site .oai-faq {
	position: relative;
	background: rgba(33, 225, 253, 0.06);
	padding: 96px 40px;
	overflow-x: hidden;
}

.oai-site .oai-faq__inner {
	max-width: var(--oai-container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

/* Intro */

.oai-site .oai-faq__intro {
	min-width: 0;
}

.oai-site .oai-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-faq__title {
	margin: 0 0 16px;
	font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
}

.oai-site .oai-faq__lead {
	margin: 0;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	text-align: left;
	overflow-wrap: break-word;
}

.oai-site .oai-faq .oai-faq__lead-break {
	display: inline;
}

/* Lista pytań — natywne details/summary, wiersze oddzielone subtelną linią */

.oai-site .oai-faq__list {
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.oai-site .oai-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-faq__question:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-faq__question:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

/* Symbol plus zbudowany z dwóch linii w pseudo-elementach summary */

.oai-site .oai-faq__question::before,
.oai-site .oai-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	background: var(--oai-color-cyan);
	transition: opacity var(--oai-transition-fast);
}

.oai-site .oai-faq__question::before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
}

.oai-site .oai-faq__question::after {
	right: 8px;
	width: 2px;
	height: 14px;
	margin-top: -7px;
}

.oai-site .oai-faq__item[open] .oai-faq__question::after {
	opacity: 0;
}

.oai-site .oai-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	text-align: left;
	overflow-wrap: break-word;
}

/* Tekst pomocniczy i CTA */

.oai-site .oai-faq__aside {
	min-width: 0;
}

.oai-site .oai-faq__note {
	margin: 0 0 20px;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.oai-site .oai-faq__cta {
	display: inline-flex;
}

/* Reduced motion: globalne wyłączenie transition/animation w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już wszystkie powyższe przejścia kolorów i tła. */

/* Od 900px: dwie kolumny — lewa (intro + tekst pomocniczy/CTA), prawa (lista pytań) */

@media (min-width: 900px) {
	.oai-site .oai-faq__inner {
		grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
		column-gap: 72px;
		row-gap: 0;
		align-items: start;
	}

	.oai-site .oai-faq__intro {
		grid-column: 1;
		grid-row: 1;
		padding-bottom: 24px;
	}

	.oai-site .oai-faq__list {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.oai-site .oai-faq__aside {
		grid-column: 1;
		grid-row: 2;
	}

	.oai-site .oai-faq .oai-faq__lead-break {
		display: block;
	}
}

/* Tablet: poniżej 900px, jedna kolumna, kolejność: intro, lista, tekst pomocniczy + CTA
   (naturalna kolejność w DOM — bez dodatkowych reguł kolejności). */

/* Mobile do 600px */

@media (max-width: 600px) {
	.oai-site .oai-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-faq__answer {
		padding-right: 0;
	}
}

/* Mobile do 430px */

@media (max-width: 430px) {
	.oai-site .oai-faq {
		padding: 56px 18px;
	}

	.oai-site .oai-faq__inner {
		gap: 32px;
	}

	.oai-site .oai-faq__cta {
		width: 100%;
	}
}

/* Mobile do 360px */

@media (max-width: 360px) {
	.oai-site .oai-faq {
		padding: 48px 16px;
	}
}