/* pages/hotel-details.css — карта, отзывы, layout страницы (этап 5.1 / 9.1) */

.hotel-details {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.hotel-details .row.g-5,
.room-details .row.g-5 {
    --bs-gutter-x: var(--content-gap);
    --bs-gutter-y: var(--content-gap);
}

/* Flex-колонка: без min-width:0 широкий Swiper раздувает col-lg-8 и залезает под сайдбар */
.hotel-details .row.g-5 > .col-lg-8,
.room-details .row.g-5 > .col-lg-8 {
    min-width: 0;
}

.hotel-details .hotel-gallery,
.room-details .room-gallery {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .hotel-details .row.g-5 > .col-lg-4,
    .room-details .row.g-5 > .col-lg-4 {
        order: -1;
    }
    .hotel-details .row.g-5 > .col-lg-8,
    .room-details .row.g-5 > .col-lg-8 {
        order: 0;
    }
}

/* Карточка описания в основной колонке (ранее в hotel-card.css) */
.hotel-details .hotel-description-card.help-card,
.room-details .hotel-description-card.help-card {
    margin-bottom: 0;
}

.hotel-info .help-card .hotel-description:last-child,
.room-info .help-card .room-description:last-child {
    margin-bottom: 0;
}

/* В основной колонке описание не ограничивается по ширине (sidebar.css задаёт 65ch для сайдбара) */
.hotel-info .help-card.hotel-description-card .hotel-description,
.hotel-info .help-card.hotel-description-card .room-description,
.hotel-info .help-card.hotel-description-card .hotel-description--rich,
.hotel-info .help-card.hotel-description-card .room-description--rich,
.room-info .help-card.hotel-description-card .hotel-description,
.room-info .help-card.hotel-description-card .room-description,
.room-info .help-card.hotel-description-card .hotel-description--rich,
.room-info .help-card.hotel-description-card .room-description--rich {
    max-width: none;
}

.hotel-info .help-card .public-rich-description-fold:not(.is-expanded) .public-rich-description-fold__inner,
.room-info .help-card .public-rich-description-fold:not(.is-expanded) .public-rich-description-fold__inner {
    max-height: min(32rem, 70vh);
}

.hotel-info .help-card .public-rich-description-fold:not(.is-expanded) .public-rich-description-fold__inner::after,
.room-info .help-card .public-rich-description-fold:not(.is-expanded) .public-rich-description-fold__inner::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--glass-bg));
}

/* Карта отеля: обёртка с aspect-ratio для избежания CLS и современный стиль */
.map-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-map);
    aspect-ratio: 16 / 9;
    min-height: 400px;
}

/* Карта отеля: без рамки (вместо устаревшего frameborder="0"), на узких экранах — компактнее */
.hotel-map-iframe {
    border: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/*
 * Карточки отзывов: собственная система, независимая от policy-item.
 * Варианты: .review-card--home (карусель главной), .review-card--detail (hotel-details).
 * Типографика тела, дат и источника — одинаковая в обоих вариантах.
 */
#hotel-reviews-section {
    scroll-margin-top: 5rem;
}

.hotel-reviews-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Базовый стиль карточки отзыва */
.review-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--light);
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

/* Hover только для детальной страницы (не для carousel) */
@media (hover: hover) {
    .review-card--detail:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-alpha-15);
    }
}

/* Avatar */
.review-card > img.hotel-review-avatar,
.review-card .hotel-review-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* Иконка-заглушка вместо аватара */
.review-card > i.fa-user {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-circle-bg);
    border-radius: 50%;
    color: var(--primary-dark);
    font-size: var(--text-base);
}

/* Основной блок с содержимым */
.review-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.review-card .hotel-review-meta {
    margin-bottom: var(--space-3);
    margin-top: var(--space-1);
}

/* Ряд звёзд в одну линию */
.review-card .hr-yandex-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

/* Текст отзыва: единый кегль и строкоотступ в обоих вариантах (Шаг 5.2) */
.review-card > div > span,
.review-card .home-review-text {
    display: block;
    margin-top: 0;
    font-size: var(--text-sm);
    line-height: var(--line-height-body);
    color: var(--gray);
}

