/*
 * layout.css - structural primitives.
 *
 * LAYER 3 of 5. Only the containers every screen needs. This file must NOT grow into
 * per-screen layouts: the homepage, shop grid, cart table and account layouts belong to
 * their own component files and their own tasks.
 *
 * Logical properties throughout - see docs/04-implementation/RTL.md.
 */

/*
 * The site wrapper. Sticky-footer behaviour so short pages still push the footer down,
 * which matters immediately: with no content imported, most pages are short.
 */
.zahra-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
}

.zahra-main {
	flex: 1 0 auto;
}

/*
 * The content shell. The approved container from docs/01-design/tokens/layout.md:
 *
 *   max-width: var(--shell);   1440px
 *   margin-inline: auto;
 *   padding-inline: var(--gutter);  60px
 *
 * The mobile gutter is IMPLEMENTATION PROVISIONAL - the design formalizes only the desktop
 * value. Mobile-first per docs/04-implementation/RESPONSIVE.md: the provisional mobile
 * gutter applies by default and the approved desktop gutter takes over at the provisional
 * breakpoint.
 */
.zahra-shell {
	max-inline-size: var(--zahra-shell);
	margin-inline: auto;
	padding-inline: var(--zahra-gutter-mobile--provisional);
	inline-size: 100%;
}

/*
 * Full-bleed section: escapes the shell padding while its inner content stays aligned.
 * Needed by the approved design's tinted sections and hero.
 */
.zahra-section {
	inline-size: 100%;
}

.zahra-section--sand {
	background-color: var(--zahra-color-sand);
}

/*
 * IMPLEMENTATION PROVISIONAL BREAKPOINT.
 *
 * ONE breakpoint, not a speculative set. The design package formalizes no breakpoint at
 * all (docs/01-design/tokens/breakpoints.md: NOT FORMALIZED YET) and contains no tablet
 * design, so behaviour between the 390px mobile frame and the 1440px desktop shell is
 * genuinely undefined - Q-013 / Q-014.
 *
 * This exists only so the shell is not stuck at a mobile gutter on desktop. Replace it
 * with approved values when the breakpoint task runs; do not build a scale on top of it.
 */
@media (min-width: 1024px) {

	.zahra-shell {
		padding-inline: var(--zahra-gutter);
	}
}