/*
 * Сторінка «Хід будівництва» ( архів + архів року )
 *
 * Зібрана з готового: .phero (main.css), .media-row, .pcard, .entry-card,
 * .section-head, .link-arrow, .pagination (ui.css) і глобальна CTA.
 * Своє тут — ритм секцій, сітки й картка документа.
 *
 * Чергування фонів: герой (subtle) → останній звіт canvas →
 * роки subtle → документи canvas → CTA elevated.
 */

/* ── Герой ──────────────────────────────────────────────────────────────── */
/* «Як зростає ЖК «Європейські Липки»» — природна ширина рядка на 56px
   1114px (.phero__headline навмисно без max-width, щоб рядок не рвався
   раніше потрібного). Але контейнер вужчає з в'юпортом швидше, ніж спільний
   брейкпоінт main.css встигає зменшити шрифт (той спрацьовує лише з
   1024px) — між 1025 і 1158px рядок усе одно рветься. Підганяємо перехід
   під контент саме для цього героя: 1158px — бісекція (1153 → 2 рядки,
   1159 → 1 рядок). */
@media (min-width: 1025px) and (max-width: 1158px) {
    .bd-hero__title { font-size: 40px; line-height: 48px; }
}

/* ── Останній звіт ──────────────────────────────────────────────────────── */
.bd-latest-sec {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
/* Назва звіту — це місяць («Червень 2026»), а не заголовок секції: на крок
   менша за .section-head__title, щоб не сперечатись із H1 сторінки. */
.bd-latest__title {
    font-size:      34px;
    line-height:    44px;
    letter-spacing: .68px;
}
/* Власне обмеження довжини рядка. У .section-head__text стеля 880px —
   вона розрахована на центрований заголовок секції, а тут текст лівий і
   на всю колонку: щойно .media-row складається в стовпчик на 900px, рядок
   стрибає до 98 знаків (заміряно) проти 66 на десктопі. */
.bd-latest__lead { max-width: 58ch; }

.bd-latest__actions { margin: 0; }

/* ── Роки ───────────────────────────────────────────────────────────────── */
/* overflow: hidden — той самий прийом, що в .kv-items--similar
   (kvartiri.css): доріжка Slick навмисно ширша за контейнер на 24px
   (компенсаційний від'ємний margin під gap між слайдами), і без
   обрізання предком цей «хвіст» давав горизонтальний скрол сторінки. */
.bd-years {
    padding:    var(--section-gap) 0;
    background: var(--bg-subtle);
    overflow:   hidden;
}
.bd-years__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            60px;
}
/* Flex-wrap — фолбек без JS і стан до ініціалізації Slick ( роки, яких
   ще не гортають, — 1-3 штуки, .bd-years__list--static ). Років може
   бути один, два або п'ять; у сітці 3×1fr одна картка «висла» б зліва
   з порожніми двома третинами — flex центрує ряд за будь-якої кількості,
   а базис 410px — це ширина картки з макета. Коли Slick ініціалізується
   (4+ років), він сам переводить список у display:block і рахує ширину
   слайдів — це правило далі не заважає, бо .slick-slider специфічніше. */
.bd-years__list {
    position:        relative;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             24px;
    width:           100%;
    margin:          0;
    padding:         0;
    list-style:      none;
}
.bd-years__item {
    display: flex;
    flex:    0 1 410px;
}

/* Slick рахує ширину слайдів сам і `gap` на списку вище для них уже не
   діє — той самий прийом, що в .kv-slider (kvartiri.css): проміжок стає
   правим падингом слайда, а список компенсує його від'ємним margin,
   щоб останній слайд лишався врівень з правим краєм контейнера. */
.bd-years__list.slick-initialized {
    display: block;
    margin:  0 -24px 0 0;
}
.bd-years__list .slick-slide { padding: 0 24px 0 0; }
.bd-years__list .slick-track { display: flex; }

/* Стрілки слайдера — той самий вигляд, що в .bs-gallery__main (сторінка
   звіту) і .kv-items (квартири): коло 48px, напівпрозора заливка, золото
   на hover. За замовчуванням прихована ( керує JS: arrows: count > N ). */
