/**
 * 04-responsive.css — Responsive Breakpoints
 *
 * Implements DESIGN.md § 7 "Responsive Behavior":
 *  - Desktop (>=1024px): 2-column layout for Tier 3 pages
 *  - Tablet  (<1024px):  Sidebars collapse to full-width
 *  - Mobile  (<768px):   Reduced padding, scaled typography, sticky bottom bar
 *
 * @package academy-of-octet-schola
 */

/* ═══════════════════════════════════════════════
   Desktop (>= 1024px)
   2-column layout: Content + Floating Sidebar
   ═══════════════════════════════════════════════ */

@media (min-width: 1024px) {

	/* Tier 3 pages: two-column layout */
	.has-sidebar,
	.tier-3-layout {
		display: grid;
		grid-template-columns: 1fr 320px;
		gap: var(--wp--preset--spacing--large);
		align-items: start;
		max-width: var(--wp--style--global--wide-size, 1260px);
		margin-inline: auto;
	}

	.has-sidebar > .entry-content,
	.tier-3-layout > .content-area {
		min-width: 0;
		max-width: 680px;
	}

	.has-sidebar > aside,
	.tier-3-layout > .sidebar-area {
		position: sticky;
		top: var(--wp--preset--spacing--medium);
	}
}

/* ═══════════════════════════════════════════════
   Tablet (< 1024px)
   Sidebars collapse into full-width injection blocks
   ═══════════════════════════════════════════════ */

@media (max-width: 1023px) {

	.has-sidebar,
	.tier-3-layout {
		display: block;
	}

	.has-sidebar > aside,
	.tier-3-layout > .sidebar-area {
		position: static;
		width: 100%;
		margin-top: var(--wp--preset--spacing--large);
	}

	/* Sticky sidebar becomes a static block */
	.sticky-sidebar {
		position: static;
	}
}

/* ═══════════════════════════════════════════════
   Mobile (< 768px)
   Reduced padding, scaled typography, sticky bottom bar
   ═══════════════════════════════════════════════ */

@media (max-width: 767px) {

	/* Reduced body padding */
	body {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* H1 scales down from 36px to 28px */
	h1,
	.wp-block-post-title {
		font-size: 1.75rem; /* 28px */
	}

	/* Tighter spacing on mobile */
	.tier-2-cta,
	.cta-consideration {
		padding-left: var(--wp--preset--spacing--xs);
		padding-right: var(--wp--preset--spacing--xs);
	}

	/* Activate sticky bottom action bar */
	.sticky-bottom-bar {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Add bottom padding to body to compensate for fixed bottom bar */
	body:has(.sticky-bottom-bar) {
		padding-bottom: 80px;
	}

	/* Reduce CTA isolation spacing on mobile */
	.tier-2-cta + *,
	.cta-consideration + *,
	.tier-3-cta + *,
	.cta-decision + * {
		margin-top: var(--wp--preset--spacing--large);
	}
}