/* ==============================================================
   tenant.css — ДВИГУН СТОРІНОК ОРЕНДАРІВ
   --------------------------------------------------------------
   Ідея: структура блоків спільна для всіх, індивідуальність
   орендаря живе ТІЛЬКИ у змінних .tn (кольори, шрифти, радіуси).
   Орендар не пише CSS, він обирає значення. Зламати спільну
   раму сайту з цих змінних технічно неможливо.
   ============================================================== */

.tn {
    /* значення за замовчуванням — світла тема у стилі ТРЦ */
    --tn-bg:        #FFFFFF;
    --tn-surface:   #F7F7F5;
    --tn-line:      rgba(0,0,0,.10);
    --tn-ink:       #1A1A1A;
    --tn-ink-soft:  rgba(26,26,26,.68);
    --tn-accent:    #B8860B;
    --tn-accent-2:  #B8860B;
    --tn-on-accent: #FFFFFF;
    --tn-radius:    8px;
    --tn-font-head: 'Raleway', sans-serif;
    --tn-font-body: 'Raleway', sans-serif;

    background: var(--tn-bg);
    color: var(--tn-ink);
    font-family: var(--tn-font-body);
}

.tn__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- ХЛІБНІ КРИХТИ (спільна рама, не тема орендаря) ---------- */

.tn-crumbs {
    margin-top: 110px;           /* під фіксовану шапку сайту */
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.tn-crumbs__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
}

.tn-crumbs a { color: var(--muted); }
.tn-crumbs a:hover { color: var(--gold); }
.tn-crumbs span[aria-current] { color: var(--text); }

/* ---------- ОБКЛАДИНКА ---------- */

.tn-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: 72px 0 64px;
}

/* Слайдер: усі кадри лежать стосом, активний проявляється */
.tn-hero__photo {
    position: absolute; inset: 0;
    background-image: var(--img-d);
    background-size: cover;
    background-position: var(--pos-d, right center);
    opacity: 0;
    transition: opacity 1.1s ease;
}

.tn-hero__photo.is-active { opacity: 1; }

.tn-hero__dots {
    position: absolute;
    right: 28px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    gap: 9px;
}

.tn-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.tn-hero__dot:hover { background: rgba(255,255,255,.6); }

.tn-hero__dot[aria-current="true"] {
    background: var(--tn-accent);
    transform: scale(1.35);
}

.tn-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Заслінка: ліворуч щільна, щоб текст читався, праворуч прозора, щоб фото було видно */
.tn-hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg,
            var(--tn-bg) 0%,
            var(--tn-bg) 32%,
            color-mix(in srgb, var(--tn-bg) 92%, transparent) 46%,
            color-mix(in srgb, var(--tn-bg) 55%, transparent) 62%,
            color-mix(in srgb, var(--tn-bg) 18%, transparent) 74%,
            transparent 88%),
        linear-gradient(180deg, color-mix(in srgb, var(--tn-bg) 40%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--tn-bg) 65%, transparent) 100%);
}

.tn-hero__col { max-width: 560px; }

.tn-hero__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.tn-hero__mark {
    display: inline-block;
    font-family: var(--tn-font-head);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tn-ink);
    margin-bottom: 26px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--tn-accent);
}

.tn-hero__logo {
    height: auto;
    width: clamp(190px, 17vw, 300px);
    margin-bottom: 28px;
    filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
}

.tn-hero__title {
    font-family: var(--tn-font-head);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    max-width: 16em;
    text-wrap: balance;
}

.tn-hero__title em { font-style: normal; color: var(--tn-accent); }

.tn-hero__lead {
    max-width: 34em;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tn-ink-soft);
    margin: 0 0 28px;
}

/* ---------- ЧІПИ З ФАКТАМИ ---------- */

.tn-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; padding: 0; list-style: none; }

.tn-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--tn-line);
    background: var(--tn-surface);
    color: var(--tn-ink);
}

.tn-chip b { font-weight: 600; }
.tn-chip--accent { border-color: color-mix(in srgb, var(--tn-accent) 55%, transparent); color: var(--tn-accent); }

/* ---------- КНОПКИ ---------- */

.tn-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tn-hero__note {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--tn-ink-soft);
}

.tn-hero__note b { color: var(--tn-ink); font-weight: 500; }

.tn-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tn-font-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    justify-content: center;
    min-width: 220px;
    min-height: 54px;
    padding: 0 32px;
    border-radius: var(--tn-radius);
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.tn-btn--primary {
    background: var(--tn-accent);
    color: var(--tn-on-accent);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--tn-accent) 35%, transparent);
}

.tn-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px color-mix(in srgb, var(--tn-accent) 45%, transparent); }

