/* =====================================================================
   Страница отеля — по макету Figma «Редизайн B2B. Поездки» (8015:87363)
   Секции — белые карточки r24 с отступом 32 между ними, внутренние блоки r16.
   Тёмные иконки из макета (.hx-dk) в тёмной теме инвертируются.
   ===================================================================== */
.hp { display: flex; flex-direction: column; gap: 32px; padding-bottom: 32px }
.hp .pf-crumbs { margin-bottom: -8px } /* у .hp зазор 32 — до карточки 24, как в проде */
.hp-card { background: var(--surface); border-radius: 24px; overflow: hidden; min-width: 0 }
.hp img { max-width: none }
.hp-h5 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600 }
.hp-h6 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600 }
.hp-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 20px; border-radius: 16px; background: var(--neutral); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text) }
.hp-btn:hover { background: var(--neutral-hover) }

/* галерея и шапка */
.hp-top { padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 24px }
.hp-gal { display: grid; grid-template-columns: 633fr 424fr 101fr 101fr; grid-template-rows: 194px 100px 100px; gap: 4px; height: 402px; border-radius: 16px; overflow: hidden }
.hp-g { position: relative; display: block; overflow: hidden; background: var(--neutral); padding: 0; cursor: zoom-in }
.hp-g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s }
.hp-g:hover img { transform: scale(1.03) }
.hp-g1 { grid-column: 1; grid-row: 1 / 4 }
.hp-g2 { grid-column: 2; grid-row: 1 }
.hp-g3 { grid-column: 3 / 5; grid-row: 1 }
.hp-g4 { grid-column: 2; grid-row: 2 / 4 }
.hp-g5 { grid-column: 3; grid-row: 2 }
.hp-g6 { grid-column: 4; grid-row: 2 }
.hp-g7 { grid-column: 3; grid-row: 3 }
.hp-g8 { grid-column: 4; grid-row: 3 }
.hp-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .2); color: #fff; font-size: 24px; line-height: 28px; font-weight: 600 }
.hp-info { display: flex; gap: 24px; align-items: flex-start; padding: 0 16px 16px }
.hp-info-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px }
.hp-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.hp-score { padding: 4px 12px; border-radius: 12px; background: var(--brand-light); color: var(--brand); font-size: 18px; line-height: 24px; font-weight: 600 }
.hp-title h1 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 600 }
.hp-stars { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--line-2) }
.hp-stars img { width: 18px; height: 18px }
.hp-addr { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; color: var(--text-2); flex-wrap: wrap }
.hp-addr img { margin-right: 4px }
.hp-dot { padding: 0 2px }
.hp-feat { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }
.hp-feat > * { padding: 8px; border-radius: 12px; background: var(--page); font-size: 12px; line-height: 16px; color: var(--text) }
.hp-feat button:hover { background: var(--neutral-hover) }
.hp-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px }
.hp-tags .pf-link { font-size: 13px }
.hp-mini { position: relative; flex: none; width: 317px; height: 132px; border-radius: 16px; overflow: hidden; padding: 0; background: var(--neutral) }
.hp-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hp-mini span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap }
.hp-mini:hover span { background: rgba(0, 0, 0, .36) }

