/**
 * PlaceFound Theme — Responsive Breakpoint Rules
 *
 * Mobile-first responsive optimizations for 320px–480px mobile devices,
 * 768px tablets, 1024px desktop, and 1200px+ large displays.
 *
 * @package PlaceFoundTheme
 * @version 1.0.0
 */

/* ==========================================================================
   1. Base Mobile & Small Screens (< 480px)
   ========================================================================== */
@media (max-width: 479px) {
	:root {
		--pf-font-size-hero: 1.75rem; /* 28px */
		--pf-font-size-h1: 1.5rem;    /* 24px */
		--pf-font-size-h2: 1.25rem;   /* 20px */
		--pf-space-6: 1.25rem;
		--pf-space-8: 1.5rem;
		--pf-space-10: 2rem;
		--pf-space-12: 2.25rem;
	}

	.pf-container {
		padding-left: var(--pf-space-4);
		padding-right: var(--pf-space-4);
	}

	/* Hero Section */
	.pf-home-hero {
		padding: var(--pf-space-6) 0 var(--pf-space-8);
	}

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

	.pf-hero-subtitle {
		font-size: 0.9375rem;
		margin-bottom: var(--pf-space-6);
	}

	.pf-hero-search-group {
		padding: var(--pf-space-3);
		gap: var(--pf-space-3);
	}

	.pf-hero-input,
	.pf-hero-select {
		height: 48px;
		min-height: 48px;
		font-size: 1rem; /* 16px to prevent iOS Safari auto-zoom */
		background-color: var(--pf-surface-subtle);
		border-radius: var(--pf-radius-control);
	}

	.pf-hero-submit-btn {
		width: 100%;
		height: 48px;
		min-height: 48px;
		font-size: 1rem;
		justify-content: center;
	}

	.pf-hero-quick-tags {
		align-items: flex-start;
		gap: var(--pf-space-2);
		text-align: left;
		width: 100%;
	}

	.pf-quick-tags-list {
		justify-content: flex-start;
		width: 100%;
		gap: 6px;
	}

	.pf-tag-pill {
		font-size: 0.8125rem;
		padding: 0.3rem 0.75rem;
		min-height: 34px;
	}

	/* Grids & Cards */
	.pf-category-grid,
	.pf-places-grid,
	.pf-city-grid,
	.pf-story-grid,
	.pf-trust-grid {
		grid-template-columns: 1fr;
		gap: var(--pf-space-4);
	}

	.pf-card-body {
		padding: var(--pf-space-4);
	}

	.pf-card-footer {
		padding: var(--pf-space-3) var(--pf-space-4);
	}

	.pf-story-card-body {
		padding: var(--pf-space-4);
	}

	/* Trust Banner & CTA Box */
	.pf-trust-banner {
		padding: var(--pf-space-5);
	}

	.pf-trust-title {
		font-size: 1.25rem;
	}

	.pf-cta-box {
		padding: var(--pf-space-6) var(--pf-space-4);
	}

	.pf-cta-title {
		font-size: 1.375rem;
	}

	.pf-cta-desc {
		font-size: 0.9375rem;
		margin-bottom: var(--pf-space-6);
	}

	.pf-cta-actions {
		width: 100%;
	}

	.pf-cta-actions .pf-btn {
		width: 100%;
		justify-content: center;
	}

	.pf-place-actions-bar {
		grid-template-columns: 1fr;
	}

	.pf-editorial-card-actions {
		flex-direction: column;
	}

	.pf-editorial-card-actions .pf-btn {
		width: 100%;
	}
}

/* ==========================================================================
   1.1. Extra Small Mobile Displays (<= 360px)
   ========================================================================== */
@media (max-width: 360px) {
	.pf-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.pf-hero-title {
		font-size: 1.5rem;
	}

	.pf-hero-subtitle {
		font-size: 0.875rem;
	}

	.pf-hero-search-group {
		padding: 10px;
		gap: 10px;
	}

	.pf-hero-input,
	.pf-hero-select {
		padding-left: 2.25rem;
		padding-right: 0.75rem;
	}

	.pf-search-icon,
	.pf-location-icon {
		left: 10px;
	}

	.pf-tag-pill {
		font-size: 0.75rem;
		padding: 0.25rem 0.6rem;
		min-height: 30px;
	}
}

/* ==========================================================================
   2. Small Tablets & Landscape Mobile (>= 480px and < 768px)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {
	.pf-hero-search-group {
		padding: var(--pf-space-3);
		gap: var(--pf-space-3);
	}

	.pf-hero-input,
	.pf-hero-select {
		min-height: 48px;
		font-size: 1rem;
	}

	.pf-hero-submit-btn {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}

	.pf-category-grid,
	.pf-places-grid,
	.pf-city-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--pf-space-4);
	}

	.pf-place-actions-bar {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   3. Medium Tablets (>= 768px and < 1024px)
   ========================================================================== */
@media (min-width: 768px) {
	:root {
		--pf-font-size-hero: 2.25rem; /* 36px */
		--pf-font-size-h1: 1.875rem;  /* 30px */
	}

	.pf-place-header {
		padding: var(--pf-space-8) 0;
	}
}

/* ==========================================================================
   4. Desktop Layouts (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
	.pf-site-main {
		padding-top: var(--pf-space-6);
		padding-bottom: var(--pf-space-16);
	}
}

/* ==========================================================================
   5. Ultra-Wide & Large Desktop (>= 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
	.pf-container {
		padding-left: var(--pf-space-6);
		padding-right: var(--pf-space-6);
	}
}

/* ==========================================================================
   6. Overflow & Viewport Hardening
   ========================================================================== */
html,
body,
.pf-site-main,
.pf-container,
.pf-home-hero,
.pf-section {
	overflow-x: hidden;
	max-width: 100vw;
}