/* ==========================================================================
   Responsive Breakpoints - Portal Ambiental La Unión
   ========================================================================== */

/* ---- Tablet (769px - 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
	:root {
		--container-padding: 20px;
	}

	.header-logo img {
		height: 50px;
	}

	.header-site-title {
		font-size: var(--font-size-base);
	}

	.primary-menu>li>a {
		padding: var(--space-3) var(--space-4);
		font-size: var(--font-size-xs);
	}

	.hero-home h1 {
		font-size: var(--font-size-3xl);
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.actions-grid {
		grid-template-columns: 1fr;
	}

	.programs-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.map-access-card {
		flex-direction: column;
		text-align: center;
	}

	.documents-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {
	:root {
		--container-padding: 16px;
	}

	/* Header adjustments */
	.header-top .container {
		gap: var(--space-2);
	}

	.header-logo img {
		height: 45px;
	}

	.header-site-title {
		font-size: var(--font-size-sm);
	}

	.header-badge {
		font-size: 0.625rem;
		padding: 2px var(--space-2);
	}

	/* Show mobile menu toggle */
	.mobile-menu-toggle {
		display: flex;
	}

	/* Hide desktop navigation, show mobile slide-in */
	.primary-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 80%;
		max-width: 300px;
		height: 100vh;
		background: var(--color-white);
		transform: translateX(-100%);
		transition: transform var(--transition-base);
		z-index: 1100;
		box-shadow: none;
		overflow-y: auto;
		padding: var(--space-3) var(--space-0);
		margin: 0;
		justify-content: flex-start;
	}

	.primary-navigation.menu-open {
		transform: translateX(0);
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
	}

	.primary-menu {
		flex-direction: column;
		width: 100%;
	}

	.primary-menu>li {
		width: 100%;
		border-bottom: 1px solid var(--color-gray-200);
	}

	.primary-menu>li>a {
		padding: var(--space-4);
		border-bottom: none;
		border-radius: 0;
		justify-content: space-between;
		color: var(--color-gray-700);
		background: transparent;
	}

	.primary-menu>li>a:hover,
	.primary-menu>li.current-menu-item>a {
		background: var(--color-gray-50);
		color: var(--color-primary-purple);
	}

	/* Submenus mobile */
	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		box-shadow: none;
		background: var(--color-gray-50);
		padding: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-base);
	}

	.primary-menu li.submenu-open>.sub-menu {
		max-height: 500px;
	}

	.primary-menu .sub-menu li a {
		padding: var(--space-3) var(--space-6);
	}

	/* Mobile overlay */
	body::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.25);
		opacity: 0;
		visibility: hidden;
		transition: all var(--transition-base);
		z-index: 1050;
		pointer-events: none;
	}

	body.menu-open::before {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Elevar header sobre el overlay para que el nav sea clickeable */
	body.menu-open .site-header {
		z-index: 1200;
	}

	body.menu-open {
		overflow: hidden;
	}

	/* Content area */
	.content-area {
		padding: 0;
	}

	/* Hero */
	.hero-home {
		padding: var(--space-10) var(--container-padding) var(--space-8);
		min-height: 400px;
		align-items: center;
	}

	.hero-home h1 {
		font-size: var(--font-size-2xl);
		line-height: 1.3;
	}

	.hero-content {
		width: 100%;
	}

	.hero-description {
		font-size: var(--font-size-sm);
	}

	.hero-extended-description {
		padding: var(--space-3) 0;
	}

	.hero-extended-description p {
		font-size: var(--font-size-xs);
	}

	.hero-buttons {
		flex-direction: column;
		gap: var(--space-3);
	}

	.hero-buttons .btn {
		width: auto;
		justify-content: flex-start;
		font-size: var(--font-size-xs);
		padding: var(--space-2) var(--space-3);
	}

	/* Stats - horizontal scroll */
	.stats-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--space-3);
		padding-bottom: var(--space-3);
	}

	.stats-grid::-webkit-scrollbar {
		height: 4px;
	}

	.stats-grid::-webkit-scrollbar-track {
		background: var(--color-gray-200);
		border-radius: 2px;
	}

	.stats-grid::-webkit-scrollbar-thumb {
		background: var(--color-gray-400);
		border-radius: 2px;
	}

	.stat-card {
		flex: 0 0 70%;
		min-width: 0;
		scroll-snap-align: start;
		padding: var(--space-4);
	}

	.stat-number {
		font-size: var(--font-size-2xl);
	}

	/* Actions */
	.actions-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	/* Maps */
	.map-access-card {
		flex-direction: column;
		text-align: center;
		padding: var(--space-6);
	}

	/* Programs */
	.programs-grid {
		grid-template-columns: 1fr;
	}

	/* Documents - horizontal scroll */
	.documents-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--space-3);
		padding-bottom: var(--space-3);
		max-width: none;
	}

	.documents-grid::-webkit-scrollbar {
		height: 4px;
	}

	.documents-grid::-webkit-scrollbar-track {
		background: var(--color-gray-200);
		border-radius: 2px;
	}

	.documents-grid::-webkit-scrollbar-thumb {
		background: var(--color-gray-400);
		border-radius: 2px;
	}

	.document-card {
		flex: 0 0 75%;
		min-width: 0;
		scroll-snap-align: start;
	}

	/* CTA */
	.cta-banner {
		padding: var(--space-6) var(--space-6);
	}

	.cta-banner h3 {
		font-size: var(--font-size-xl);
		margin-bottom: var(--space-3);
	}

	.cta-banner p {
		margin-bottom: var(--space-6);
	}

	.cta-buttons {
		flex-direction: column;
		gap: var(--space-4);
	}

	.cta-buttons .btn {
		width: 100%;
		justify-content: center;
		padding: var(--space-4) var(--space-6);
	}

	/* Footer */
	.site-footer .container {
		flex-direction: column;
		text-align: center;
	}

	.footer-menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-4);
	}

	/* Page hero (paginas internas) */
	.page-hero {
		padding: var(--space-6) var(--space-3) var(--space-6);
	}

	.page-hero-title {
		font-size: var(--font-size-xl);
		line-height: 1.3;
	}

	.page-hero-description {
		font-size: var(--font-size-sm);
	}

	/* Page header */
	.page-header .page-title {
		font-size: var(--font-size-2xl);
	}

	/* Section titles */
	.section-title {
		font-size: var(--font-size-xl);
	}

	/* Pagination */
	.pagination {
		flex-wrap: wrap;
	}
}

/* ---- Small mobile (max-width: 480px) ---- */
@media (max-width: 480px) {
	.header-branding {
		display: none;
	}

	.hero-home {
		min-height: 350px;
		padding: var(--space-8) var(--container-padding) var(--space-6);
		align-items: center;
	}

	.hero-home h1 {
		font-size: var(--font-size-xl);
		line-height: 1.3;
	}

	.hero-badge {
		margin-bottom: var(--space-4);
	}
}