/* ==========================================================================
   Фолбэк для старых iOS Safari на ТЕЛЕФОНАХ (нет CSS Grid и/или нет
   clamp()/min()/max()). Каждый блок обёрнут в @supports, поэтому в
   современных браузерах правила ниже просто не применяются — файл
   безопасно подключать всегда, отдельно ничего детектить не нужно.

   Подключать ПОСЛЕ main.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. min-height: 100lvh поддерживается только с Safari 15.4 (март 2022).
   На более старых Safari объявление невалидно и просто отбрасывается —
   секция остаётся без задуманной высоты в полный экран. header.scss уже
   правильно даёт "height: 100vh; height: 100dvh;" — а вот эти секции vh-
   фолбэк не дублируют, поэтому дополняем его отдельно.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	@supports not (min-height: 100lvh) {
		.s-venue__grid,
		.s-intro__grid,
		.s-trust__grid,
		.s-music__container,
		.s-audience__grid,
		.s-scale__grid,
		.s-gift__grid,
		.s-story__grid,
		.s-sessions__container {
			min-height: 100vh;
		}
	}
}


/* --------------------------------------------------------------------------
   2. clamp()/min()/max() — Safari 13.1+ (март 2020). На более старых Safari
   (в том числе там, где уже есть Grid, — Safari 10.1–13.0) объявление
   невалидно => браузер как будто его не видел (initial/inherited значение).
   Возвращаем статические величины — берём ближний к мобильному край
   каждого clamp(). Не завязано на поддержку Grid, чтобы починиться и там,
   и там.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	@supports not (width: clamp(1px, 1vw, 2px)) {
		:root {
			--header-height: 7rem;
			--fs-text-4: 1.8rem;
			--fs-title-4: 1.9rem;
			--fs-title-2: 2.6rem;
			--fs-title-1: 2.6rem;
			--fs-title-xxl: 2.6rem;
			--space-6: 1rem;
			--space-1: 6rem;
			--side-space: 1rem;
		}

		/* точечные clamp(), которые прописаны прямо в свойстве,
		   а не через переменную из :root — их var()-подмена не чинит */
		.cblk-text-media__img {
			height: 32.5rem;
		}
		.service-card__image {
			height: 20rem;
		}
		.s-intro__card {
			padding: 1.3rem;
		}
		.accordion {
			--padding: 1rem;
		}
		.accordion__title {
			padding-bottom: 1rem;

			&:before {
				width: 3rem;
				height: 3rem;
			}
		}
		.s-trust__title strong {
			font-size: 3rem;
		}
		.s-trust__bottom-text,
		.s-trust__stat-item {
			font-size: 2rem;
		}
		.s-trust__stat-item strong {
			font-size: 3rem;
		}
	}
}


/* --------------------------------------------------------------------------
   3. Полное отсутствие CSS Grid — Safari < 10.1 (iOS < 10.3). display: grid
   и все grid-* невалидны и игнорируются, элемент остаётся display: block —
   контент и так становится одной колонкой, это уже приемлемо. Но:
   - gap: тоже не понимается (и когда он относится к grid, и когда
     потенциально к flex) — без него блоки визуально слипаются, добавляем
     обычные отступы через margin;
   - раз мы всё равно переопределяем display, ставим flex-column вместо
     чистого block — это даёт возможность точечно поправить порядок через
     order, если после проверки на устройстве какой-то блок будет выглядеть
     не в том порядке.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	@supports not (display: grid) {

		.header__container,
		.header__burger,
		.header__nav,
		.top-line__container,
		.top-line__buttons-wrapper,
		.sub-nav__nav,
		.footer__container,
		.footer__logos,
		.locale-picker__button,
		.locale-picker__list,
		.locale-picker__list-item-link,
		.file-for-download,
		.file-for-download__icon-wrapper,
		.page404,
		.accordion__title,
		.service-card__header,
		.service-card__body,
		.blog-card,
		.blog-card__footer,
		.blog-list__list,
		.blog-related__list,
		.cblk-text-media__cols,
		.cblk-team__list,
		.cblk-team__list-item,
		.cblk-logo-list__list,
		.cblk-list__list,
		.cblk-list-with-icons__list,
		.cblk-list-with-icons__footer-text,
		.services-list__header,
		.services-list__list,
		.s-venue__grid,
		.s-venue__header,
		.s-venue__list,
		.s-intro__grid,
		.s-intro__cards,
		.s-trust__grid,
		.s-music__container,
		.s-audience__grid,
		.s-scale__grid,
		.s-gift__grid,
		.s-info__grid,
		.s-story__grid,
		.s-pre-show__grid,
		.s-faq__grid,
		.s-sessions__time-list {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		.header__container > * + *,
		.header__burger > * + *,
		.header__nav > * + *,
		.top-line__container > * + *,
		.top-line__buttons-wrapper > * + *,
		.sub-nav__nav > * + *,
		.footer__container > * + *,
		.footer__logos > * + *,
		.locale-picker__button > * + *,
		.locale-picker__list > * + *,
		.locale-picker__list-item-link > * + *,
		.file-for-download > * + *,
		.file-for-download__icon-wrapper > * + *,
		.page404 > * + *,
		.accordion__title > * + *,
		.service-card__header > * + *,
		.service-card__body > * + *,
		.blog-card > * + *,
		.blog-card__footer > * + *,
		.blog-list__list > * + *,
		.blog-related__list > * + *,
		.cblk-text-media__cols > * + *,
		.cblk-team__list > * + *,
		.cblk-team__list-item > * + *,
		.cblk-logo-list__list > * + *,
		.cblk-list__list > * + *,
		.cblk-list-with-icons__list > * + *,
		.cblk-list-with-icons__footer-text > * + *,
		.services-list__header > * + *,
		.services-list__list > * + *,
		.s-venue__grid > * + *,
		.s-venue__header > * + *,
		.s-venue__list > * + *,
		.s-intro__grid > * + *,
		.s-intro__cards > * + *,
		.s-trust__grid > * + *,
		.s-music__container > * + *,
		.s-audience__grid > * + *,
		.s-scale__grid > * + *,
		.s-gift__grid > * + *,
		.s-info__grid > * + *,
		.s-story__grid > * + *,
		.s-pre-show__grid > * + *,
		.s-faq__grid > * + *,
		.s-sessions__time-list > * + * {
			margin-top: 16px;
		}

		/* локальные исключения там, где 16px явно слишком много/мало */
		.header__container > * + *,
		.header__nav > * + *,
		.header__burger > * + * {
			margin-top: 6px;
		}
	}
}


/* --------------------------------------------------------------------------
   4. backdrop-filter без префикса не поддерживается вообще нигде до
   Safari 15.4 — а вот -webkit-backdrop-filter понимает даже iOS 9.
   Это безопасное дополнение, а не фолбэк "на крайний случай": ничего не
   меняет в браузерах, которые и так умеют работать с обычным свойством.
   -------------------------------------------------------------------------- */
.header__side-nav-wrapper.active,
.popup,
.s-intro__card {
	-webkit-backdrop-filter: blur(10px);
}