/**
 * AMARA 225 Responsive Styles
 *
 * @package AMARA_225
 * @since 1.0.0
 *
 * Mobile-First Responsive Design
 */

/**
 * ======================================================================
 * 1. TABLET BREAKPOINT (max-width: 991px)
 * ======================================================================
 */
@media (max-width: 991px) {

	/* Typography adjustments */
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.75rem; }

	/* Container */
	.container {
		padding: 0 30px;
	}

	/* Section padding */
	.section-padding {
		padding: 60px 0;
	}

	/* Grid columns - tablet */
	.col-md-3,
	.col-md-4,
	.col-md-6,
	.col-lg-3 {
		width: 50%;
	}

	/* Hero Section */
	.amara-hero {
		min-height: 550px;
	}

	.amara-hero-title {
		font-size: 2.8rem;
	}

	.amara-hero-subtitle {
		font-size: 1.3rem;
	}

	/* Header Navigation */
	.site-header .container {
		flex-wrap: wrap;
	}

	.main-navigation {
		width: 100%;
		order: 3;
		margin-top: 15px;
	}

	.main-navigation ul {
		justify-content: center;
		gap: 20px;
	}

	/* Footer */
	.footer-widgets {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	/* Pilares cards - 2 columns on tablet */
	.amara-pilares-grid .row {
		margin: 0 -10px;
	}

	.amara-pilares-grid [class*="col-"] {
		padding: 0 10px;
	}

	/* Servicios - 2 columns on tablet */
	.amara-servicios-grid .col-md-4 {
		width: 50%;
	}

	.amara-servicio-card {
		margin-bottom: 25px;
	}

	.servicio-image {
		height: 230px;
	}

	.servicio-content {
		padding: 28px 25px;
	}

	.servicio-title {
		font-size: 1.4rem;
		margin-bottom: 12px;
	}

	.servicio-description {
		font-size: 0.95rem;
	}

	/* Testimonios - 2 columns on tablet */
	.amara-testimonios-grid .col-md-4 {
		width: 50%;
	}

	.amara-testimonio-card {
		margin-bottom: 25px;
		padding: 32px 28px;
	}

	.testimonio-image {
		width: 90px;
		height: 90px;
		margin-bottom: 18px;
	}

	.testimonio-text {
		font-size: 0.95rem;
		line-height: 1.65;
	}

	/* Proceso steps - 2 columns on tablet */
	.amara-proceso-steps .col-lg-3 {
		width: 50%;
	}

	/* CTA Final - Tablet optimizations */
	.amara-cta-final {
		min-height: 450px;
		background-position: center;
		background-attachment: scroll;
	}

	.amara-cta-overlay {
		background: linear-gradient(135deg, rgba(27, 58, 95, 0.45) 0%, rgba(27, 58, 95, 0.25) 50%, rgba(27, 58, 95, 0.35) 100%);
	}

	.amara-cta-content {
		padding: 0 30px;
	}

	.cta-title {
		font-size: 2.2rem;
		line-height: 1.25;
		margin-bottom: 18px;
	}

	.cta-subtitle {
		font-size: 1.15rem;
		line-height: 1.6;
		margin-bottom: 25px;
	}
}

/**
 * ======================================================================
 * 2. MOBILE BREAKPOINT (max-width: 767px)
 * ======================================================================
 */
