/*
 * AnnGhar UI — Layout Shell
 * ------------------------------------------------------------------
 * .ag-container: the shared max-width/centering wrapper used by
 * BOTH the My Account shell and the public rewards landing page.
 *
 * .ag-shell: the sidebar + content grid, used only where there's a
 * sidebar (the My Account area). The landing page skips it entirely
 * and stacks its sections directly inside .ag-container.
 */

.ag-container {
	max-width: var(--ag-max-width);
	margin: 40px auto;
	padding: 0 24px;
}

.ag-shell {
	display: grid;
	grid-template-columns: var(--ag-sidebar-width) 1fr;
	gap: var(--ag-gap);
	align-items: start;
}

.ag-shell__content {
	min-width: 0;
}

/* Public landing page: vertical stack of sections, generous spacing. */
.ag-landing {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-bottom: 32px;
}

.ag-section {
	width: 100%;
}

.ag-section__title {
	text-align: center;
	font-size: clamp(1.4em, 3vw, 1.9em);
	margin: 0 0 32px;
}