/*
 * Звіт «Хід будівництва»
 *
 * Зібрана з готового: .phero--flat (main.css), .split, .prose, .entry-nav
 * (ui.css) і глобальна CTA. Своє тут — галерея зі слайдером (Slick) і
 * перегляд фото на весь екран (js/pages/building-single.js): готового
 * компонента під слайдер+лайтбокс у дизайн-системі немає, і другого
 * місця, де він потрібен, поки нема — переїзд не на часі.
 *
 * Чергування фонів: герой (subtle) → тіло canvas → навігація subtle →
 * CTA elevated.
 */

/* ── Герой ──────────────────────────────────────────────────────────────── */
/* Рік — посилання на архів року, а не просто текст: .eyebrow за макетом
   лишається 16px рядком, зона натискання доростає невидимим ::after
   (той самий прийом, що на «Контактах» і в блозі). Проміжок до заголовка —
   26px (.phero__headline), тож -12px з обох боків не конфліктують.
   Той самий ::after у .eyebrow вже зайнятий ромбом-орнаментом
   (.eyebrow::before/::after — content, width:26px, height:14px,
   mask-image), і `.eyebrow--left::after` вимикає його через display:none.
   Обидві властивості доводиться перевизначати explicitно:
     display  — інакше псевдоелемент лишається display:none і невидимим;
     width/height — інакше лишаються фіксовані 26×14px від ромба, і inset
       розтягує бокс лише частково (за specification: явний width/height
       перебиває сторону inset, яку мали розтягувати, тож зона натискання
       виходить крихітною, а не на весь inset). auto звільняє обидва
       виміри під керування inset. */
.bs-hero__year { position: relative; }
.bs-hero__year::after {
    content:  "";
    display:  block;
    width:    auto;
    height:   auto;
    position: absolute;
    inset:    -12px -8px;
}

.bs__body {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}

/* ── Галерея ────────────────────────────────────────────────────────────── */
.bs-gallery__main {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius);
    background:    var(--bg-elevated);
}
/* До ініціалізації Slick показуємо лише перший кадр */
.bs-gallery__main:not(.slick-initialized) .bs-gallery__slide + .bs-gallery__slide {
    display: none;
}
.bs-gallery__slide { cursor: zoom-in; }
.bs-gallery__image {
    display:      block;
    width:        100%;
    aspect-ratio: 4 / 3;
    object-fit:   cover;
}

/* Стрілки — той самий вигляд, що й у решті слайдерів сайту */
.bs-gallery__main .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);
}
.bs-gallery__main .slick-arrow:hover {
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.bs-gallery__main .slick-prev { left:  16px; }
.bs-gallery__main .slick-next { right: 16px; }
.bs-gallery__main .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;
}
.bs-gallery__main .slick-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.bs-gallery__main .slick-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.bs-gallery__counter {
    display:              flex;
    gap:                  5px;
    margin:               14px 0 0;
    color:                var(--text-muted);
    font-size:            14px;
    font-variant-numeric: tabular-nums;
}
.bs-gallery__current { color: var(--text-primary); font-weight: 600; }

/* Стрічка мініатюр */
.bs-gallery__thumbs { margin: 12px -6px 0; }
.bs-gallery__thumbs:not(.slick-initialized) { display: flex; overflow: hidden; }
.bs-gallery__thumb {
    padding: 0 6px;
    cursor:  pointer;
}
.bs-gallery__thumbs:not(.slick-initialized) .bs-gallery__thumb { flex: 0 0 20%; }
.bs-gallery__thumb-image {
    display:        block;
    width:          100%;
    aspect-ratio:   4 / 3;
    object-fit:     cover;
    border-radius:  8px;
    opacity:        .55;
    transition:     opacity var(--transition), outline-color var(--transition);
    outline:        2px solid transparent;
    outline-offset: -2px;
}
.bs-gallery__thumb:hover .bs-gallery__thumb-image { opacity: .85; }
.bs-gallery__thumbs .slick-current .bs-gallery__thumb-image {
    opacity:       1;
    outline-color: var(--gold-solid);
}

/* ── Фото на весь екран ─────────────────────────────────────────────────── */
body.has-lightbox { overflow: hidden; }

.bs-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         40px;
    background:      rgba(1, 21, 44, .94);
}
.bs-lightbox.is-open { display: flex; }
.bs-lightbox__image {
    max-width:     100%;
    max-height:    100%;
    object-fit:    contain;
    border-radius: 8px;
}
.bs-lightbox__close,
.bs-lightbox__nav {
    position:      absolute;
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    padding:       0;
    background:    rgba(255, 255, 255, .1);
    border:        1px solid var(--border-field-hover);
    border-radius: 50%;
    cursor:        pointer;
    transition:    background-color var(--transition), border-color var(--transition);
}
.bs-lightbox__close:hover,
.bs-lightbox__nav:hover {
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.bs-lightbox__close { top: 24px; right: 24px; }
.bs-lightbox__close::before,
.bs-lightbox__close::after {
    content:    "";
    position:   absolute;
    width:      18px;
    height:     2px;
    background: var(--text-primary);
}
.bs-lightbox__close::before { transform: rotate(45deg); }
.bs-lightbox__close::after  { transform: rotate(-45deg); }

.bs-lightbox__nav::before {
    content:      "";
    position:     absolute;
    top:          50%;
    left:         50%;
    width:        12px;
    height:       12px;
    border-top:   2px solid var(--text-primary);
    border-right: 2px solid var(--text-primary);
}
.bs-lightbox__nav--prev { left:  24px; }
.bs-lightbox__nav--next { right: 24px; }
.bs-lightbox__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.bs-lightbox__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bs__body { padding: 80px 0; }
}

@media (max-width: 768px) {
    .bs__body { padding: 64px 0; }
    /* 44px, не 40 — нижня межа тач-цілі; на круглій кнопці різниця
       в 4px непомітна, а зона натискання лишається достатньою. */
    .bs-gallery__main .slick-arrow { width: 44px; height: 44px; }
    .bs-gallery__main .slick-prev  { left: 10px; }
    .bs-gallery__main .slick-next  { right: 10px; }

    .bs-lightbox { padding: 16px; }
    .bs-lightbox__close { top: 12px; right: 12px; }
    .bs-lightbox__nav   { width: 44px; height: 44px; }
    .bs-lightbox__nav--prev { left: 10px; }
    .bs-lightbox__nav--next { right: 10px; }
}

@media (max-width: 480px) {
    .bs__body { padding: 48px 0; }
}