/*
Theme Name: Paolo Anegri
Theme URI: https://example.com/
Description: Custom WordPress theme for Paolo Anegri with Carbon Fields builder.
Author: Paolo Anegri
Version: 1.2.3
Text Domain: paolo-anegri
*/

/* Основные стили подключаются из css/style.min.css через wp_enqueue_style. */

/* ===== Hotspot Image Fix ===== */
/* Сохранение пропорций изображений при изменении ширины окна */
.hotspots__img {
    position: relative;
    width: 100%;
}

.hotspots__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Убираем фиксированную минимальную высоту для сохранения пропорций */
.hotspots__img picture,
.hotspots__img img {
    min-height: auto;
}

/* Контейнер для точек должен позиционироваться относительно картинки */
.hotspots__slide {
    position: relative;
}

.hotspots__points {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* ===== Photos Slider - слайды с hotspot индикатором ===== */
.photos__slider .swiper-slide[data-hotspot-index] {
    cursor: pointer;
    position: relative;
}

.photos__slider .swiper-slide[data-hotspot-index]:hover {
    transform: scale(1.05);
}

.photos__slider .swiper-slide[data-hotspot-index]::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgba(48, 30, 22, 0.6);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.photos__slider .swiper-slide[data-hotspot-index]:hover::after {
    background-color: rgba(48, 30, 22, 0.9);
    transform: translateX(-50%) scale(1.3);
}

.photos__slider .swiper-slide--active-hotspot img {
    box-shadow: 0 0 0 3px rgba(48, 30, 22, 0.5);
    border-radius: 0.25rem;
}

.photos__slider .swiper-slide--active-hotspot::after {
    background-color: #301e16;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ===== Hotspot Highlight Animation ===== */
@keyframes slideAppear {
    0% {
        opacity: 0.5;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.01);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hotspots__slide--highlight {
    animation: slideAppear 0.6s ease;
}

/* ===== Related Objects Slider ===== */
[data-related-objects-slider] .swiper-slide {
    display: block;
}

[data-related-objects-slider] .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

[data-related-objects-slider] .swiper-slide:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}