/* Доповнення до перенесеної верстки (style.css/sg.css не редагуються без потреби). */

/* Сітка карток: висота картки відома до завантаження зображення — браузер сам бере відношення сторін
   з атрибутів width/height (<img width height> + height:auto), тому masonry розкладає одразу і не перераховує
   після imagesLoaded (без моргання і «довгих стовпців»). aspect-ratio тут НЕ задавати: будь-яке власне
   значення (зокрема attr(), яке Chrome скидає в auto) перекриває вбудоване відношення з атрибутів і висота
   до завантаження стає 0. min-height зі sg.css лишається лише для зображень без відомих розмірів. */
.cards .card .card__wrapper img[width][height] {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
}
.cards-list.masonry-ready .cards-list__card {
    transition: none;
}

/* «Показати ще +15» — кнопка поза сіткою, по центру над пагінацією (замість квадратної картки в masonry) */
.load-more {
    text-align: center;
    margin: 0 0 30px;
}
.load-more__btn {
    display: inline-block;
    min-width: 255px;
    padding: 16px 30px;
    border: 1px solid #F7A716;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: bold;
    color: #4F4F4F;
    text-align: center;
    transition: color .2s, box-shadow .2s;
}
.load-more__btn:hover,
.load-more__btn:focus-visible {
    color: #F7A716;
    box-shadow: inset 0 0 0 2px #F7A716;
}
.load-more__btn[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}
@media screen and (max-width: 575.98px) {
    .load-more__btn { min-width: 0; width: 100%; padding: 14px 20px; font-size: 1.0625rem; }
}

/* Зображення слайда: максимальна висота — одна змінна (style.css: max-height 55vh); ширина задається інлайново
   в single.blade.php як min(100%, --slide-max-h × W/H), щоб пропорції не ламались при обмеженні висоти */
.objectSlider__main { --slide-max-h: 55vh; }
.objectSlider__main .swiper-slide img { height: auto; max-width: 100%; max-height: var(--slide-max-h); }
.objectSlider__main .swiper-slide .object-visual__artwork { max-width: 100%; }
.objectSlider__main .swiper-slide .object-visual__artwork img { width: 100%; }

/* лупа лише на зображенні, яке відкриває zoomify (style.css ставить zoom-in на весь слайд, як khanenko/zdolbuniv) */
.objectSlider__main .swiper-slide { cursor: default; }
.objectSlider__main .swiper-slide img.img-zoomify { cursor: zoom-in; }

/* Zoomify-попап: нижня панель по центру = кнопки OpenSeadragon (site.js переносить buttonGroup у .zoomify-tools)
   + стрілки; sg.css позиціонує .zoomify-arrows окремо (fixed, calc(50% + 25px)) — тут вони всередині панелі.
   OSD ставить інлайнові стилі (display, position, top/left) — звідси !important. Зразок — khanenko zoomify.css. */
.zoomify-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    height: 50px;
    background: #292C2D;
    z-index: 10000;
}
.zoomify-container .zoomify-bar .zoomify-arrows { position: static; left: auto; bottom: auto; }
.zoomify-tools, .zoomify-arrows { display: flex; align-items: center; }
.zoomify-tools > div {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: auto !important;
    height: 50px !important;
}
.zoomify-tool {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer;
}
.zoomify-tool:focus-visible { outline: 2px solid #E8F0FE; outline-offset: -2px; }
.zoomify-tool img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    display: block;
    width: auto;
    height: auto;
    max-width: 46px;
    max-height: 30px;
}
.zoomify-tool--home img { width: 32px; height: 32px; max-height: 32px; }
.zoomify-item .openseadragon-canvas:focus { outline: none; }
.zoomify-prev, .zoomify-next { border: 0; padding: 0; }
.zoomify-prev:focus-visible, .zoomify-next:focus-visible { outline: 2px solid #E8F0FE; outline-offset: -2px; }

/* номер сторінки PDF на слайді галереї */
.objectSlider__main .swiper-slide { position: relative; }
.co-gallery__page-num {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    padding: 2px 10px; border-radius: 12px; background: rgba(41, 44, 45, .75); color: #fff; font-size: .75rem;
}

/* Футер притиснутий до низу: у style.css сітка «header / main / footer» задана для #page-wrapper (id),
   а верстка має class="page-wrapper", тому вона не працювала. Колонка flex: main розтягується на вільне місце,
   і коли наповнення менше за висоту вікна, футер лишається внизу. 100dvh — щоб на мобільних панель адреси
   не давала зайвого скролу (браузери без dvh беруть 100vh). */
.page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.page-wrapper > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.page-wrapper > main > * {
    flex-shrink: 0;
}

/* Головна: заставка з фоном заповнює все вільне місце між шапкою й футером, текст — по вертикальному центру */
.page-wrapper > main > .greeting {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.greeting__ctn {
    height: auto;
}

/* Футер: партнери й соцмережі з адмінки («Сайт» → «Футер», FooterService). Іконки вбудованих мереж — інлайн-SVG
   без власного fill (колір і hover тут), власна іконка — <img>; ширина логотипа партнера — inline style з адмінки */
.footer-logo-list .footer-logo {
    display: block;
    width: auto;
    max-height: 48px;
}
.soc-list .soc-list__el + .soc-list__el {
    margin-left: 10px;
}
.soc-list .soc-list__el:first-child {
    margin-left: -5px;
}
.soc-list svg {
    width: 30px;
    height: 26px;
    fill: #828282;
}
.soc-list svg path {
    fill: #828282;
}
.soc-list a:hover svg,
.soc-list a:hover svg path {
    fill: #F7A716;
}
.soc-list .soc-list__img {
    width: 30px;
    height: 26px;
    object-fit: contain;
    transition: opacity .3s;
}
.soc-list a:hover .soc-list__img {
    opacity: .6;
}

/* Головна: заголовок і три посилання розділів білим (на фоновому фото), стартовий градієнт квадратів теж з білого;
   hover-градієнти (помаранчевий, бірюзовий для Pinsel.AR) лишаються зі style.css */
.greeting__ttl,
.mainNav {
    color: #fff;
}
.mainNav__cat:before {
    background: #fff;
    /* перехід трохи швидший, ніж у style.css (6% → 125%) */
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 110%);
}