#faq,
#faq.wp-block-group.block { background: #fff; }
#faq .container { max-width: 1300px; margin: 0 auto; padding: 0 3%; box-sizing: border-box; }
#faq .section-head.center { max-width: 840px; margin: 0 auto 48px; text-align: center; }
#faq .section-head .eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #1c4bb0; font-weight: 600; }
#faq .section-head .lead { margin: 14px auto 0; max-width: 680px; color: #334067; }

/* 1:1 z HTML */
#faq .faq { display: grid; gap: 10px; width: 100%; margin: 40px auto 0; }
#faq .faq details.faq-big { grid-column: 1 / -1; }
#faq .faq .faq-rich { padding: 8px 24px 28px; }
#faq .faq .faq-rich > p:first-child { margin-top: 0; }
#faq .faq .faq-rich .process { margin-top: 24px; }
#faq .faq .faq-rich .steps { margin-top: 20px; }
#faq .faq details.faq-big .faq-rich { padding: 8px 32px 32px; }

#faq .faq details { background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; padding: 0; transition: box-shadow .2s; }
#faq .faq details[open] { box-shadow: 0 1px 2px rgba(19,53,122,.06), 0 2px 8px rgba(19,53,122,.04); border-color: #c7d4ec; }
#faq .faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 16px; color: #0e1a34; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#faq .faq summary::-webkit-details-marker { display: none; }
#faq .faq summary .pl { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e3e8f1; display: grid; place-items: center; flex: 0 0 auto; position: relative; transition: all .2s; }
#faq .faq summary .pl::before, #faq .faq summary .pl::after { content: ""; position: absolute; background: #13357a; }
#faq .faq summary .pl::before { width: 10px; height: 2px; }
#faq .faq summary .pl::after { width: 2px; height: 10px; transition: transform .2s; }
#faq .faq details[open] summary .pl { background: #13357a; border-color: #13357a; }
#faq .faq details[open] summary .pl::before, #faq .faq details[open] summary .pl::after { background: #fff; }
#faq .faq details[open] summary .pl::after { transform: rotate(90deg); }

/* Gutenberg wrapper dla Details */
#faq .faq .musi-faq-item.wp-block-details > .wp-block-details__content { padding: 0 20px 18px !important; box-sizing: border-box; }
#faq .faq .musi-faq-item.wp-block-details.faq-big > .wp-block-details__content { padding: 0 32px 32px !important; }
#faq .faq .musi-faq-item.wp-block-details > .wp-block-details__content > .faq-rich { padding: 8px 0 0; }
#faq .faq .musi-faq-item.wp-block-details > .wp-block-details__content > .ans { padding: 0 20px 18px; color: #334067; font-size: 15px; }
#faq .faq .musi-faq-item.wp-block-details > .wp-block-details__content > p { padding: 0 20px 18px; color: #334067; font-size: 15px; }

/* 1:1 process/steps jak w HTML */
#faq .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; counter-reset: step; }
#faq .proc-card { background: #fff; border: 1px solid #e3e8f1; border-radius: 14px; padding: 22px; position: relative; box-shadow: 0 1px 2px rgba(19,53,122,.06), 0 2px 8px rgba(19,53,122,.04); }
#faq .proc-card .n { font-family: 'Fraunces', serif; font-size: 40px; color: #13357a; line-height: 1; font-weight: 500; letter-spacing: -.02em; }
#faq .proc-card h4 { margin-top: 10px; font-size: 17px; color: #0e1a34; font-weight: 600; line-height: 1.25; }
#faq .proc-card p { font-size: 14px; color: #5a6789; margin-top: 6px; line-height: 1.5; }

#faq .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
#faq .step { background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 3/4; cursor: pointer; transition: transform .15s, box-shadow .15s; }
#faq .step:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(19,53,122,.1), 0 2px 6px rgba(19,53,122,.05); }
#faq .step img { width: 100%; height: 100%; object-fit: cover; }
#faq .step .n { position: absolute; top: 8px; left: 8px; background: rgba(19,53,122,.92); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; line-height: 1; }
#faq .step .lbl { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); color: #fff; font-size: 11px; padding: 18px 8px 8px; text-align: center; font-weight: 600; }

/* custom block row — siatka bezpośrednio na bloku (bez zbędnego __grid wrappera) */
#faq .wp-block-musi-faq-items-row.process { display: grid; grid-template-columns: repeat(var(--musi-faq-cols, 4), 1fr); gap: 16px; margin-top: 42px; }
#faq .wp-block-musi-faq-items-row.process .musi-faq-item.proc-card { background: #fff; border: 1px solid #e3e8f1; border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(19,53,122,.06), 0 2px 8px rgba(19,53,122,.04); }
#faq .wp-block-musi-faq-items-row.process .musi-faq-item.proc-card .n { font-family: 'Fraunces', serif; font-size: 40px; color: #13357a; line-height: 1; font-weight: 500; letter-spacing: -.02em; margin-bottom: 10px; }
#faq .wp-block-musi-faq-items-row.process .musi-faq-item.proc-card h4 { margin-top: 0; font-size: 17px; color: #0e1a34; font-weight: 600; line-height: 1.25; }
#faq .wp-block-musi-faq-items-row.process .musi-faq-item.proc-card p { font-size: 14px; color: #5a6789; margin-top: 6px; line-height: 1.5; }

#faq .wp-block-musi-faq-items-row.steps { display: grid; grid-template-columns: repeat(var(--musi-faq-cols, 5), 1fr); gap: 12px; margin-top: 20px; }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step { background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 3/4; padding: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(19,53,122,.1), 0 2px 6px rgba(19,53,122,.05); }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step .musi-faq-item__media { position: relative; width: 100%; height: 100%; }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step .musi-faq-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step .n { position: absolute; top: 8px; display: flex; align-items: center; justify-content: center; left: 8px; background: rgba(19,53,122,.92); color: #fff; font-size: 10px; padding: 6px 8px; border-radius: 999px; font-weight: 600; line-height: 1; z-index: 2; width: 22px; height: 22px; box-sizing: border-box; }
#faq .wp-block-musi-faq-items-row.steps .musi-faq-item.step .lbl { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); color: #fff; font-size: 11px; padding: 18px 8px 8px; text-align: center; font-weight: 600; z-index: 2; }

@media (max-width: 900px) {
	#faq .wp-block-musi-faq-items-row.process {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	#faq .wp-block-musi-faq-items-row.steps {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	#faq .process {
		grid-template-columns: repeat(2, 1fr);
	}
	#faq .steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	#faq .wp-block-musi-faq-items-row.process {
		grid-template-columns: 1fr !important;
	}
	#faq .wp-block-musi-faq-items-row.steps {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	#faq .process {
		grid-template-columns: 1fr;
	}
	#faq .steps {
		grid-template-columns: repeat(2, 1fr);
	}
}