/* ==========================================================================
   Global responsive rules (component-specific breakpoints live with the component).
   Breakpoints: ≥1440 · 1200–1439 · 992–1199 · ≤1024 mobile header · 768–991 · 576–767 · <576 · ≤390
   ========================================================================== */
@media (max-width: 1199px) {
	.o2-slider__slide {
		flex-basis: calc((100% - 2 * 24px) / 3);
	}

	.o2-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	:root {
		--o2-header-h: 64px;
	}

	body.has-mobile-bar {
		padding-bottom: 64px;
	}

	.o2-mobile-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--o2-z-float);
		display: block;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: var(--o2-white);
		box-shadow: 0 -4px 16px rgba(16, 37, 64, 0.12);
	}

	.has-mobile-bar .o2-floating {
		bottom: 84px;
	}

	.o2-floating {
		right: 16px;
	}
}

@media (max-width: 991px) {
	:root {
		--o2-fs-h1: 36px;
		--o2-fs-h2: 32px;
		--o2-section-y: 50px;
	}

	.o2-slider__slide {
		flex-basis: calc((100% - 24px) / 2);
	}

	.o2-grid--3,
	.o2-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.hero-banner__panel {
		grid-template-columns: 1fr;
		border-radius: var(--o2-radius-lg) var(--o2-radius-lg) 64px var(--o2-radius-lg);
	}

	.hero-banner__content {
		padding: 36px 28px 40px;
	}

	.hero-banner__media {
		aspect-ratio: 3 / 2;
	}

	.cta-footer__box {
		padding: 48px 28px;
	}

	.cta-footer__desc {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	:root {
		--o2-fs-h1: 30px;
		--o2-fs-h2: 28px;
		--o2-section-y: 30px;
		--o2-heading-gap: 24px;
		--o2-fs-body: 17px;
	}

	.o2-grid--2,
	.o2-grid--3,
	.o2-grid--4 {
		grid-template-columns: 1fr;
	}

	.o2-slider__slide {
		flex-basis: 78%;
	}

	.o2-slider-controls {
		gap: 20px;
		margin-top: 30px;
		padding: 0 12px;
	}

	.o2-slider-arrow {
		width: 40px;
		height: 40px;
	}

	/* Horizontal scroll-snap rows (solutions, news, cards). */
	.o2-hscroll {
		position: relative;
		display: flex;
		gap: 16px;
		margin-inline: calc(-1 * var(--o2-gutter));
		padding: 0 var(--o2-gutter) 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--o2-gutter);
		-webkit-overflow-scrolling: touch;
	}

	.o2-hscroll > * {
		flex: 0 0 85%;
		min-width: 0;
		scroll-snap-align: start;
	}

	.o2-floating {
		gap: 10px;
	}

	.o2-floating__btn {
		width: 46px;
		height: 46px;
	}

	.o2-floating__btn .o2-icon {
		width: 22px;
		height: 22px;
	}

	.o2-floating__tip {
		display: none;
	}

	.o2-modal {
		align-items: flex-end;
		padding: 0;
	}

	.o2-modal__dialog {
		max-height: 92vh;
		padding: 36px 18px 24px;
		border-radius: 20px 20px 0 0;
	}

	.o2-modal--compare .o2-modal__dialog {
		border-radius: 20px 20px 0 0;
	}

	.o2-modal__title {
		font-size: 22px;
	}

	.hero-banner {
		padding-top: 12px;
	}

	.hero-banner__panel {
		min-height: 0;
		border-radius: var(--o2-radius) var(--o2-radius) 40px var(--o2-radius);
	}

	.hero-banner__content {
		padding: 28px 20px 32px;
	}

	.hero-banner__content .o2-btn-wrap,
	.hero-banner__btn {
		width: 100%;
	}

	.cta-footer__box {
		padding: 36px 20px;
		border-radius: var(--o2-radius);
	}

	.cta-footer__desc {
		font-size: 18px;
	}

	.o2-breadcrumbs ol {
		font-size: 14px;
	}

	.o2-pagination {
		margin-top: 32px;
	}

	.section-heading__desc {
		margin-top: 10px;
	}
}

@media (max-width: 575px) {
	:root {
		--o2-gutter: 16px;
	}

	.o2-btn {
		font-size: 16px;
	}

	.o2-btn--lg {
		padding: 12px 20px;
	}
}

@media (max-width: 390px) {
	:root {
		--o2-fs-h2: 24px;
		--o2-fs-h1: 26px;
	}
}

@media print {
	.site-header,
	.site-footer,
	.o2-floating,
	.o2-mobile-bar,
	.cta-footer,
	.o2-modal,
	.o2-editor-pencil {
		display: none;
	}
}