/*
  Stage 2 (Home):
  - включаем вертикальный скролл (донорская сборка фиксировала overflow-y)
  - делаем «features» прокручиваемыми по X на мобилках без swiper.js
  - поджимаем отступы секции connected (ai-блок пока не используем)
  - упрощённые визуалы в connected-карточках
  - минимальные слоты под будущую семантику в about
*/
/* ТИ4: размеры текста донора в rem — сгенерировано scripts/home-rem.mjs из reflect.css, руками не править */
button,input{font-size:100%;line-height:normal}
.header-actions-login,.header-nav-link{font-size:.875rem;line-height:1.25rem}
@media (max-width: 1248px){.header-nav-link{font-size:1.5rem;line-height:2rem}}
.logo-with-name-name{font-size:1rem;line-height:1.5rem}
.button{font-size:.875rem;line-height:1.25rem}
.hero-description{font-size:1.125rem;line-height:1.75rem}
.hero-badge{font-size:.875rem;line-height:1.25rem}
.section-header-title-h1{font-size:4.5rem;line-height:5rem}
.section-header-title-h2{font-size:3.5rem;line-height:4rem}
.section-header-title-h3{font-size:3rem;line-height:3.5rem}
.section-header-title-h5{font-size:2rem;line-height:2.5rem}
.section-header-description{font-size:1rem;line-height:1.5rem}
.section-header-badge{font-size:.875rem;line-height:1.25rem}
@media (max-width: 1248px){.section-header-title-h1{font-size:2.75rem;line-height:3.25rem}}
@media (max-width: 1248px){.section-header-title-h2{font-size:2.5rem;line-height:3rem}}
@media (max-width: 1248px){.section-header-title-h3{font-size:2.25rem;line-height:2.5rem}}
@media (max-width: 1248px){.section-header-title-h5{font-size:2rem;line-height:2.5rem}}
.hero-black-hole-circle-tooltip-title{font-size:.875rem;line-height:1.25rem}
.hero-black-hole-circle-tooltip-item{font-size:.75rem;line-height:1rem}
.features-card-title,.features-card-description{font-size:1rem;line-height:1.5rem}
.ai-cards-item{font-size:1rem;line-height:1.5rem}
.ai-showcase-title{font-size:.9375rem;line-height:1.5rem}
.ai-showcase-text{font-size:.8125rem;line-height:1.5rem}
.ai-showcase-button-text{font-size:.8125rem;line-height:1.5rem}
.ai-showcase-animation-menu{font-size:.8125rem;line-height:1.5rem}
.ai-showcase-animation-answer{font-size:.8125rem;line-height:1.5rem}
.ai-showcase-animation-answer-button-shortcut{font-size:.75rem;line-height:1.125rem}
.connected-card-text span,.connected-card-text{font-size:1rem;line-height:1.5rem}
.connected-card-backlink-circle:after{font-size:.75rem;line-height:1rem}
.research-card-title,.research-card-description{font-size:1rem;line-height:1.5rem}
.meetings-piece-box-title{font-size:.8125rem;line-height:1.25rem}
.meetings-piece-box-value{font-size:.8125rem;line-height:1.25rem}
.meetings-piece-box-label{font-size:.8125rem;line-height:1.5rem}
.meetings-piece-box-item-title{font-size:.8125rem;line-height:1.5rem}
.meetings-piece-box-item-time{font-size:.8125rem;line-height:1.5rem}
.integrations-item-title,.integrations-item-description{font-size:1rem;line-height:1.5rem}
.pricing-amount{font-size:4.5rem;line-height:5rem}
.pricing-period{font-size:1rem;line-height:1.5rem}
.pricing-features-item{font-size:1rem;line-height:1.5rem}
.testimonials-card-name,.testimonials-card-content{font-size:1rem;line-height:1.5rem}
.testimonials-card-tag{font-size:.875rem;line-height:1.25rem}
.tetris-keys-group-label{font-size:.75rem;line-height:1rem}
.footer-nav-group-title,.footer-copyright,.footer-legal ul li,.footer-nav-group-item{font-size:.875rem;line-height:1.25rem}
.footer-newsletter-title{font-size:1.5rem;line-height:2rem}
.footer-newsletter-description{font-size:.875rem;line-height:1.25rem}
.input input{font-size:.875rem;line-height:1.25rem}
.button{font-size:.875rem;line-height:1.25rem}
/* ТИ4: конец сгенерированного блока */

/* 1) Скролл страницы */
body { overflow-y: auto; }

/* 2) Features: мобильная горизонтальная прокрутка без JS */
@media (max-width: 1248px) {
  .features-cards {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .features-cards::-webkit-scrollbar { height: 6px; }
  .features-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }

  .features-cards .swiper-wrapper {
    padding: 0 20px;
  }

  /* ТИ10: высота 196 px у донора (reflect.css) с overflow:hidden резала текст при крупном шрифте браузера —
     карточка растёт с текстом, при 16 px те же 196 px */
  .features-card { scroll-snap-align: start; height: auto; min-height: 196px; }
}

