/* ==========================================================
   ARTICLE PAGE — DELTA CSS  v2
   Добавить в конец stylesheet26.css
   ========================================================== */


/* ── ARTICLE WRAPPER ─────────────────────────────────────── */
.article-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

.article-content {
    min-width: 0;
}


/* ── ASIDE ───────────────────────────────────────────────── */
.article_aside {
    position: sticky;
    top: calc(var(--header-height, 110px) + 20px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}


/* ── VIDEO BLOCK ─────────────────────────────────────────── */
.video_related .catalog__list.videos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-item {
    border-radius: var(--h26-radius-card, 14px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--fcolor);
}

.video-item iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}


/* ── RELATED PRODUCTS (aside) ────────────────────────────── */
.products_related {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* В aside слайдер заменяем стопкой */
.article_aside .slides-container {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    flex-direction: unset;
    flex-wrap: unset;
    overflow: visible;
}

.article_aside .product.catalog__item.slide {
    min-width: unset;
    width: 100%;
    border-radius: var(--h26-radius-card, 14px);
    overflow: hidden;
    background: var(--fcolor);
    display: block;
    transition: transform .25s ease;
}

.article_aside .product.catalog__item.slide:hover {
    transform: translateY(-3px);
}

/* FIX 1: base .product__image имеет height:210px — переопределяем
   через более специфичный селектор и явный !important */
.article_aside .product.catalog__item.slide .product__image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.article_aside .product.catalog__item.slide .product__title {
    color: #fff;
    border-left: none;
    opacity: 1;
    padding: 8px 12px;
    font-size: 12px;
}


/* ── GALLERY: flex → grid ────────────────────────────────── */
/*
   FIX 2: #information-information .galery (специфичность 1,1,0)
   перебивает .galery.row.flex.gap-1 (0,4,0).
   На 560px stylesheet26 даёт width:100vw !important — контрим ниже.

   FIX 6 (GALLERY SIZE): minmax(240px) → в ~820px контент-колонке
   помещается ровно 3 колонки по 253px.
*/
#information-information .galery {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    flex-wrap: unset;
    height: auto;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

#information-information .galery span {
    display: block;
    border-radius: var(--h26-radius-card, 14px);
    overflow: hidden;
    line-height: 0;
    background: var(--fcolor);
}

#information-information .galery span a {
    display: block;
    line-height: 0;
}

/* FIX 8 (ASPECT RATIO): по умолчанию все галереи — 3:2 (landscape).
   galery3 и выше могут содержать квадратные фото — для них 1:1.
   Если в проекте все фото landscape — можно удалить galery3+ правило. */
#information-information .galery span img {
    width: 100%;
    aspect-ratio: 3 / 2;    /* galery1, galery2 — landscape */
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .3s;
}

/* galery3–8: квадратные фото */
#information-information .galery3 span img,
#information-information .galery4 span img,
#information-information .galery5 span img,
#information-information .galery6 span img,
#information-information .galery7 span img,
#information-information .galery8 span img {
    aspect-ratio: 1 / 1;
}

#information-information .galery span:hover img {
    transform: scale(1.04);
    opacity: .9;
}


/* ── HERO IMAGE (introduction) ───────────────────────────── */
/*
   FIX 3: в stylesheet26 задано:
     .tp__h3.introduction .image.w-50 { width: 57% !important }
     .description.w-50.ml-20p        { width: 50% }
     .ml-20p                          { margin-left: 20px }
   Итого: 57% + 50% + 20px = переполнение!
   Решение: переключаем intro-flex на gap вместо margin-left,
   и ограничиваем description через flex, а не фиксированный % .
*/

/* Контейнер intro */
.tp__h3.introduction > .flex {
    gap: 28px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Изображение: оставляем 57% — это важно, не трогаем !important из базы.
   Просто убираем нижний margin у img внутри (базовое .w-50 img даёт mb:2em) */
.tp__h3.introduction .image.w-50 img {
    margin-bottom: 0;
    border-radius: var(--h26-radius-card, 14px);
}

.tp__h3.introduction .image.w-50 a {
    display: block;
    border-radius: var(--h26-radius-card, 14px);
    overflow: hidden;
    line-height: 0;
}

/* Описание: flex:1 вместо фиксированного 50%, убираем margin-left
   (gap на контейнере уже делает отступ) */
.tp__h3.introduction .description.w-50.ml-20p {
    flex: 1 1 0;
    width: auto !important;     /* перебиваем .description.w-50.ml-20p { width:50% } */
    max-width: none;
    margin-left: 0 !important;  /* gap на контейнере заменяет ml-20p */
    min-width: 0;
}

/* FIX 4: .w-50 p { padding: 2em } даёт лишний отступ в описании.
   Сбрасываем только внутри intro-description */
.tp__h3.introduction .description.w-50.ml-20p p {
    padding: 0;
}


/* ── PREV/NEXT CARDS ─────────────────────────────────────── */
a.product.projects.product__item {
    overflow: hidden;
    display: block;
    transition: transform .25s ease;
}

a.product.projects.product__item:hover {
    transform: translateY(-4px);
}

.project_footer a.product.projects.product__item {
    width: auto !important; 
}

.product.projects .product__image.hover {
    aspect-ratio: 3 / 2;
    height: auto !important;
    min-height: 120px;
    border-radius: var(--h26-radius-card, 14px);
    overflow: hidden;
}


/* ── PROJECT FOOTER (CTA center block) ───────────────────── */
/*
   FIX 7 (FOOTER LAYOUT): переключаем на grid.
   FIX 9 (ORDER INTERFERENCE): base CSS на 560px даёт `order:3` ОБОИМ
   `.w-25` → оба уходят после CTA, и CTA попадает в узкий 1fr трек.
   Фиксим явным `order` на всех детях footer, чтобы игнорировать base.

   FIX 10 (NARROW CARDS): при узком viewport (< 800px) content-area ~570px,
   grid 1fr/2fr/1fr даёт карточкам ~130px — слишком мало.
   Используем minmax чтобы карточки не сжимались ниже 160px.
*/
.project_footer {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) minmax(160px, 1fr);
    gap: 20px;
    align-items: start;
    flex-wrap: unset;
}

