/* layers.css — z-index tokens, isolation и content-visibility */

:root {
  --z-base: 0;
  --z-content: 1;
  --z-snow: 5;
  --z-header: 10;
  --z-dropdown: 20;
  --z-modal: 30;
  --z-toast: 40;
}

.header { position: sticky; top: 0; z-index: var(--z-header); isolation: isolate; }

.header__overlay, .nav__dropdown, .menu__panel { position: relative; z-index: var(--z-dropdown); }
.modal, .dialog, .sheet { position: fixed; z-index: var(--z-modal); inset: 0; }
.toast, .snackbar { position: fixed; z-index: var(--z-toast); inset-inline-end: 16px; inset-block-end: 16px; }

/* Секции ниже фолда — экономим рендер */
.section-below-fold { content-visibility: auto; contain-intrinsic-size: 800px; }

/* Фокус-видимость для всех интерактивов */
:where(a,button,[role="button"],input,select,textarea,summary):focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* Стабилизация медиа в герое */
.hero__slide, .hero__media { aspect-ratio: 3 / 2; overflow: clip; }