@media (max-width: 767px) {

	/* Typography adjustments */
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }

	body {
		font-size: 15px;
		line-height: 1.6;
	}

	/* Container */
	.container {
		padding: 0 20px;
	}

	/* Section padding */
	.section-padding {
		padding: 50px 0;
	}

	/* All columns stack on mobile */
	.col-md-3,
	.col-md-4,
	.col-md-6,
	.col-md-12,
	.col-lg-3 {
		width: 100%;
		margin-bottom: 20px;
	}

	/* Remove bottom margin from last column */
	.row > [class*="col-"]:last-child {
		margin-bottom: 0;
	}

	/* Buttons - larger touch targets for mobile */
	.btn {
		padding: 12px 30px;
		font-size: 15px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.btn-lg {
		padding: 16px 40px;
		font-size: 17px;
		min-height: 50px;
	}

	/* Section headers */
	.amara-section-header {
		margin-bottom: 35px;
	}

	.section-title {
		font-size: 1.75rem;
	}

	.section-subtitle {
		font-size: 16px;
	}

	/**
	 * Hero Section - Mobile (FULL VIEWPORT OPTIMIZADO)
	 */
	.amara-hero {
		min-height: 100vh;
		width: 100vw;
		padding: 60px 0 40px;
		background-attachment: scroll !important;
		background-position: center center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.amara-hero-overlay {
		min-height: 100vh;
		width: 100vw;
	}

	.amara-hero-content {
		padding: 0 15px;
	}

	.amara-hero-title {
		font-size: 1.85rem;
		line-height: 1.2;
		margin-bottom: 15px;
	}

	.amara-hero-subtitle {
		font-size: 1.15rem;
		margin-bottom: 12px;
	}

	.amara-hero-description {
		font-size: 1rem;
		line-height: 1.6;
		margin-bottom: 25px;
	}

	.amara-hero-cta {
		margin-top: 25px;
	}

	/**
	 * Header Navigation - Mobile
	 */
	.site-header .container {
		padding: 12px 20px;
	}

	.site-logo img {
		max-height: 45px;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.main-navigation a {
		display: block;
		padding: 8px 0;
	}

	/**
	 * About Section - Mobile
	 */
	.amara-about-image {
		margin-bottom: 30px;
	}

	.amara-about-image img {
		width: 100%;
		height: auto;
		max-width: 100%;
		object-fit: cover;
	}

	.amara-about-text {
		font-size: 1rem;
		text-align: left;
	}

	.amara-quote {
		font-size: 1.05rem;
		padding: 20px;
		margin: 25px 0;
		line-height: 1.5;
	}

	.amara-quote::before {
		font-size: 2.5rem;
		top: -5px;
		left: 15px;
	}

	/**
	 * Pilares Section - Mobile
	 */
	.amara-pilar-card {
		padding: 30px 20px;
		margin-bottom: 20px;
	}

	.pilar-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 20px;
	}

	.pilar-title {
		font-size: 1.3rem;
	}

	/**
	 * Servicios Section - Mobile (ULTRA OPTIMIZED - MAXIMUM SPACING)
	 * FORCE 1 COLUMN LAYOUT
	 */
	.amara-servicios-grid {
		margin-top: 40px;
	}

	/* FORCE 1 COLUMN - NOT 2! */
	.amara-servicios-grid .col-md-4,
	.amara-servicios-grid [class*="col-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	.amara-servicio-card {
		margin-bottom: 60px !important;
		border-radius: 20px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		padding-bottom: 0;
	}

	.servicio-image {
		height: 200px;
		border-radius: 20px 20px 0 0;
	}

	.servicio-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.servicio-content {
		padding: 45px 30px 40px !important;
	}

	.servicio-title {
		font-size: 1.6rem !important;
		margin-bottom: 25px !important;
		line-height: 1.3;
		color: var(--amara-secondary);
	}

	.servicio-description {
		font-size: 1.05rem !important;
		line-height: 1.8 !important;
		margin-bottom: 30px !important;
		color: var(--amara-neutral-medium);
	}

	.servicio-features {
		margin: 30px 0 35px !important;
		padding-left: 0;
	}

	.servicio-features li {
		font-size: 1rem !important;
		padding: 15px 0 15px 35px !important;
		line-height: 1.7 !important;
		color: var(--amara-neutral-medium);
		margin-bottom: 8px;
	}

	.servicio-features li::before {
		font-size: 1.3rem !important;
		left: 0;
	}

	.servicio-price {
		font-size: 1.5rem !important;
		margin: 35px 0 30px !important;
		font-weight: 700;
	}

	.amara-servicio-card .btn {
		width: 100%;
		padding: 18px 30px !important;
		font-size: 17px !important;
		border-radius: 50px;
		margin-top: 15px !important;
	}

	/**
	 * Beneficios Section - Mobile
	 */
	.beneficios-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.beneficio-item {
		font-size: 1rem;
		padding: 15px 20px;
	}

	/**
	 * Proceso Section - Mobile
	 */
	.proceso-step {
		padding: 25px 15px;
		margin-bottom: 20px;
	}

	.step-number {
		width: 50px;
		height: 50px;
		font-size: 1.3rem;
	}

	.step-text {
		font-size: 1rem;
	}

	/**
	 * Testimonios Section - Mobile (ULTRA OPTIMIZED - MAXIMUM SPACING)
	 * FORCE 1 COLUMN LAYOUT
	 */
	.amara-testimonios-grid {
		margin-top: 40px;
	}

	/* FORCE 1 COLUMN - NOT 2! */
	.amara-testimonios-grid .col-md-4,
	.amara-testimonios-grid [class*="col-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	.amara-testimonio-card {
		padding: 50px 35px 45px !important;
		margin-bottom: 60px !important;
		text-align: center;
		border-radius: 20px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
		position: relative;
		overflow: hidden;
	}

	.amara-testimonio-card::before {
		content: '"';
		position: absolute;
		top: 20px;
		left: 25px;
		font-size: 3rem;
		color: rgba(212, 175, 55, 0.06);
		font-family: Georgia, serif;
		line-height: 1;
	}

	.testimonio-image {
		width: 110px !important;
		height: 110px !important;
		margin: 0 auto 30px !important;
		border: 5px solid var(--amara-primary) !important;
		box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
		position: relative;
		z-index: 1;
	}

	.testimonio-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}

	.testimonio-rating {
		font-size: 1.3rem !important;
		margin-bottom: 25px !important;
		letter-spacing: 4px !important;
		position: relative;
		z-index: 1;
	}

	.testimonio-text {
		font-size: 1.1rem !important;
		line-height: 1.85 !important;
		margin-bottom: 30px !important;
		font-style: italic;
		color: var(--amara-neutral-dark);
		position: relative;
		z-index: 1;
		padding: 0 10px !important;
	}

	.testimonio-author {
		font-size: 1.05rem !important;
		margin-top: 25px !important;
		position: relative;
		z-index: 1;
	}

	.testimonio-author strong {
		font-size: 1.15rem !important;
		color: var(--amara-secondary);
		display: block;
		margin-bottom: 10px !important;
	}

	.testimonio-role {
		font-size: 0.98rem !important;
		margin-top: 12px !important;
		color: var(--amara-primary);
	}

	/**
	 * FAQ Section - Mobile
	 */
	.faq-question {
		padding: 20px 50px 20px 20px;
		font-size: 1rem;
	}

	.faq-toggle {
		right: 20px;
		width: 25px;
		height: 25px;
		font-size: 1.3rem;
	}

	.faq-answer {
		padding: 0 20px 20px;
		font-size: 0.95rem;
	}

	/**
	 * CTA Final Section - Mobile (FULL VIEWPORT OPTIMIZADO)
	 */
	.amara-cta-final {
		min-height: 80vh;
		width: 100vw;
		background-attachment: scroll !important;
		background-position: center center;
		background-size: cover;
		padding: 70px 0 65px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Optimized overlay for better image visibility on mobile - FULL VIEWPORT */
	.amara-cta-overlay {
		min-height: 80vh;
		width: 100vw;
		/* Add subtle radial gradient for center focus */
		background:
			radial-gradient(ellipse at center, rgba(27, 58, 95, 0.15) 0%, rgba(27, 58, 95, 0.45) 100%),
			linear-gradient(135deg, rgba(27, 58, 95, 0.35) 0%, rgba(27, 58, 95, 0.20) 50%, rgba(27, 58, 95, 0.30) 100%);
	}

	.amara-cta-content {
		padding: 0 20px;
		position: relative;
		z-index: 3;
	}

	.cta-title {
		font-size: 1.95rem;
		line-height: 1.2;
		margin-bottom: 18px;
		font-weight: 800;
		text-shadow:
			2px 2px 12px rgba(0, 0, 0, 0.75),
			0 0 35px rgba(0, 0, 0, 0.55),
			0 4px 8px rgba(0, 0, 0, 0.35);
	}

	.cta-subtitle {
		font-size: 1.08rem;
		line-height: 1.6;
		margin-bottom: 28px;
		color: rgba(255, 255, 255, 0.99);
		text-shadow:
			1px 1px 8px rgba(0, 0, 0, 0.65),
			0 2px 6px rgba(0, 0, 0, 0.45),
			0 0 20px rgba(0, 0, 0, 0.25);
	}

	.amara-cta-final .btn-primary {
		box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4), 0 0 30px rgba(212, 175, 55, 0.2);
	}

	.amara-cta-final .btn-primary:active {
		transform: translateY(0);
		box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
	}

	/**
	 * Footer - Mobile
	 */
	.site-footer {
		padding: 50px 0 20px;
		text-align: center;
	}

	.footer-widgets {
		grid-template-columns: 1fr;
		gap: 35px;
		margin-bottom: 30px;
	}

	.widget-title {
		font-size: 1.2rem;
		margin-bottom: 15px;
	}

	.widget ul {
		text-align: center;
	}

	.widget ul li {
		margin-bottom: 12px;
	}

	.site-info {
		font-size: 0.85rem;
		padding-top: 25px;
	}

	.developer-credit {
		font-size: 0.8rem;
		margin-top: 8px;
	}

	/**
	 * Social Links - Mobile Optimized
	 */
	.social-links-wrapper {
		margin-top: 25px;
		margin-bottom: 25px;
		padding-bottom: 35px;
	}

	.social-links {
		justify-content: center;
		gap: 18px;
	}

	.social-link a {
		width: 48px;
		height: 48px;
		/* Larger touch targets for mobile */
		-webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
	}

	.social-icon {
		width: 22px;
		height: 22px;
	}

	/* Active state for touch devices */
	.social-link a:active {
		transform: scale(0.95);
		transition: transform 0.1s ease;
	}
}