/* Сбрасываем % ширины от base, фиксируем order */
.project_footer .w-25 {
    width: auto !important;
    order: 0 !important;   /* FIX 9: перебиваем order:3 из base на 560px */
    margin: 0 !important;
}

.project_footer .w-25:first-child {
    order: 1 !important;   /* prev — 1-я колонка */
}

.project_footer .w-50 {
    width: auto !important;
    order: 2 !important;   /* CTA — 2-я колонка (центр) */
    background: #455158;
    border-radius: var(--h26-radius-card, 14px);
    padding: 32px 24px;
    text-align: center;
    color: #fff;
    height: calc(100% - 1.5em);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project_footer .w-25:last-child {
    order: 3 !important;   /* next — 3-я колонка */
}

.project_footer .w-50 h2 {
    color: #fff;
    margin-top: 0;
    font-size: clamp(18px, 2.2vw, 26px);
}

.project_footer .w-50 p {
    color: rgba(255, 255, 255, .7);
    padding: 0 1em;
    margin-bottom: 20px;
}

/* button_link в тёмном блоке — инвертируем */
.project_footer .w-50 .button_link {
    border-color: #fff;
    color: #fff;
    display: inline-block;
    width: auto;
    max-width: none;
    padding: 12px 20px;
    margin: 4px;
}

.project_footer .w-50 .button_link::before {
    background: #fff;
}

.project_footer .w-50 .button_link:hover {
    color: var(--fcolor);
}

.project_footer .w-50 .button_link:hover svg {
    fill: var(--fcolor);
}

.project_footer .w-50 .button_link svg {
    fill: #fff;
    vertical-align: middle;
    margin-right: 6px;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ≤960px: aside уходит под контент */
@media (max-width: 960px) {
    .article-wrapper {
        grid-template-columns: 1fr;
    }

    .article_aside {
        position: static;
    }

    .article_aside .slides-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ≤680px: мобильный layout (выше breakpoint'ов stylesheet26) */
@media (max-width: 680px) {

    /* Intro стек: flex→column, дочерние элементы = 100% ширина.
       FIX 5: .w-50 получает display:inline-block из базы —
       явно ставим display:block + full width на оба элемента,
       чтобы не ждать 550px из stylesheet26. */
    .tp__h3.introduction > .flex {
        flex-direction: column;
        gap: 16px;
    }

    .tp__h3.introduction .image.w-50 {
        width: 100% !important;   /* перебиваем 57% !important из базы */
    }

    .tp__h3.introduction .description.w-50.ml-20p {
        flex: unset;
        width: 100% !important;
        display: block;
    }

    /* Галереи — 2 колонки.
       FIX 2 продолжение: countering width:100vw !important
       из .galery.row.flex.gap-1 на 560px в stylesheet26 */
    #information-information .galery {
        grid-template-columns: repeat(2, 1fr);
        width: 100% !important;   /* перебиваем 100vw из stylesheet26 */
        box-sizing: border-box;
    }

    /* Project footer — стопка (grid → 1 колонка) */
    .project_footer {
        grid-template-columns: 1fr !important;
    }

    /* Сбрасываем все order — дети идут в порядке DOM: prev, CTA, next */
    .project_footer .w-25,
    .project_footer .w-25:first-child,
    .project_footer .w-25:last-child {
        order: 0 !important;
        width: 100% !important;
    }

    .project_footer .w-50 {
        order: -1 !important;  /* CTA первым на мобиле */
        width: 100% !important;
    }

    /* Aside: 1 колонка */
    .article_aside .slides-container {
        grid-template-columns: 1fr !important;
    }
}

/* ≤420px: галереи в 1 колонку */
@media (max-width: 420px) {
    #information-information .galery {
        grid-template-columns: 1fr;
        width: 100% !important;
    }
}