/* responsive.css — breakpoints per MASTER_PROJECT.md Part 9 (Responsive Image Sizes):
 * Desktop >= 1024px, Tablet 768–1023px, Mobile < 768px
 */

@media (max-width: 1023px) {
	.site-header__right {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	.services-grid {
		grid-template-columns: repeat(2, 1fr); /* confirmed: 20.8 tablet two columns */
	}

	.service-card:first-child {
		grid-row: auto; /* the tall dense-packed first card only makes sense at 3 columns */
	}

	.training-gallery {
		grid-template-columns: repeat(2, 1fr); /* confirmed: "Tablet: Two-column layout" */
	}

	.benefits__grid {
		grid-template-columns: repeat(2, 1fr); /* confirmed: 8.8 tablet reduces columns */
	}

	.contacts-section__inner {
		grid-template-columns: 1fr; /* stack contact form/info above map */
		align-items: start;
	}

	.contacts-section__right .ontop360-map__frame {
		min-height: 520px;
		height: 520px;
	}
}

@media (max-width: 767px) {
	.review-card {
		flex: 0 0 100%; /* confirmed: 14.5/14.9 one review visible on mobile */
	}

	.services-grid {
		grid-template-columns: 1fr; /* confirmed: 20.8 mobile single column */
	}

	.training-gallery {
		grid-template-columns: 1fr; /* confirmed: "Mobile: Single-column layout" */
	}

	.benefits__grid {
		grid-template-columns: 1fr; /* confirmed: 8.8 mobile vertical stack */
	}

	.hero__title {
		font-size: 32px; /* TODO: confirm against Figma */
	}

	.contacts-section__right .ontop360-map__frame {
		min-height: 380px;
		height: 380px;
	}
}