/*
 * Page Layout — observatorio-cero-theme
 *
 * Styles for the page template layout (templates/page.html):
 *   - Two-column layout (75% main content + 25% sidebar)
 *   - Sidebar styles (sticky, responsive, CTAs) in sidebar-1.css
 *
 * Note: Hero pattern styles are in hero-oc-1.css
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Page Layout — Main content + Sidebar (75/25)
 * ═══════════════════════════════════════════ */

.oc-page-layout-wrapper {
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.oc-page-layout-wrapper {
		padding-left: var(--wp--preset--spacing--60);
		padding-right: var(--wp--preset--spacing--60);
	}
}

.oc-page-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
}

.oc-page-layout > .oc-main-content {
	flex: 1 1 0%;
	min-width: 0;
}

@media (min-width: 1024px) {
	.oc-page-layout {
		flex-wrap: nowrap;
	}

	.oc-page-layout > .oc-main-content {
		flex: 0 0 75%;
		max-width: 75%;
	}
}

/* ═══════════════════════════════════════════
 * Sidebar Cards (for future widgets)
 * ═══════════════════════════════════════════ */

.oc-sidebar-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--border-width--thin) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-radius: var(--wp--custom--border-radius--lg);
	padding: var(--wp--preset--spacing--50);
	transition: box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing), border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.oc-sidebar-card:hover {
	box-shadow: var(--wp--preset--shadow--medium);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

/* ═══════════════════════════════════════════
 * Reduced Motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.oc-sidebar-card {
		transition: none;
	}
}