/* выбор номера */
.hp-rooms { padding: 24px; display: flex; flex-direction: column }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }
.hp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: var(--neutral); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text) }
.hp-chip:hover { background: var(--neutral-hover) }
.hp-chip.on { background: var(--text); color: var(--surface) }
.hp-chip.on img { filter: invert(1) }
.hp-chip .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; display: inline-grid; place-items: center }
.hp-rooms .hp-h5 { margin-bottom: 16px }
.hp-div { border: 0; height: 1px; background: var(--line-2); margin: 24px 0 }
.hp-room { display: flex; gap: 16px; align-items: flex-start }
.hp-ph { width: 284px; flex: none; display: flex; flex-direction: column; gap: 4px }
.hp-ph-m { display: block; width: 100%; height: 224px; border-radius: 16px; overflow: hidden; padding: 0; cursor: zoom-in }
.hp-ph-m img, .hp-ph-t img { width: 100%; height: 100%; object-fit: cover; display: block }
.hp-ph-t { display: flex; gap: 4px }
.hp-ph-t button { width: 68px; height: 68px; border-radius: 12px; overflow: hidden; padding: 0; flex: none; cursor: zoom-in }
.hp-ph-none { height: 224px; border-radius: 16px; background: var(--seg-hover, #f4f5f5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-size: 13px }
.hp-ph-none .ico { width: 40px; height: 40px; stroke-width: 1.4 }
.hp-rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: center }
.hp-rb h3 { margin: 0; width: 100%; font-size: 18px; line-height: 24px; font-weight: 600 }
.hp-m2 { font-size: 14px; font-weight: 400; color: var(--text-2); margin-left: 4px }
.hp-ac { width: 100%; display: flex; flex-wrap: wrap; gap: 8px }
.hp-ac > span, .hp-ac-more { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 12px; background: var(--neutral); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text) }
.hp-ac-more { background: var(--brand-light); color: var(--brand) }
.hp-ac-more.on img { transform: rotate(180deg) }
.hp-rates { width: 100%; display: flex; flex-direction: column; gap: 16px }
.hp-rate { display: flex; gap: 8px; align-items: center; padding: 16px; border-radius: 16px; background: var(--surface-2) }
.hp-opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px }
.hp-o { display: flex; gap: 12px; align-items: center }
.hp-o.top { align-items: flex-start }
.hp-o img { width: 20px; height: 20px; flex: none }
.hp-o p { margin: 0; font-size: 14px; line-height: 18px; color: var(--text) }
.hp-o.ok p, .hp-o .g { color: var(--brand) }
.hp-o b { font-weight: 700 }
.hp-o > div { display: flex; flex-direction: column; gap: 4px }
.hp-cl { display: inline-flex; align-items: center; gap: 2px; padding: 0; font-size: 12px; line-height: 16px; color: var(--info); align-self: flex-start }
.hp-cl:hover { text-decoration: underline }
.hp-price { width: 150px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center }
.hp-price > div { display: flex; flex-direction: column; align-items: center; gap: 4px }
.hp-price b { font-size: 16px; line-height: 22px; font-weight: 700; white-space: nowrap }
.hp-price span:not(.sr-tag) { font-size: 14px; line-height: 18px; color: var(--text-2) }
.hp-sel { display: inline-flex; align-items: center; justify-content: center; width: 119px; height: 36px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none }
.hp-sel:hover { background: var(--brand-hover) }
.hp-more-b { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--neutral); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text) }
.hp-more-b:hover { background: var(--neutral-hover) }
.hp-more-b img.flip { transform: rotate(180deg) }

/* расположение */
.hp-loc .hp-h5 { padding: 24px 24px 16px }
.hp-loc-a { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 4px }
.hp-loc-a b { font-size: 18px; line-height: 24px; font-weight: 600 }
.hp-loc-a span { font-size: 14px; line-height: 18px; color: var(--text-2) }
.hp-map { margin: 0 8px 8px; height: 390px; border-radius: 16px; overflow: hidden; background: var(--neutral) }
.hp-map img { width: 100%; height: 100%; object-fit: cover; display: block }

/* условия размещения */
.hp-terms, .hp-amen, .hp-desc { padding: 24px; display: flex; flex-direction: column; gap: 16px }
.hp-3 { display: flex; gap: 12px }
.hp-acc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px }
.hp-acc-h { display: flex; gap: 8px; align-items: center }
.hp-acc-h b { font-size: 16px; line-height: 22px; font-weight: 600 }
.hp-acc-b { padding-left: 28px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 18px }
.hp-acc-b .m { font-weight: 500 }
.hp-io { flex-direction: row; gap: 24px }
.hp-io > div { display: flex; flex-direction: column; gap: 2px }
.hp-io small { font-size: 12px; line-height: 16px; color: var(--text-2) }
.hp-morel { display: inline-flex; align-items: center; gap: 2px; padding: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--brand); align-self: flex-start }

/* отзывы */
.hp-rev { padding: 24px; display: flex; flex-direction: column; gap: 24px }
.hp-rev-h { display: flex; gap: 8px; align-items: stretch }
.hp-badge { display: flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 14px; line-height: 20px; font-weight: 700 }
.hp-rev-h > div { flex: 1; display: flex; flex-direction: column; gap: 2px }
.hp-rev-h b { font-size: 18px; line-height: 24px; font-weight: 600 }
.hp-rev-h span { font-size: 14px; line-height: 18px; color: var(--text-2) }
.hp-rev-h .iconbtn { align-self: center; width: 32px; height: 32px }
.hp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.hp-bar { display: flex; flex-direction: column; gap: 8px }
.hp-bar > i { display: block; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden }
.hp-bar > i b { display: block; height: 100%; border-radius: 12px; background: var(--ok-bar) }
.hp-bar > i b.lg { background: var(--mid-bar) } .hp-bar > i b.o { background: var(--warn-bar) } .hp-bar > i b.r { background: var(--neg) }
.hp-bar > span { display: flex; justify-content: space-between; font-size: 14px; line-height: 18px; color: var(--text-2) }
.hp-revs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; margin-top: 8px }
.hp-revs::-webkit-scrollbar { display: none }
.hp-rc { width: 304px; flex: none; padding: 16px; border-radius: 16px; background: var(--page); display: flex; flex-direction: column; gap: 12px }
.hp-rc.wide { width: auto }
.hp-rc-h { display: flex; justify-content: space-between; align-items: stretch; gap: 8px }
.hp-rc-h > div { display: flex; flex-direction: column; font-size: 14px; line-height: 18px }
.hp-rc-h b { font-weight: 600 }
.hp-rc-h span { color: var(--text-2) }
.hp-rs { min-width: 32px; padding: 0 6px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 13px; line-height: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center }
.hp-rs.lt { background: rgba(78, 188, 115, .2); color: var(--brand) }
.hp-rc-ph { display: flex; gap: 8px }
.hp-rc-ph img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover }
.hp-rc p { margin: 0; font-size: 14px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden }
.hp-rc.wide p { -webkit-line-clamp: unset }

