/* ==========================================================================
   MOBILE.CSS — Responsive, 390px breakpoints (M01 - M11)
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL MOBILE OVERRIDES (≤ 1024px: tablet)
   -------------------------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

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

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

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

	.home-about__images { width: 340px; height: 280px; }
	.about-img-sm       { width: 160px; height: 200px; }
	.about-img-lg       { width: 220px; height: 160px; }

	.home-solution__inner,
	.home-estimate__inner,
	.home-awards__inner,
	.about-mission__inner { flex-direction: column; gap: 40px; }

	.home-solution__img,
	.home-estimate__img  { min-height: 300px; }
	.home-solution__img img,
	.home-estimate__img img { min-height: 300px; }

	.about-mission__img img { height: 300px; }

	.contact-body { flex-direction: column; }
	.contact-info-col { width: 100%; }

	.single-body,
	.archive-body { flex-direction: column; }
	.archive-sidebar,
	.single-sidebar { width: 100%; }
	.sticky-sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   TABLET ONLY (768px - 1024px)
   -------------------------------------------------------------------------- */
@media ( max-width: 1024px ) and ( min-width: 769px ) {
	.hero-title { font-size: 3rem; }
	.property-specs-row { grid-template-columns: repeat(2, 1fr); rowgap: 16px; }
}

/* --------------------------------------------------------------------------
   MOBILE (≤ 768px)
   -------------------------------------------------------------------------- */
