/* ==========================================================================
   Knack Theme: Responsive Breakpoints & Mobile
   ========================================================================== */

/* --- Tablet: 1024px --- */
@media (max-width: 1024px) {
	:root {
		--knack-header-height: 60px;
	}

	.knack-container {
		padding: 0 var(--knack-space-md);
	}

	/* Category bar adjusts to header height */
	.knack-category-bar {
		top: calc(60px + var(--knack-admin-bar-offset, 0px));
	}

	/* Discovery hero smaller */
	.knack-discovery-hero h1 {
		font-size: 1.75rem;
	}
}

/* --- Mobile: 768px --- */
@media (max-width: 768px) {
	:root {
		--knack-header-height: 56px;
	}

	/* Hide desktop nav */
	.knack-header-nav {
		display: none;
	}

	/* Show mobile toggle */
	.knack-mobile-toggle {
		display: flex;
	}

	/* Stack content */
	.knack-content-area {
		padding-top: var(--knack-space-lg);
		padding-bottom: var(--knack-space-xl);
	}

	/* Page headers */
	.knack-page-title {
		font-size: 1.375rem;
	}

	/* Typography scale down */
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.375rem; }
	h3 { font-size: 1.125rem; }

	/* Post grid: 2 columns on mobile */
	.knack-post-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Sidebar stacks below content */
	.knack-sidebar {
		margin-top: var(--knack-space-xl);
	}

	/* Category bar */
	.knack-category-bar {
		top: calc(56px + var(--knack-admin-bar-offset, 0px));
	}
	.knack-category-chip {
		padding: 8px 12px;
	}

	/* Discovery sections */
	.knack-discovery-section {
		padding: var(--knack-space-2xl) 0;
	}
	.knack-section-title {
		font-size: var(--knack-font-size-xl);
	}
	.knack-discovery-hero h1 {
		font-size: 1.5rem;
	}
	.knack-discovery-hero p {
		font-size: var(--knack-font-size-base);
	}

	/* Scroll rows */
	.knack-scroll-row {
		gap: var(--knack-space-sm);
	}
	.knack-creator-card {
		width: 160px;
		padding: var(--knack-space-md);
	}
	.knack-event-card {
		width: 260px;
	}

	/* CTA banner */
	.knack-cta-banner {
		padding: var(--knack-space-xl);
		border-radius: var(--knack-radius-2xl);
	}
}

/* --- Phone landscape / small tablet (640px)
   Fills the awkward gap between 768 (tablet portrait) and 480 (phones).
   Catches iPhone SE landscape (667px), folded phones, narrow tablets. */
@media (max-width: 640px) {
	/* Tighten section rhythm so content doesn't feel stretched. */
	.knack-discovery-section,
	.knack-section--galleries {
		padding-block: var(--knack-space-xl);
	}

	/* Drop discovery hero from 2 stat columns to wrap-naturally. */
	.knack-hero-quick-stats {
		flex-wrap: wrap;
	}

	/* Side panel as full-width drawer when open (better thumb reach than
	   the desktop 260px). Mobile JS toggles `.knack-side-panel--open`. */
	.knack-side-panel.knack-side-panel--open {
		width: min(320px, 88vw);
	}
}

/* --- Small mobile: 480px --- */
@media (max-width: 480px) {
	.knack-container {
		padding: 0 var(--knack-space-sm);
	}

	.knack-header-inner {
		padding: 0 var(--knack-space-sm);
	}

	/* Single column on small phones */
	.knack-post-grid {
		grid-template-columns: 1fr;
	}

	.knack-event-card {
		width: 220px;
	}

	.knack-card-body {
		padding: var(--knack-space-sm) var(--knack-space-md) var(--knack-space-md);
	}

	.knack-post-grid {
		gap: var(--knack-space-md);
	}

	/* Category chips smaller */
	.knack-category-chip {
		min-width: 48px;
		font-size: 0.6875rem;
	}

	/* Search overlay fills screen */
	.knack-search-overlay {
		padding-top: var(--knack-space-xl);
	}

	.knack-search-overlay-inner {
		margin: 0 var(--knack-space-sm);
		border-radius: var(--knack-radius-2xl);
	}

	/* Discovery search */
	.knack-discovery-search input {
		font-size: var(--knack-font-size-sm);
	}
}

/* --- Body scroll lock when mobile menu or panel is open --- */
body.knack-no-scroll {
	overflow: hidden;
}

/* --- Mobile touch ergonomics (applied <=768px) --- */
@media (max-width: 768px) {
	/* iOS auto-zooms on focus when input font-size < 16px. */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	textarea,
	select {
		font-size: 16px;
	}

	/* Header icon buttons: meet 44x44 touch target. */
	.knack-search-toggle,
	.knack-mobile-toggle,
	.knack-cart-toggle,
	.knack-theme-toggle,
	.knack-panel-toggle {
		width: 44px;
		height: 44px;
	}
}

/* --- New discovery section responsiveness --- */
@media (max-width: 1024px) {
	.knack-explore-grid {
		columns: 3;
	}
	.knack-activity-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.knack-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.knack-cta-icons {
		display: none;
	}
	.knack-cta-banner--modern {
		padding: 36px;
	}
}
@media (max-width: 768px) {
	.knack-hero-title {
		font-size: 22px;
	}
	.knack-hero-subtitle {
		font-size: 14px;
	}
	.knack-hero-compact {
		padding: 28px 0 18px;
	}
	.knack-hero-quick-stats {
		gap: 10px;
	}
	.knack-hero-stat {
		font-size: 12px;
		padding: 5px 10px;
	}
	.knack-explore-grid {
		columns: 2;
	}
	.knack-activity-grid {
		grid-template-columns: 1fr;
	}
	.knack-activity-tile {
		padding: 14px 16px;
	}
	.knack-feature-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.knack-feature-card {
		padding: 18px;
	}
	.knack-cta-banner--modern {
		padding: 28px 20px;
	}
	.knack-cta-banner--modern h2 {
		font-size: 22px;
	}
	.knack-chart-row {
		padding: 10px 14px;
		gap: 10px;
	}
}
@media (max-width: 480px) {
	.knack-explore-grid {
		columns: 1;
	}
	.knack-feature-grid {
		grid-template-columns: 1fr;
	}
	.knack-cta-actions {
		flex-direction: column;
	}
}