/* =====================================================================
   AITK Fest — QR-микросайт
   Макет: design/page_with_links.pen (присланный)
   Правки против макета — только контраст и цвет трека «Стартап»,
   всё помечено комментарием «ПРАВКА».
   ===================================================================== */

:root {
  /* --- Поверхности --- */
  --bg:       #F4F5FB;
  --surface:  #FFFFFF;
  --border:   #EAEBF4;

  /* --- Текст --- */
  --ink:      #14132B;
  --ink-2:    #6E6C8A;
  /* ПРАВКА: было #AEADC4 — 2.19 на белом, не проходит даже для иконок */
  --icon-mut: #8E8CA8;

  /* --- Тёмная шапка --- */
  --hero-1:   #241B63;
  --hero-2:   #0A0920;

  /* --- Акценты бренда --- */
  --violet:   #7B2FF7;
  --blue:     #2A6BF5;
  --sky:      #2AA7F5;
  --cyan:     #17D9E8;
  --magenta:  #F02FC2;   /* только заливки и свечения */
  /* ПРАВКА: под белым текстом маджента даёт 3.56 — притемнена до 5.12 */
  --magenta-deep: #C9179E;

  /* --- Треки расписания --- */
  --t-hack:   #7B2FF7;
  /* ПРАВКА: цвет трека возвращён к брендовому с fest.aitk.kz (#ff6a3d).
     Как 12px текст он даёт 2.85, поэтому для меток — притемнённый тон. */
  --t-startup:      #ff6a3d;
  --t-startup-text: #D4410F;
  --t-conf1:  #2A6BF5;
  /* ПРАВКА: было #0B8B99 — 4.06 */
  --t-conf2:  #0A7B87;

  --radius-card: 22px;
  --tap: 60px;
  --shadow-card: 0 8px 20px -8px #1B17401F;
}

