/* ==========================================================
   Ashford & Vale Estates — assets/css/responsive.css
   Master responsive pass. Load this LAST (after tokens.css,
   base.css, components.css, layout.css) so it can override.
   Breakpoints: 1024px (tablet), 768px (small tablet), 640px (mobile), 480px (small phone)
   ========================================================== */

/* ============================================================
   1. GLOBAL / CONTAINER
   ============================================================ */
@media (max-width: 1024px) {
	.section { padding-left: var(--space-4); padding-right: var(--space-4); }
	:root { --container-padding: 20px; }
}
@media (max-width: 480px) {
	:root { --container-padding: 16px; --header-height: 60px; }
	.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* ============================================================
   2. HEADER / NAV
   ============================================================ */
@media (max-width: 480px) {
	.site-logo { font-size: 16px; }
	.nav-toggle { width: 36px; height: 36px; }
}

/* ============================================================
   3. HERO + SEARCH BAR
   ============================================================ */
@media (max-width: 1024px) {
	.hero__title { font-size: 30px; }
}
@media (max-width: 768px) {
	.hero { padding: var(--space-6) var(--space-4); }
	.hero__title { font-size: 24px; }
	.hero__subtitle { font-size: 13px; }
	.filter-bar--hero {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}
	.filter-bar--hero .field-group { min-width: 0; width: 100%; }
	.filter-bar--hero .btn { width: 100%; }
}
@media (max-width: 480px) {
	.hero__title { font-size: 20px; line-height: 1.3; }
	.eyebrow { font-size: 10px; }
}

/* ============================================================
   4. PROPERTY GRID / CARDS
   ============================================================ */
@media (max-width: 900px) {
	.property-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.property-grid { grid-template-columns: 1fr !important; }
	.property-card__specs { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
}

/* ============================================================
   5. SEARCH / FILTER PAGE
   ============================================================ */
@media (max-width: 768px) {
	.filter-bar { flex-direction: column; align-items: stretch; }
	.filter-bar .field-group { min-width: 0; }
	.results-toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.status-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
	.status-tab { flex-shrink: 0; }
}

/* ============================================================
   6. MAP SECTION
   ============================================================ */
@media (max-width: 768px) {
	.map-preview { height: 320px !important; }
	.section__head { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
	.section__head .btn { align-self: flex-start; }
}
@media (max-width: 480px) {
	.map-preview { height: 260px !important; }
	.map-preview-legend { font-size: 12px; padding: 6px 12px; }
}

/* ============================================================
   7. AGENT ROW
   ============================================================ */
.agent-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}
@media (max-width: 768px) {
	.agent-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.agent-row { grid-template-columns: 1fr; }
}

/* ============================================================
   8. SINGLE PROPERTY PAGE
   ============================================================ */
@media (max-width: 1024px) {
	.property-layout { grid-template-columns: 1fr; }
	.property-sidebar { position: static; }
	.property-gallery__main { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
	.property-main__title { font-size: 22px; }
	.property-specs-bar { gap: var(--space-4); padding: var(--space-3) var(--space-4); overflow-x: auto; flex-wrap: nowrap; }
	.mortgage-calc__inputs { grid-template-columns: 1fr 1fr; }
	.property-gallery__main { aspect-ratio: 4 / 3; }
	.property-gallery__thumbs { display: none; }
}

/* ============================================================
   9. ABOUT / CONTACT / VALUATION PAGES
   ============================================================ */
@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; }
	.valuation-page--split { grid-template-columns: 1fr !important; }
	.valuation-page__image { min-height: 240px; order: -1; }
}
@media (max-width: 768px) {
	.value-grid { grid-template-columns: 1fr; }
	.stat-row--wide { gap: var(--space-5); }
	.about-hero h1, .contact-hero h1, .valuation-form-card h1 { font-size: 24px; }
}
@media (max-width: 640px) {
	.avle-form .form-row { flex-direction: column; gap: var(--space-4); }
	.valuation-form-card { padding: var(--space-5); }
}

/* ============================================================
   10. FOOTER
   ============================================================ */
@media (max-width: 768px) {
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.footer-col--brand { grid-column: span 2; }
}
@media (max-width: 480px) {
	.site-footer__top { grid-template-columns: 1fr; }
	.footer-col--brand { grid-column: span 1; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   11. FAQ / TESTIMONIAL
   ============================================================ */
@media (max-width: 480px) {
	.faq-item summary { font-size: 13px; padding: var(--space-3); }
	.testimonial-card { padding: var(--space-4); flex-direction: column; text-align: center; }
}

/* ============================================================
   12. TOUCH-TARGET SAFETY NET
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
	.btn, .status-tab, .view-toggle__btn, .property-card__save,
	.property-gallery__nav, .avle-row-action, .nav-toggle {
		min-height: 40px;
	}
}

/* ============================================================
   13. WP-ADMIN: dashboard + enquiries page
   ============================================================ */
@media (max-width: 782px) {
	.avle-stats-row { flex-direction: column; }
	.avle-stat-mini { width: 100%; }
	.avle-table-card { overflow-x: auto; }
	.avle-table { min-width: 640px; }
}