/* Страница ссылок Lumis. Палитра, шрифты, радиусы и состояния кнопок
   перенесены из Lumis_App (frontend/src/shared/styles/tokens.css и
   app/styles/landing.css), чтобы страница читалась как часть lumis-school.ru.

   Тема — системная, через prefers-color-scheme. Тёмная — те же две подмены,
   что в макете сайта: фон #E0E0E0 → #363636 и чёрный контур/текст → #A2A2A2. */

/* --- Шрифты --- */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-variable-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Actay Wide";
  src: url("fonts/actay-wide-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* --- Токены --- */

:root {
  --black: #000000;
  --lime: #a7f219;
  --blue: #007aff;

  --bg: #e0e0e0;
  --surface: #ffffff;
  --ink: #000000; /* текст и контуры на фоне страницы */
  --text-on-surface: #191919;
  --text-on-dark: #f1f4fb;
  --line: #000000;
  --chip-bg: #000000;
  --chip-ink: #a7f219;

  /* Знак: светлая тема — лаймовый круг и чёрная лампочка. */
  --logo-face: var(--lime);
  --logo-mark: var(--black);

  --font-text: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-wide: "Actay Wide", Inter, ui-sans-serif, sans-serif;

  --tracking: -0.04em;
  --radius-tile: 24px;
  --border: 3px;

  --column: 560px;
  --gutter: 16px;

  --firefly: url("img/l-svetlyachok-s-kompyuterom.svg");

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #363636;
    --surface: #1e1e1e;
    --ink: #a2a2a2;
    --text-on-surface: #f1f4fb;
    --line: #a2a2a2;

    /* Тёмная тема — круг и лампочка знака меняются местами. */
    --logo-face: var(--black);
    --logo-mark: var(--lime);

    --firefly: url("img/d-svetlyachok-s-kompyuterom.svg");
  }
}

/* --- Каркас --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  font-family: var(--font-text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--tracking);
  line-height: 1.15;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - var(--gutter) * 2, var(--column));
  margin-inline: auto;
  padding-block: 20px 48px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* --- Светлячок --- */

/* Светлячок с компьютером и облачком «+БАЛЛЫ» — как на первом экране сайта.
   На телефоне скромнее: плитки должны начинаться в первом экране. */
.hero-art {
  position: relative;
  flex: none;
  width: clamp(120px, 34vw, 200px);
  aspect-ratio: 518 / 570;
  background: var(--firefly) center / contain no-repeat;
  animation: firefly-hover 4.8s ease-in-out -0.4s infinite;
}

.hero-art::after {
  content: "";
  position: absolute;
  top: 10%;
  left: -20%;
  width: 42%;
  aspect-ratio: 851 / 483;
  background: url("img/bally.svg") center / contain no-repeat;
  transform: rotate(-4deg);
}

/* --- Сетка плиток («бенто») ---

   Две колонки на любой ширине: колонка страницы ограничена 560px, поэтому
   на планшете и десктопе плитки не растягиваются. Все размеры внутри
   плиток считаются от ширины самой сетки (единицы cqi), а не окна: так
   шрифт и иконки ужимаются ровно настолько, насколько ужалась плитка, и
   длинные заголовки вроде «Написать Владу в Telegram» помещаются и на
   320px, и на 560px. */
.links {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.tile {
  --tile-pad: clamp(12px, 4.5cqi, 18px);
  --icon-size: clamp(40px, 12cqi, 52px);
  --arrow-size: clamp(30px, 9cqi, 40px);

  display: flex;
  gap: 12px;
  min-width: 0;
  padding: var(--tile-pad);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--text-on-surface);
  text-decoration: none;
  /* Контур состояний — внутренний, через inset box-shadow, как у кнопки
     сайта (.lp-cta): border ужал бы коробку и дёрнул содержимое. */
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.tile[hidden] {
  display: none;
}

/* Наведение и нажатие — приём кнопки-призыва сайта: заливка уходит,
   остаётся контур 3px, нажатие уводит плитку на 3px вниз. */
.tile:hover,
.tile:active {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--border) var(--line);
}

