/* Catalog page nav: breadcrumbs, back corridor, strip stack. */

/* Tablet rail — синхронно с client-display-pc (без ожидания deferred bundle) */
@media (min-width: 768px) and (max-width: 1439px) {
    :root {
        --catalog-rail-max: min(86.4vw, 1260px);
        --catalog-rail-px: 12px;
    }
}
@media (min-width: 1440px) {
    :root {
        --catalog-rail-max: 1340px;
        --catalog-rail-px: 12px;
    }
}

section.page-header-context.page-header-context--catalog-nav,
    .catalog-page-like-listing {
        --listing-crumb-gap: clamp(0.4rem, 1vw, 0.6rem);
        --listing-crumb-top-gap: calc(var(--listing-crumb-gap) * 0.1134);
        /* −20% зазор «баннеры → Назад»; базовые значения как у крошек под шапкой */
        --listing-banner-gallery-gap: calc(clamp(0.09rem, 0.275vw, 0.19rem) * 0.8);
        --listing-back-v-gap: calc(var(--listing-banner-gallery-gap) * 1.25);
        --listing-below-hero-gap: var(--spacing-md, 1rem);
        --theme-from: var(--z-brand-ocean);
        --theme-to: var(--z-brand-tea);
        --theme-accent: var(--z-brand-ocean-dark);
    }

    section.page-header-context.page-header-context--catalog-nav {
        padding-top: calc(var(--header-h) + var(--listing-crumb-top-gap)) !important;
        padding-bottom: var(--listing-crumb-gap) !important;
        margin-bottom: 0 !important;
    }

    .page-header-context--catalog-nav .breadcrumb {
        font-size: 0.64rem !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        row-gap: 0 !important;
        white-space: nowrap !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
    }

    .page-header-context--catalog-nav .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .page-header-context--catalog-nav .breadcrumb.breadcrumb--overflow {
        cursor: grab;
    }

    .page-header-context--catalog-nav .breadcrumb.breadcrumb--marquee-active,
    .page-header-context--catalog-nav .breadcrumb:hover,
    .page-header-context--catalog-nav .breadcrumb:focus-within {
        overflow-x: auto !important;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .page-header-context--catalog-nav .breadcrumb li {
        flex-shrink: 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .page-header-context--catalog-nav .breadcrumb li:last-child {
        flex-shrink: 1 !important;
        max-width: min(55vw, 14rem) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: normal;
    }

    .page-header-context--catalog-nav .breadcrumb.breadcrumb--marquee-active li:last-child,
    .page-header-context--catalog-nav .breadcrumb:hover li:last-child,
    .page-header-context--catalog-nav .breadcrumb:focus-within li:last-child {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Hero flush: крошки → сразу контент/hero, без большого зазора */
    @media (max-width: 768px) {
        section.page-header-context.page-header-context--catalog-nav.page-header-context--flush-hero {
            padding-bottom: 0.2rem !important;
        }

        .catalog-strip-stack--ads-only {
            margin-bottom: 0 !important;
        }

        .catalog-strip-stack--ads-only .catalog-page-like-listing.catalog-ad-strip--empty-mobile,
        .catalog-strip-stack--ads-only .catalog-page-like-listing.compass-ad-strip--empty-mobile {
            display: none !important;
        }

        .catalog-back-corridor--under-hero {
            margin-top: 0.55rem !important;
            margin-bottom: 0.65rem !important;
            padding-top: 0 !important;
        }

        .catalog-back-corridor--under-hero .catalog-back-crumb-rail {
            padding-top: 0 !important;
        }

        /* Place / compass article: hero вплотную к крошкам (strip над hero скрыт на mobile когда empty) */
        .place-detail-page .place-rv-hero,
        .news-compass-detail-page .rv-hero,
        .rental-container--listing-page .gallery-wrapper {
            margin-top: 0 !important;
        }

        .geo-hub-wrap--main > .geo-hub-card--hero:first-child,
        .poi-hub-wrap > .poi-hub-hero-card:first-child {
            margin-top: 0.15rem !important;
        }
    }

    @media (min-width: 769px) {
        .page-header-context--catalog-nav .breadcrumb {
            flex-wrap: wrap !important;
            overflow: visible !important;
            white-space: normal !important;
            mask-image: none;
            -webkit-mask-image: none;
            row-gap: 0.35rem !important;
        }

        .page-header-context--catalog-nav .breadcrumb li {
            flex-shrink: 1 !important;
        }

        .page-header-context--catalog-nav .breadcrumb li:last-child {
            max-width: none !important;
            overflow: visible !important;
            text-overflow: unset !important;
            white-space: normal !important;
            word-break: break-word;
        }
    }

    .places-hub-crumb-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem 1rem;
        max-width: 100%;
        min-width: 0;
    }

    @media (max-width: 768px) {
        .places-hub-crumb-row {
            overflow: hidden;
        }
        .places-hub-crumb-row .places-geo-hub-link {
            display: none;
        }
    }

    .places-hub-crumb-row .breadcrumb {
        flex: 1 1 auto;
        min-width: 0;
    }

    .places-geo-hub-link {
        margin: 0;
        flex: 0 1 auto;
        font-size: 0.72rem;
        line-height: 1.3;
        white-space: normal;
    }

    .places-geo-hub-link a {
        color: var(--z-brand-ocean-dark, #047a7c);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .places-geo-hub-link a:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        section.page-header-context.page-header-context--catalog-nav {
            padding-top: calc(var(--header-h) + var(--listing-crumb-top-gap)) !important;
        }
    }

    /* Крошки: та же ширина колонки и отступы, что у .catalog-page-inner / рекламной тройки */
    section.page-header-context.page-header-context--catalog-nav > .container {
        max-width: var(--catalog-rail-max, 1340px) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--catalog-rail-px, 24px) !important;
        padding-right: var(--catalog-rail-px, 24px) !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 768px) {
        section.page-header-context.page-header-context--catalog-nav > .container {
            padding-left: 14px !important;
            padding-right: 14px !important;
        }
    }

    /* Колонка как у .container листинга: баннеры + «Назад» */
    .catalog-page-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: var(--catalog-rail-max, 1340px);
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--catalog-rail-px, 24px);
        box-sizing: border-box;
    }

    @media (min-width: 769px) {
        .catalog-back-corridor > .container.catalog-back-crumb-rail {
            max-width: var(--catalog-rail-max, 1340px) !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: var(--catalog-rail-px, 24px) !important;
            padding-right: var(--catalog-rail-px, 24px) !important;
            box-sizing: border-box !important;
        }

        .catalog-back-corridor .catalog-back-above-hero.catalog-back--align-crumb {
            margin-left: 0 !important;
        }
    }

    @media (max-width: 768px) {
        .catalog-page-inner {
            padding: 0 14px;
        }
    }

    .catalog-page-like-listing .listing-summary-strip {
        display: flex;
        gap: 14px;
        margin-bottom: var(--listing-banner-gallery-gap);
        width: 100%;
    }

    .catalog-page-like-listing .listing-summary-bar {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: calc(4.5rem * 1.15);
        padding: calc(14px * 1.15) 22px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--theme-from, #228b22) 18%, #e2e8f0);
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-from, #228b22) 12%, #ffffff) 0%,
            color-mix(in srgb, var(--theme-to, #32cd32) 8%, #f8fafc) 55%,
            #ffffff 100%
        );
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
        min-width: 0;
        overflow: hidden;
    }

    .catalog-page-like-listing .listing-summary-bar-icon {
        font-size: calc(1.35rem * 1.15);
        flex-shrink: 0;
        line-height: 1;
    }

    .catalog-page-like-listing .listing-summary-bar-label {
        font-size: 0.7rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-weight: 700;
        white-space: nowrap;
    }

    .catalog-page-like-listing .listing-summary-bar-value {
        font-size: 0.98rem;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-page-like-listing .listing-summary-bar-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .catalog-page-like-listing .listing-summary-bar.bar-price .listing-summary-bar-value {
        color: var(--theme-from, #228b22);
    }

    .catalog-page-like-listing .catalog-back-above-hero {
        align-self: flex-start;
        color: var(--color-primary, #496275) !important;
    }

    .catalog-page-like-listing .catalog-back-above-hero:hover {
        color: var(--color-primary-dark, #364958) !important;
    }

    @media (max-width: 768px) {
        .catalog-page-like-listing .listing-summary-strip {
            flex-direction: column;
            gap: 10px;
        }
        .catalog-page-like-listing .listing-summary-bar {
            min-height: auto;
            padding: calc(12px * 1.15) 16px;
        }
    }

    /* Тело страницы после блока как у листинга: зазор до «хиро» / фильтров */
    .catalog-page-body {
        --listing-below-hero-gap: var(--spacing-md, 1rem);
    }

    .catalog-page-body {
        padding-top: 0 !important;
    }

    .catalog-page-body > .svc-filter-box:first-child,
    .catalog-page-body > .compass-filter-inline:first-child,
    .catalog-page-body > .places-filter-inline:first-child,
    .catalog-page-body > .places-featured:first-child,
    .catalog-page-body > .compass-featured:first-child {
        margin-top: var(--listing-below-hero-gap);
    }

    .catalog-back-above-hero {
        box-sizing: border-box;
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content;
        max-width: 100%;
        margin: var(--listing-back-v-gap) 0 var(--listing-back-v-gap) -20px !important;
        padding: 0 !important;
        gap: 0.2rem !important;
        border: none !important;
        border-radius: 0 !important;
        line-height: 1 !important;
        min-height: 0 !important;
        color: var(--color-primary, #496275);
        /* ~12% меньше прежнего var(--font-size-sm); капс ниже */
        font-size: calc(var(--font-size-sm, 0.875rem) * 0.88);
        font-weight: 600;
        cursor: pointer;
        background: none !important;
        transition: color 0.2s ease;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
    }

    .catalog-back-above-hero:hover {
        color: var(--color-primary-dark, #364958);
    }

    .catalog-back-above-hero svg {
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        stroke: currentColor;
        fill: none;
        transition: transform 0.2s ease;
    }

    .catalog-back-above-hero:hover svg {
        transform: translateX(-4px);
    }

    .catalog-back-above-hero span {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15 !important;
    }

    /* Стек: баннеры + коридор «Назад» (как крошки) + контент в .catalog-page-inner */
    .catalog-strip-stack {
        --listing-crumb-gap: clamp(0.4rem, 1vw, 0.6rem);
        --listing-crumb-top-gap: calc(var(--listing-crumb-gap) * 0.1134);
        /* Синхронно с .catalog-strip-stack .ad-strip-catalog-inner (partials/_ad_strip_triple.html) */
        --catalog-ad-inner-padding-bottom: calc(16px * 0.8);
        /* Зазор «низ баннеров → строка Назад» = padding-bottom внутреннего блока + отступ над кнопкой */
        --catalog-back-above-gap: calc(var(--catalog-ad-inner-padding-bottom) + var(--listing-crumb-top-gap));
        --listing-below-hero-gap: var(--spacing-md, 1rem);
        --listing-banner-gallery-gap: calc(clamp(0.09rem, 0.275vw, 0.19rem) * 0.8);
        --listing-back-v-gap: calc(var(--listing-banner-gallery-gap) * 1.25);
        /* Было *0.7; ещё −20% ≈ *0.56 — «Назад» ближе к верхним баннерам */
        --catalog-stack-corridor-h: calc(
            (var(--listing-below-hero-gap) + var(--listing-banner-gallery-gap) + 2 * var(--listing-back-v-gap) + 1.35rem) * 0.56
        );
    }

    /* Симметрия: отступ под «Назад» до нижнего блока = отступ от баннеров до «Назад» */
    .catalog-strip-stack .catalog-back-corridor {
        align-items: flex-start !important;
        min-height: 0 !important;
        padding-top: var(--listing-crumb-top-gap);
        padding-bottom: var(--catalog-back-above-gap);
        box-sizing: border-box;
    }

    /* Не дублировать зазор: первый блок после стека без margin-top */
    .catalog-strip-stack + .catalog-page-inner > .compass-filter-inline:first-child,
    .catalog-strip-stack + .catalog-page-inner > .svc-filter-box:first-child,
    .catalog-strip-stack + .catalog-page-inner > .mkt-board-filter-box:first-child,
    .catalog-strip-stack + .catalog-page-inner > .places-filter-inline:first-child,
    .catalog-strip-stack + .catalog-page-inner > .places-featured:first-child,
    .catalog-strip-stack + .catalog-page-inner > .compass-featured:first-child {
        margin-top: 0 !important;
    }

    /* Z-Bids: тело доски сразу после strip — как Compass, без .catalog-page-inner */
    .catalog-strip-stack + .tender-body.tender-board-body > .compass-filter-inline:first-child {
        margin-top: 0 !important;
    }

    .catalog-strip-stack + .rental-container.catalog-page-inner,
    .catalog-strip-stack + .rental-container {
        margin-top: 0 !important;
    }

    .places-strip-back-filter-stack {
        --theme-from: var(--z-action-blue);
        --theme-to: var(--z-action-blue-hover);
        --theme-accent: var(--z-action-blue-hover);
    }

    .trains-strip-back-filter-stack {
        --theme-from: var(--z-action-blue);
        --theme-to: var(--z-action-blue-hover);
        --theme-accent: var(--z-action-blue-hover);
    }

    .compass-strip-back-filter-stack,
    .services-strip-back-filter-stack {
        --theme-from: var(--z-brand-ocean);
        --theme-to: var(--z-brand-tea);
        --theme-accent: var(--z-brand-ocean-dark);
    }

    /* Страница одного места (/places/slug) */
    .place-detail-strip-stack {
        --theme-from: var(--z-brand-tea);
        --theme-to: var(--z-brand-tea-dark);
        --theme-accent: var(--z-brand-tea-dark);
    }

    .catalog-strip-stack .catalog-page-like-listing .listing-summary-strip {
        margin-bottom: 0 !important;
    }

    .catalog-back-corridor {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: var(--catalog-stack-corridor-h);
        box-sizing: border-box;
    }

    .catalog-back-corridor > .container.catalog-back-crumb-rail {
        flex: 1 1 auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    @media (max-width: 768px) {
        .catalog-back-corridor > .container.catalog-back-crumb-rail {
            padding-left: 14px !important;
            padding-right: 14px !important;
        }
    }

    .catalog-strip-stack .places-filter-inline,
    .catalog-strip-stack .trains-filter-inline,
    .catalog-strip-stack .compass-filter-inline,
    .catalog-strip-stack .svc-filter-box,
    .catalog-strip-stack .mkt-board-filter-box {
        margin-top: 0;
    }

    .catalog-back-above-hero.catalog-back--align-crumb {
        margin: 0 !important;
        color: var(--color-primary, #496275) !important;
    }

    .catalog-back-above-hero.catalog-back--align-crumb:hover {
        color: var(--color-primary-dark, #364958) !important;
    }

    .catalog-back-corridor a.catalog-back-above-hero {
        text-decoration: none;
    }

    .compass-strip-back-filter-stack + .compass-body.catalog-page-body > .compass-reviews-section:first-child,
    .compass-strip-back-filter-stack + .compass-body.catalog-page-body > .compass-articles-section:first-child,
    .compass-strip-back-filter-stack + .compass-body.catalog-page-body > .compass-empty:first-child {
        margin-top: 0;
    }

    .services-strip-back-filter-stack + .services-body.catalog-page-body .services-grid {
        margin-top: 0;
    }

    .trains-strip-back-filter-stack + .trains-body.catalog-page-inner > .trains-hero:first-child,
    .trains-strip-back-filter-stack + .trains-body.catalog-page-inner > .route-detail-header:first-child {
        margin-top: var(--listing-below-hero-gap, 1rem);
    }

    /* Карточка листинга: «Назад» — без font:inherit (он сбрасывал размер на родительский) */
    .listing-catalog-strip-stack .catalog-back-corridor button.catalog-back-above-hero,
    .listing-catalog-strip-stack .catalog-back-corridor a.catalog-back-above-hero {
        font-family: inherit;
        font-size: calc(var(--font-size-sm, 0.875rem) * 0.88);
        font-weight: 600;
        font-style: normal;
        line-height: 1;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }

    .listing-catalog-strip-stack + .rental-container--listing-page {
        margin-top: 0 !important;
    }

    /* Статические страницы (о нас, контакты, CMS): отступ снизу блока как у detail-page */
    .rental-container.company-static-page {
        padding-bottom: 0;
    }

    .catalog-strip-stack + .rental-container.company-static-page {
        margin-top: 0 !important;
    }

    /* Кнопка «Назад» в compass/services strip — те же шрифты, что у ссылки */
    .compass-strip-back-filter-stack .catalog-back-corridor button.catalog-back-above-hero,
    .services-strip-back-filter-stack .catalog-back-corridor button.catalog-back-above-hero {
        font-family: inherit;
        font-size: calc(var(--font-size-sm, 0.875rem) * 0.88);
        font-weight: 600;
        font-style: normal;
        line-height: 1;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }

    /*
     * Статические страницы (help, terms, privacy, …): тело в .rental-container + .catalog-page-inner.
     * Глобальный .rental-container { max-width: 1400px !important } из style.css/desktop-unified
     * иначе делает колонку шире рекламной тройки (1340 + боковые 24px). Выровнять с баннерами.
     */
    .rental-container.catalog-page-inner.company-static-page:not(.contacts-page) {
        max-width: 1340px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 768px) {
        .rental-container.catalog-page-inner.company-static-page:not(.contacts-page) {
            padding-left: 14px !important;
            padding-right: 14px !important;
        }
    }

/* Ревью / каталог: крошки, «Назад», баннеры — одна левая линия на всех планшетах */
@media (min-width: 768px) {
    section.page-header-context.page-header-context--catalog-nav > .container,
    .catalog-back-corridor > .container.catalog-back-crumb-rail,
    .catalog-strip-stack .catalog-page-inner.ad-strip-catalog-inner,
    .catalog-page-like-listing > .catalog-page-inner,
    .compass-strip-back-filter-stack .catalog-page-inner.ad-strip-catalog-inner,
    .ad-strip-catalog-inner,
    .news-compass-detail-page.rental-container.catalog-page-inner {
        max-width: var(--catalog-rail-max, min(86.4vw, 1260px)) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--catalog-rail-px, 12px) !important;
        padding-right: var(--catalog-rail-px, 12px) !important;
        box-sizing: border-box !important;
    }
}