/* =============================================================
   article-with-sidebar.css
   -------------------------------------------------------------
   Переиспользуемый layout «статья + sidebar справа» для страниц
   блога. Визуальный стиль согласован со страницами новостей
   КонтентЗавода (fittin.ru/contentzavod/view/...), но имена
   классов нейтральные — чтобы виджет можно было подключать к
   любым статьям, не только к новостям.

   Структура HTML:

   <main class="article-container article-container--with-sidebar">
       <a href="blog" class="back-to-blog">…</a>

       <div class="article-with-sidebar">
           <div class="article-with-sidebar__main">
               <article>
                   <div class="article-content">…контент статьи…</div>
               </article>
               <!-- Контактная форма / другие блоки той же ширины -->
               <section class="contact-form">…</section>
           </div>

           <aside class="article-with-sidebar__aside">
               <div class="sidebar-sticky">
                   <!-- Блок «О компании» (опционально) -->
                   <div class="sidebar-about">
                       <h3 class="sidebar-about__title">FITTIN</h3>
                       <p class="sidebar-about__text">…</p>
                       <div class="sidebar-about__actions">
                           <a class="sidebar-about__btn" href="…">Тарифы</a>
                           <a class="sidebar-about__btn" href="…">Кейсы</a>
                       </div>
                       <a class="sidebar-about__link" href="…">Главная</a>
                   </div>

                   <!-- Список рекомендуемых статей -->
                   <div class="sidebar-recommended">
                       <h3 class="sidebar-recommended__title">Читайте также</h3>
                       <div class="sidebar-recommended__list">
                           <a class="sidebar-card" href="…">
                               <div class="sidebar-card__meta">
                                   <span class="sidebar-card__date">…</span>
                                   <span class="sidebar-card__category">…</span>
                               </div>
                               <h4 class="sidebar-card__title">…</h4>
                               <p class="sidebar-card__description">…</p>
                           </a>
                       </div>
                   </div>
               </div>
           </aside>
       </div>
   </main>

   Горизонтальные границы (левый край статьи ↔ правый край sidebar)
   выровнены с .header__container (логотип ↔ кнопка «Обсудить
   проект») — обе используют max-width 1200px и одинаковый padding
   по бокам.
   ============================================================= */

.article-with-sidebar {
    display: flex;
    gap: 24px;
    /* align-items по умолчанию — stretch, чтобы aside растягивался
       на высоту main и sticky внутри aside работал на всю длину
       прокрутки статьи. */
    margin-top: 0;
}

/* Левая колонка — основной контент + блоки той же ширины (форма и т.п.) */
.article-with-sidebar__main {
    flex: 1;
    min-width: 0;
}

/* В двухколоночном режиме .article-content (max-width: 840px из
   article-style.css) растягивается на всю ширину колонки —
   общая ширина уже ограничена .article-container. */
.article-with-sidebar__main .article-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Контактная форма и другие блоки внутри main-колонки тоже
   растягиваются на её ширину (вместо стандартного max-width: 840px
   и центрирования). У .contact-form убираем горизонтальные паддинги
   и серый фон — иначе она визуально становится уже статьи. */
