/* ==========================================================================
   SMARTECH — единый адаптивный стиль
   Вместо отдельных mobile / tablet / laptop файлов размеры теперь «плавающие»:
   они считаются от ширины и высоты окна (clamp, rem, vw, vh), поэтому сайт
   одинаково аккуратно выглядит и на телефоне, и на 4K, и при смене масштаба
   браузера (Ctrl +/−).

   Всего два места, где меняется раскладка:
     • 700px  — шапка и подвал (в строку / в столбик)
     • 900px  — услуги: боковая панель справа / окно на весь экран
   Всё остальное подстраивается само.
   ========================================================================== */

/* ---------- Шрифт и переменные ---------- */
@font-face {
    font-family: 'Saira-Medium';
    src: url('/assets/fonts/Saira-Medium.ttf') format('truetype');
    font-display: swap;
}

:root {
    --accent: #1e9d85;
    --accent-hover: #009e86;
    --text: #fff;
    --shade: rgba(0, 0, 0, .5);          /* затемнение фона и панелей */
    --card: rgba(0, 0, 0, .3);

    /* Плавающий базовый размер текста: ~14px на телефоне … ~19px на больших мониторах */
    font-size: clamp(14px, .35vw + 11.5px, 19px);

    --gutter: clamp(1rem, 3vw, 3rem);                     /* боковые поля */
    --rail-w: clamp(2.75rem, 3.5vw, 4rem);                /* ширина правой навигации */
    --label-w: clamp(2.5rem, 5vw, 5rem);                  /* место под вертикальную подпись */
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
}

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

html {
    scroll-snap-type: y mandatory;          /* страницы «примагничиваются» — и после смены масштаба тоже */
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { display: none; }
html.no-scroll { overflow: hidden; }

body {
    margin: 0;
    font-family: 'Saira-Medium', Arial, sans-serif;   /* в Saira нет кириллицы → для RU берётся Arial */
    color: var(--text);
    background: #000;
    -webkit-user-select: none;
    user-select: none;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Страницы (экраны) ---------- */
.page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-inline: calc(var(--label-w) + var(--safe-l)) calc(var(--rail-w) + var(--gutter) + var(--safe-r));
    background: var(--bg) center / cover no-repeat;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
/* затемнение фона */
.page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--shade);
    pointer-events: none;
}
.page > * { position: relative; }          /* контент над затемнением */

.page-1 { --bg: url('/assets/img/backgrounds/bg-home.jpg'); }
.page-1::before { background: none; }
.page-2 { --bg: url('/assets/img/backgrounds/bg-services.jpg'); }
.page-3 { --bg: url('/assets/img/backgrounds/bg-partners.jpg'); }

/* на «высоких» экранах (телефон, планшет вертикально) — вертикальные фоны */
@media (orientation: portrait) {
    .page-1 { --bg: url('/assets/img/backgrounds/bg-home-mobile.jpg'); }
    .page-3 { --bg: url('/assets/img/backgrounds/bg-partners-mobile.jpg'); }
}

/* Вертикальная подпись слева */
.vertical-label {
    position: absolute;
    left: calc(var(--label-w) / 2 + var(--safe-l));
    top: 50%;
    translate: -50% -50%;
    rotate: 180deg;
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size: clamp(.9rem, .5vw + .8rem, 1.5rem);
    font-weight: bold;
    letter-spacing: .05em;
    z-index: 2;
}

/* ---------- Прелоадер ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    background: rgba(0, 0, 0, .85);
    transition: opacity 1s ease, visibility 1s;
}
.js .preloader { display: grid; }
.loaded .preloader { opacity: 0; visibility: hidden; }
.progress-bar {
    width: min(40vw, 14rem);
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 50% 100% no-repeat, rgba(255, 255, 255, .12);
    animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* ---------- Шапка (только на первом экране) ---------- */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo contacts" "logo nav";
    align-items: center;
    column-gap: 1rem;
    padding: .5rem calc(var(--gutter) + var(--safe-r)) .5rem calc(var(--gutter) + var(--safe-l));
    background: var(--shade);
    opacity: 0;
    transition: opacity 1s ease-in-out .1s;
}
.loaded .site-header, html:not(.js) .site-header { opacity: 1; }

