/* =========================================================
   FAQ — faq.css
   ========================================================= */

.faq{
	background: transparent;
}

/* =========================================================
   HEAD (label/title) — 1:1 jak gallery.css
   ========================================================= */

.faq__head{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.faq__head-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
}

.faq__head-left .section-label{
	justify-content: center;
	width: 100%;
}

.faq__head-left .section-title{
	margin-top: 25px; /* wymagane 25px */
	text-align: center;
}

/* =========================================================
   LIST (karty)
   ========================================================= */

.faq__list{
	margin-top: 34px;
	display: flex;
	flex-direction: column;
	gap: 20px;

	position: relative;
	overflow: hidden;

	/* ustawiane z JS (collapsed) */
	max-height: var(--faq-collapsed-h, none);
}

.faq__list.is-expanded{
	max-height: none;
}

.faq__list:not(.is-expanded)::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.faq__item{
	background: rgba(232, 225, 243, 0.23); /* #E8E1F34A / 23% */
	border-radius: 2px;
	overflow: hidden;

	/* KLUCZ: nie pozwól flexowi “ściskać” itemów przy max-height */
	flex-shrink: 0;
}

/* =========================================================
   QUESTION (trigger) — padding STAŁY, żeby nie skakało
   ========================================================= */

.faq__question{
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	padding: 20px; /* stałe 20px zawsze */
	text-align: left;
}

.faq__left{
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.faq__num{
	font-family: var(--font-family-base);
	font-weight: 700;
	font-size: 20px;
	line-height: 145%;
	letter-spacing: 0;
	color: var(--color-grey);
	white-space: nowrap;
}

.faq__qtext{
	font-family: var(--font-family-base);
	font-weight: 700;
	font-size: 20px;
	line-height: 145%;
	letter-spacing: 0;
	color: var(--color-grey);

	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Arrow (SVG switch) */
.faq__arrow{
	width: 24px;
	height: 24px;
	flex: 0 0 24px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	background-image: url("https://flixcity.kreatorzybiznesu.pl/wp-content/uploads/2026/02/faq_normal_arrow.svg");
}

.faq__item.is-open .faq__arrow{
	background-image: url("https://flixcity.kreatorzybiznesu.pl/wp-content/uploads/2026/02/faq_active_arrow.svg");
}

/* =========================================================
   ANSWER (WYSIWYG)
   ========================================================= */

.faq__answer{
	display: none;
	padding: 10px 20px 20px 20px; /* 10px wewnątrz przy otwartym (bez skoku) */
}

.faq__item.is-open .faq__answer{
	display: block;
}

.faq__acontent{
	font-family: var(--font-family-base);
	font-weight: 300;
	font-size: 20px;
	line-height: 145%;
	letter-spacing: 0;
	color: var(--color-grey);
}

.faq__acontent p{
	margin: 0 0 12px 0;
}

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

.faq__acontent ul,
.faq__acontent ol{
	margin: 0 0 12px 20px;
}

/* =========================================================
   MORE BUTTON — globalny btn + inny arrow
   ========================================================= */

.faq__more{
	width: 100%;
	max-width: none;
	margin-top: 20px;
}

.faq__more .btn__icon--arrow{
	background-image: url("https://flixcity.kreatorzybiznesu.pl/wp-content/uploads/2026/02/faq_btn.svg");
}

/* =========================================================
   RESPONSIVE — jak w galerii
   ========================================================= */

@media (max-width: 1024px){
	.faq__list{
		margin-top: 28px;
	}
}

@media (max-width: 640px){
	.faq__head{
		align-items: center;
	}

	.faq__head-left{
		align-items: flex-start;
		text-align: left;
	}

	.faq__head-left .section-label{
		justify-content: flex-start;
	}

	.faq__head-left .section-label__line{
		left: auto;
		transform: none;
	}

	.faq__head-left .section-title{
		text-align: left;
	}

	.faq__list{
		margin-top: 18px;
		gap: 14px;
	}

	.faq__num,
	.faq__qtext,
	.faq__acontent{
		font-size: 18px;
	}

	.faq__qtext{
		white-space: normal;
	}
}