/**
 * ======================================================================
 * 3. SMALL MOBILE BREAKPOINT (max-width: 480px)
 * ======================================================================
 */
@media (max-width: 480px) {

	/* Typography adjustments */
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.3rem; }

	body {
		font-size: 14px;
	}

	/* Container */
	.container {
		padding: 0 15px;
	}

	/* Section padding */
	.section-padding {
		padding: 40px 0;
	}

	/* Hero Section */
	.amara-hero {
		min-height: 480px;
		padding: 50px 0 30px;
	}

	.amara-hero-content {
		padding: 0 10px;
	}

	.amara-hero-title {
		font-size: 1.65rem;
		line-height: 1.15;
		margin-bottom: 12px;
	}

	.amara-hero-subtitle {
		font-size: 1rem;
		margin-bottom: 10px;
	}

	.amara-hero-description {
		font-size: 0.9rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	/* Buttons */
	.btn {
		width: 100%;
		padding: 12px 20px;
		font-size: 14px;
		white-space: normal;
	}

	.btn-lg {
		padding: 14px 25px;
		font-size: 15px;
	}

	/* Cards padding reduction */
	.amara-pilar-card,
	.amara-servicio-card,
	.amara-testimonio-card {
		padding: 25px 20px;
	}

	/* Quote */
	.amara-quote {
		font-size: 1rem;
		padding: 20px;
	}

	/* Section titles */
	.section-title {
		font-size: 1.5rem;
	}

	/* FAQ */
	.faq-question {
		padding: 18px 45px 18px 18px;
		font-size: 0.95rem;
	}

	/* CTA Final - Small Mobile (OPTIMIZED) */
	.amara-cta-final {
		min-height: 400px;
		padding: 60px 0 55px;
	}

	/* Even lighter overlay for small screens to show more of the image */
	.amara-cta-overlay {
		background:
			radial-gradient(ellipse at center, rgba(27, 58, 95, 0.10) 0%, rgba(27, 58, 95, 0.40) 100%),
			linear-gradient(135deg, rgba(27, 58, 95, 0.30) 0%, rgba(27, 58, 95, 0.15) 50%, rgba(27, 58, 95, 0.25) 100%);
	}

	.amara-cta-content {
		padding: 0 15px;
	}

	.cta-title {
		font-size: 1.75rem;
		line-height: 1.18;
		margin-bottom: 14px;
		text-shadow:
			2px 2px 14px rgba(0, 0, 0, 0.80),
			0 0 40px rgba(0, 0, 0, 0.60),
			0 4px 10px rgba(0, 0, 0, 0.40);
	}

	.cta-subtitle {
		font-size: 1rem;
		line-height: 1.55;
		margin-bottom: 24px;
		text-shadow:
			1px 1px 10px rgba(0, 0, 0, 0.70),
			0 2px 8px rgba(0, 0, 0, 0.50),
			0 0 25px rgba(0, 0, 0, 0.30);
	}

	/* Servicios - Small Mobile */
	.servicio-image {
		height: 210px;
	}

	.servicio-content {
		padding: 24px 18px 22px;
	}

	.servicio-title {
		font-size: 1.3rem;
		margin-bottom: 12px;
	}

	.servicio-description {
		font-size: 0.92rem;
	}

	.servicio-features li {
		font-size: 0.88rem;
		padding: 6px 0 6px 28px;
	}

	.servicio-price {
		font-size: 1.15rem;
	}

	/* Testimonios - Small Mobile */
	.amara-testimonio-card {
		padding: 30px 20px 28px;
	}

	.testimonio-image {
		width: 85px;
		height: 85px;
	}

	.testimonio-text {
		font-size: 0.93rem;
		line-height: 1.65;
	}

	.testimonio-author strong {
		font-size: 1rem;
	}

	/* Logo */
	.site-logo img {
		max-height: 38px;
	}

	/* Section titles */
	.section-title {
		font-size: 1.4rem;
	}

	.section-subtitle {
		font-size: 0.9rem;
	}
}

