@use '../utils' as *;

// ============================================================
// Block: FAQ — 6/6 + Osmo accordion (visual = design, anim = Osmo)
// Section p-t / p-b via Twig utilities.
// ============================================================

.block-faq {
	position: relative;
	color: var(--c-text);
	background: var(--c-gray-100);
	padding-inline: var(--space-gap);

	&__grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-gap);
		align-items: start;

		@include sm {
			display: flex;
			flex-direction: column;
			gap: var(--space-md);
		}
	}

	&__intro {
		grid-column: 1 / span 6;

		@include sm {
			grid-column: auto;
			width: 100%;
		}
	}

	&__title {
		margin: 0;
		text-transform: uppercase;
		color: var(--c-text);
	}

	&__list {
		grid-column: 7 / span 6;
		min-width: 0;

		@include sm {
			grid-column: auto;
			width: 100%;
		}
	}

	.accordion-css {
		max-width: none;
		width: 100%;
	}

	.accordion-css__list {
		grid-column-gap: 0;
		grid-row-gap: 0;
	}

	.accordion-css__item {
		background-color: transparent;
		border-radius: 0;
		border-top: 1px dotted var(--c-gray-200);

		&:last-child {
			border-bottom: 1px dotted var(--c-gray-200);
		}
	}

	.accordion-css__item-top {
		gap: var(--space-sm);
		padding: var(--space-sm) 0;
	}

	.accordion-css__item-h3 {
		font-weight: 400;
		line-height: 1.5;
		color: var(--c-text);
	}

	.accordion-css__item-icon {
		color: var(--c-text);
	}

	.accordion-css__item-bottom-content {
		padding: 0 0 var(--space-sm);
	}

	.accordion-css__item-p {
		color: var(--c-text);
		margin: 0;
		line-height: 1.5;
	}
}