/* 3) Features-card может быть <a> */
a.features-card { display: block; }

/* 4) Connected: корректируем отступы, сетку и позиционирование фоновых элементов */
.connected {
  padding-top: 160px;
  position: relative;
  isolation: isolate; /* чтобы фон и линии гарантированно были «под» карточками */
}

.connected .rising-stars {
  top: 56px;
  z-index: 1;
  opacity: .7;
}

/* Фоновая «решётка» за карточками: убираем конфликт с карточками (позиция + прозрачность) */
.connected-background {
  top: -140px !important;
  bottom: auto !important;
  opacity: .16;
  filter: blur(.4px) saturate(.9);
  z-index: 0;
  pointer-events: none;
}

.connected .section-header,
.connected .connected-cards {
  position: relative;
  z-index: 2;
}

/* Ровная сетка 2×2 на десктопе (одинаковые промежутки по X/Y) */
.connected-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 599.98px) { /* Т1-а: до 860 px; 600–860 px — две колонки (блок Т1 в конце файла) */
  .connected-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Линии-разделители донора: оставляем, но делаем тише и строго «под» карточками */
.connected-cards-line {
  position: absolute;
  z-index: 1;
  opacity: .18;
  pointer-events: none;
}

/* 5) Connected: картинка внутри карточки (без сложной анимации донора) */
.connected-card { height: 100%; }

.connected-card-image > div {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;

  /* аккуратная «рамка» + подсветка */
  background:
    radial-gradient(120% 120% at 18% 10%, rgba(229,156,255,.12) 0%, rgba(3,0,20,0) 58%),
    radial-gradient(110% 120% at 85% 95%, rgba(156,178,255,.10) 0%, rgba(3,0,20,0) 55%),
    rgba(255,255,255,.03);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(186,156,255,.10),
    0 14px 42px rgba(0,0,0,.50);

  transition: box-shadow .22s ease, transform .22s ease;
  will-change: box-shadow, transform;
}

/* тонкий верхний «блик» — делает рамку современнее без жирной обводки */
.connected-card-image > div::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 44px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: .55;
  pointer-events: none;
}

.connected-card:hover .connected-card-image > div,
.connected-card:focus-within .connected-card-image > div {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(229,156,255,.18),
    0 0 42px rgba(186,156,255,.14),
    0 18px 54px rgba(0,0,0,.55);
}

.connected-card-visual {
  width: 100%;
  height: 256px;
  object-fit: contain;
  opacity: .90;
  filter: saturate(1.02) contrast(1.03);
  transition: opacity .22s ease, filter .22s ease;
  will-change: opacity, filter;
}

/* На десктопах делаем визуалы в 4 карточках чуть более прозрачными,
   а при наведении/фокусе возвращаем 100% непрозрачность. */
@media (hover: hover) and (pointer: fine) {
  .connected-card-visual {
    opacity: .78;
    filter: saturate(1.03) contrast(1.06);
  }

  .connected-card:hover .connected-card-visual,
  .connected-card:focus-within .connected-card-visual {
    opacity: 1;
    filter: saturate(1.12) contrast(1.12);
  }
}

@media (max-width: 1248px) {
  .connected-card-image > div {
    width: 100%;
    min-width: 100%;
  }
}

/* 6) About: лёгкие слоты под смысловые тезисы (не ломают донорскую сетку) */
.about-points {
  margin: 28px auto 0;
  position: relative;
  z-index: 2;
}

.about-points ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-points li {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(100% 121.87% at 100% 100%, rgba(255,255,255,.04) 0%, rgba(3,0,20,0) 100%);
}

.about-points strong {
  display: block;
  color: #f4f0ff;
  font-weight: 500;
  margin-bottom: 6px;
}

.about-points span {
  display: block;
  color: rgba(239,237,253,.7);
  font-size: .875rem;
  line-height: 1.25rem;
  font-feature-settings: "ss01" on, "cv10" on, "calt" off, "liga" off;
}

@media (max-width: 1248px) {
  .about-points ul { grid-template-columns: 1fr; }
}


/* 7) Home search: форма поиска (реально ведёт на /search/) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-search-section {
  padding: 120px 0 84px;
  position: relative;
}

.home-search {
  margin: 22px auto 0;
  position: relative;
  z-index: 2;
}

.home-search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.home-search-form input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(100% 121.87% at 100% 100%, rgba(255,255,255,.06) 0%, rgba(3,0,20,0) 100%);
  color: rgba(250,248,255,.92);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.home-search-form input::placeholder {
  color: rgba(239,237,253,.48);
}

.home-search-form input:focus-visible {
  border-color: rgba(232,225,255,.18);
  box-shadow: 0 0 0 4px rgba(156,178,255,.08);
  outline: 2px solid var(--d8-focus); /* Т5 */
  outline-offset: 2px;
}