.logo { grid-area: logo; display: block; line-height: 0; }
.logo img {
    height: clamp(2.75rem, 6.2vw, 7.5rem);   /* ~44px на телефоне … 120px на большом экране */
    width: auto;
}

.contacts-bar {
    grid-area: contacts;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 1rem;
}
.contacts-bar .social-link { font-size: 1.15rem; color: var(--accent); transition: color .3s; }
.contacts-bar .social-link:hover { color: #fff; }

.site-header nav {
    grid-area: nav;
    justify-self: end;
    display: flex;
    gap: clamp(1rem, 2.2vw, 2.5rem);
    padding-block: .5rem .25rem;
}
.site-header nav a:hover { text-decoration: underline; }

/* ---------- Услуги ---------- */
.services {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 6vh, 4rem);
    width: min(100%, 46rem);
    padding-block: 1.5rem;
}

.card {
    width: fit-content;
    max-width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 15px;
    background: var(--card);
}
.services-intro p { margin: 0; font-size: clamp(.95rem, .45vw + .8rem, 1.3rem); }
.services-title {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.6rem);
    color: var(--accent);
}

.service-list { margin: 0; padding: 0; list-style: none; }
.service-link {
    display: block;
    width: 100%;
    padding: .55em 0 .55em 1rem;
    border: 0;
    background: none;
    text-align: left;
    font-size: clamp(.95rem, .4vw + .8rem, 1.3rem);
    transition: color .3s, transform .3s;
    transform-origin: left center;
}
.service-link:hover,
.service-link.is-active { color: var(--accent); }
@media (hover: hover) { .service-link:hover { transform: translateX(.35rem); } }

/* Панель с описанием услуги.
   По умолчанию (узкий экран) — окно на весь экран, открывается по нажатию.
   От 900px — постоянная боковая панель справа. */
.service-panel {
    --fit: 1;                               /* 1 = обычный размер; JS уменьшает, если описание не помещается по высоте */
    container-type: inline-size;            /* внутри панели раскладка зависит от её ширины, а не окна */
    position: fixed;
    inset: 0;
    z-index: 1100;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4rem var(--gutter) 2rem;
    background: rgba(0, 0, 0, .92);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
}
.service-panel.is-open { opacity: 1; visibility: visible; }

.service { display: none; }
.service.is-active { display: block; animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; } }

.service-text {
    padding: 1rem 1.2rem;
    border-radius: 15px;
    background: var(--card);
}
.service-text h2 {
    margin: 0 0 .6rem;
    font-size: calc(clamp(1.1rem, .6vw + .9rem, 1.6rem) * var(--fit));
    line-height: 1.25;
}
.service-text p { margin: 0; font-size: calc(clamp(.9rem, .3vw + .8rem, 1.1rem) * var(--fit)); line-height: 1.5; }

.service-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.service-col { display: grid; gap: 1rem; align-content: start; }
.service figure { margin: 0; }
.service figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(clamp(8rem, 28vh, 22rem) * var(--fit));   /* картинки никогда не выше экрана */
    object-fit: cover;
    border: 2px solid #ccc;
    border-radius: 10px;
}
.service figcaption {
    margin-top: .5rem;
    padding: .7rem .8rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, .2);
    color: var(--accent);
    text-align: center;
    font-size: calc(clamp(.78rem, .25vw + .68rem, .95rem) * var(--fit));
    line-height: 1.45;
    overflow-wrap: anywhere;
}
:lang(ru) .service figcaption { font-size: calc(clamp(.82rem, .25vw + .72rem, 1rem) * var(--fit)); }

/* если панель достаточно широкая — две колонки, вторая чуть ниже (как раньше) */
@container (min-width: 24rem) {
    .service-media { grid-template-columns: 1fr 1fr; align-items: start; }
    .service-col:nth-child(2) { margin-top: clamp(1rem, 7vh, 6rem); }
}

