/* ═══ Шрифты ═══
   Файлы лежат в assets/fonts, поэтому прототип работает и без интернета.
   Оба шрифта вариативные: доступны начертания от 400 до 700. */
@font-face{
  font-family:'Golos Text';
  src:url('../assets/fonts/GolosText.ttf') format('truetype-variations');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Caveat';
  src:url('../assets/fonts/Caveat.ttf') format('truetype-variations');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════════
   НАРАЯНА · прототип сайта
   ───────────────────────────────────────────────────────────────────
   1. Токены дизайна      — цвета, шрифты, размер холста
   2. Каркас              — #page и блоки .blk
   3. Слои-картинки       — .lay
   4. Текст               — .t, .scr
   5. Кнопки              — .btn, .play
   6. Виджет бронирования — .booking
   7. Маркеры плана       — #map-hotspots
   8. Адаптив и печать
   9. Выключение блоков   — сюда добавлять [data-block="…"]{display:none}
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Токены ─────────────────────────────────────────────────── */
:root{
  /* золото: заголовки и кнопки */
  --gold:          #C9B86E;
  --gold-deep:     #B99A4E;
  --btn-top:       #F3E7CE;
  --btn-hi:        #E7CF9B;
  --btn-mid:       #DCB870;
  --btn-body:      #D8B261;
  --btn-foot:      #E3C588;
  --btn-shadow:    rgba(176,140,60,.38);

  /* текст */
  --text:          #2A4F5A;
  --muted:         #718B94;
  --blue:          #1B5E86;
  --teal:          #2F9D94;
  --nav:           #1B8BB9;
  --sky:           #59ADD9;
  --footer-bg:     #217CC2;

  /* виджет брони */
  --bk-bg:         #F8F8F8;
  --bk-title:      #4A2A33;
  --bk-border:     #D8D8D8;
  --bk-accent:     #7B2D3B;

  /* шрифты — замените здесь, если получите точные имена из Figma */
  --font-sans:   'Golos Text','Manrope',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-script: 'Caveat','Marck Script',cursive;

  /* холст макета */
  --page-w: 1200px;
  --page-h: 16124px;
}

/* ─── 2. Каркас ─────────────────────────────────────────────────── */
*{ box-sizing:border-box }

html,body{
  margin:0; padding:0;
  background:#fff;
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* обёртка нужна, чтобы масштабированный холст не тянул скролл вправо */
body{ overflow-x:hidden }

#page{
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  margin:0;
  overflow:hidden;              /* обрезает декор, вылезающий за края макета */
  background:#fff;
  transform-origin:top left;    /* масштаб задаёт main.js */
}

/* Блоки НЕ создают собственный контекст наложения: порядок слоёв глобальный
   и совпадает с порядком отрисовки в макете. Уровень задан инлайн у каждого
   элемента: графика 0…390 (как в макете), текст 1000, иконки 1100,
   кнопки и формы 1200, маркеры 1250, логотипы 1300. */
.blk{
  position:absolute;
  left:0;
  width:var(--page-w);
}

/* ─── 3. Слои-картинки ──────────────────────────────────────────── */
/* .lay — окно обрезки (соответствует clip-path из макета),
   вложенный <img> — само изображение со своим смещением и размером. */
.lay{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
}
.lay img{
  position:absolute;
  display:block;
  max-width:none;
  max-height:none;
}


/* ─── 3a. Векторные плашки из макета ────────────────────────────── */
/* .pn — цветной блок или карточка. Цвет, радиус и слой заданы инлайн.
   z-index: 1 — подложка под картинку · 3 — панель · 5 — поверх всего */
.pn{
  position:absolute;
  pointer-events:none;
}

/* волна-переход между блоками: криволинейная фигура из макета */
.pn.wave{
  display:block;
  overflow:visible;
}


/* рамка-плашка «удобства в номере» (в макете — тонкий контур) */
.pn-box{
  position:absolute;
  border:1px solid rgba(120,160,190,.55);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}

/* ─── 3b. Мелкие иконки ─────────────────────────────────────────── */
.ic{
  position:absolute;
  display:block;
  object-fit:contain;
  pointer-events:none;
}
.ic-logo{
  pointer-events:auto;
  display:block;
}
/* иконки соцсетей — вырезки из макета, кликабельны */
.ic-soc{
  pointer-events:auto;
  display:block;
  border-radius:7px;
  overflow:hidden;
  transition:transform .16s, filter .16s;
}
.ic-soc img{ width:100%; height:100%; display:block; object-fit:cover }
.ic-soc:hover{ transform:scale(1.08); filter:brightness(1.06) }
.ic-logo img{ width:100%; height:100%; display:block; object-fit:contain }
.ic-logo:hover{ opacity:.85 }

/* ─── 5a. Стрелки каруселей ─────────────────────────────────────── */
.arw{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  border:1.4px solid var(--gold);
  border-radius:50%;
  background:#fff;
  text-decoration:none;
  transition:background .16s, border-color .16s;
}
.arw svg{
  width:52%; height:52%;
  fill:none; stroke:var(--gold-deep); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.arw:hover{ background:var(--gold); border-color:var(--gold-deep) }
.arw:hover svg{ stroke:#fff }

/* ─── 4. Текст ──────────────────────────────────────────────────── */
/* Позиция, кегль, интерлиньяж и цвет заданы инлайн — из макета.
   width:max-content вместе с <br> сохраняет исходные переносы строк
   и не даёт тексту самопроизвольно переноситься при правке. */
.t{
  position:absolute;
  width:max-content;
  margin:0;
  font-weight:400;
  letter-spacing:0;
}

/* Строка текста. data-w — её ширина в макете; main.js сжимает или растягивает
   строку до этой ширины, чтобы подставленный шрифт не разъезжался
   и соседние колонки не наезжали друг на друга. */
.tl{
  display:inline-block;
  transform-origin:left center;
  white-space:pre;
}

/* рукописные акценты */
.scr{
  font-family:var(--font-script);
  font-weight:700;
  letter-spacing:.005em;
}

/* текстовые ссылки: меню и футер */
.t.lnk a{
  color:inherit;
  text-decoration:none;
  transition:opacity .16s, color .16s;
}
.t.lnk a:hover{ opacity:.72; text-decoration:underline; text-underline-offset:3px }

/* ─── 5. Кнопки ─────────────────────────────────────────────────── */
.btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  text-decoration:none;
  overflow:hidden;
  color:#fff;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.15;
  background:linear-gradient(180deg,
      var(--btn-top)  0%,
      var(--btn-hi)   14%,
      var(--btn-mid)  34%,
      var(--btn-body) 92%,
      var(--btn-foot) 100%);
  box-shadow:
      0 10px 22px var(--btn-shadow),
      inset 0  1px 0 rgba(255,255,255,.60),
      inset 0 -2px 0 rgba(150,115,45,.22);
  transition:filter .18s, transform .18s, box-shadow .18s;
  cursor:pointer;
}
/* мягкий блик по центру, как в макете */
.btn::after{
  content:'';
  position:absolute; left:50%; top:56%;
  width:64%; height:40%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
      rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.btn span{
  position:relative; z-index:2;
  padding:0 16px;
  text-shadow:0 1px 2px rgba(150,115,45,.40);
}
.btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 14px 26px var(--btn-shadow),
             inset 0  1px 0 rgba(255,255,255,.65),
             inset 0 -2px 0 rgba(150,115,45,.22);
}
.btn:active{ transform:translateY(0); filter:brightness(.98) }

.btn-sm{ border-radius:8px; letter-spacing:.06em }
.btn-sm span{ padding:0 8px }

/* прозрачная пилюля в шапке */
.btn-outline{
  background:none;
  box-shadow:none;
  border:1.4px solid rgba(255,255,255,.82);
  border-radius:999px;
  color:#fff;
  letter-spacing:.09em;
}
.btn-outline::after{ display:none }
.btn-outline span{ text-shadow:0 1px 3px rgba(0,60,90,.35) }
.btn-outline:hover{
  background:rgba(255,255,255,.16);
  transform:none;
  filter:none;
  box-shadow:none;
}

/* круглая кнопка видео */
.play{
  position:absolute;
  border-radius:50%;
  background:linear-gradient(180deg,#F5E7C4 0%,#E4C384 40%,#D3A94F 100%);
  box-shadow:0 6px 16px rgba(140,105,35,.42),
             inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:transform .18s, filter .18s;
  cursor:pointer;
}
.play::before{
  content:'';
  width:0; height:0;
  margin-left:calc(var(--s,46px) * .09);
  border-left:calc(var(--s,46px) * .26) solid #fff;
  border-top:calc(var(--s,46px) * .17) solid transparent;
  border-bottom:calc(var(--s,46px) * .17) solid transparent;
}
.play:hover{ transform:scale(1.07); filter:brightness(1.05) }

/* ─── 6. Виджет бронирования (TravelLine) ───────────────────────── */
.booking{
  position:absolute;
  display:flex; align-items:center; gap:10px;
  padding:0 12px;
  background:var(--bk-bg);
  border-radius:8px;
  font-family:var(--font-sans);
}
.bk-head{
  display:flex; flex-direction:column; justify-content:center;
  min-width:214px; padding-right:8px;
}
.bk-head b{ font-size:16px; white-space:nowrap; font-weight:700; color:var(--bk-title); letter-spacing:-.01em }
.bk-head i{ font-size:10.5px; font-style:normal; color:#7A7A7A; margin-top:2px }
.bk-head em{ font-size:8px; font-style:normal; color:#BEBEBE; margin-top:6px }

.bk-f{
  position:relative;
  flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:center;
  height:52px; padding:0 34px 0 11px;
  background:#fff;
  border:1px solid var(--bk-border);
  border-radius:7px;
  cursor:pointer;
  min-width:132px;
}
.bk-f.bk-wide{ min-width:186px }
.bk-f span{ font-size:9.5px; color:#8A8A8A; line-height:1.1 }
.bk-f input{
  width:100%;
  border:0; padding:0; margin-top:3px;
  font:700 13px/1.15 var(--font-sans);
  color:#262626; background:transparent;
}
.bk-f input:focus{ outline:none }
.bk-f svg{
  position:absolute; right:9px; top:50%;
  width:16px; height:16px; margin-top:-8px;
  fill:none; stroke:#8E5A63; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.bk-go{
  height:52px; padding:0 22px; margin-left:auto;
  background:#fff;
  border:1.4px solid var(--bk-accent);
  border-radius:7px;
  font:700 14px/1 var(--font-sans);
  color:var(--bk-accent);
  cursor:pointer;
  transition:background .16s, color .16s;
}
.bk-go:hover{ background:var(--bk-accent); color:#fff }

/* ─── 7. Маркеры плана территории ───────────────────────────────── */
#map-hotspots{ position:absolute; inset:0; z-index:1250 }
.mk{
  position:absolute;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%;
  cursor:pointer;
  background:transparent;
  transition:background .16s, box-shadow .16s;
}
.mk:hover{
  background:rgba(47,157,148,.22);
  box-shadow:0 0 0 2px rgba(47,157,148,.55);
}
.mk-tip{
  position:absolute;
  left:50%; bottom:32px;
  transform:translateX(-50%);
  min-width:150px; max-width:250px;
  padding:9px 12px;
  background:#fff;
  border-radius:9px;
  box-shadow:0 8px 24px rgba(20,60,80,.22);
  font-size:13px; line-height:1.35; color:var(--text);
  opacity:0; visibility:hidden;
  transition:opacity .18s, transform .18s;
  pointer-events:none;
  z-index:5;
}
.mk:hover .mk-tip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(-3px) }

/* ─── 8. Адаптив ────────────────────────────────────────────────── */
/* Холст 1200px не ломается: main.js пропорционально масштабирует #page
   и выставляет высоту обёртки. Дизайн сохраняется на любом экране. */
#page.is-scaled{ margin:0 }

@media print{
  .btn, .play{ box-shadow:none }
}

/* ─── 9. Выключение блоков ──────────────────────────────────────── */
/* Раскомментируйте нужную строку, чтобы убрать блок со страницы.
   Имена блоков совпадают с data-block в index.html и с README.md */

/* [data-block="map"]        {display:none}  — план территории          */
/* [data-block="events"]     {display:none}  — события и календарь      */
/* [data-block="videos"]     {display:none}  — карусель видео           */
/* [data-block="organize"]   {display:none}  — организаторам            */
/* [data-block="partner"]    {display:none}  — партнёрка и инвестиции   */
/* [data-block="career"]     {display:none}  — карьера                  */
/* [data-block="online"]     {display:none}  — онлайн-обучение          */
/* [data-block="service"]    {display:none}  — служение                 */