/**
 * Shared service-template FAQ accordion.
 */

.df-service-faqs {
	margin-top: var(--df-space-8);
	border-top: 1px solid var(--df-color-line);
}

.df-service-faqs details {
	border-bottom: 1px solid var(--df-color-line);
}

.df-service-faqs summary {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	align-items: center;
	min-height: 5.5rem;
	padding: 1.35rem 3.5rem 1.35rem 0;
	cursor: pointer;
	list-style: none;
}

.df-service-faqs summary::-webkit-details-marker {
	display: none;
}

.df-service-faqs summary > span {
	color: var(--df-color-taupe);
	font-family: var(--df-font-sans);
	font-size: var(--df-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.df-service-faqs summary > b {
	color: var(--df-color-ink);
	font-family: var(--df-font-serif);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
}

.df-service-faqs summary i,
.df-service-faqs summary i::after {
	position: absolute;
	right: 0.4rem;
	width: 1rem;
	height: 1px;
	background: var(--df-color-ink);
	transition: transform var(--df-duration-fast) var(--df-ease);
}

.df-service-faqs summary i::after {
	content: "";
	right: 0;
	transform: rotate(90deg);
}

.df-service-faqs details[open] summary i::after {
	transform: rotate(0);
}

.df-service-faqs details > div {
	padding: 0 2.5rem 1.6rem 3rem;
}

.df-service-faqs details > div p {
	max-width: 52rem;
	margin: 0;
	color: var(--df-color-muted);
	font-size: var(--df-font-size-sm);
	line-height: var(--df-line-height-loose);
}

.df-service-faqs details[open] {
	background: linear-gradient(90deg, rgba(255, 253, 249, 0.48), transparent);
}

@media (max-width: 37.5rem) {
	.df-service-faqs summary {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		min-height: 4.75rem;
		padding-right: 2.5rem;
	}

	.df-service-faqs details > div {
		padding-left: 2.25rem;
		padding-right: 1rem;
	}
}