@media ( max-width: 768px ) {
	/* Layout */
	:root { --header-height: 64px; }

	/* Header */
	.main-navigation { display: none; }
	.hamburger-btn   { display: flex; }

	/* Hero */
	.home-hero { height: 320px; }
	.hero-title { font-size: 2.25rem; }
	.hero-sub   { font-size: .9375rem; }
	.hero-stats { flex-wrap: wrap; }
	.stat-item  { flex: none; }

	/* Search */
	.search-form { flex-direction: column; }
	.search-field { border-right: none; border-bottom: 1px solid var(--color-border); }
	.search-btn   { width: 100%; justify-content: center; border-radius: 0; }

	/* Grids */
	.property-grid,
	.news-grid,
	.project-grid { grid-template-columns: 1fr; }

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

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.footer-bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
	.footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px; }

	/* Page hero */
	.page-hero { height: 200px; }
	.page-hero__title { font-size: 1.75rem; }

	/* Single/Archive body */
	.single-body { padding: 24px 0 48px; }
	.archive-body { padding: 24px 0 48px; }

	/* Property meta */
	.property-specs-row { grid-template-columns: repeat(2, 1fr); gap: 1px; }
	.property-meta__price { font-size: 1.5rem; }

	/* Project Hero */
	.project-hero { height: 320px; }
	.project-hero__title { font-size: 2rem; }

	/* Contact form */
	.contact-form-card { padding: 24px 20px; }
	.contact-form-row { grid-template-columns: 1fr; }

	/* Article */
	.article-title { font-size: 1.625rem; }

	/* Stats bar */
	.stats-bar { flex-wrap: wrap; }
	.stats-bar__divider { display: none; }
	.stats-bar__item { flex: none; width: 50%; padding: 20px; }

	/* Team grid */
	.team-grid { grid-template-columns: 1fr 1fr; }

	/* About images **/
	.home-about__images { display: none; }

	/* Awards */
	.awards-stat-grid { grid-template-columns: 1fr 1fr; }

	/* CTA banner */
	.cta-banner { padding: 48px 0; }
	.cta-banner__inner { flex-direction: column; text-align: center; }
	.cta-banner__title { font-size: 1.5rem; }

	/* Mobile sticky */
	.mobile-sticky-cta {
		display: flex !important;
	}
	/* Push page content above sticky bar */
	body { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE (≤ 480px)
   -------------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.hero-title    { font-size: 1.875rem; }
	.hero-actions  { flex-direction: column; }

	.filter-tabs   { flex-wrap: nowrap; }

	.about-mini-stats { flex-direction: column; gap: 16px; }

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

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

	.project-tabs-nav { overflow-x: auto; white-space: nowrap; }

	.contact-form-card { padding: 20px 16px; }

	.article-title { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   FILTER BLOCK MOBILE TOGGLE (hidden on mobile, toggle via JS)
   -------------------------------------------------------------------------- */
@media ( max-width: 768px ) {
	.archive-sidebar .filter-block {
		display:  none;
		position: fixed;
		bottom:   0;
		left:     0;
		right:    0;
		z-index:  900;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		max-height: 80vh;
		overflow-y: auto;
		box-shadow: var(--shadow-lg);
	}
	.archive-sidebar .filter-block.is-open { display: flex; flex-direction: column; }

	.filter-block-backdrop {
		display: none;
		position: fixed;
		inset:    0;
		background: rgba(0,0,0,.4);
		z-index: 899;
	}
	.filter-block-backdrop.is-open { display: block; }

	.filter-trigger-btn {
		display:         flex !important;
		align-items:     center;
		gap:             8px;
		padding:         10px 20px;
		background:      var(--color-primary);
		color:           #fff;
		border:          none;
		border-radius:   var(--radius-sm);
		font-size:       .9rem;
		font-weight:     600;
		cursor:          pointer;
		margin-bottom:   16px;
	}
	.filter-trigger-btn svg { width: 16px; height: 16px; }
}

@media ( min-width: 769px ) {
	.filter-trigger-btn  { display: none; }
	.filter-block-backdrop { display: none !important; }
}

/* ==========================================================================
   SECTION: HOME PAGE — Section padding & layout overrides
   ========================================================================== */

@media ( max-width: 1200px ) {
	.container {
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media ( max-width: 768px ) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Section header */
@media ( max-width: 768px ) {
	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 24px;
	}
	.section-title { font-size: 1.375rem; }
	.section-see-all { font-size: .8125rem; }
}

/* Home Property/Project/News grids */
@media ( max-width: 1024px ) {
	.property-grid,
	.project-grid,
	.news-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media ( max-width: 576px ) {
	.property-grid,
	.project-grid,
	.news-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Home Solutions / Estimate sections */
@media ( max-width: 1024px ) {
	.home-solution__inner,
	.home-estimate__inner { flex-direction: column; gap: 40px; }
	.home-solution__img,
	.home-estimate__img  { min-height: 260px; border-radius: var(--radius-md); }
}
@media ( max-width: 576px ) {
	.home-solution__inner,
	.home-estimate__inner { gap: 28px; }
}

/* About Story section */
@media ( max-width: 1024px ) {
	.home-about__inner { flex-direction: column; gap: 32px; }
	.home-about__images { width: 100%; }
	.about-img-sm  { height: 180px; }
	.about-img-lg  { height: 220px; }
}
@media ( max-width: 576px ) {
	.home-about__images { display: none; }
	.about-heading { font-size: 1.5rem; }
	.about-mini-stats { flex-direction: column; gap: 16px; }
}

/* Awards / Stats sections */
@media ( max-width: 1024px ) {
	.home-awards__inner { flex-direction: column; gap: 40px; }
	.home-awards-left  { width: 100%; }
	.awards-stat-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 576px ) {
	.awards-heading    { font-size: 1.625rem; }
	.awards-stat-num   { font-size: 1.75rem; }
	.awards-stat-card  { padding: 20px; }
}

/* Partners */
@media ( max-width: 768px ) {
	.partners-heading { font-size: 1.375rem; margin-bottom: 28px; }
	.partners-row     { flex-wrap: wrap; gap: 16px; justify-content: center; }
	.partner-name     { font-size: .8125rem; }
}

/* CTA banner */
@media ( max-width: 768px ) {
	.cta-banner { padding: 48px 0; }
	.cta-banner__inner { flex-direction: column; text-align: center; }
	.cta-banner__title { font-size: 1.5rem; }
}

/* ==========================================================================
   SECTION: NEWS ARCHIVE (home.php / archive news)
   ========================================================================== */

@media ( max-width: 1024px ) {
	.news-layout {
		grid-template-columns: 1fr;
		padding:               24px 0 40px;
	}
	.news-featured-card {
		grid-template-columns: 1fr;
		height:                auto;
	}
	.news-featured-img { height: 220px; }
	.news-grid-small   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media ( max-width: 576px ) {
	.news-grid-small { grid-template-columns: 1fr; }
	.news-featured-body  { padding: 20px; }
	.news-featured-title { font-size: 1.0625rem; }
}

/* ==========================================================================
   SECTION: PROJECT ARCHIVE
   ========================================================================== */

@media ( max-width: 1024px ) {
	.project-filter-bar  { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
	.project-grid-wrap   { padding: 24px 20px 40px; }
	.project-row-featured {
		grid-template-columns: 1fr;
		height:               auto;
		gap:                  16px;
	}
	.project-card-featured .project-card-img { height: 240px; }
	.project-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media ( max-width: 576px ) {
	.project-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION: SINGLE PROPERTY DETAIL
   ========================================================================== */

@media ( max-width: 1024px ) {
	.single-body { flex-direction: column; }
	.single-sidebar { width: 100%; }
	.sticky-sidebar { position: static; }
	.property-gallery__thumbs { grid-template-columns: repeat(3,1fr); }
}
@media ( max-width: 768px ) {
	.property-meta__price { font-size: 1.5rem; }
	.property-specs-row   { grid-template-columns: repeat(2, 1fr); }
	.single-gallery-grid  { grid-template-columns: 1fr; height: auto; }
	.gallery-main         { height: 240px; }
	.gallery-thumbs       { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SECTION: SINGLE PROJECT DETAIL
   ========================================================================== */

@media ( max-width: 1024px ) {
	.project-hero         { height: 340px; }
	.project-hero__title  { font-size: 2rem; }
	.project-tabs-nav     { overflow-x: auto; white-space: nowrap; }
}
@media ( max-width: 576px ) {
	.project-hero         { height: 260px; }
	.project-hero__title  { font-size: 1.625rem; }
	.stats-bar            { flex-wrap: wrap; }
	.stats-bar__divider   { display: none; }
	.stats-bar__item      { flex: none; width: 50%; padding: 16px; }
}

/* ==========================================================================
   SECTION: SINGLE POST (news detail)
   ========================================================================== */

@media ( max-width: 1024px ) {
	.single-body { flex-direction: column; padding: 24px 0 40px; }
	.single-sidebar { width: 100%; }
	.article-title { font-size: 1.625rem; }
}
@media ( max-width: 576px ) {
	.article-title   { font-size: 1.375rem; }
	.article-content { font-size: .9375rem; line-height: 1.8; }
	.article-hero-img { border-radius: 0; }
	.related-posts__title { font-size: 1.1rem; }
	.news-grid--related { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION: ABOUT PAGE (Giới Thiệu)
   ========================================================================== */

@media ( max-width: 1024px ) {
	.about-mission { padding: 48px 0; }
	.about-mission__inner { flex-direction: column; gap: 40px; }
	.about-mission__img img { height: 300px; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 576px ) {
	.about-mission__img img { height: 240px; }
	.team-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION: CONTACT PAGE (Liên Hệ)
   ========================================================================== */

@media ( max-width: 1024px ) {
	.contact-body     { flex-direction: column; padding: 32px 0 48px; }
	.contact-info-col { width: 100%; }
	.contact-form-row { grid-template-columns: 1fr; }
	.contact-form-card { padding: 24px 20px; }
}
@media ( max-width: 576px ) {
	.contact-form-card { padding: 20px 16px; }
}

/* ==========================================================================
   SECTION: 404 PAGE
   ========================================================================== */

@media ( max-width: 768px ) {
	.error-404-section    { padding: 60px 0; }
	.error-404-num        { font-size: 7rem; }
	.error-404-house svg  { width: 80px; height: 80px; }
	.error-404-title      { font-size: 1.75rem; }
	.error-404-actions    { flex-direction: column; }
	.error-404-actions .btn { width: 100%; justify-content: center; }
	.error-404-suggest-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION: FOOTER
   ========================================================================== */

@media ( max-width: 1024px ) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.footer-top  { padding: 48px 0 40px; }
}
@media ( max-width: 768px ) {
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.footer-top  { padding: 40px 0 32px; }
	.footer-bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
	.footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ==========================================================================
   SECTION: MOBILE STICKY BAR
   ========================================================================== */

@media ( max-width: 1024px ) {
	.mobile-sticky-cta { display: flex !important; }
	body               { padding-bottom: 68px; }
}

/* ==========================================================================
   SECTION: MISC — overflow, images, breadcrumbs
   ========================================================================== */

@media ( max-width: 768px ) {
	body, .site    { overflow-x: hidden; }
	img            { max-width: 100%; height: auto; }
	.breadcrumb    { flex-wrap: wrap; }
	.page-hero__title { font-size: 1.75rem; }
	.page-hero     { height: 200px; }
}