/* удобства и описание */
.hp-agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px }
.hp-agrid > div { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; font-weight: 500 }
.hp-alist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px }
.hp-alist li { display: flex; gap: 8px; align-items: center }
.hp-alist .ico { color: var(--brand) }
.hp-dt { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 18px }
.hp-dt b { font-weight: 500 }
.hp-dt p { margin: 0 }

/* просмотр фото */
.hp-lb-b { display: flex; flex-direction: column; gap: 12px }
.hp-lb-m { position: relative; border-radius: 16px; overflow: hidden; background: #111 }
.hp-lb-m img { display: block; width: 100%; height: min(60vh, 520px); object-fit: contain }
.hp-lb-m .iconbtn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .9); color: #171717; border-radius: 50% }
.hp-lb-p { left: 12px } .hp-lb-n { right: 12px }
.hp-lb-t { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none }
.hp-lb-t button { flex: none; width: 72px; height: 52px; border-radius: 10px; overflow: hidden; padding: 0; opacity: .55; border: 2px solid transparent }
.hp-lb-t button.on { opacity: 1; border-color: var(--brand) }
.hp-lb-t img { width: 100%; height: 100%; object-fit: cover }

/* тёмная тема: тёмные иконки макета — светлыми */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-dk { filter: invert(1) } }
:root[data-theme="dark"] .hx-dk { filter: invert(1) }

/* адаптив */
@media (max-width: 1100px) {
  .hp-gal { height: 320px; grid-template-rows: 154px 80px 80px }
  .hp-room { flex-direction: column }
  .hp-ph { width: 100%; flex-direction: row }
  .hp-ph-m { width: 284px; flex: none }
  .hp-ph-t { flex-wrap: wrap; width: 140px; align-content: flex-start }
}
@media (max-width: 760px) {
  .hp { gap: 16px }
  .hp .pf-crumbs { margin-bottom: 0 }
  .hp-card { border-radius: 20px }
  .hp-gal { display: flex; height: 220px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 4px }
  .hp-gal::-webkit-scrollbar { display: none }
  .hp-g { flex: 0 0 85%; scroll-snap-align: start }
  .hp-info { flex-direction: column; padding: 0 8px 8px; gap: 16px }
  .hp-title { gap: 10px }
  .hp-title h1 { font-size: 20px; line-height: 26px; width: 100%; order: -1 }
  .hp-addr { font-size: 14px; line-height: 20px }
  .hp-mini { width: 100%; height: 120px }
  .hp-rooms, .hp-terms, .hp-amen, .hp-desc, .hp-rev { padding: 16px }
  .hp-h5 { font-size: 20px; line-height: 26px }
  .hp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px }
  .hp-chips::-webkit-scrollbar { display: none }
  .hp-chip { flex: none }
  .hp-ph { flex-direction: column }
  .hp-ph-m { width: 100%; height: 200px }
  .hp-ph-t { width: 100% }
  .hp-ph-t button { flex: 1; width: auto; height: auto; aspect-ratio: 1 }
  .hp-ph-none { height: 160px }
  .hp-rate { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px }
  .hp-price { width: auto; flex-direction: row; justify-content: space-between; text-align: left; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-2) }
  .hp-price > div { align-items: flex-start }
  .hp-loc .hp-h5 { padding: 16px 16px 12px }
  .hp-loc-a { padding: 0 16px 16px }
  .hp-map { height: 240px }
  .hp-3 { flex-direction: column; gap: 20px }
  .hp-bars { grid-template-columns: 1fr }
  .hp-rc { width: 270px }
  .hp-agrid { grid-template-columns: 1fr 1fr }
  .hp-alist { grid-template-columns: 1fr }
  .hp-btn { align-self: stretch }
}
.hp-mini .hp-mini-map { position: absolute; inset: 0; width: 100%; height: 100% }
/* «Вне политики» над названием номера — как TravelPolicyOutOfPolicyTag в b2b-fbt */
.hp-out { align-self: flex-start; width: max-content; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; margin-bottom: 8px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap }