/* ==========================================================================
   Khel Kood — responsive layout
   Breakpoints: 1180 (header menu), 900 (tablet), 768 (centred heroes), 600 / 480 (phone)
   ========================================================================== */

/* ---------------------------------------------------- ≤ 1180px: menu button */
@media (max-width: 1180px) {
	.site-header { flex-wrap: nowrap; }
	.nav-toggle {
		order: 2;
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--kk-yellow);
		color: var(--kk-navy);
		border: 3px solid var(--kk-navy);
		box-shadow: var(--kk-shadow);
		cursor: pointer;
		transition: translate .18s ease, box-shadow .18s ease;
	}
	.nav-toggle:active { translate: 4px 5px; box-shadow: 0 0 0 transparent; }
	.site-header--on-yellow .nav-toggle { background: #FFFFFF; }
	.nav-toggle__bars { position: relative; display: block; width: 22px; height: 16px; }
	.nav-toggle__bars span {
		position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: currentColor;
		transition: top .25s ease, rotate .25s ease, opacity .2s ease;
	}
	.nav-toggle__bars span:nth-child(1) { top: 0; }
	.nav-toggle__bars span:nth-child(2) { top: 6.5px; }
	.nav-toggle__bars span:nth-child(3) { top: 13px; }
	.site-header.is-open .nav-toggle__bars span:nth-child(1) { top: 6.5px; rotate: 45deg; }
	.site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
	.site-header.is-open .nav-toggle__bars span:nth-child(3) { top: 6.5px; rotate: -45deg; }

	.site-nav {
		position: absolute;
		top: calc(100% - 4px);
		left: 16px;
		right: 16px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 20px;
		border-radius: 28px;
		background: #FFFFFF;
		border: 3px solid var(--kk-navy);
		box-shadow: 8px 9px 0 var(--kk-navy);
	}
	.site-header.is-open .site-nav { display: flex; animation: kk-menu-in .3s cubic-bezier(.34, 1.56, .64, 1) both; }
	.site-nav__link, .site-nav__cta { justify-content: center; }
	.site-nav__social { align-self: center; }

	/* Four benefit cards: 2 × 2 instead of 3 + 1 */
	.about-benefits__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	[class*="-hero__decor"]:not(.home-hero__decor) { scale: .7; }
}
@keyframes kk-menu-in { from { opacity: 0; translate: 0 -10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* -------------------------------------------------------------- ≤ 900px */
@media (max-width: 900px) {
	.photo-gallery__img { flex-basis: calc(50% - 10px); }
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
	/* Two-column text/photo splits stack before they get cramped */
	.home-benefits__grid, .home-visit__grid { grid-template-columns: minmax(0, 1fr); }
	[class*="-hero__decor"]:not(.home-hero__decor) { display: none; }
}

/* ------------------------------------------- ≤ 768px: centred hero banners */
@media (max-width: 768px) {
	.home-hero__inner { justify-content: center; }
	.home-hero__content { align-items: center; text-align: center; }
	.home-hero__actions, .home-hero__meta { justify-content: center; }

	/* Wide banners get a taller crop so the photo still reads */
	.activities-banner__img, .passes-banner__img, .about-banner__img, .book-banner__img, .contact-banner__img { aspect-ratio: 16 / 10; }
	.post-cover__img { aspect-ratio: 16 / 10; }

	/* Floating circles: smaller and tucked to the edges */
	[class*="-hero__decor"] { scale: .6; }
	.cta-card__decor--right-white { display: none; }

	.legal-body__toc { position: static; }
}

/* ---------------------------------------------- ≤ 600px: buttons on phones */
@media (max-width: 600px) {
	.site-header { padding: 14px 16px; }
	.site-header__logo { height: 64px; }
	.nav-toggle { width: 50px; height: 50px; }

	[class*="__btn"], .site-nav__cta, .btn, .blog-list__more-btn, .post-card__more {
		min-height: 46px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 14px;
		gap: 8px;
		text-align: center;
		justify-content: center;
	}
	[class*="__btn"] svg, .btn svg { width: 16px; height: 16px; }
	.site-nav__link, .site-nav__cta { font-size: 18px; min-height: 50px; }

	.photo-gallery__img { flex-basis: 100%; }
	/* Slider: photo full width, arrows underneath */
	.photo-gallery__row { flex-wrap: wrap; justify-content: center; }
	.photo-gallery__row > [data-slider-viewport] { order: -1; flex-basis: 100%; }
	/* Hero circles would sit on the text — keep only the ones around the home photo */
	[class*="-hero__decor"]:not(.home-hero__decor) { display: none; }
	.about-benefits__cards { grid-template-columns: minmax(0, 1fr); }
	.home-pass__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
	.play-tab { font-size: 18px; min-height: 54px; }
	.home-hero__price-badge { scale: .8; }
}

/* -------------------------------------------------------------- ≤ 480px */
@media (max-width: 360px) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.contact-location__table-wrap { overflow-x: auto; }
}