/* ---------------------------------------------------------------------
   ШРИФТ — Manrope (SIL OFL), как в макете.

   Раздаётся с нашего же домена, не с Google Fonts CDN: сторонний домен
   во встроенных браузерах Telegram и Instagram бывает медленным или
   недоступным, а это наш основной сценарий.

   Переменное начертание 400–800 — один файл на все веса вместо четырёх.
   Разбит по алфавитам: браузер скачает только тот, чьи символы реально
   встретились на странице (unicode-range).

   font-display: swap — текст виден сразу системным шрифтом и
   переключается на Manrope по загрузке; пустых мест не будет.
--------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  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: "Manrope";
  src: url("../assets/fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  /* Цветные свечения из макета — радиальными градиентами, без блюр-слоёв */
  background-image:
    radial-gradient(340px 340px at -10% 55%, #F02FC21F 0%, #F02FC200 70%),
    radial-gradient(380px 380px at 62% 88%, #17D9E824 0%, #17D9E800 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ===================== ШАПКА С ЛОГОТИПОМ ===================== */
.hero {
  padding: calc(env(safe-area-inset-top) + 44px) 24px 34px;
  display: flex;
  justify-content: center;
  border-radius: 0 0 38px 38px;
  background-color: var(--hero-2);
  background-image:
    radial-gradient(300px 300px at 4% 0%, #F02FC2B3 0%, #F02FC200 70%),
    radial-gradient(250px 250px at 88% 26%, #17D9E899 0%, #17D9E800 70%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
}

.hero__logo {
  width: 220px;
  height: auto;
  display: block;
}

/* ===================== ЗАГОЛОВОК ===================== */
.intro {
  padding: 26px 26px 0;
  text-align: center;
}

.intro__title {
  margin: 0 0 8px;
  font-size: 1.625rem;      /* 26px */
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.intro__sub {
  margin: 0;
  font-size: .875rem;       /* 14px */
  font-weight: 500;
  color: var(--ink-2);
}

/* ===================== ССЫЛКИ ===================== */
.links {
  padding: 22px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.card:hover  { box-shadow: 0 12px 26px -8px #1B174030; }
.card:active { transform: scale(.99); }
.card:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.card__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 16px;
  color: #fff;
  background-image: linear-gradient(135deg, var(--g1), var(--g2));
}

.card__text  { flex: 1 1 auto; min-width: 0; }
.card__title {
  display: block;
  font-size: 1.0625rem;     /* 17px */
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.card__sub {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;      /* 13px */
  font-weight: 500;
  color: var(--ink-2);
}
.card__arrow { flex: none; color: var(--icon-mut); }

/* Градиенты плиток — как в макете */
.card--schedule { --g1: var(--violet);  --g2: var(--blue); }
.card--channel  { --g1: var(--sky);     --g2: var(--cyan); }
.card--chat     { --g1: var(--cyan);    --g2: var(--sky); }
.card--review   { --g1: var(--magenta); --g2: var(--violet); }

/* Главная карточка — «Наш сайт» */
.card--featured {
  border-color: transparent;
  /* ПРАВКА: маджента-стоп притемнён с #F02FC2 до --magenta-deep */
  background-image: linear-gradient(120deg, var(--magenta-deep) 0%, var(--violet) 55%, var(--blue) 100%);
  box-shadow: 0 12px 28px -10px #7B2FF766;
}
.card--featured .card__tile  { background-image: none; background-color: #FFFFFF2E; }
.card--featured .card__title { color: #fff; }
/* ПРАВКА: подпись была #FFFFFFC7 — на градиенте 4.07, сделана сплошной */
.card--featured .card__sub   { color: #fff; }
.card--featured .card__arrow { color: #fff; }

/* ===================== ПОДВАЛ ===================== */
/* ДОБАВЛЕНО ПО ТЗ: в макете не было ни соцсетей, ни контактов, ни копирайта
   в мобильной версии — пункт «Подвал: контакты/соцсети + копирайт». */
.footer {
  margin-top: auto;
  padding: 26px 24px calc(env(safe-area-inset-bottom) + 34px);
  text-align: center;
}

.footer__divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 18px;
}



.tagline {
  margin: 0 0 6px;
  font-size: .6875rem;      /* 11px */
  font-weight: 700;
  letter-spacing: .18em;
  /* ПРАВКА: было #7C7A96 — 3.80 на фоне страницы */
  color: var(--ink-2);
}

.copyright {
  margin: 0;
  font-size: .75rem;
  color: var(--ink-2);
}

/* =====================================================================
   РАСПИСАНИЕ
   ===================================================================== */
.topbar {
  padding: calc(env(safe-area-inset-top) + 22px) 24px 26px;
  border-radius: 0 0 38px 38px;
  background-color: var(--hero-2);
  background-image:
    radial-gradient(280px 280px at 2% 0%, #F02FC2A6 0%, #F02FC200 70%),
    radial-gradient(260px 260px at 92% 40%, #17D9E88C 0%, #17D9E800 70%),
    linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  color: #fff;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #FFFFFFC7;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 700;
}
.back:hover { color: #fff; }
.back__circle {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #FFFFFF24;
}

.topbar__title {
  margin: 10px 0 14px;
  font-size: 2.0625rem;     /* 33px */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.topbar__sub {
  margin: 0;
  max-width: 34ch;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFFAD;          /* на тёмной шапке даёт 7.5 — проходит */
}

.topbar__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: #FFFFFFD6;
}
.topbar__meta span { display: inline-flex; align-items: center; gap: 8px; }

.allday {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #FFFFFF29;
  font-size: .84375rem;
  color: #FFFFFFD6;
  font-weight: 600;
}
.allday__label {
  flex: none;
  font-size: .8125rem;
  font-weight: 800;
  color: #FFFFFF8F;
}

/* --- Таймлайн --- */
.timeline { padding: 8px 24px 0; }

.slot {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.slot:last-of-type { border-bottom: 0; }

.slot__time { flex: none; width: 62px; }
.slot__from {
  display: block;
  font-size: 1.3125rem;     /* 21px */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.slot__to {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  /* ПРАВКА: было #AEADC4 — 2.19 */
  color: var(--ink-2);
}

.slot__body { flex: 1 1 auto; min-width: 0; }

.event__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.event__place {
  margin: 4px 0 0;
  font-size: .84375rem;
  font-weight: 500;
  color: var(--ink-2);
}

.track + .track { margin-top: 18px; }
.track__label {
  display: block;
  margin-bottom: 3px;
  font-size: .75rem;        /* 12px */
  font-weight: 800;
  letter-spacing: .01em;
}
.track__name {
  margin: 0;
  font-size: .96875rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}

.track--hack    .track__label { color: var(--t-hack); }
.track--startup .track__label { color: var(--t-startup-text); }
.track--conf1   .track__label { color: var(--t-conf1); }
.track--conf2   .track__label { color: var(--t-conf2); }

.note {
  margin: 0;
  padding: 22px 24px calc(env(safe-area-inset-bottom) + 30px);
  text-align: center;
  font-size: .78125rem;
  font-weight: 500;
  color: var(--ink-2);
  border-top: 1px dashed var(--border);
}

/* =====================================================================
   ДЕСКТОП — сплит из макета: тёмная панель слева, ссылки справа
   ===================================================================== */
@media (min-width: 900px) {
  .wrap {
    max-width: 1180px;
    padding: 64px 40px 0;
  }

  .wrap--links {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    grid-template-areas:
      "panel links"
      "footer footer";
    gap: 60px;
    align-items: stretch;   /* тёмная панель тянется по высоте колонки ссылок */
  }

  .panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 34px;
    padding: 56px 48px 64px;
    background-color: var(--hero-2);
    background-image:
      radial-gradient(360px 360px at 6% 4%, #F02FC2B3 0%, #F02FC200 70%),
      radial-gradient(320px 320px at 92% 34%, #17D9E899 0%, #17D9E800 70%),
      linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  }

  /* На десктопе тёмный фон переезжает на .panel */
  .panel .hero {
    padding: 0 0 36px;
    justify-content: flex-start;
    border-radius: 0;
    background: none;
  }
  .panel .hero__logo { width: 300px; }

  .panel .intro { padding: 0; text-align: left; }
  .panel .intro__title { font-size: 2.5rem; color: #fff; }
  .panel .intro__sub   { font-size: 1rem; color: #FFFFFFC7; }

  .links { grid-area: links; padding: 0; gap: 14px; }
  .card { padding: 18px 22px; border-radius: 26px; }
  .card__tile { width: 54px; height: 54px; }
  .card__title { font-size: 1.125rem; }
  .card__sub { font-size: .875rem; }

  .footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 56px 0 40px;
    text-align: left;
  }
  .footer__divider { display: none; }
  .tagline { margin: 0; order: 3; }
  .copyright { order: 1; }

  /* --- Расписание на десктопе --- */
  .wrap--schedule { max-width: 900px; }
  .topbar {
    border-radius: 34px;
    padding: 44px 48px 40px;
  }
  .topbar__title { font-size: 3rem; }
  .topbar__meta { flex-direction: row; gap: 26px; }
  .timeline { padding: 12px 8px 0; }
  .slot { gap: 34px; padding: 26px 0; }
  .slot__time { width: 88px; }
  .slot__from { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =====================================================================
   ОТЗЫВ  (review/index.html)
   Форма отправляется в Google Форму — своего бэкенда и хранения
   персональных данных на нашей стороне нет.
   ===================================================================== */
.form { padding: 28px 24px 0; display: flex; flex-direction: column; gap: 26px; }

.field { display: flex; flex-direction: column; gap: 12px; }

fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }

.form__error {
  margin: 0;
  padding: 13px 16px;
  border-radius: 14px;
  background: #FDECEC;
  border: 1px solid #F5C9C9;
  color: #A11B1B;              /* 6.1 на этом фоне */
  font-size: .84375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* <legend> браузер выносит из flex-потока fieldset, поэтому gap на него
   не действует — задаём отступ явно, иначе заголовок слипается с полем */
legend.field__label { margin-bottom: 12px; padding: 0; }

.field__label {
  font-size: 1rem;            /* 16px */
  font-weight: 700;
  color: var(--ink);
}

/* --- Оценка звёздами ---
   Радиокнопки идут в разметке от 5 к 1, а ряд развёрнут row-reverse:
   так селектор ~ подсвечивает все звёзды левее выбранной. */
.stars { display: flex; flex-direction: row-reverse; gap: 10px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }

.stars label {
  flex: 1 1 0;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--icon-mut);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
  /* ПРАВКА: маджента-стоп притемнён — белая иконка на #F02FC2 даёт 3.56 */
  background-image: linear-gradient(135deg, var(--magenta-deep), var(--violet));
  border-color: transparent;
  color: #fff;
}

.stars input:focus-visible + label { outline: 2px solid var(--violet); outline-offset: 2px; }

.rating__word {
  margin: 0;
  min-height: 1.2em;
  font-size: .84375rem;
  font-weight: 700;
  color: var(--violet);
}

/* --- Чипы --- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }

.chips label {
  padding: 11px 18px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .84375rem;       /* 13.5px */
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chips label:hover { border-color: var(--border-strong); }
.chips input:checked + label {
  background-image: linear-gradient(135deg, var(--magenta-deep), var(--violet));
  border-color: transparent;
  color: #fff;
}
.chips input:focus-visible + label { outline: 2px solid var(--violet); outline-offset: 2px; }

/* --- Поля ввода --- */
.input, .textarea {
  width: 100%;
  font-family: inherit;
  /* ПРАВКА: в макете 14.5px, но iOS принудительно зумит страницу при фокусе
     на поле с font-size меньше 16px. Лечим причину: 16px.
     Через viewport (user-scalable=no) не чиним — это отключило бы пинч-зум
     всей страницы и сделало её недоступной для слабовидящих. */
  font-size: 1rem;            /* 16px */
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .15s ease;
}
.input { height: 54px; padding: 0 18px; border-radius: 16px; }
.textarea { min-height: 128px; padding: 16px 18px; border-radius: 18px; line-height: 1.45; resize: vertical; }

.input:focus, .textarea:focus { outline: none; border-color: var(--violet); }
/* ПРАВКА: плейсхолдер в макете #AEADC4 — 2.19 на белом */
.input::placeholder, .textarea::placeholder { color: var(--ink-2); opacity: 1; }

/* --- Кнопка отправки --- */
.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 19px;
  font-family: inherit;
  font-size: 1.03125rem;      /* 16.5px */
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background-image: linear-gradient(120deg, var(--magenta-deep) 0%, var(--violet) 55%, var(--blue) 100%);
  box-shadow: 0 14px 30px -10px #7B2FF773;
  transition: transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.submit:hover  { box-shadow: 0 16px 34px -10px #7B2FF799; }
.submit:active { transform: scale(.99); }
.submit:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.privacy {
  margin: 0;
  padding: 22px 24px calc(env(safe-area-inset-bottom) + 34px);
  text-align: center;
  font-size: .78125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}
.privacy a { color: var(--violet); }

@media (min-width: 900px) {
  .wrap--review { max-width: 720px; }
  .form { padding: 34px 8px 0; gap: 30px; }
  .privacy { padding: 30px 8px 40px; }
}