.bd-years .slick-arrow {
    position:      absolute;
    top:           50%;
    z-index:       2;
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    padding:       0;
    transform:     translateY(-50%);
    background:    rgba(1, 21, 44, .55);
    border:        1px solid var(--border-field-hover);
    border-radius: 50%;
    color:         transparent;
    font-size:     0;
    cursor:        pointer;
    transition:    background-color var(--transition), border-color var(--transition);
}
.bd-years .slick-arrow:hover {
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.bd-years .slick-prev { left:  4px; }
.bd-years .slick-next { right: 4px; }
.bd-years .slick-arrow::before {
    content:      "";
    position:     absolute;
    top:          50%;
    left:         50%;
    width:        11px;
    height:       11px;
    border-top:   2px solid var(--text-primary);
    border-right: 2px solid var(--text-primary);
    opacity:      1;
}
.bd-years .slick-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.bd-years .slick-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.bd-years .slick-arrow.slick-disabled { opacity: .35; cursor: default; }

/* ── Звіти року ─────────────────────────────────────────────────────────── */
.bd-reports {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
/* Та сама причина, що й у роках: звітів у році може бути скільки завгодно. */
.bd-reports__list {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             24px;
    margin:          0;
    padding:         0;
    list-style:      none;
}
.bd-reports__item {
    display: flex;
    flex:    0 1 400px;
}

.bd-empty {
    margin:     0;
    color:      var(--text-muted);
    text-align: center;
}

/* ── Дозвільні документи ────────────────────────────────────────────────── */
.bd-docs {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.bd-docs__inner {
    display:        flex;
    flex-direction: column;
    gap:            36px;
}
.bd-docs__list {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
/* 1125px — виміряний поріг, не 1024. У чотирьох колонках назва «Містобудівні
   обмеження» (найдовша) тримається в один рядок, поки картка ≥257px; на
   1123px картка вже 256px і назва ламається на два рядки, а сітка й досі
   4-колонкова аж до 1024. Бісекція: 1130→258px/1р, 1123→256px/2р. */
.bd-doc { display: flex; }
.bd-doc__link {
    display:         flex;
    align-items:     center;
    gap:             14px;
    width:           100%;
    padding:         20px 22px;
    color:           var(--text-primary);
    text-decoration: none;
    background:      var(--bg-elevated);
    border:          1px solid var(--gold-line-soft);
    border-radius:   4px;
    transition:      border-color var(--transition), color var(--transition);
}
.bd-doc__link:hover,
.bd-doc__link:focus-visible { border-color: var(--gold-line); }
.bd-doc__icon {
    flex:   0 0 auto;
    width:  22px;
    height: 22px;
    color:  var(--gold-text);
}
.bd-doc__name {
    font-size:   15px;
    line-height: 22px;
}

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1125px) {
    .bd-docs__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .bd-latest-sec, .bd-years, .bd-reports, .bd-docs { padding: 80px 0; }
    .bd-years__inner  { gap: 44px; }
    .bd-latest__title { font-size: 27px; line-height: 36px; }
    .bd-years__list, .bd-reports__list { gap: 20px; }
    .bd-years__item   { flex-basis: 340px; }
    .bd-reports__item { flex-basis: 340px; }
}

/* Переходів сітки тут немає: flex сам переносить картки, коли базис
   перестає вміщатись. Лишається тільки не дати їм розтягнутись на всю
   ширину в останньому ряду — звідси max-width нижче 640. */

@media (max-width: 768px) {
    .bd-latest-sec, .bd-years, .bd-reports, .bd-docs { padding: 64px 0; }
    .bd-years__inner  { gap: 32px; }
    .bd-docs__inner   { gap: 26px; }
    .bd-latest__title { font-size: 23px; line-height: 30px; }
}

@media (max-width: 640px) {
    .bd-years__item, .bd-reports__item { flex: 1 1 100%; }
    .bd-docs__list { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 480px) {
    .bd-latest-sec, .bd-years, .bd-reports, .bd-docs { padding: 48px 0; }
}