/*
 * Container, grid, and section-spacing primitives. Mobile-first: base rules
 * target the smallest viewport, min-width queries layer on enhancements.
 */

.urban-container {
	width: 100%;
	max-width: var(--urban-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--urban-pad-mobile);
	padding-right: var(--urban-pad-mobile);
}

.urban-container--wide {
	max-width: var(--urban-container-wide);
}

@media (min-width: 1024px) {
	.urban-container {
		padding-left: var(--urban-pad-desktop);
		padding-right: var(--urban-pad-desktop);
	}
}

.urban-section {
	padding-top: var(--urban-space-8);
	padding-bottom: var(--urban-space-8);
}

@media (min-width: 1024px) {
	.urban-section {
		padding-top: var(--urban-space-9);
		padding-bottom: var(--urban-space-9);
	}
}

.urban-section--alt {
	background-color: var(--urban-surface-alt);
}

/* Simple responsive grid for product cards and similar repeating content.
   Final grid density for any specific page is a later-phase decision —
   this is the shared primitive, not a finished product-grid layout. */
.urban-grid {
	display: grid;
	gap: var(--urban-space-5);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.urban-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.urban-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.urban-main {
	display: block;
	min-height: 50vh;
}

/* Visual placeholder styling for the Phase 2 structural header/footer/nav
   blocks — not final design, just enough to be visibly legible while the
   foundation is reviewed. Phase 3 replaces the rules in this block. */
.urban-placeholder {
	border: 1px dashed var(--urban-border);
	background-color: var(--urban-surface-alt);
	color: var(--urban-text-muted);
	padding: var(--urban-space-4);
	font-size: var(--urban-text-small-size);
}

/* Interim site footer (template-parts/footer/site-footer.php): plain and
   neutral until the final footer design. Same light background as before,
   without the dashed placeholder box, and the links in a wrapping row. */
.urban-footer {
	border-top: 1px solid var(--urban-border);
	background-color: var(--urban-surface-alt);
	color: var(--urban-text-muted);
	padding: var(--urban-space-6) 0 var(--urban-space-5);
	font-size: var(--urban-text-small-size);
}

.urban-nav-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--urban-space-2) var(--urban-space-5);
	margin: 0 0 var(--urban-space-4);
	padding: 0;
	list-style: none;
}

.urban-footer__copyright {
	margin: 0;
}