/* ==========================================================================
   Theme 14 - responsive rules
   ========================================================================== */

@media (max-width: 1199px) {
	.hero-title { font-size: 56px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* tablet & below: collapse navigation into a drawer */
@media (max-width: 991px) {
	:root { --header-h: 64px; }

	/* backdrop-filter would make the fixed drawer position relative to the header */
	.site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.nav-toggle { display: block; }
	.header-cta { margin-left: auto; }
	.header-cta + .nav-toggle { margin-left: 0; }
	.site-nav {
		position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
		margin: 0; padding: 16px 20px 32px;
		background: var(--bg); overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
	.nav-open { overflow: hidden; }
	.nav-links { flex-direction: column; gap: 2px; }
	.nav-links a { padding: 14px 16px; font-size: 18px; border-radius: var(--radius-sm); }

	.hero { min-height: 64vh; }
	.hero-title { font-size: 46px; }
	.section { padding: 64px 0; }
	.section-title { font-size: 32px; }
	.page-info .title { font-size: 38px; }

	.item-grid { grid-template-columns: repeat(2, 1fr); }
	.category-banner .title { font-size: 32px; }

	.split { grid-template-columns: 1fr; }
	.video-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	.container { padding-left: 16px; padding-right: 16px; }
	.brand-name { font-size: 22px; }
	.brand-logo { max-height: 44px; }

	.hero { min-height: 560px; }
	.hero-content { padding-top: 56px; padding-bottom: 100px; }
	.hero-title { font-size: 38px; }
	.hero-lead { font-size: 17px; }
	.hero-actions .btn-theme, .hero-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
	.hero .carousel-indicators { bottom: 76px; }

	.quick-info { margin-top: -48px; }
	.info-cards { grid-template-columns: 1fr; gap: 10px; }
	.info-card { padding: 16px 18px; }

	.section { padding: 52px 0; }
	.section-head { margin-bottom: 32px; }
	.section-title, .intro .page-info .title { font-size: 28px; }
	.page-hero { padding: 48px 0 40px; }
	.page-info .title { font-size: 32px; }
	.page-info .description, .intro-text { font-size: 16px; }

	.card-grid, .offer-grid { grid-template-columns: 1fr; gap: 20px; }
	.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.photo-tile .caption { opacity: 1; transform: none; font-size: 12px; padding: 20px 10px 8px; }

	/* all categories stay visible: smaller buttons so the wrapped rows stay compact */
	.menu-nav ul { gap: 6px; padding: 10px 0; }
	.menu-nav a { padding: 6px 12px; font-size: 13px; white-space: normal; text-align: center; }
	.menu-category { margin-bottom: 44px; }
	.category-banner { min-height: 160px; padding: 22px 20px; margin-bottom: 18px; }
	.category-banner .title { font-size: 26px; }
	.item-grid { grid-template-columns: 1fr; gap: 12px; }
	.item-card { padding: 18px 18px 14px; }

	.panel-card { padding: 24px 20px; }
	.rating-summary { flex-direction: column; gap: 4px; border-radius: var(--radius); }

	.footer-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 52px; padding-bottom: 40px; }
	.footer-bottom { padding-bottom: 90px; }
}