.service.is-active .service-col figure { animation: fade 1.2s ease both; }
.service.is-active .service-col:nth-child(2) figure { animation-delay: .35s; }

/* Кнопка «закрыть» (панель услуг и «О нас») */
.close-btn {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top, 0px));
    right: calc(1rem + var(--safe-r));
    z-index: 5;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    font-size: 1.1rem;
    transition: background .3s;
}
.close-btn:hover { background: var(--accent); }
.service-panel .close-btn { position: sticky; float: right; top: 0; margin: -3rem 0 0; }

@media (min-width: 900px) {
    .service-panel {
        position: absolute;                 /* живёт внутри страницы «Услуги» */
        inset: 0 0 0 auto;
        z-index: 3;
        width: clamp(26rem, 46%, 46rem);
        padding: 1.5rem calc(var(--rail-w) + var(--gutter) / 2 + var(--safe-r)) 1.5rem 1.5rem;
        background: var(--shade);
        opacity: 1;
        visibility: visible;
        scrollbar-width: thin;              /* запасной вариант: если совсем низкий экран — виден ползунок */
        scrollbar-color: var(--accent) transparent;
    }
    .service-panel .close-btn { display: none; }
    /* левая колонка занимает только место слева от панели и не заезжает под неё */
    .page-2 { padding-right: calc(min(46%, 46rem) + 1.25rem); padding-left: calc(var(--label-w) + var(--safe-l) + clamp(0rem, 3vw, 5rem)); }
}

/* ---------- Партнёры ---------- */
.partners {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-content: center;
    gap: clamp(.75rem, 2.5vw, 3rem) clamp(.75rem, 3vw, 3.5rem);
    padding-block: 6rem 1rem;
}
.js .partners { opacity: 0; transition: opacity 1.5s ease-in-out; }
.js .page-3.is-current .partners { opacity: 1; }

.partner-logo {
    display: grid;
    place-items: center;
    padding: clamp(.35rem, .6vw, .7rem);
    border: clamp(2px, .25vw, 4px) solid var(--accent);
    border-radius: clamp(10px, 1.3vw, 20px);
}
.partner-logo img {
    display: block;
    width: clamp(6.5rem, 16vw, 18.75rem);
    height: auto;
    transition: transform .3s ease;
}
@media (hover: hover) { .partner-logo:hover img { transform: scale(1.08); } }

/* ---------- Подвал / контакты ---------- */
.site-footer {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-around;
    align-items: start;
    gap: 1rem 2rem;
    padding: 1rem 0 max(1.5rem, env(safe-area-inset-bottom, 0px));
    font-size: clamp(.8rem, .35vw + .7rem, 1.1rem);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .9);      /* читаемость поверх фото */
}
.site-footer p { margin: 0 0 .6rem; }
.footer-title { color: var(--accent); font-weight: bold; }
.site-footer i { width: 1.25em; text-align: center; }
.site-footer address { font-style: normal; max-width: 22em; }
.map-link { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start; margin-bottom: .6rem; }
.map-icon { width: 1.4em; height: 1.4em; }
.entrance { display: block; padding-left: calc(1.4em + .5rem); }

/* Телефоны и почта: копируются по клику (на телефоне — звонок / письмо) */
.copyable {
    cursor: pointer;
    -webkit-user-select: text;
    user-select: text;
}
.copyable:hover { color: var(--accent); }

