/**
 * WordPress /accounts/ — page shell + layout helpers (see VALA_WORDPRESS_SPLIT_PLAN).
 * Shared card/modal rules: vala-accounts-app.css (imported below).
 *
 * @package valahub-child
 */
@import url("vala-accounts-app.css");

/* Match app layout.css: summary row is a grid */
.vala-template-accounts .vala-grid-summary.accounts-summary-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 1.2vw, 18px);
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.vala-template-accounts .vala-grid-summary.accounts-summary-grid {
		grid-template-columns: 1fr;
		gap: clamp(16px, 1.2vw, 18px);
	}
}

@media (max-width: 900px) {
	.vala-template-accounts .vala-grid-summary.accounts-summary-grid {
		grid-template-columns: 1fr;
		gap: clamp(14px, 3.2vw, 16px);
	}
}

/* Stage shell ownership moved to vala-app-layout.css. */
.vala-template-accounts .accounts-page-shell.page-shell--accounts {
	position: relative;
}

.vala-template-accounts .accounts-page-shell.page-shell--accounts::before {
	content: "";
	position: absolute;
	top: -72px;
	left: 12%;
	width: 480px;
	height: 240px;
	background: radial-gradient(circle, rgba(88, 166, 220, 0.18) 0%, rgba(88, 166, 220, 0) 70%);
	filter: blur(22px);
	pointer-events: none;
	z-index: 0;
}

.vala-template-accounts .accounts-page-shell.page-shell--accounts > * {
	position: relative;
	z-index: 1;
}

.vala-template-accounts .accounts-wp-head {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.vala-template-accounts .accounts-wp-head__title {
	margin: 0 0 4px;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 800;
	color: var(--vala-text-primary, #0f172a);
	letter-spacing: -0.02em;
}

.vala-template-accounts .accounts-wp-head__sub {
	margin: 0;
	font-size: 0.95rem;
	color: var(--vala-text-muted, #64748b);
	line-height: 1.45;
}

/* Stage 2+ hero: three sibling columns under .accounts-hero-grid (summary | types | distribution) */
.vala-template-accounts .accounts-hero-grid.dashboard-accounts-hero {
	grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 1fr) minmax(260px, 1.1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 1100px) and (min-width: 761px) {
	.vala-template-accounts .accounts-hero-col--distribution {
		grid-column: 1 / -1;
		border-left: 0 !important;
		border-top: 1px solid rgba(148, 163, 184, 0.34);
		padding-left: 0 !important;
		padding-top: 12px;
	}
}