/* /local/templates/.default/css/page-top-custom.css
   Кастомные правила работают только при наличии классов page-top--custom / page-top-wrapper--custom,
   их добавляет шаблон, если найдена шапка с выбранным видом.
   Иначе (в т.ч. в каталоге) шапка остаётся родной.
   Стили кнопок не нужны: используются штатные классы темы btn btn-default btn-lg [btn-transparent-bg]. */

/* слот карточки товара: пока пустой, не занимает места */
.product-title-slot:empty {
    display: none;
}

/* общий блок (крошки, H1, описание, кнопки): в стандартной шапке «прозрачный» для раскладки,
   cowl и topic ведут себя как прямые дети section, как раньше */
.page-top__text {
    display: contents;
}

/* ---------- общая плашка ---------- */
.page-top-wrapper--custom {
    background: #eee;
    overflow: hidden;
}

.page-top--custom {
    --pt-pad: 32px;
    display: grid;
    grid-template-columns: 1fr;
    /* по умолчанию одна колонка на всю ширину (plain, cover) */
    column-gap: 32px;
    row-gap: 0;
    padding-block: var(--pt-pad);
}

.page-top--custom>.page-top__text {
    display: block;
    grid-column: 1;
    min-width: 0;
}

.page-top--custom>.page-top__media,
.page-top--custom>.page-top__meta {
    grid-column: 1;
}

/* красный заголовок */
.page-top--theme h1 {
    color: var(--theme-base-color);
}

/* ---------- содержимое под H1 ---------- */
.page-top__body {
    margin-top: 16px;
}

.page-top__desc {
    color: var(--secondary);
}

.page-top__desc>*:first-child {
    margin-top: 0;
}

.page-top__desc>*:last-child {
    margin-bottom: 0;
}

.page-top__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

/* ---------- мета (дата, место): для мероприятий ---------- */
.page-top__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 14px;
    margin-top: 16px;
}

.page-top__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-top__meta-item::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background-repeat: no-repeat;
    background-size: contain;
}

.page-top__meta-item--date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.2'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
}

.page-top__meta-item--place::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.2'%3E%3Cpath d='M8 15s5-4.6 5-8.5a5 5 0 0 0-10 0C3 10.4 8 15 8 15z'/%3E%3Ccircle cx='8' cy='6.5' r='1.8'/%3E%3C/svg%3E");
}

/* ---------- plain «Стандарт»: одна колонка на всю ширину, картинки нет ---------- */
/* ничего дополнительно: действуют общие правила одной колонки */

/* ---------- cover «С баннером снизу»: одна колонка на всю ширину ----------
   порядок: блок текста (крошки, H1, описание, кнопки), баннер, дата и место
   (для мероприятий без описания получается H1, баннер, дата и место) */
.page-top--cover .page-top__media {
    margin-top: 24px;
}

.page-top--cover .page-top__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---------- split «С баннером справа»: 2 колонки ----------
   левая: общий блок текста (+ дата и место); правая: только баннер */
.page-top--split {
    grid-template-columns: 1fr 1fr;
}

.page-top--split>.page-top__text {
    grid-column: 1;
    grid-row: 1;
}

.page-top--split>.page-top__meta {
    grid-column: 1;
    grid-row: 2;
}

.page-top--split>.page-top__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    /* положение по умолчанию: низ-право */
    align-self: end;
    justify-self: end;
    margin-bottom: calc(var(--pt-pad) * -1);
}

.page-top--split .page-top__media img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}

/* положение баннера: data-v = top | center | bottom, data-h = left | center | right.
   К указанному краю картинка прижимается вплотную (отрицательный отступ на величину padding плашки) */
.page-top--split .page-top__media[data-v="top"] {
    align-self: start;
    margin-top: calc(var(--pt-pad) * -1);
    margin-bottom: 0;
}

.page-top--split .page-top__media[data-v="center"] {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

.page-top--split .page-top__media[data-v="bottom"] {
    align-self: end;
    margin-top: 0;
    margin-bottom: calc(var(--pt-pad) * -1);
}

.page-top--split .page-top__media[data-h="left"] {
    justify-self: start;
}

.page-top--split .page-top__media[data-h="center"] {
    justify-self: center;
}

.page-top--split .page-top__media[data-h="right"] {
    justify-self: end;
}

/* ---------- мобильная версия: баннер под текстом по центру ---------- */
@media (max-width:767px) {
    .page-top--custom {
        --pt-pad: 20px;
    }

    .page-top--split {
        grid-template-columns: 1fr;
    }

    .page-top--split>.page-top__text,
    .page-top--split>.page-top__meta {
        grid-row: auto;
    }

    .page-top--split>.page-top__media[data-v][data-h] {
        grid-column: 1;
        grid-row: auto;
        align-self: auto;
        justify-self: center;
        margin: 16px 0 calc(var(--pt-pad) * -1);
    }

    .page-top--split .page-top__media img {
        max-height: 220px;
    }

    .page-top__buttons .btn {
        width: 100%;
        justify-content: center;
    }
}