/*
 * Taxi Tải Nghệ An — responsive.css
 * main.css viết theo desktop (>=1280px). File này ghi đè dần xuống các
 * breakpoint nhỏ hơn: 1024-1279 / 768-1023 / 480-767 / <480.
 */

/* ==========================================================================
   Desktop 1024 - 1279
   ========================================================================== */
@media (max-width: 1279px) {
	.container { padding-inline: 20px; }

	.hero-usp-list { grid-template-columns: repeat(2, auto); }

	.service-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.fleet-grid { grid-template-columns: repeat(3, 1fr); }
	.stats-grid { grid-template-columns: repeat(4, 1fr); }
	.news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Tablet 768 - 1023
   ========================================================================== */
@media (max-width: 1023px) {
	.primary-navigation { display: none; }
	.header-call-btn { max-width: 220px; padding-right: 4px; }
	.header-call-btn span { opacity: 1; }
	.mobile-menu-toggle { display: inline-flex; }

	.section-hero { min-height: 480px; }
	.hero-title { font-size: 34px; }
	.hero-content { max-width: 100%; }

	.quote-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.form-field-submit { grid-column: span 2; }

	.service-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.fleet-grid { grid-template-columns: repeat(2, 1fr); }

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

	.process-list { flex-wrap: wrap; row-gap: 32px; }
	.process-list::before { display: none; }
	.process-step { flex: 0 0 33.333%; }

	.section-pricing-cta { grid-template-columns: 1fr; }
	.pricing-cta-half { padding: 40px 28px; }

	/* Tablet: 2 thẻ/hàng, thẻ thừa (nếu có) trượt ngang được. */
	.testimonial-card { flex-basis: calc((100% - 20px) / 2); }

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

	.news-grid { grid-template-columns: repeat(3, 1fr); }

	.footer-inner {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 40px;
	}
	.footer-col-contact { grid-column: 1 / -1; }

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

	.ttna-detail-layout { grid-template-columns: 1fr; }
	.ttna-detail-sidebar { position: static; }
	.ttna-contact-layout { grid-template-columns: 1fr; }
	.ttna-pricing-commitments { grid-template-columns: 1fr; }
	.ttna-about-intro { grid-template-columns: 1fr; }
	.ttna-about-card { position: static; }
	.ttna-policy-list-plain { grid-template-columns: 1fr; }

	.ttna-service-archive-grid { grid-template-columns: repeat(2, 1fr); }
	.ttna-fleet-archive-grid { grid-template-columns: repeat(2, 1fr); }
	.ttna-pricing-calc { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.ttna-post-cta { flex-wrap: wrap; padding: 24px; background-position: center; }
	.ttna-post-cta-content { max-width: none; }
	.ttna-post-cta-header { flex-wrap: wrap; }
	.ttna-post-cta-actions { width: 100%; }
	.ttna-post-cta-phone { flex: 1; justify-content: center; }

	.ttna-service-archive-grid { grid-template-columns: 1fr; }
	.ttna-fleet-archive-grid { grid-template-columns: 1fr; }
	.ttna-why-us-band { flex-direction: column; }
	.ttna-why-us-pill { flex-basis: auto; }

	.ttna-pricing-commitments { grid-template-columns: 1fr; }
	.ttna-pricing-commitments--wide .ttna-pricing-commitment-item span:last-child { white-space: normal; }
	.ttna-pricing-calc-info,
	.ttna-pricing-calc-form { padding: 28px 22px; }

	.ttna-pricing-final-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.ttna-pricing-final-cta .ttna-detail-cta { justify-content: center; }
}

@media (max-width: 1023px) {
	.ttna-pricing-commitments--wide { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Mobile lớn 480 - 767
   ========================================================================== */
@media (max-width: 767px) {
	.container { padding-inline: 16px; }

	.header-inner { padding-block: 8px; }
	.site-logo-text small { display: none; }
	/* Header mobile chỉ giữ logo + nút menu — nút gọi và tìm kiếm đã có
	   trong menu off-canvas (mobile-nav-actions / mobile-nav-search) và
	   thanh hành động cố định phía dưới (mobile-action-bar). */
	.header-call-btn,
	.header-search { display: none; }

	.section-hero { min-height: 0; padding-block: 40px 0; }
	.hero-overlay { background: linear-gradient(180deg, rgba(16,38,92,0.55) 0%, rgba(16,38,92,0.92) 55%, rgba(16,38,92,0.98) 100%); }
	.hero-inner { padding-block: 32px 24px; }
	.hero-title { font-size: 28px; }
	.hero-subtitle { font-size: 15.5px; }
	.hero-tagline { font-size: 14px; }
	.hero-usp-list { grid-template-columns: repeat(1, auto); gap: 10px; }
	.hero-cta { flex-direction: column; }
	.hero-cta .btn { width: 100%; }

	.section-quote-form { margin-top: -32px; }
	.quote-form-card { padding: 20px; }
	.quote-form-grid { grid-template-columns: 1fr; }
	.form-field-submit { grid-column: auto; }
	.quote-form-commitments { flex-direction: column; align-items: flex-start; gap: 12px; }

	.section-title { font-size: 22px; margin-bottom: 28px; }

	.section-services,
	.section-fleet,
	.section-process,
	.section-testimonials,
	.section-coverage,
	.section-news { padding-block: 20px; }

	.service-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
	.service-card-title { white-space: normal; font-size: 14px; }
	.fleet-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.fleet-card-body { padding: 12px; }

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

	.process-list { flex-direction: column; row-gap: 20px; }
	.process-step { flex: none; flex-direction: row; text-align: left; gap: 14px; }
	.process-step-title { max-width: none; }

	.pricing-cta-half { padding: 32px 20px; }
	.pricing-cta-half h2 { font-size: 20px; }
	.pricing-cta-phone { font-size: 26px; }
	.pricing-cta-buttons { flex-direction: column; }
	.pricing-cta-buttons .btn { width: 100%; }

	/* Mobile: 1 thẻ/hàng, vuốt ngang để xem thẻ tiếp theo. */
	.testimonial-card { flex-basis: 100%; }
	.testimonial-slider.has-nav { padding-inline: 40px; }

	.coverage-list,
	.coverage-list-intercity { grid-template-columns: 1fr; }

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

	.footer-inner { grid-template-columns: 1fr 1fr; row-gap: 32px; padding-block: 20px; }
	.footer-col-contact { grid-column: 1 / -1; }
	.footer-col-fanpage { grid-column: 1 / -1; }

	.footer-bottom-inner { flex-direction: column; align-items: flex-start; }

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

	.ttna-archive-header .page-title { font-size: 24px; }
	.ttna-detail-content .entry-header { flex-direction: column; align-items: flex-start; }
	.ttna-detail-cta { flex-direction: column; }
	.ttna-detail-cta .btn { width: 100%; }
	.ttna-fleet-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.ttna-specs-table th { width: auto; }
	.ttna-pricing-commitments { grid-template-columns: 1fr; }
	.ttna-contact-form-box { padding: 20px; }

	.mobile-action-bar { display: flex; }
	body { padding-bottom: 64px; }
	.back-to-top { right: 14px; bottom: 74px; width: 42px; height: 42px; }
}

/* ==========================================================================
   Mobile nhỏ < 480
   ========================================================================== */
@media (max-width: 479px) {
	.hero-title { font-size: 24px; }
	.section-title { font-size: 20px; }

	.service-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
	.service-card { padding: 18px 10px; }

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

	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.stat-value { font-size: 18px; }

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

	.footer-inner { grid-template-columns: 1fr; }
	.footer-col-fanpage { grid-column: auto; }

	.mobile-action-bar a { font-size: 12px; padding: 12px 6px; }
}

/* ==========================================================================
   Desktop lớn >= 1280 — tinh chỉnh nhẹ khoảng trắng
   ========================================================================== */
@media (min-width: 1280px) {
	.container { padding-inline: 24px; }
}