/* Service-area pages (template-service-area.php). Builds on service-article.css. */
.area-head { max-width: 780px; margin-inline: auto; }
.area-head .article-title { margin-top: 1rem; }
.area-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

.area-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
.area-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--hcw-line);
	background: var(--hcw-panel);
	color: #fff;
	font-family: "Cabinet Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	transition: border-color .25s ease, color .25s ease;
}
.area-list a:hover { border-color: rgba(58, 219, 74, 0.5); color: var(--hcw-green); }

.area-map { border: 1px solid var(--hcw-line); overflow: hidden; }
.area-map iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (min-width: 640px) {
	.area-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.area-list { grid-template-columns: repeat(3, 1fr); }
	.area-map iframe { height: 480px; }
}

/* FAQ blocks pasted into page content: <details class="faq-item"><summary>Q</summary><p>A</p></details> */
.article-body .faq-item summary { justify-content: space-between; }
.article-body .faq-item summary::after { content: "+"; margin-left: 1rem; color: var(--hcw-green); font-family: "JetBrains Mono", monospace; transition: transform .3s ease; }
.article-body .faq-item[open] summary::after { transform: rotate(45deg); }
.article-body .faq-item p { margin-left: 0; max-width: none; }
.article-body .faq-item:last-of-type { border-bottom: 1px solid var(--hcw-line); }
.article-body .area-cta-line { margin-top: 2rem; font-size: 1.1rem; color: #fff; }
.article-body .area-cta-line a { color: var(--hcw-green); }

/* Tighter vertical rhythm on these pages (the default 160px section padding left big gaps). */
.section.area-section { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section.area-section .article-cta { margin: 0; }