.toast {
    position: fixed;
    left: 50%;
    bottom: max(2rem, env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    z-index: 9000;
    padding: .6rem 1.2rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: .9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}
.toast.is-visible { opacity: 1; }

/* ---------- Правая навигация: домой, язык, точки ---------- */
.rail {
    position: fixed;
    top: 50%;
    right: calc(var(--gutter) / 2 + var(--safe-r));
    translate: 0 -50%;
    z-index: 1000;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(.6rem, 2.5vh, 1.5rem);
}
.rail-home { font-size: clamp(1.1rem, 1.2vw + .6rem, 1.5rem); transition: color .3s; }
.rail-home:hover { color: var(--accent); }

.lang { display: flex; flex-direction: column; align-items: center; }
.lang a {
    padding: .2rem .25rem;
    font-size: clamp(.75rem, .3vw + .65rem, 1rem);
    border-bottom: 2px solid transparent;
    transition: color .3s;
}
.lang a:hover { color: var(--accent); }
.lang a.active { font-weight: bold; color: var(--accent); border-bottom-color: var(--accent); }

.dots { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 2.5vh, 1.25rem); }
.dot {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    transition: background-color .3s;
}
.dot::after { content: ''; position: absolute; inset: -.6rem; }      /* увеличенная зона нажатия */
.dot.active { background: var(--accent); }

/* ---------- «О нас» ---------- */
.about {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s;
}
.about.is-open { opacity: 1; visibility: visible; }

.about-inner {
    width: min(100% - 2 * var(--gutter), 90rem);
    margin: 0 auto;
    padding-block: 4.5rem 3rem;
    display: grid;
    gap: 2.5rem 4rem;
    align-items: start;
}
.about-text { font-size: clamp(.92rem, .35vw + .8rem, 1.25rem); line-height: 1.6; }
.about-text p { margin: 0 0 1rem; }
.about-text b { color: var(--accent); font-size: 1.12em; }
.about-text .signature { margin-top: 1.5rem; }

.about-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1.5rem;
    align-items: start;
}
.about-gallery h3 { grid-column: 1 / -1; margin: 0; color: var(--accent); font-size: 1.1rem; }
.about-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid #fff;
    border-radius: 10px;
    transition: transform .3s ease;
}
.about-gallery img.wide { grid-column: 1 / -1; }
@media (hover: hover) {
    .about-gallery img:hover { transform: scale(1.5); position: relative; z-index: 3; }
    .about-gallery img.wide:hover { transform: scale(1.15); }
}

@media (min-width: 900px) {
    .about-inner { grid-template-columns: 1fr 1fr; padding-block: 6rem 3rem; }
}

/* ---------- Мобильная шапка и подвал (до 700px) ---------- */
@media (max-width: 699px) {
    .site-header {
        grid-template-columns: 1fr auto;
        grid-template-areas: "logo contacts" "nav nav";
        row-gap: .25rem;
    }
    .contacts-bar {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: end;
        gap: .4rem .9rem;
        font-size: .9rem;
    }
    .contacts-bar .phone { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
    .site-header nav {
        justify-self: stretch;
        justify-content: space-between;
        padding-block: .4rem .1rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
        font-size: .85rem;
    }

    /* Партнёры: 2 колонки на всю ширину, логотипы одинакового размера */
    .partners {
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        gap: .7rem;
        padding-block: 4.5rem .75rem;
    }
    .partner-logo { min-height: 4.2rem; border-radius: 14px; background: rgba(0, 0, 0, .25); }
    .partner-logo img { width: min(88%, 8.5rem); }

    /* Контакты: одна аккуратная «стеклянная» карточка */
    .site-footer {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        padding: 1rem 1.1rem;
        border-radius: 16px;
        background: rgba(0, 0, 0, .5);
        font-size: .95rem;
        text-shadow: none;
    }
    .site-footer p { margin-bottom: .2rem; }
    .site-footer p a { display: inline-block; padding: .2rem 0; }
    .footer-title { font-size: .8rem; letter-spacing: .08em; }
    .site-footer address { max-width: none; }
}

/* Низкие окна (телефон в горизонтальном положении, маленькие ноутбуки) */
@media (max-height: 520px) {
    .services { gap: .75rem; padding-block: 1rem; }
    .services-intro { padding: .6rem .8rem; }
    .services-title { margin-bottom: .4rem; }
    .service-link { padding-block: .3em; }
    .partners { padding-top: 5rem; }
    .rail { gap: .4rem; }
    .about-inner { padding-top: 3.5rem; }
}