/* =========================================================
  🧩 WRAPPER
========================================================= */
.sec-faq { padding-top:var(--section-padding); padding-bottom:var(--section-padding); }
.sec-faq .wrapped { display:flex; flex-direction:column; gap:var(--section-gap); padding:0 var(--wrapper-padding); }
.sec-faq .expandable-list { display:flex; flex-direction:column; gap:calc(var(--elements-gap)); margin:auto; }

/* =========================================================
  🧩 LIST - answer + question
========================================================= */	
.expandable-list li .a { overflow:hidden; max-height:0; }
.expandable-list li .q { gap:var(--elements-gap); align-items:center; cursor:pointer; }
.expandable-list li article .q h3 { width:100%; }
.expandable-list li .active .a { display:flex; max-height:none; }

.expandable-list li article header { display:flex; flex-direction:row; }
.expandable-list li article { display:flex; flex-direction:column; border-radius:var(--box-br); }
.expandable-list li article .a { display:flex; gap:var(--elements-gap); flex-direction:column; }
.expandable-list li article .a h4 { margin-bottom:-8px; }

/* =========================================================
  🧩 LIST - answer + question - ikon
========================================================= */
/* Ikona pojawia się tylko przy .clicked */
.expandable-list li article button svg { transform:rotate(90deg); }
.expandable-list li article.active button svg { transform: rotate(-90deg); }

/* =========================================================
  🧩 RWD
========================================================= */
@media (min-width: 1px) and (max-width: 640px) {
	/* question name */
	.expandable-list li .q { min-height:54px; width:100%; }
	.expandable-list li .q h3 { width:100%; }

	/* rozwinięte */
	.expandable-list li article .a { max-width: 600px; }

	.expandable-list li article { padding: var(--space-16) var(--small-box-padding); }
	.expandable-list li article.active { gap:var(--elements-gap); padding-bottom:var(--small-box-padding); overflow:visible; }
	.expandable-list li article.active .a { max-height: 100000px; }
	.expandable-list li article .a ul { gap:var(--space-8); }
}

@media (min-width: 641px) and (max-width: 1023px) {
	.expandable-list li article { min-width:600px; max-width:600px; padding:var(--space-8) var(--space-28); }
	.expandable-list li article .a { width:100%; padding:0 var(--space-48) var(--space-16) 0; }
	.expandable-list li article .q { min-height: 48px; }
	.sec-faq .expandable-list { width:100%; }
	.sec-faq .expandable-list li .a { margin-top:var(--space-8); }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.expandable-list li article { width:680px; padding: var(--space-16) var(--space-28); }
	.expandable-list li article .a { width:100%; max-width:580px; padding:0 0 var(--space-8) 0; }
	.expandable-list li article .q { min-height: 32px; }
	.sec-faq .expandable-list { width:680px; }
	.sec-faq .expandable-list li .a { margin-top:var(--space-8); }
}

@media (min-width: 1200px) {
	.expandable-list li article .q { width:100%; padding: var(--space-16) var(--space-28); } /* var(--space-16) var(--small-box-padding) */

	.expandable-list li article .a { width:100%; max-width:620px; padding:0 var(--space-28) var(--space-24) var(--space-28); }
	.sec-faq .expandable-list { width:680px; }
	.sec-faq .expandable-list li .a { }
}