/* Кейс-лендинг «Школа Озерная» — правки концепта под сайт.
   База — work-landing-ozernaya-base.css (сгенерирована из концепта, руками не правится).
   Этот файл подключается после базы, поэтому при равной специфичности побеждает. */

.ozl
{
    --ozl-head: 0px;                              /* высота липкой шапки сайта, ставит скрипт */
    --ozl-pin: calc(var(--ozl-head) + 24px);      /* верх закреплённых сцен */

    /* Палитра сайта вместо холодной палитры концепта. Синий остаётся только
       внутри самих изделий (карты, указатель 200_I) — это графика стандарта. */
    --paper: #f7f7f4;                             /* светлый фон, как у финального блока главной */
    --ink: var(--text_color, #2b2b2b);
    --muted: #6e6e66;
    --line: #e4e4de;
    --blue: #8a6212;                              /* концепт красил этой переменной текстовые акценты;
                                                     у сайта это тёмно-золотой надзаголовков главной */
    --ozl-accent: var(--accent_color, #f8b233);   /* заливки, подчёркивания, активные метки */
    --ozl-accent-hover: #e5a12b;

    display: block;
    width: 100%;
    min-width: 0;

    font-family: var(--font_family);
}

/* Контейнер — как .cont темы (1200 на всех ширинах: response_1899.css темы
   подключён без ограничения по ширине): края совпадают с логотипом и крошками */
.ozl .chapter
{
    max-width: 1200px;
    padding-left: var(--cont_padding);
    padding-right: var(--cont_padding);
    scroll-margin-top: calc(var(--ozl-head) + 16px);
}

/* Inter шире Arial из концепта, а колонка уже (1160 против 1312):
   кегль от ширины колонки, чтобы заголовки ложились в две строки, как в макете */
.ozl .hero-title h1 { font-size: min(4.6vw, 58px); letter-spacing: -.05em; }
.ozl h2 { font-size: clamp(34px, 3.3vw, 48px); letter-spacing: -.05em; }
.ozl h3 { letter-spacing: -.04em; }
.ozl .space-product h3 { font-size: 21px; letter-spacing: -.03em; }
@media (max-width: 700px)
{
    .ozl .hero-title h1 { font-size: clamp(32px, 8.6vw, 46px); }
    .ozl .section-head h2,
    .ozl .pinned-frame > .section-head h2,
    .ozl .closing h2 { font-size: clamp(28px, 8.4vw, 36px); }
}

/* Закреплённые сцены — под липкой шапкой сайта, а не от верха окна */
@media (prefers-reduced-motion: no-preference)
{
    .ozl .map-sticky,
    .ozl .directory-sticky,
    .ozl .stele-sticky { top: var(--ozl-pin); }
    .ozl .map-scroll,
    .ozl .directory-scroll { scroll-margin-top: var(--ozl-pin); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px)
{
    .ozl .map-sticky,
    .ozl .directory-sticky,
    .ozl .stele-sticky { top: calc(var(--ozl-head) + 12px); }
}

/* Тема задаёт любому <aside> сайдбар: flex-колонка, gap 40px, ширина 300 —
   в «Системе в пространстве» это давало пустоты и растягивало «Открыть макет» */
.ozl .space-product
{
    display: block;
    width: auto;
    gap: 0;
}

/* Карта этажа подгружается скриптом: место под неё держим заранее */
.ozl .map-panel { aspect-ratio: 1 / 1; }
.ozl .map-panel:not(.is-loaded)
{
    background: #efefea;
    border-radius: 2.5%;
}
.ozl .map-panel.is-loaded { aspect-ratio: auto; }

/* ---------- акценты ---------- */

/* Тема гасит outline у кнопок через !important — возвращаем фокус с клавиатуры */
.ozl button:focus-visible,
.ozl a:focus-visible
{
    outline: 2px solid var(--blue) !important;
    outline-offset: 4px;
}

/* Текстовые кнопки («Повторить анимацию», «Открыть макет»): тёмный текст,
   жёлтое подчёркивание. Жёлтый текстом на светлом фоне не читается. */
.ozl .action,
.ozl .asset-link
{
    padding: 6px 0;
    color: var(--ink);
    border-bottom: 2px solid var(--ozl-accent);
    transition: color .2s, border-color .2s;
}
.ozl .action:hover,
.ozl .asset-link:hover { color: var(--blue); border-bottom-color: var(--ozl-accent-hover); }

/* Выбор этажа: активный — жёлтая плашка, как кнопки сайта */
.ozl .floor-select button
{
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: color .2s, border-color .2s, background .2s;
}
.ozl .floor-select button:hover { color: var(--ink); border-color: rgba(43,43,43,.35); }
.ozl .floor-select button[aria-pressed=true]
{
    color: var(--ink);
    border-color: var(--ozl-accent);
    background: var(--ozl-accent);
}

/* Этапы карты: текущий — тёмный текст и жёлтая черта снизу */
.ozl .map-steps button { transition: color .2s; }
.ozl .map-steps button:hover,
.ozl .map-steps li.current button { color: var(--ink); }
.ozl .map-steps li.current
{
    border-bottom-color: var(--ozl-accent);
    box-shadow: 0 1px 0 var(--ozl-accent);
}
.ozl .map-steps li.current b { color: var(--blue); }

/* Позиции изделий: активная — тёмный текст и жёлтая черта */
.ozl .position-select button { transition: color .2s; }
.ozl .position-select button:hover { color: var(--ink); }
.ozl .position-select button[aria-pressed=true]
{
    color: var(--ink);
    box-shadow: 0 2px 0 var(--ozl-accent);
}
.ozl .position-select button[aria-pressed=true] b { color: var(--blue); }

/* Метки на плане первого этажа */
.ozl .product-point .point-disc { stroke: #a9a9a1; }
.ozl .product-point .point-label { fill: #55554e; }
.ozl .product-point.is-active .point-disc { fill: var(--ozl-accent); stroke: var(--ozl-accent); }
.ozl .product-point.is-active .point-label { fill: var(--ink); }

/* Фото открываются в лайтбоксе сайта */
.ozl img.fancy_img { cursor: zoom-in; }

/* ---------- призыв: карточка в стиле карточек главной ---------- */
.ozl #ozl-installed { border-bottom: 0; }
.ozl .closing
{
    padding-top: 24px;
    padding-bottom: 96px;

    background: transparent;
    border-bottom: 0;
}
.ozl .ozl-cta-card
{
    padding: 56px;

    background: #fff;
    border: 1px solid rgba(43,43,43,.14);
    border-radius: 20px;
}
.ozl .closing h2 { color: var(--ink); }
.ozl .ozl-cta-row
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}
/* Кнопки — один в один .home_final_cta_btn главной */
.ozl .ozl-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;

    color: var(--ink);
    font-family: var(--font_family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--ozl-accent);

    transition: background .2s, border-color .2s;
}
.ozl .ozl-btn:hover { background: var(--ozl-accent-hover); color: var(--ink); }
.ozl .ozl-btn--ghost
{
    background: transparent;
    border-color: rgba(43,43,43,.35);
}
.ozl .ozl-btn--ghost:hover { background: transparent; border-color: var(--ink); }
.ozl .ozl-more
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 40px;
    padding-top: 20px;

    font-size: 14px;

    border-top: 1px solid var(--line);
}
.ozl .ozl-more a { color: var(--muted); text-decoration: none; transition: color .2s; }
.ozl .ozl-more a:hover { color: var(--ink); }
@media (max-width: 700px)
{
    .ozl .closing { padding-bottom: 56px; }
    .ozl .ozl-cta-card { padding: 30px 22px; border-radius: 16px; }
    .ozl .ozl-cta-card h2 { font-size: clamp(26px, 7.6vw, 32px); }
    .ozl .ozl-cta-card h2 br { display: none; }   /* узкая карточка: пусть строка ломается сама */
    .ozl .ozl-btn { width: 100%; }
}

/* ---------- «От общего к частному» на телефоне ----------
   Заказчик 12.10.2026: на телефоне помещались только списки и план, а изделие
   по нажатию на метку менялось за краем экрана. Теперь: заголовок и абзац →
   подсказка → план с номерами 01–07 → сразу под ним карточка изделия
   (макет слева, подпись справа, стрелки). План и карточка — в один экран.
   Списки «Обзор здания…» и «C_01 · 121_MAP…» на телефоне не показываем. */
.ozl .ozl-space-hint,
.ozl .ozl-pos-nav { display: none; }
@media (max-width: 700px)
{
    .ozl .space-section > .information-chain,
    .ozl .space-section > .position-select { display: none; }

    .ozl .ozl-space-hint
    {
        display: flex;
        align-items: center;
        gap: 10px;
        order: 1;
        margin: 0 0 6px;

        color: var(--ink);
        font-size: 14px;
        line-height: 1.35;
    }
    .ozl .ozl-space-hint__dot
    {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;

        font-size: 10px;
        font-weight: 600;

        border-radius: 50%;
        background: var(--ozl-accent);
    }
    .ozl .space-section > .space-stage { gap: 10px; }

    /* все метки с номерами (в концепте неактивные были точками по 6 px) */
    .ozl .spatial-visual .product-point:not(.is-active) .point-label { display: inline; }
    .ozl .spatial-visual .product-point { cursor: pointer; }

    /* карточка: макет слева, подпись справа */
    .ozl .space-product
    {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr auto;
        column-gap: 16px;
        padding: 14px 0 0;

        border-top: 1px solid var(--line);
    }
    .ozl .space-product .position-mockup,
    .ozl .space-product[data-selected=directory] .position-mockup
    {
        grid-column: 1;
        grid-row: 1 / span 5;
        height: 190px;
        margin: 0;
    }
    .ozl .space-product .position-mockup img,
    .ozl .space-product[data-selected=directory] .position-mockup img { max-height: 190px; }
    .ozl .space-product > .type-tag { grid-column: 2; grid-row: 1; }
    .ozl .space-product h3 { grid-column: 2; grid-row: 2; margin-top: 6px; font-size: 19px; line-height: 1.15; }
    .ozl .space-product p { grid-column: 2; grid-row: 3; margin-top: 8px; font-size: 13px; line-height: 1.4; }
    .ozl .space-product .asset-link { grid-column: 2; grid-row: 4; align-self: start; justify-self: start; margin-top: 10px; font-size: 12px; }
    .ozl .space-product .ozl-pos-nav
    {
        display: flex;
        grid-column: 2;
        grid-row: 5;
        align-items: center;
        gap: 10px;
        margin-top: 10px;

        color: var(--muted);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }
    .ozl .ozl-pos-nav button
    {
        width: 36px;
        height: 36px;

        color: var(--ink);
        font-size: 20px;
        line-height: 1;

        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }
    .ozl .ozl-pos-nav button:active { background: var(--ozl-accent); border-color: var(--ozl-accent); }
    .ozl .space-section > .spatial-note { margin-top: 14px; }
}
/* Узкие телефоны (320–360): снизу закреплена плашка «Напишите нам» — карточка ниже,
   чтобы подсказка, план и стрелки помещались над ней */
@media (max-width: 360px)
{
    .ozl .ozl-space-hint { font-size: 13px; }
    .ozl .space-product .position-mockup,
    .ozl .space-product[data-selected=directory] .position-mockup { height: 150px; }
    .ozl .space-product .position-mockup img,
    .ozl .space-product[data-selected=directory] .position-mockup img { max-height: 150px; }
    .ozl .space-product h3 { font-size: 17px; }
    .ozl .space-product p { margin-top: 6px; font-size: 12px; }
    .ozl .space-product .asset-link { margin-top: 6px; }
    .ozl .space-product .ozl-pos-nav { margin-top: 6px; }
    .ozl .ozl-pos-nav button { width: 32px; height: 32px; }
}