/*
 * "Moje rezervácie" page glue.
 *
 * Everything reusable is in components/account.css; what is left here is the
 * measure of the page and the two-column cap on the sign-in panels.
 *
 * The cap matters: `repeat(auto-fit, minmax(300px, 1fr))` from .sp-grid--split
 * would happily lay two panels out as two columns on a phone-width viewport but
 * would also stretch a single panel to the full 1400px container, which reads
 * as a form floating in a field. 980px is the width at which a two-panel row
 * still reads as two forms rather than as a page-wide slab.
 */

.sp-account .sp-account__panels {
	--sp-grid-min: 320px;
	max-width: 980px;
}

.sp-account__lists {
	max-width: 1100px;
}

.sp-account__me .sp-account__group-title {
	margin-bottom: var(--sp-5);
}

/*
 * Ticket 12: the page is an account now, not a list.
 *
 * The section navigation sits full-measure under the page heading and the
 * section body below it keeps the 1100px measure the lists already had, so a
 * card row never grows wider than three cards and a paragraph never runs the
 * full 1400px container.
 */
.sp-account .sp-account-nav {
	max-width: 1100px;
}

.sp-account .sp-account-nav + .sp-account__lists {
	margin-top: clamp(30px, 4vw, 54px);
}

/* Ticket 03's prompt is the only thing on the page when it shows, so it gets
   the same top rhythm a section body would have had. */
.sp-account .sp-account-nav + .sp-account-verify {
	margin-top: clamp(30px, 4vw, 54px);
}