/* Phuket Zen Tour — общие стили сайта (подключается на всех страницах).
   Hover states must live in real classes, not inline `style` — an inline
   style attribute always beats a stylesheet selector (incl. :hover),
   so any property also set inline can never visibly change on hover. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Golos Text',system-ui,sans-serif;color:#243b3d;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Manrope',sans-serif;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:#FFB703;color:#3D2B00}
.scroller{scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes ddInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ddInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.site-header{position:absolute;top:0;left:0;right:0;z-index:50}
.nav-desktop{display:none}
.nav-link{position:relative;color:#fff;font-weight:600;font-size:15px;opacity:.92;white-space:nowrap;transition:color .15s,opacity .15s}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#FFB703;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-link:hover{color:#FFB703;opacity:1}
.nav-link:hover::after,.nav-link.nav-active::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.nav-active{opacity:1}
.nav-link.active{color:#FFB703;opacity:1}
@media(min-width:1024px){
  .site-header{position:fixed}
  .nav-desktop{display:flex}
  .nav-burger{display:none!important}
  .hero-badges{flex-direction:row!important;align-items:center!important}
}

/* Карточка «иконка + заголовок + описание»: преимущества на главной, «Что вас ждёт» на страницах туров.
   До 640px — компактный вид: иконка и заголовок в одну строку, описание под ними.
   Свойства, меняющиеся по брейкпоинту, живут здесь, а не в inline style — иначе медиазапрос до них не достучится. */
.adv-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:8px;padding:16px}
.adv-icon{width:40px;height:40px;margin-bottom:0}
.adv-icon svg{width:20px;height:20px}
.adv-title{font-size:17.5px;margin-bottom:0}
.adv-text{font-size:14.5px;grid-column:1/-1}
@media(min-width:640px){
  .adv-card{display:block;padding:26px}
  .adv-icon{width:52px;height:52px;margin-bottom:16px}
  .adv-icon svg{width:26px;height:26px}
  .adv-title{font-size:19px;margin-bottom:8px}
  .adv-text{font-size:15px}
}

.tour-card{position:relative;cursor:pointer;background:#fff;border:1px solid #eceae3;border-radius:16px;box-shadow:0 1px 3px rgba(20,60,60,.05);transition:box-shadow .2s ease,border-color .2s ease}
.tour-card:hover{box-shadow:0 10px 30px rgba(13,92,99,.20);border-color:#c9d9d6}
/* stretched link: зона клика ссылки «Подробнее» растянута на всю карточку */
.tour-card-link::after{content:"";position:absolute;inset:0;border-radius:16px}
.hero-cta{background:#FFB703;color:#3D2B00;transition:background .15s}
.hero-cta:hover{background:#FFC42E}
.hero-outline{background:rgba(255,255,255,.10);border:1.6px solid rgba(255,255,255,.6);transition:background .15s,border-color .15s}
.hero-outline:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.85)}
.hero-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);transition:background .15s}
.hero-badge:hover{background:rgba(255,255,255,.18)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
@media(max-width:768px){.hero-img{object-position:left center}}

/* Отзывы (главная и страницы туров): выравнивание карточек карусели.
   Текст обрезается до 8 строк (line-clamp), длинные отзывы не растягивают ряд;
   раскрытие — кнопкой «Показать ещё»/«Свернуть». Видимость кнопки считает JS
   страницы (scrollHeight > clientHeight — текст реально обрезан), состояние
   раскрытия живёт в state компонента, не в classList (ре-рендер стёр бы DOM-правку).
   display задаёт класс, а не инлайн карточки — кламп работает поверх инлайновых
   font-size/line-height. */
.review-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.review-text.expanded{display:block;-webkit-line-clamp:unset}
.review-more{background:none;border:none;padding:0;margin-top:8px;font-family:'Manrope';font-weight:600;font-size:13px;color:#0D5C63;cursor:pointer;text-decoration:underline;text-underline-offset:3px}