.tile:active {
  transform: translateY(3px);
}

/* Широкая плитка — на обе колонки. */
.tile--wide {
  grid-column: 1 / -1;
}

/* Строка: иконка — текст — стрелка. */
.tile--row {
  align-items: center;
}

.tile--row .tile-body {
  flex: 1;
}

/* Плитка-карточка: иконка и стрелка сверху, текст прижат к низу. Высота
   общая для пары в ряду — grid тянет обе ячейки до более высокой. */
.tile--stack {
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(150px, 44cqi, 200px);
}

.tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.tile-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tile-title {
  font-family: var(--font-wide);
  /* 15px при сетке 288 (экран 320) → 20px при сетке 528. */
  font-size: clamp(0.9375rem, 0.5625rem + 2.1cqi, 1.25rem);
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.tile-caption {
  /* 12.3px на экране 320 → 15px при полной ширине колонки. */
  font-size: clamp(0.75rem, 0.55rem + 1.2cqi, 0.9375rem);
  line-height: 1.22;
  opacity: 0.7;
  overflow-wrap: break-word;
}

/* --- Иконки --- */

.tile-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-ink);
}

.tile-icon svg {
  width: 100%;
  height: 100%;
}

/* Стрелка-диагональ в круге с контуром — как .arrow-btn сайта. */
.tile-arrow {
  position: relative;
  flex: none;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor;
  transition: transform 200ms ease;
}

.tile-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 25 25 15M17 15h8v8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 25 25 15M17 15h8v8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.tile:hover .tile-arrow {
  transform: rotate(45deg);
}

/* --- Варианты плиток --- */

/* Платформа — главный призыв: лаймовая заливка, как кнопка «Записаться»,
   знак Lumis в чёрном кольце (вариант B макета). */
.tile--primary {
  --icon-size: clamp(48px, 13cqi, 60px);
  --arrow-size: clamp(34px, 9cqi, 40px);

  gap: 14px;
  background: var(--lime);
  color: var(--black);
}

.tile--primary .tile-title {
  font-size: clamp(1.0625rem, 0.6rem + 2.8cqi, 1.5rem);
}

/* Знак в лаймовой плитке одинаков в обеих темах: лаймовый круг в чёрном
   кольце, иначе он сливается с заливкой. */
.tile-icon--logo {
  --logo-face: var(--lime);
  --logo-mark: var(--black);

  background: var(--black);
  box-shadow: 0 0 0 3px var(--black);
}

/* YouTube — инвертированная плитка: чёрная с лаймовым значком. */
.tile--dark {
  background: var(--black);
  color: var(--text-on-dark);
}

.tile--dark .tile-icon {
  background: var(--lime);
  color: var(--black);
}

/* «Написать…» — с контуром: личные каналы отличаются от публичных. */
.tile--outline {
  box-shadow: inset 0 0 0 var(--border) var(--line);
}

/* --- Движение --- */

/* Зависание светлячка — кейфреймы сайта (lp-firefly-hover, мобильная ветка). */
@keyframes firefly-hover {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  28% {
    transform: translate3d(2px, -9px, 0) rotate(1.1deg);
  }

  55% {
    transform: translate3d(-2px, -5px, 0) rotate(-0.8deg);
  }

  78% {
    transform: translate3d(1px, 3px, 0) rotate(0.6deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Самые узкие телефоны (iPhone SE первого поколения и подобные). */
@media (max-width: 359px) {
  :root {
    --gutter: 12px;
  }

  .links {
    gap: 8px;
  }

  .tile {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art {
    animation: none;
  }

  .tile,
  .tile-arrow {
    transition: none;
  }

  .tile:active {
    transform: none;
  }
}