.home-search-hints {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.home-search-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(239,237,253,.72);
  text-decoration: none;
  font-size: .8125rem;
  line-height: 1rem;
}

.home-search-chip:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.home-search-chip:focus-visible {
  outline: 2px solid var(--d8-focus); /* Т5: было rgba(156,178,255,.28) */
  outline-offset: 2px;
}

/* 8) AI cards: делаем карточки кликабельными без изменения донорских стилей */
.ai .ai-cards-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ai .ai-cards-item:focus-visible {
  outline: 2px solid var(--d8-focus); /* Т5: было rgba(156,178,255,.28) */
  outline-offset: 4px;
  border-radius: 18px;
}

.ai-cards-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* 8.1) Материалы: убираем центральную иконку и «пустоту» между заголовком и карточками */
#materials.ai .ai-background-wrapper {
  display: none;
}

#materials.ai .ai-cards {
  margin-top: 28px;
}

#materials.ai .section-header {
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .home-search-section { padding: 96px 0 68px; }
}
@media (max-width: 599.98px) { /* Т1-а: до 768 px; с 600 px поле и кнопка — в строку */
  .home-search-form { flex-direction: column; }
  .home-search-form input { width: 100%; }
  .home-search-form .button { width: 100%; justify-content: center; }
}


/* 9) Footer: возрастная маркировка */
.footer-age{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  min-width:36px;
  padding:0 10px;
  margin-left:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(239,237,253,.72);
  font-size:.75rem;
  line-height:1;
  letter-spacing:.2px;
}

/* (центральная иконка в Материалах отключена — правило масштабирования не требуется) */

/* ==========================================================================
   MOBILE FIXES — этап 3 (docs/CHANGES.md, раздел «Этап 3: мобильная вёрстка»).
   Файл подключён и на рейтингах, но селекторы ниже есть только на главной (кроме body в конце блока).
   ========================================================================== */

/* MOB-2, MOB-15, MOB-11 (И5), П4: правила прежней шапки главной ушли — у главной шапка сайта, как у всех
   страниц (src/components/SiteHeader.astro, /assets/css/header.css; docs/CHANGES.md Ш1) */
/* П3: строка «Конфиденциальность · Условия · Cookie» в подвале переносится, если не помещается
   (reflect.css держит её в одну строку — на 320 px «Cookie» обрезался на 20 px); у последнего пункта
   нет отступа справа, иначе строка, которая помещается, переносилась бы из-за него */
.footer-legal ul { flex-wrap: wrap; }
.footer-legal ul li:last-child { margin-right: 0; }
/* ТИ2 (WCAG 2.5.8, axe target-size): ссылки строки «Cookie · EN» — зона нажатия 24 px в высоту; поле и отрицательный отступ
   поровну, строка на экране та же */
.footer-legal ul li a { display: inline-block; padding: 2px 0; margin: -2px 0; }
/* карточка игровой комнаты (368 px) на узком экране ужимается до его ширины, пропорции те же */
@media (max-width: 399.98px) {
  .hero-video { width: calc(100% - 32px); height: auto; aspect-ratio: 368 / 676; }
  .hero-video-play, .hero-video svg { top: 40.53%; }
}

/* Решение владельца 14 (CHANGES 27.09 «Р14а», было MOB-9): чёрная дыра — на любом экране. В блоке видео сразу
   видна подложка — первый кадр видео (<picture>, на телефоне — центральные ¾ кадра); видео, которое reflect.js
   подключает после загрузки страницы, проявляется поверх неё, когда пошёл первый кадр. При prefers-reduced-motion
   и Save-Data видео нет — остаётся кадр. Подложка и видео занимают один блок 16:9 и вписаны в него (contain):
   копия для телефона (4:3) стоит там же и в том же масштабе, что целый кадр. */
.hero-black-hole .lazy-video { position: relative; opacity: 1; }
.hero-black-hole .lazy-video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-black-hole .lazy-video video {
  display: block; position: relative; aspect-ratio: 16 / 9; object-fit: contain;
  opacity: 0; transition: .75s cubic-bezier(.6, .6, 0, 1) opacity;
}
.hero-black-hole .lazy-video-loaded video { opacity: 1; }
/* на телефоне описание под заголовком лежит на ярком диске чёрной дыры — тёмный ореол вокруг букв держит его
   читаемым (в том числе «18+») */