.article-with-sidebar__main .contact-form {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

.article-with-sidebar__main .contact-form__container {
    max-width: none;
    margin: 0;
}

/* Правая колонка — sidebar */
.article-with-sidebar__aside {
    width: 320px;
    flex-shrink: 0;
}

/* Sticky-обёртка: и блок «О компании», и «Читайте также» прилипают
   к верху экрана при скролле (отступ под фиксированный header). */
.sidebar-sticky {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ----- Блок «О компании» ----- */
.sidebar-about {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-about__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.sidebar-about__text {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    margin: 0 0 18px 0;
}

.sidebar-about__actions {
    display: flex;
    gap: 8px;
}

/* Стиль pill-кнопки повторяет .header__discuss-project из аппбара:
   border-radius 999px, белый текст, оранжевый фон #FF6B00,
   hover #e55a00 + translateY(-1px). */
.sidebar-about__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-height: 40px;
    background-color: #FF6B00;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

.sidebar-about__btn:hover {
    background-color: #e55a00;
    color: #ffffff;
    transform: translateY(-1px);
}

.sidebar-about__btn:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: 3px;
}

/* ----- Виджет «Читайте также» в sidebar ----- */
.sidebar-recommended {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-recommended__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: #000;
    line-height: 1.3;
}

.sidebar-recommended__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ----- Карточка в sidebar ----- */
.sidebar-card {
    display: block;
    padding: 14px;
    background: #f9f9f9;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sidebar-card:hover {
    background: #fff;
    border-color: #ff6b00;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.1);
    transform: translateX(4px);
}

.sidebar-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sidebar-card__date {
    font-size: 11px;
    color: #777;
}

.sidebar-card__category {
    font-size: 10px;
    padding: 3px 8px;
    background: #ffe5d3;
    color: #ff6b00;
    border-radius: 12px;
    font-weight: 600;
}

.sidebar-card__title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 8px 0;
    color: #222;
    font-weight: 600;
    transition: color 0.3s ease;
}

.sidebar-card:hover .sidebar-card__title {
    color: #ff6b00;
}

.sidebar-card__description {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================
   Override стилей для страниц с двухколоночным layout.
   Активируется только если main имеет модификатор
   .article-container--with-sidebar — не ломает обычные
   одноколоночные статьи блога.

   Цель: одинаковая вертикальная ритмика 32px между
   header → breadcrumbs → началом статьи.
   ============================================================= */

/* Опускаем хлебные крошки и даём 28px-зазор до начала статьи.
   Высота фиксированного header ~80px → 80 + 28 = 108px сверху.
   Снизу 28px до article-container.
   Использует CSS :has() (поддерживается всеми актуальными
   браузерами в 2026). */
.breadcrumbs--overlay:has(+ .article-container--with-sidebar) {
    padding-top: 108px;
    padding-bottom: 28px;
}

/* Когда breadcrumbs идут прямо перед main с нашим модификатором,
   гасим стандартный padding-top: 32px из breadcrumbs.css —
   зазор уже даёт padding-bottom самих breadcrumbs. */
.breadcrumbs + .article-container--with-sidebar {
    margin-top: 0;
    padding-top: 0 !important;
}

/* Универсальный верхний отступ внутри .article-content — даём
   единые 24px от верха белой карточки до первого элемента,
   независимо от того, какая там структура (новая: <img>; старая:
   <header><div class="article-cover">…; либо <header><h1>… без
   обложки). Все потенциальные margin-top'ы у первых элементов
   обнуляются, а padding-top самой карточки задаёт 24px. */
.article-container--with-sidebar .article-content {
    padding-top: 24px !important;
}

.article-container--with-sidebar .article-content > *:first-child,
.article-container--with-sidebar .article-content > *:first-child > *:first-child,
.article-container--with-sidebar .article-content > img.article-image:first-of-type,
.article-container--with-sidebar .article-content > .article-header-inner > .article-cover {
    margin-top: 0 !important;
}

/* =============================================================
   Адаптив — на планшетах и ниже колонки складываются в одну
   ============================================================= */

@media (max-width: 968px) {
    .article-with-sidebar {
        flex-direction: column;
        gap: 32px;
    }

    .article-with-sidebar__main .article-content {
        max-width: 840px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-with-sidebar__main .contact-form__container {
        max-width: 840px;
        margin: 0 auto;
    }

    .article-with-sidebar__aside {
        width: 100%;
    }

    .sidebar-sticky {
        position: static;
        max-width: 840px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .article-with-sidebar {
        gap: 24px;
        margin-top: 12px;
    }

    .sidebar-about,
    .sidebar-recommended {
        padding: 20px;
    }

    .sidebar-about__title {
        font-size: 20px;
    }

    .sidebar-recommended__title {
        font-size: 18px;
    }
}