.tn-btn--ghost { border-color: var(--tn-line); color: var(--tn-ink); }
.tn-btn--ghost:hover { border-color: var(--tn-accent); color: var(--tn-accent); }

.tn-btn:focus-visible { outline: 2px solid var(--tn-accent-2); outline-offset: 3px; }

/* ---------- БЛОКИ ---------- */

.tn-block { padding: 60px 0; border-top: 1px solid var(--tn-line); }

.tn-block__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tn-accent);
    margin: 0 0 14px;
}

.tn-block__title {
    font-family: var(--tn-font-head);
    font-weight: 600;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.2;
    margin: 0 0 18px;
    text-wrap: balance;
}

.tn-block__text { max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--tn-ink-soft); margin: 0 0 14px; }
.tn-block__text strong { color: var(--tn-ink); font-weight: 600; }
.tn-block__text a { color: var(--tn-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- КАРТКИ ---------- */

.tn-cards {
    display: grid;
    /* Кількість форматів може мінятися, тому сітка розкладає їх сама. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.tn-card {
    background: var(--tn-surface);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    padding: 26px 24px 28px;
    transition: border-color .15s ease, transform .15s ease;
}

.tn-card:hover { border-color: color-mix(in srgb, var(--tn-accent) 50%, transparent); transform: translateY(-3px); }

.tn-card__title { font-family: var(--tn-font-head); font-weight: 600; font-size: 18px; margin: 0 0 10px; }
.tn-card__text { font-size: 14.5px; line-height: 1.6; color: var(--tn-ink-soft); margin: 0; }
.tn-card__more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--tn-accent); }

/* ---------- ЯК ЗНАЙТИ ---------- */

/* КРОКИ.
   Замість кружечка з цифрою — велика цифра, що згасає донизу.
   Вона працює як орієнтир і на телефоні, і на моніторі: розмір тягнеться
   від ширини екрана, а не фіксований. */

.tn-route {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 34px 30px;
    margin-top: 38px;
    counter-reset: step;
}

.tn-route__step { position: relative; }

.tn-route__step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    font-family: var(--tn-font-head);
    font-size: clamp(74px, 7.4vw, 116px);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.045em;
    margin-bottom: 12px;
    color: var(--tn-accent);
}

/* Градієнт по самих цифрах: зверху акцент, донизу згасає у фон. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .tn-route__step::before {
        background-image: linear-gradient(178deg,
            color-mix(in srgb, var(--tn-accent) 95%, transparent) 0%,
            color-mix(in srgb, var(--tn-accent) 38%, transparent) 58%,
            color-mix(in srgb, var(--tn-accent) 6%, transparent) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.tn-route__text {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--tn-line);
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--tn-ink-soft);
}

.tn-route__text b { color: var(--tn-ink); font-weight: 600; }

/* ---------- СОЦІАЛЬНИЙ ДОКАЗ ---------- */

.tn-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 34px;
    padding: 26px 30px;
    margin-top: 30px;
    border-radius: var(--tn-radius);
    background: var(--tn-surface);
    border: 1px solid var(--tn-line);
}

.tn-proof__score { font-family: var(--tn-font-head); font-size: 40px; font-weight: 600; line-height: 1; color: var(--tn-accent-2); }
.tn-proof__stars { color: var(--tn-accent-2); font-size: 17px; letter-spacing: 3px; }
.tn-proof__note { font-size: 14.5px; color: var(--tn-ink-soft); margin: 4px 0 0; }

/* ---------- ФІНАЛЬНИЙ ЗАКЛИК ---------- */

.tn-final { padding: 62px 0 70px; border-top: 1px solid var(--tn-line); text-align: center; }
.tn-final .tn-block__title { margin-left: auto; margin-right: auto; max-width: 18em; }
.tn-final .tn-actions { justify-content: center; }
.tn-final__note { font-size: 13.5px; color: var(--tn-ink-soft); margin: 20px 0 0; }

/* ---------- ПОРУЧ У ТРЦ (знову стиль ТРЦ, не орендаря) ---------- */

.tn-nearby { background: var(--bg-soft); padding: 54px 0; }
.tn-nearby__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tn-nearby__title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.tn-nearby__sub { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; }
.tn-nearby__list { display: flex; flex-wrap: wrap; gap: 10px; }

.tn-nearby__link {
    font-size: 14px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    transition: border-color .15s ease, color .15s ease;
}

.tn-nearby__link:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- МОБІЛЬНИЙ ---------- */

@media (max-width: 900px) {
    .tn-hero { min-height: 0; padding-top: 352px; padding-bottom: 56px; }
    /* На вузькому екрані cover тягне фото по висоті, тому вертикальна позиція
       нічого не дає. Робимо фото смугою зверху фіксованої висоти. */
    .tn-hero__photo {
        inset: 0 0 auto 0;
        height: 296px;
        /* На телефоні у частини кадрів свій, вертикальніший варіант. */
        background-image: var(--img-m, var(--img-d));
        background-position: var(--pos-m, center);
    }
    .tn-hero__dots { right: auto; left: 24px; bottom: auto; top: 258px; }
    .tn-hero__veil {
        background: linear-gradient(180deg,
            transparent 0px,
            transparent 150px,
            color-mix(in srgb, var(--tn-bg) 55%, transparent) 240px,
            var(--tn-bg) 296px);
    }
    .tn-hero__col { max-width: none; }
    .tn-cards { grid-template-columns: 1fr; }
    .tn-route { gap: 28px; }
}

@media (max-width: 600px) {
    .tn-crumbs { margin-top: 72px; }
    .tn-hero { padding-top: 322px; padding-bottom: 44px; }
    .tn-hero__mark { font-size: 17px; margin-bottom: 20px; }
    /* Тільки ширина. Жорстка висота тут ламала пропорції логотипа. */
    .tn-hero__logo { width: 172px; height: auto; margin-bottom: 20px; }
    .tn-block { padding: 44px 0; }
    .tn-btn { width: 100%; justify-content: center; }
    .tn-proof { padding: 22px; }
    .tn-proof__score { font-size: 34px; }
}

/* Вузький десктоп: колонка тексту займає більшу частку ширини,
   тому заслінка має триматися щільною далі праворуч. */
@media (min-width: 901px) and (max-width: 1200px) {
    .tn-hero__veil {
        background:
            linear-gradient(90deg,
                var(--tn-bg) 0%,
                var(--tn-bg) 44%,
                color-mix(in srgb, var(--tn-bg) 90%, transparent) 60%,
                color-mix(in srgb, var(--tn-bg) 40%, transparent) 76%,
                transparent 92%),
            linear-gradient(180deg, color-mix(in srgb, var(--tn-bg) 40%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--tn-bg) 65%, transparent) 100%);
    }
    .tn-hero__col { max-width: 500px; }
}