/**
 * ======================================================================
 * 4. LANDSCAPE MOBILE (max-height: 500px)
 * ======================================================================
 */
@media (max-height: 500px) and (orientation: landscape) {

	.amara-hero {
		min-height: 400px;
		padding: 30px 0;
	}

	.amara-hero-title {
		font-size: 1.5rem;
		margin-bottom: 10px;
	}

	.amara-hero-subtitle {
		font-size: 1rem;
		margin-bottom: 10px;
	}

	.amara-hero-description {
		font-size: 0.9rem;
		margin-bottom: 15px;
	}

	.amara-hero-cta {
		margin-top: 15px;
	}
}

/**
 * ======================================================================
 * 5. ACCESSIBILITY - REDUCED MOTION
 * ======================================================================
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/**
 * ======================================================================
 * 6. PRINT STYLES
 * ======================================================================
 */
@media print {

	.site-header,
	.site-footer,
	.amara-hero-cta,
	.btn {
		display: none !important;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		color: #000;
	}

	.amara-section-header {
		page-break-after: avoid;
	}

	.section-padding {
		padding: 20px 0;
	}
}

/**
 * ======================================================================
 * 7. MOBILE OPTIMIZATIONS (Touch & Performance)
 * ======================================================================
 */
@media (max-width: 767px) {

	/* Touch-friendly tap highlights */
	a, button, .btn, .faq-question {
		-webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
		touch-action: manipulation;
	}

	/* Smooth scrolling for mobile */
	html {
		scroll-behavior: smooth;
	}

	/* Prevent horizontal scroll */
	body {
		overflow-x: hidden;
		width: 100%;
	}

	/* Optimize images for mobile */
	img {
		image-rendering: -webkit-optimize-contrast;
	}

	/* Better text rendering on mobile */
	body, h1, h2, h3, h4, h5, h6, p {
		text-rendering: optimizeLegibility;
	}

	/* Ensure rows don't cause overflow */
	.row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Prevent zoom on input focus (iOS) */
	input, textarea, select {
		font-size: 16px !important;
	}

	/* Stack order optimization */
	.amara-about .row {
		display: flex;
		flex-direction: column;
	}

	.amara-about .row > div {
		order: 2;
	}

	.amara-about .row > div:first-child {
		order: 1;
	}

	/* Mobile-friendly spacing */
	section:not(:last-child) {
		margin-bottom: 0;
	}

	/* Better card hover states for touch */
	.amara-pilar-card:active,
	.amara-servicio-card:active,
	.amara-testimonio-card:active {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}

	/* Ensure section backgrounds cover properly on all devices */
	.amara-hero,
	.amara-cta-final {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	/* Optimize CTA Final overlay transitions */
	.amara-cta-overlay {
		transition: background 0.3s ease;
	}

	/* Better button visibility in CTA sections */
	.amara-cta-final .btn,
	.amara-hero .btn {
		position: relative;
		z-index: 10;
	}

	/* Enhanced card shadows for mobile depth perception */
	.amara-servicio-card,
	.amara-testimonio-card {
		box-shadow:
			0 8px 25px rgba(0, 0, 0, 0.12),
			0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.amara-servicio-card:active,
	.amara-testimonio-card:active {
		box-shadow:
			0 4px 15px rgba(0, 0, 0, 0.15),
			0 1px 4px rgba(0, 0, 0, 0.1);
	}
}

/**
 * ======================================================================
 * 8. BLOG RESPONSIVE STYLES
 * ======================================================================
 */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {

	/* Blog Layout */
	.blog-layout {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	/* Blog Grid */
	.blog-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 30px;
	}

	/* Blog Hero */
	.blog-hero {
		min-height: 350px;
	}

	.blog-hero-title {
		font-size: 2.5rem;
	}

	.blog-hero-subtitle {
		font-size: 1.1rem;
	}

	/* Single Post Hero */
	.single-post-hero {
		min-height: 450px;
	}

	.entry-title {
		font-size: 2.2rem;
	}

	/* Author Bio */
	.author-bio {
		padding: 30px;
		gap: 20px;
	}

	.author-avatar img {
		width: 90px;
		height: 90px;
	}

	/* Related Posts */
	.related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	/* Blog Categories Filter */
	.blog-categories-filter {
		padding: 22px 28px;
		margin-bottom: 35px;
	}

	.filter-label {
		font-size: 0.95rem;
		margin-bottom: 16px;
	}

	.filter-items {
		gap: 10px;
	}

	.filter-item {
		padding: 9px 18px;
		font-size: 0.88rem;
	}

	/* Blog Posts Header */
	.blog-posts-header {
		margin-bottom: 30px;
		padding-bottom: 18px;
	}

	.posts-found {
		font-size: 1.6rem;
	}

	.posts-sort {
		font-size: 0.9rem;
		padding: 9px 18px;
	}

	/* Blog Sidebar */
	.blog-sidebar {
		position: static;
		top: auto;
		max-height: none;
		overflow-y: visible;
	}
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {

	/* Blog Hero */
	.blog-hero {
		min-height: 300px;
	}

	.blog-hero-content {
		padding: 60px 20px;
	}

	.blog-hero-title {
		font-size: 2rem;
		line-height: 1.2;
		margin-bottom: 12px;
	}

	.blog-hero-subtitle {
		font-size: 1rem;
		line-height: 1.5;
	}

	/* Blog Grid */
	.blog-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 40px;
	}

	/* Blog Card */
	.blog-card {
		margin-bottom: 0;
	}

	.blog-card-image {
		height: 220px;
	}

	.blog-card-content {
		padding: 25px;
	}

	.blog-card-meta {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		margin-bottom: 18px;
	}

	.blog-card-title {
		font-size: 1.3rem;
		margin-bottom: 12px;
	}

	.blog-card-excerpt {
		font-size: 0.95rem;
		margin-bottom: 18px;
	}

	.blog-card-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.btn-read-more {
		width: 100%;
		justify-content: center;
		padding: 12px 25px;
	}

	.reading-time {
		align-self: center;
	}

	/* Blog Pagination */
	.blog-pagination {
		margin-top: 50px;
	}

	.blog-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		font-size: 0.9rem;
	}

	/* Single Post Hero */
	.single-post-hero {
		min-height: 400px;
	}

	.single-post-hero-content {
		padding: 30px 0;
	}

	.post-header {
		margin-bottom: 30px;
	}

	.post-categories {
		margin-bottom: 12px;
	}

	.post-category-badge {
		font-size: 0.85rem;
		padding: 5px 12px;
	}

	.entry-title {
		font-size: 1.8rem;
		line-height: 1.25;
		margin-bottom: 18px;
	}

	.post-meta {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		font-size: 0.9rem;
	}

	.post-meta-divider {
		display: none;
	}

	/* Entry Content */
	.entry-content {
		font-size: 1rem;
		line-height: 1.8;
		margin-bottom: 35px;
	}

	.entry-content h2 {
		font-size: 1.6rem;
		margin-top: 35px;
		margin-bottom: 18px;
	}

	.entry-content h3 {
		font-size: 1.4rem;
		margin-top: 30px;
		margin-bottom: 15px;
	}

	.entry-content h4 {
		font-size: 1.2rem;
		margin-top: 25px;
		margin-bottom: 12px;
	}

	.entry-content p {
		margin-bottom: 20px;
	}

	.entry-content blockquote {
		padding: 25px 25px 25px 60px;
		margin: 30px 0;
		font-size: 1.05rem;
	}

	.entry-content blockquote::before {
		font-size: 2.5rem;
		left: 18px;
		top: 18px;
	}

	/* Entry Footer */
	.entry-footer {
		margin-top: 35px;
		padding-top: 25px;
	}

	.entry-footer-meta {
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}

	.cat-links a,
	.tags-links a {
		padding: 4px 10px;
		font-size: 0.85rem;
		margin: 2px;
	}

	/* Author Bio */
	.author-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 30px 25px;
		margin-top: 40px;
	}

	.author-avatar img {
		width: 85px;
		height: 85px;
	}

	.author-info h3 {
		font-size: 1.3rem;
		margin-bottom: 12px;
	}

	.author-description {
		font-size: 0.95rem;
		line-height: 1.65;
		margin-bottom: 18px;
	}

	.author-social {
		justify-content: center;
		gap: 12px;
	}

	.author-social a {
		width: 40px;
		height: 40px;
	}

	/* Post Navigation */
	.post-navigation {
		margin-top: 50px;
		padding-top: 35px;
	}

	.nav-links {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.nav-previous,
	.nav-next {
		padding: 22px;
	}

	.nav-subtitle {
		font-size: 0.85rem;
		margin-bottom: 8px;
	}

	.nav-title {
		font-size: 1rem;
		line-height: 1.4;
	}

	/* Related Posts */
	.related-posts {
		margin-top: 50px;
		padding-top: 35px;
	}

	.related-posts h3 {
		font-size: 1.75rem;
		margin-bottom: 35px;
	}

	.related-posts-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.related-posts .blog-card-image {
		height: 200px;
	}

	.related-posts .blog-card-content {
		padding: 25px;
	}

	/* Sidebar */
	.widget {
		padding: 25px;
		margin-bottom: 25px;
	}

	.widget-title {
		font-size: 1.3rem;
		margin-bottom: 18px;
		padding-bottom: 12px;
	}

	.widget ul li {
		padding: 8px 0;
	}

	.widget_search .search-field {
		padding: 10px 12px;
		font-size: 0.95rem;
	}

	.widget_search .search-submit {
		padding: 10px 20px;
		font-size: 0.95rem;
	}

	/* Blog Categories Filter - Mobile */
	.blog-categories-filter {
		padding: 20px 22px;
		margin-bottom: 30px;
	}

	.filter-label {
		font-size: 0.9rem;
		margin-bottom: 14px;
	}

	.filter-items {
		gap: 8px;
	}

	.filter-item {
		padding: 8px 16px;
		font-size: 0.85rem;
	}

	.filter-item .count {
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		font-size: 0.75rem;
		margin-left: 4px;
	}

	/* Blog Posts Header - Mobile */
	.blog-posts-header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 28px;
		padding-bottom: 16px;
		gap: 15px;
	}

	.posts-found {
		font-size: 1.4rem;
	}

	.posts-sort {
		font-size: 0.85rem;
		padding: 8px 16px;
		align-self: flex-start;
	}

	/* Blog Sidebar - Mobile */
	.blog-sidebar {
		position: static;
		top: auto;
		max-height: none;
		overflow-y: visible;
		margin-top: 40px;
	}
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {

	/* Blog Hero */
	.blog-hero {
		min-height: 280px;
	}

	.blog-hero-content {
		padding: 50px 15px;
	}

	.blog-hero-title {
		font-size: 1.75rem;
		line-height: 1.2;
	}

	.blog-hero-subtitle {
		font-size: 0.95rem;
	}

	/* Blog Card */
	.blog-card-image {
		height: 200px;
	}

	.blog-card-content {
		padding: 20px;
	}

	.blog-card-title {
		font-size: 1.2rem;
	}

	.blog-card-excerpt {
		font-size: 0.9rem;
	}

	.blog-card-meta {
		font-size: 0.85rem;
	}

	.btn-read-more {
		padding: 10px 20px;
		font-size: 0.9rem;
	}

	/* Single Post */
	.single-post-hero {
		min-height: 350px;
	}

	.single-post-hero-content {
		padding: 25px 0;
	}

	.entry-title {
		font-size: 1.6rem;
		line-height: 1.2;
	}

	.post-meta {
		font-size: 0.85rem;
	}

	.entry-content {
		font-size: 0.95rem;
	}

	.entry-content h2 {
		font-size: 1.5rem;
	}

	.entry-content h3 {
		font-size: 1.3rem;
	}

	.entry-content h4 {
		font-size: 1.1rem;
	}

	.entry-content blockquote {
		padding: 20px 20px 20px 50px;
		font-size: 1rem;
	}

	.entry-content blockquote::before {
		font-size: 2rem;
		left: 15px;
		top: 15px;
	}

	/* Author Bio */
	.author-bio {
		padding: 25px 20px;
	}

	.author-avatar img {
		width: 75px;
		height: 75px;
	}

	.author-info h3 {
		font-size: 1.2rem;
	}

	.author-description {
		font-size: 0.9rem;
	}

	.author-social a {
		width: 36px;
		height: 36px;
	}

	/* Post Navigation */
	.nav-previous,
	.nav-next {
		padding: 20px;
	}

	.nav-subtitle {
		font-size: 0.8rem;
	}

	.nav-title {
		font-size: 0.95rem;
	}

	/* Related Posts */
	.related-posts h3 {
		font-size: 1.5rem;
	}

	.related-posts .blog-card-image {
		height: 180px;
	}

	.related-posts .blog-card-content {
		padding: 20px;
	}

	/* Sidebar */
	.widget {
		padding: 20px;
	}

	.widget-title {
		font-size: 1.2rem;
	}

	/* Blog Pagination */
	.blog-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: 0.85rem;
	}

	/* Blog Categories Filter - Small Mobile */
	.blog-categories-filter {
		padding: 18px 20px;
		margin-bottom: 28px;
	}

	.filter-label {
		font-size: 0.88rem;
		margin-bottom: 12px;
	}

	.filter-items {
		gap: 8px;
	}

	.filter-item {
		padding: 7px 14px;
		font-size: 0.82rem;
	}

	.filter-item .count {
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		font-size: 0.72rem;
	}

	/* Blog Posts Header - Small Mobile */
	.blog-posts-header {
		margin-bottom: 25px;
		padding-bottom: 14px;
		gap: 12px;
	}

	.posts-found {
		font-size: 1.3rem;
	}

	.posts-sort {
		font-size: 0.82rem;
		padding: 7px 14px;
	}

	/* Blog Sidebar - Small Mobile */
	.blog-sidebar {
		margin-top: 35px;
	}
}