/* Core-owned survey overview ---------------------------------------------
 * The Core owns survey data, access, status and interactions. This file only
 * controls the presentation of the Core system page inside the portal shell.
 */
.vpt-surveys-page {
	background: var(--vp-color-bg);
}

.vpt-surveys-hero {
	border-bottom: 1px solid var(--vp-color-border);
	background: var(--vp-color-surface);
}

.vpt-surveys-hero__inner {
	padding-block: clamp(2.75rem, 6vw, 4.75rem);
}

.vpt-surveys-eyebrow {
	margin: 0 0 var(--vp-space-2);
	color: var(--vp-bank-primary);
	font-size: var(--vp-font-size-sm);
	font-weight: var(--vp-font-weight-bold);
}

.vpt-surveys-title {
	max-width: none;
	margin: 0;
	color: var(--vp-color-text-strong);
	font-size: clamp(2.2rem, 1.75rem + 1.65vw, 3.35rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

.vpt-surveys-section {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

/*
 * Deliberately do not use .vpt-editorial-content here: that editorial shell
 * narrows normal Gutenberg prose to --vp-content-max (47.5rem). The survey
 * overview is a portal application surface and should use the regular portal
 * content container instead.
 */
.vpt-surveys-content {
	display: block;
}

.vpt-surveys-content > * {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Compatibility presentation hooks for Core survey overview renderers.
 * These selectors only affect the dedicated survey system page and therefore
 * do not change survey blocks embedded in editorial pages or posts.
 */
.vpt-surveys-content :where(
	.vp-surveys,
	.vp-surveys-overview,
	.vp-survey-overview,
	.vp-surveys-list,
	.vp-survey-list,
	.vp-surveys-grid,
	.vp-survey-grid,
	.vp-survey-cards
) {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.vpt-surveys-content :where(
	.vp-survey-card,
	.vp-surveys__card,
	.vp-surveys__item,
	.vp-survey-list__item,
	.vp-survey-overview__item
) {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Keep overview copy readable without recentering it. */
.vpt-surveys-content :where(
	.vp-surveys-intro,
	.vp-survey-overview__intro,
	.vp-surveys__intro
) {
	max-width: 56rem;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 47.999rem) {
	.vpt-surveys-hero__inner {
		padding-block: var(--vp-space-7);
	}

	.vpt-surveys-section {
		padding-block: var(--vp-space-7) var(--vp-space-9);
	}

	.vpt-surveys-content > *,
	.vpt-surveys-content :where(
		.vp-surveys,
		.vp-surveys-overview,
		.vp-survey-overview,
		.vp-surveys-list,
		.vp-survey-list,
		.vp-surveys-grid,
		.vp-survey-grid,
		.vp-survey-cards,
		.vp-survey-card,
		.vp-surveys__card,
		.vp-surveys__item,
		.vp-survey-list__item,
		.vp-survey-overview__item
	) {
		width: 100%;
		max-width: none;
	}
}