/* Планшет: макет уже стовпчиком, але кадр широкий, тому смуга вища
   і беремо десктопні зображення, мобільні кропи тут задрібні. */
@media (max-width: 900px) and (min-width: 601px) {
    .tn-hero__photo { height: 420px; background-image: var(--img-d); background-position: var(--pos-d); }
    .tn-hero__veil {
        background: linear-gradient(180deg,
            transparent 0px, transparent 230px,
            color-mix(in srgb, var(--tn-bg) 55%, transparent) 340px,
            var(--tn-bg) 420px);
    }
    .tn-hero { padding-top: 452px; }
    .tn-hero__dots { right: auto; left: 24px; bottom: auto; top: 378px; }
}

@media (prefers-reduced-motion: reduce) {
    .tn-btn, .tn-card { transition: none; }
    .tn-hero__photo { transition: none; }
}


/* ==============================================================
   ВЕЛИКІ ЕКРАНИ
   На моніторі 1600+ вміст не має тулитися в колонку 1120px:
   разом з екраном ростуть і контейнер, і текстова колонка, і шапка.
   ============================================================== */

@media (min-width: 1500px) {
    .tn__inner,
    .tn-hero__inner,
    .tn-crumbs__inner,
    .tn-nearby__inner { max-width: 1320px; }

    .tn-hero { min-height: 660px; }
    .tn-hero__col { max-width: 660px; }
    .tn-hero__lead { font-size: 18px; }
    .tn-block { padding: 76px 0; }
    .tn-cards { gap: 22px; }
}

@media (min-width: 1900px) {
    .tn__inner,
    .tn-hero__inner,
    .tn-crumbs__inner,
    .tn-nearby__inner { max-width: 1520px; }

    .tn-hero { min-height: 760px; }
    .tn-hero__col { max-width: 760px; }
    .tn-hero__lead { font-size: 19px; }
    .tn-block { padding: 88px 0; }
    .tn-block__text { font-size: 17px; }
    .tn-card__text { font-size: 15.5px; }
}


/* ==============================================================
   РУХ
   Клуб ігровий, тож сторінка не має бути мертвою. Але рух тут
   службовий: підказує, що кадр змінюється і що блок з'явився.
   Усе вимикається системним «зменшити рух».
   ============================================================== */

/* Кадр у шапці повільно наближається, поки він активний.
   Дає відчуття живого зображення, а не статичної підкладки. */
@keyframes tnDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

.tn-hero__photo.is-active { animation: tnDrift 9s ease-out forwards; }

/* Поява блоків при прокручуванні */
.tn-rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

