/**
 * Responsive Design
 * Mobile-first approach with breakpoints
 */

/* Base styles are mobile-first */

/* Hide menu toggle by default - show only on mobile */
.menu-toggle {
	display: none;
}

/* Tablet and up */
@media (min-width: 768px) {
	.container {
		padding: 0 var(--spacing-lg);
	}

	.site-main {
		--mr-content-gutter: var(--spacing-lg);
	}
	
	.hero-title {
		font-size: clamp(var(--font-size-4xl), 4vw, var(--font-size-5xl));
	}
	
	.two-column-layout {
		gap: var(--spacing-xxl);
	}

	.two-column-layout.contact-layout {
		gap: 0;
	}

	/* Ensure menu toggle is hidden on tablet+ */
	.menu-toggle {
		display: none !important;
	}

	/* Ensure nav menu is always visible on tablet+ */
	.main-navigation .nav-menu {
		display: flex !important;
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	.container {
		padding: 0 var(--spacing-xl);
	}

	.container-narrow {
		max-width: 1024px;
	}

	.site-main {
		--mr-content-max-width: 1024px;
		--mr-content-gutter: var(--spacing-xl);
	}
	
	.site-header-container {
		padding: 10px var(--spacing-xl);
	}
	.site-footer-container {
		padding: 0 var(--spacing-xl);
	}

	.site-footer-bottom .site-footer-container {
		padding: 0 var(--spacing-xl);
	}
}

/* Mobile Navigation */
@media (max-width: 767px) {
	/* Logo: hide XL, show SM on mobile */
	.site-logo-xl {
		display: none !important;
	}

	.site-logo-sm {
		display: block !important;
	}

	/* Hide mobile menu by default - override layout.css .nav-menu display:flex */
	.main-navigation .nav-menu {
		display: none !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-bg-dark);
		flex-direction: column;
		padding: var(--spacing-lg) var(--spacing-md);
		box-shadow: var(--shadow-lg);
		z-index: var(--z-index-modal);
		text-align: center;
	}

	/* Show menu when toggled */
	.main-navigation.toggled .nav-menu {
		display: flex !important;
	}

	.main-navigation li {
		margin: var(--spacing-sm) 0;
	}

	/* Show hamburger menu */
	.menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30px;
		height: 30px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		z-index: var(--z-index-modal);
	}

	.hamburger-icon {
		width: 100%;
		height: 3px;
		background-color: var(--color-text-light);
		border-radius: 2px;
		transition: all var(--transition-fast);
	}

	.menu-toggle.toggled .hamburger-icon:nth-child(1) {
		transform: rotate(45deg) translate(8px, 8px);
	}

	.menu-toggle.toggled .hamburger-icon:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.toggled .hamburger-icon:nth-child(3) {
		transform: rotate(-45deg) translate(8px, -8px);
	}

	/* Mobile overlay - sits below header but above page content */
	.mobile-menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: var(--z-index-sticky);
	}

	.mobile-menu-overlay.active {
		display: block;
	}

	/* Raise header above overlay when menu is open */
	.site-header {
		z-index: var(--z-index-modal);
	}
	
	/* Two column becomes single column on mobile */
	.two-column-layout {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	/* Programs section reduced padding on mobile */
	.programs-section {
		padding: 0 var(--spacing-sm);
	}

	.programs-section > .container {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.programs-grid {
		grid-template-columns: 1fr;
	}
	
	/* Three column becomes single column on mobile */
	.three-column-grid {
		grid-template-columns: 1fr;
	}
	
	/* Four column becomes two columns on tablet, one on mobile */
	.four-column-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* Adjust hero section for mobile */
	.hero-title {
		font-size: var(--font-size-3xl);
	}
	
	.hero-description {
		font-size: var(--font-size-base);
	}
	
	/* Footer: reorder columns for mobile */
	.site-footer-container {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		text-align: center;
	}

	.footer-col--social {
		order: 1;
	}

	.footer-col--social .footer-col__title {
		display: none;
	}

	.footer-social-list {
		flex-direction: row;
		justify-content: center;
		gap: var(--spacing-lg);
	}

	.footer-social-label {
		display: none;
	}

	.footer-social-list li a i {
		font-size: var(--font-size-2xl);
	}

	.footer-col--logo {
		order: 2;
		justify-content: center;
	}

	.footer-col--comunidad {
		order: 3;
	}

	.footer-col--contact {
		order: 4;
	}

	.footer-menu-list {
		align-items: center;
	}

	/* Footer bottom: copyright + legal links - fluid on mobile */
	.site-footer-bottom__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: var(--spacing-xs);
	}

	.site-footer-legal {
		justify-content: center;
	}

	/* User icon hidden on mobile */
	.user-icon,
	.user-icon--logged-in {
		display: none;
	}

	/* Form two-col becomes single on mobile */
	.form-row-two-col {
		grid-template-columns: 1fr;
	}

	/* CTA buttons stack on mobile */
	.cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	/* Contact layout: hide image on mobile, show form only */
	.contact-layout .column-image {
		display: none;
	}

	.contact-layout .contact-form-wrapper {
		border-radius: var(--border-radius-xxl);
	}

	/* Section title left stays left on mobile */
	.section-title-left {
		font-size: var(--font-size-3xl);
	}
}

