/* =================================================================
   gCarousel Theme
   Стили для оформления (цвета, тени, скругления)
================================================================= */

/* 1. Слайды и их содержимое */
.g-carousel__slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    height: 100%;
    font-size: 2rem;
    color: var(--g-slide-content-color, #fff);
    border-radius: var(--g-slide-border-radius, 8px);
}

.g-carousel__slide-content .room-card {
    min-width: 100%;
}

/* 2. Кнопки навигации (Стрелки) */
.g-carousel__button {
    width: var(--g-arrow-size, 40px);
    height: var(--g-arrow-size, 40px);
    border-radius: var(--g-arrow-border-radius, 50%);
    background-color: var(--g-arrow-bg, rgba(255, 255, 255, 0.8));
    color: var(--g-arrow-color, #333);
    font-size: calc(var(--g-arrow-size, 40px) / 2);
    transition: background-color var(--g-control-transition-speed, 0.2s), opacity var(--g-control-transition-speed, 0.2s);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
}



/* Градиентный бордер */
.g-carousel__button--next::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--arrow-btn-border-radius);
    background: linear-gradient(90deg, #E5E5E5 0%, #E0E0E0 100%);
    padding: 2px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: -1;
    /* Ширина бордера */
}

.g-carousel__button--prev::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--arrow-btn-border-radius);
    background: linear-gradient(90deg, #E5E5E5 0%, #E0E0E0 100%);
    padding: 2px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: -1;
    /* Ширина бордера */
}


.g-carousel__button--next {
    background-image: var(--g-arrow-image-next);
    width: var(--arrow-btn-width);
    height: var(--arrow-btn-height);
    border-radius: var(--arrow-btn-border-radius);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    background-color: var(--arrow-btn-bg-color);
    transform: rotate(180deg);
}

.g-carousel__button--prev {
    background-image: var(--g-arrow-image-prev);
    position: relative;
    width: var(--arrow-btn-width);
    height: var(--arrow-btn-height);
    border-radius: var(--arrow-btn-border-radius);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    background-color: var(--arrow-btn-bg-color);
}

/* Состояние при наведении */
.g-carousel__button--next:hover::before {
    background: linear-gradient(90deg, rgba(191, 158, 119, 0.75) 0%, rgba(189, 157, 111, 0.75) 100%);
}

.g-carousel__button--prev:hover::before {
    background: linear-gradient(90deg, rgba(191, 158, 119, 0.75) 0%, rgba(189, 157, 111, 0.75) 100%);
}

.g-carousel__button:focus-visible {
    outline: 2px solid var(--g-accent-color, blue);
    outline-offset: 2px;
}

.g-carousel__button:disabled {
    opacity: var(--g-disabled-opacity, 0.5);
}

/* 3. Точки-состояния (Пагинация) */
.g-carousel__dots {
    padding: 0;
    justify-content: left;
    padding-top: 38px;
}

.g-carousel__dots.room {
    padding-top: 38px;
}

.g-carousel__dot {
    margin: 0 var(--g-dot-gap, 5px);
    width: var(--g-dot-size);
    height: var(--g-dot-size);
    border-radius: 50%;
    background-color: var(--g-dot-color, #E4D6B7);
    border: none;
    transition: background-color var(--g-control-transition-speed, 0.2s);
}

.g-carousel__dot--active {
    background-color: var(--g-accent-color, #333);
    transform: scale(1.2);
}

/* 4. Пример стилизации карточки (можно вынести в свой CSS) */
.card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #333;
    /* Цвет текста для карточек */
}

.card h3 {
    margin-top: 0;
}

/* 8. Темы (Пример) */
/*
  Чтобы использовать тему, добавьте класс .g-carousel--theme-example
  к элементу .g-carousel
*/
.g-carousel--theme-example {
    /* Переопределяем акцентный цвет */
    --g-accent-color: #e91e63;
    /* Яркий розовый */

    /* Меняем фон и цвет стрелок */
    --g-arrow-bg: var(--g-accent-color);
    --g-arrow-color: #fff;
    --g-arrow-border-color: transparent;

    /* Увеличим точки */
    --g-dot-size: 9px;

    /* Уменьшим радиус скругления слайда */
    --g-slide-border-radius: 4px;

    /* Поместим стрелки ближе к карусели */
    --g-arrow-offset-x: 10px;
}

.offerings__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    height: 100%;
    gap: var(--element-gap);
    margin-left: 0;
    max-width: 444px;
}

@media (min-width: 1920px) {
    .offerings__content {
        max-width: 636px;
    }
}

@media (min-width: 1440px) {
    .offerings__content {
        max-width: 636px;
    }
}

@media (min-width: 1024px) {
    .offerings__content {
        max-width: 447px;
        gap: clamp(1.5rem, 4vw, 2.5rem);
    }
}