.tn-rise.is-in { opacity: 1; transform: none; }

/* Картки з'являються по черзі, а не всі разом */
.tn-cards .tn-rise:nth-child(2) { transition-delay: .09s; }
.tn-cards .tn-rise:nth-child(3) { transition-delay: .18s; }
.tn-route .tn-rise:nth-child(2) { transition-delay: .09s; }
.tn-route .tn-rise:nth-child(3) { transition-delay: .18s; }

/* Картка під курсором світиться акцентом клубу */
.tn-card {
    position: relative;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.tn-card:hover {
    box-shadow: 0 14px 40px color-mix(in srgb, var(--tn-accent) 18%, transparent);
}

/* Номер кроку злегка пульсує при появі: погляд чіпляється за початок шляху */
@keyframes tnPop {
    0%   { transform: translateY(14px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

.tn-route__step.is-in::before { animation: tnPop .6s cubic-bezier(.22,.61,.36,1) both; }

/* Головна кнопка дихає світлом. Повільно, щоб не дратувати. */
@keyframes tnGlow {
    0%, 100% { box-shadow: 0 8px 30px color-mix(in srgb, var(--tn-accent) 30%, transparent); }
    50%      { box-shadow: 0 8px 44px color-mix(in srgb, var(--tn-accent) 58%, transparent); }
}

.tn-btn--primary { animation: tnGlow 3.4s ease-in-out infinite; }
.tn-btn--primary:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .tn-hero__photo.is-active,
    .tn-route__step.is-in::before,
    .tn-btn--primary { animation: none; }
    .tn-rise { opacity: 1; transform: none; transition: none; }
}

/* ==============================================================
   ЦІНИ Й ВІДГУКИ
   ============================================================== */

.tn-price {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.tn-price__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--tn-surface);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
}

.tn-price__name { font-size: 15.5px; font-weight: 500; }
.tn-price__note { display: block; font-size: 13px; color: var(--tn-ink-soft); font-weight: 400; margin-top: 3px; }

.tn-price__sum {
    font-family: var(--tn-font-head);
    font-size: 22px;
    font-weight: 600;
    color: var(--tn-accent-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tn-price__sum small { font-size: 13px; font-weight: 400; color: var(--tn-ink-soft); }

.tn-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }

.tn-quote {
    margin: 0;
    padding: 24px 26px;
    background: var(--tn-surface);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    border-left: 3px solid var(--tn-accent);
}

.tn-quote p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tn-ink); }
.tn-quote footer { margin-top: 12px; font-size: 13px; color: var(--tn-ink-soft); }

@media (max-width: 780px) {
    .tn-price, .tn-quotes { grid-template-columns: 1fr; }
}

/* ==============================================================
   АДАПТИВНІСТЬ сторінки орендаря — за tools/responsive-audit.mjs
   ============================================================== */

/* Точки слайдера мали площу дотику 9×9px. Сама точка лишається 9px,
   кнопка отримує 44px прозорими полями: вигляд не змінюється,
   а палець нарешті потрапляє. Позиція контейнера зсунута на 17px,
   щоб точки візуально лишились там само, де були. */
.tn-hero__dots { gap: 0; right: 11px; bottom: 7px; }

.tn-hero__dot {
    width: 44px; height: 44px;
    padding: 0; border: 0;
    background: transparent;
    display: grid; place-items: center;
    transform: none;
}
.tn-hero__dot::before {
    content: "";
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.32);
    transition: background .2s ease, transform .2s ease;
}
.tn-hero__dot:hover { background: transparent; }
.tn-hero__dot:hover::before { background: rgba(255,255,255,.6); }
.tn-hero__dot[aria-current="true"] { background: transparent; transform: none; }
.tn-hero__dot[aria-current="true"]::before { background: var(--tn-accent); transform: scale(1.35); }

/* Хлібні крихти були заввишки 15px */
.tn-crumbs a, .tn-crumbs span[aria-current] { display: inline-block; padding: 15px 0; }

@media (max-width: 900px) {
    .tn-hero__dots { right: auto; left: 7px; bottom: auto; top: 241px; }
}

/* Посилання «Умови та ціни», «Про квести» тощо мали 20px висоти */
@media (max-width: 1024px) {
    .tn-card__more { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Кадр повільно наїжджає (анімація tnDrift, scale до 1.07), але контейнер
   його не обрізав: збільшене фото виходило за екран на кожній ширині
   і тягло сторінку вбік. Виміряно: 1476px фото у 1440px вікні. */
.tn-hero { overflow: hidden; }

/* Посилання сусідніх категорій мали 20px висоти */
@media (max-width: 1024px) {
    .tn-nearby__link { display: inline-flex; align-items: center; min-height: 44px; }
}