/* Small screens: reduce section-title font by 25% */
@media (max-width: 420px) {
	.section-title {
		font-size: calc(var(--font-size-4xl, 2.25rem) * 0.75);
	}

	.programs-title {
		font-size: calc(var(--font-size-3xl, 1.875rem) * 0.75);
	}

	.programs-subtitle {
		font-size: calc(var(--font-size-base, 1rem) * 0.80);
	}
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
	.three-column-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.four-column-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Large desktop - container max-width 1400px is set in layout.css; padding only here */
@media (min-width: 1400px) {
	.container {
		padding: 0 var(--spacing-xl);
	}
}

/* =============================================
   Programas Page Responsive
   ============================================= */

@media (max-width: 767px) {
	.programs-page-hero {
		margin: var(--spacing-sm);
		border-radius: var(--border-radius-lg);
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.programs-page-hero .programs-title {
		font-size: var(--font-size-3xl);
	}

	/* Contact page: image hidden on mobile via .contact-layout .column-image rule */

	/* Social links stack on mobile */
	.social-links {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-md);
	}

	/* FAQ question text smaller on mobile */
	.faq-question {
		font-size: var(--font-size-base);
	}

	/* Landing pages */
	.landing-page {
		padding: var(--spacing-xl) 0;
	}

	.landing-page .entry-content,
	.landing-page .section-content,
	.iniciar-acompanamiento-page .section-content {
		padding: 0 var(--spacing-sm);
	}

	/* Generic page */
	.generic-page {
		padding: var(--spacing-xl) 0;
	}

	.generic-page article {
		padding: 0 var(--spacing-sm);
	}

	.generic-page .entry-title {
		font-size: var(--font-size-2xl);
	}

	/* Blog layout: stack columns on mobile, sidebar on top */
	.blog-layout {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.blog-layout__sidebar {
		order: -1;
	}

	.blog-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.blog-hero {
		padding: var(--spacing-xl) 0;
	}

	.blog-sidebar {
		position: static;
	}

	.blog-widget--tags,
	.blog-widget--archives {
		display: none;
	}

	/* Single post adjustments */
	.single-post__hero {
		max-height: 300px;
	}

	.single-post__hero-image {
		max-height: 75px;
	}

	.single-post__breadcrumb-current {
		max-width: 150px;
	}

	.single-post__navigation {
		grid-template-columns: 1fr;
	}

	.single-post__nav-link--next {
		grid-column: auto;
		text-align: left;
	}

	.single-post__gallery-item {
		flex: 0 0 calc(50% - var(--spacing-sm) / 2);
	}

	.single-post__gallery-nav {
		display: none;
	}

	.single-post__content .wp-block-gallery .wp-block-image {
		flex: 0 0 calc(50% - var(--spacing-sm) / 2);
	}

	.mr-gallery-nav {
		display: none;
	}

	.related-posts__card {
		flex: 0 0 calc((100% - 20px) / 2);
	}

	.related-posts__nav--prev {
		left: 4px;
	}

	.related-posts__nav--next {
		right: 4px;
	}
}

/* =============================================
   Blog Responsive – Tablet
   ============================================= */

@media (min-width: 768px) and (max-width: 1023px) {
	.blog-layout {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.blog-layout__sidebar {
		order: -1;
	}

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

	.blog-sidebar {
		position: static;
		display: flex;
		gap: var(--spacing-lg);
	}

	.blog-widget {
		margin-bottom: 0;
		flex: 1;
	}

	.blog-widget--tags,
	.blog-widget--archives {
		display: none;
	}

	.related-posts__card {
		flex: 0 0 calc((100% - 40px) / 3);
	}
}