/* Звёзды: единый цвет рейтинга из семантического токена */
.review-card .hr-yandex-star--on {
    color: var(--rating-gold);
}

.review-card .hr-yandex-star:not(.hr-yandex-star--on) {
    color: var(--black-alpha-20);
}

.review-card .hr-yandex-star {
    font-size: var(--text-xs);
}

/*
 * Чипы тем (Яндекс.Карты): горизонтальный скролл, справа круглая кнопка.
 * Yandex brand-цвета вынесены в локальные CSS-переменные.
 */
.hotel-reviews-chips-yandex {
    /* Локальные Yandex brand-цвета — не выносить в tokens.css */
    --chip-bg: var(--light);
    --chip-bg-hover: var(--neutral);
    --chip-bg-active: var(--neutral-warm);
    --chip-positive: #00b341;
    --chip-separator: var(--gray);

    padding-bottom: var(--space-4);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--black-alpha-06);
}

.hotel-reviews-chips-yandex__viewport {
    position: relative;
}

/* Градиент у правого края только при переполнении */
.hotel-reviews-chips-yandex__viewport--scrollable::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 10px;
    width: 4.5rem;
    pointer-events: none;
    z-index: var(--z-base);
    background: linear-gradient(to left, var(--white) 35%, transparent);
}

.hotel-reviews-chips-yandex__strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--neutral) var(--neutral-warm);
}

.hotel-reviews-chips-yandex__viewport--scrollable .hotel-reviews-chips-yandex__strip {
    padding-right: 2.6rem;
}

.hotel-reviews-chips-yandex__strip::-webkit-scrollbar {
    height: 4px;
}

.hotel-reviews-chips-yandex__strip::-webkit-scrollbar-track {
    background: var(--neutral-warm);
    border-radius: var(--radius-sm);
}

.hotel-reviews-chips-yandex__strip::-webkit-scrollbar-thumb {
    background: var(--neutral);
    border-radius: var(--radius-sm);
}

.hotel-reviews-chips-yandex__scroll-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--white);
    color: var(--black-alpha-50);
    box-shadow: var(--elev-1);
    cursor: pointer;
    transition: var(--transition-fast);
}

@media (hover: hover) {
    .hotel-reviews-chips-yandex__scroll-next:hover {
        color: var(--black-alpha-80);
        box-shadow: var(--elev-2);
    }
}

.hotel-reviews-chips-yandex__scroll-next:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.hotel-reviews-chips-yandex__scroll-next[aria-disabled='true'] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.hotel-review-chip-yandex {
    scroll-snap-align: start;
    box-sizing: border-box;
    min-width: 8.25rem;
    max-width: 13rem;
    padding: 0.65rem var(--space-5) 0.55rem;
    background: var(--chip-bg);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

@media (hover: hover) {
    .hotel-review-chip-yandex:hover {
        background: var(--chip-bg-hover);
    }
}

.hotel-review-chip-yandex:active {
    background: var(--chip-bg-active);
}

.hotel-review-chip-yandex__row1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.hotel-review-chip-yandex__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    color: var(--dark);
}

/* « · 88% 👍 » всегда одной строкой справа от названия */
.hotel-review-chip-yandex__metric {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    gap: 0.1rem;
    white-space: nowrap;
}

.hotel-review-chip-yandex__sep {
    color: var(--chip-separator);
    font-weight: var(--font-weight-regular);
}

.hotel-review-chip-yandex__pct {
    font-weight: var(--font-weight-bold);
    color: var(--chip-positive);
}

.hotel-review-chip-yandex__thumb-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 0.05rem;
}

.hotel-review-chip-yandex__thumb {
    font-size: var(--text-xs);
    color: var(--chip-positive);
    line-height: 1;
}

.hotel-review-chip-yandex__row2 {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
    color: var(--gray);
    line-height: 1.3;
}

/* < md: карта на мобильных с фиксированным соотношением сторон */
@media (max-width: 767.98px) {
    .map-wrapper {
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }
}