@media (max-width: 759.98px) {
  .hero .hero-description { text-shadow: 0 0 3px rgba(3, 0, 20, .9), 0 0 12px rgba(3, 0, 20, .9); }
}
/* копия для телефона на экране от 760 px (телефон повернули после загрузки): края ¾ кадра гаснут, а не обрываются */
.hero-black-hole .lazy-video.is-phone video {
  -webkit-mask-image: linear-gradient(90deg, transparent 12.5%, #000 22%, #000 78%, transparent 87.5%);
  mask-image: linear-gradient(90deg, transparent 12.5%, #000 22%, #000 78%, transparent 87.5%);
}

/* MOB-2 (3.6), Т4 (MISS-6): reflect.css задаёт body { width: 100vw } — это ширина окна вместе с полосой
   прокрутки, страница была шире окна (телефон — на 6 px, компьютер — на 5). Без видимой полосы вид тот же.
   Действует и на рейтингах (файл подключён там же). */
body { width: auto; }

/* ===== Техническая проверка 28.09, Т1–Т6 (docs/CHANGES.md) ===== */

/* Т5 (PAL-M1): reflect.css гасит outline у всего (*:focus). Рамка фокуса с клавиатуры — как у шапки; и на
   рейтингах. :where() — вес как у *:focus, побеждает порядком файлов. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--d8-focus);
  outline-offset: 2px;
}
/* лента и карточка вопроса FAQ обрезают всё за своими краями — рамка внутри */
.features-card:focus-visible { outline-offset: -3px; }
summary:focus-visible { outline-offset: -3px; }

/* Т3 (RESP-3): текст не ближе 12 px к краю экрана. У героя — описание; заголовок героя выше 360 px переносится
   как у донора (Т3-а: поля переносили его иначе — вид героя владельца) */
.hero .hero-description,
.home-search-section .section-header,
#materials .section-header,
#about .section-header { padding-left: 12px; padding-right: 12px; }
@media (min-width: 1249px) {
  .connected .section-header { padding-left: 12px; padding-right: 12px; } /* до 1248 px — 20 px reflect.css */
}

@media (max-width: 599.98px) { /* Т1-а: с 600 px — планшетный вид ниже */
  #materials.ai .ai-cards { width: min(326px, 100% - 32px); }
  .home-search-form input { flex: 0 0 auto; height: 52px; } /* Т2 (RESP-2): flex: 1 сжимал поле до 23 px */
}

@media (max-width: 390px) {
  .home-search.container-md,
  .about-points.container-md { padding-left: 16px; padding-right: 16px; } /* reflect.css: 4 px */
}

@media (max-width: 360px) {
  .hero .section-header { padding-left: 12px; padding-right: 12px; }
  .hero .section-header-title-h1 { font-size: clamp(1.875rem, 12.5vw - .0625rem, 2.75rem); line-height: 1.182; } /* 360 px — 44 / 52 */
}

/* Т1 (RESP-1), Т1-а: планшет и узкий ноутбук. reflect.css до 1248 px ставит телефонную колонку 358 px; нижняя
   половина главной — по ширине экрана с 600 px. Герой и лента — как были. */
@media (min-width: 600px) and (max-width: 860px) {
  /* маршруты — две колонки, как с 861 px; рамка картинки уменьшается с карточкой в пропорции карточки 388 px */
  .connected-cards { width: min(100% - 48px, 960px); }
  .connected-card { width: 100%; } /* во всю колонку (не шире 388 px), а не по своему тексту: рамки картинок одной ширины */
  .connected-card-image { height: auto; }
  .connected-card-visual { height: auto; aspect-ratio: 388 / 256; }
}

@media (min-width: 600px) and (max-width: 1248px) {
  .home-search.container-md,
  .about-points.container-md { max-width: min(100% - 48px, 960px); }

  /* описания под заголовками — ширины компьютера */
  .connected .section-header-description { max-width: 545px; }
  .ai .section-header-description { max-width: 744px; }
  .about .section-header-description { max-width: 455px; }

  /* гайды — колонки, у каждой своя линия слева; линии между рядами, кроме последнего ряда */
  #materials.ai .ai-cards { width: min(100% - 48px, 900px); }
  #materials .ai-cards-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #materials .ai-cards-items::before { content: none; }
  #materials .ai-cards-item { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
  #materials .ai-cards-item::after { left: 0; }
  #materials .ai-cards-item:nth-last-child(-n+2)::before { content: none; }

  /* подвал: три группы ссылок в три колонки, документы и © — в строку */
  .footer .container-sm { max-width: 960px; }
  .footer-nav-group { flex: 1 1 0; width: auto; }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
  .footer-legal { margin-bottom: 0; }
}

/* тезисы «О Don8Play» — в 3 колонки с 700 px; на 600–699 px в колонке по 2–3 слова в строке — друг под другом */
@media (min-width: 700px) and (max-width: 1248px) {
  .about-points ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1248px) {
  #materials .ai-cards-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #materials .ai-cards-item:nth-last-child(-n+3)::before { content: none; }
}