/* One CSS to rule them all — фронт плагина */
:root{
  --st-bg: #0d0f14;
  --st-fg: #eef2f6;
  --st-muted: #a5adbb;
  --st-accent: #ffffff; /* белый для солидности */
  --st-brand: #1e293b; /* темные оттенки для веса */
  --st-glass: rgba(13,15,20,.55);
  --st-shadow: 0 20px 45px rgba(0,0,0,.35);
  --st-radius: 18px;
}

/* -------------------- Directions Block --------------------------- */
.stdir{ position:relative; width:100%; max-width:1440px; margin:0 auto; min-height:520px; color:var(--st-fg); overflow:hidden; background:var(--st-bg); border-radius:var(--st-radius); box-shadow:var(--st-shadow);
  /* переменные для расчёта области видимости карточек */
  --st-card-w: clamp(180px, 18vw, 260px); /* ширина одной карточки */
  --st-gap: 24px;                           /* зазор между карточками */
  --st-peek: 36px;                          /* «край четвёртой» */
  --st-fade: 96px;                          /* ширина градиентного затухания справа */
}
.stdir__bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) contrast(1) brightness(.85); transition:background-image .6s ease, filter .6s ease; z-index:0; }
.stdir__overlay{ position:absolute; left:0; right:0; bottom:0; height:50%; background-size:cover; background-position:center bottom; mix-blend-mode:normal; opacity:.95; z-index:1; }
/* Заголовок фокусной карточки — вправо вверх */
.stdir__floating-title{ position:absolute; left:auto; right:40px; top:24px; max-width:60%; text-align:right; font-weight:800; font-size: clamp(28px, 5vw, 54px); line-height:1.05; letter-spacing:.2px; color:#fff; text-shadow:0 6px 28px rgba(0,0,0,.45); pointer-events:none; z-index:3; text-transform: uppercase; }

/* Лента карточек: окно видимости = 3 полных + край четвёртой, плавное затухание справа
   + подняты на уровень заголовка и левый отступ как у стрелок */
.stdir__track-wrap{ position:absolute; top:0; bottom:0; left:0;
  padding:24px 90px 60px 22px; /* top right bottom left */
  z-index:2; display:flex; align-items:flex-start; justify-content:flex-start; overflow:hidden;
  /* ширина окна: 3 карточки + 2 промежутка + край четвёртой + (left 22px + right 90px) */
  width: calc(var(--st-card-w) * 3 + var(--st-gap) * 2 + var(--st-peek) + 112px);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - var(--st-fade)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - var(--st-fade)), rgba(0,0,0,0) 100%);
}
.stdir__track{ display:flex; align-items:flex-start; gap: var(--st-gap); transition:transform .45s cubic-bezier(.2,.8,.2,1); will-change:transform; }

/* Убрали «чёрную рамку» вокруг карточки: фон прозрачный, без бордюров, сглаживание */
.stdir__card{ position:relative; flex:0 0 var(--st-card-w); height: clamp(320px, 38vh, 440px); border-radius:16px; overflow:hidden; background:transparent; border:none; outline: none; background-clip: padding-box; -webkit-backface-visibility:hidden; backface-visibility:hidden; box-shadow:0 10px 32px rgba(0,0,0,.35); cursor:pointer; transform:translateZ(0); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; will-change:transform, box-shadow; }
.stdir__card.is-focus{ transform:scale(1.02); box-shadow:0 16px 50px rgba(0,0,0,.45); }
.stdir__card-inner{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:18px; }
.stdir__card-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(1) brightness(.9); transition:transform .45s ease, filter .3s ease; }
.stdir__card:hover .stdir__card-bg{ transform:scale(1.04); filter:contrast(1.05) brightness(.95); }
.stdir__card-title{ position:relative; z-index:2; padding:8px 12px; background:rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:18px; border-radius:10px; margin-block-end: 0; }
.stdir__card-title.is-hidden{ opacity:0; visibility:hidden; }
.stdir__card-link{ position:absolute; inset:0; z-index:3; }

/* Центрируем стрелки строго по центру */
.stdir__nav{ position:absolute; bottom:22px; left:22px; width:48px; height:48px; border-radius:14px; background:var(--st-glass); backdrop-filter: blur(6px); color:#fff; font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.3); cursor:pointer; transition:transform .2s ease, background .2s ease; z-index:3; text-align:center; }
.stdir__nav--next{ left:76px; }
.stdir__nav:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); }

.stdir__info{ position:absolute; right:24px; bottom:24px; max-width:min(600px, 45%); display:flex; flex-direction:column; gap:16px; align-items:flex-end; text-align:right; z-index:3; }
.stdir__desc{ font-size:12pt; color:var(--st-fg); opacity:.95; max-width: 350px; line-height: 1.3; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 5px 5px 5px rgba(0,0,0,.7); }
.stdir__count{ font-weight:700; letter-spacing:.3px; opacity:.9; }
.stdir__info-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* Кнопки */
.st-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; font-weight:700; text-decoration:none; border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 28px rgba(0,0,0,.25); }
.st-btn--primary{ background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.36)); color:#fff; }
.st-arrow{ display:inline-block; transform:translateX(0); transition:transform .2s ease; }
.st-btn:hover .st-arrow{ transform:translateX(4px); }

/* Стилизуем «Смотреть все туры» как более заметную кнопку */
.stdir__all{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:14px; font-weight:normal; text-decoration:none; background:linear-gradient(180deg, #5b8cff, #3466ff); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.28); transform:translateZ(0); transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.stdir__all:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 38px rgba(0,0,0,.32); }

/* ---------------- Person Layer = ровно высоте 2-го слоя (50%) ---- */
.stdir__person{ position:absolute; bottom:0; left:0; height:50%; max-height:50%; width:auto; aspect-ratio:3 / 4; background-size:contain; background-repeat:no-repeat; background-position:bottom left; pointer-events:none; transform:translate(var(--st-person-x, 0), calc(var(--st-person-y, 0) * -1)); z-index:4; }

/* -------------------- All Tours page ------------------------------ */
.st-container{ max-width:1440px; margin:0 auto; padding:32px 20px; }
.st-h1{ font-size: clamp(28px, 3.8vw, 42px); margin:0 0 22px; font-weight:800; color:#1d1d1d; }
.st-h2{ font-size: clamp(22px, 3.2vw, 32px); margin:18px 0 18px 0; font-weight:800; color:#10131a; }

.st-filters{ display:flex; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; box-shadow:0 8px 24px rgba(10,15,25,.06); margin-bottom:18px; }
.st-field{ display:flex; flex-direction:column; gap:6px; }
.st-field label{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:#64748b; }
.st-field select, .st-field input{ min-width:180px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }

.st-results.is-loading{ opacity:.6; pointer-events:none; }

.st-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }

/* Карточка тура */
.st-card{ position:relative; display:block; border-radius:16px; overflow:hidden; background:#111; color:#fff; min-height:240px; box-shadow:0 12px 28px rgba(0,0,0,.28); background-size:cover; background-position:center; transform:translateZ(0); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; will-change:transform, box-shadow; }
.st-card:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 16px 36px rgba(0,0,0,.34); }

.st-card .st-card-bottom{ position:absolute; inset:auto 0 0 0; padding:14px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 40%, rgba(0,0,0,.8)); }
.st-card .st-card-title{ font-weight:800; font-size:20px; margin-bottom:6px; }
.st-card .st-badge{ position:absolute; top:10px; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); box-shadow:0 6px 16px rgba(0,0,0,.3); font-weight:700; }
.st-card .st-age{ left:10px; }
.st-card .st-price{ right:10px; }
.st-card .st-tags{ display:flex; flex-wrap:wrap; gap:6px; opacity:.95; }
.st-card .st-tags span{ background:rgba(255,255,255,.12); padding:3px 8px; border-radius:10px; font-size:13px; }
.st-card .st-card-desc{ margin-top:8px; font-size:14px; opacity:.9; }
.st-card .st-card-meta{ display:flex; gap:10px; font-size:13px; opacity:.9; margin-bottom:6px; }

/* -------------------- Hero headers ------------------------------- */
.st-hero{ height:100px; border-radius:18px; background-size:cover; background-position:center; position:relative; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); margin-bottom:18px; }
.st-hero:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); }
.st-hero__inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; color:#fff; }
.st-hero__title{ font-size: clamp(22px, 3vw, 30px); font-weight:800; margin:0; }
.st-hero__meta, .st-hero__price{ font-size: clamp(16px, 2.4vw, 22px); font-weight:800; }
.st-hero__row{ display:flex; gap:16px; }

/* -------------------- Inline meta & content ----------------------- */
.st-tags--p{ padding:6px 2px 0; }
.st-inline-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 20px; }
.st-inline-chip{ background:#f1f5f9; border:1px solid #e2e8f0; color:#0f172a; padding:6px 10px; border-radius:999px; font-weight:600; }

.st-content{ background:#fff; color: #1d1d1d; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 8px 24px rgba(10,15,25,.06); }
.st-wysiwyg p{ margin:0 0 12px; line-height:1.6; }

/* -------------------- Responsive tweaks --------------------------- */
@media (max-width: 900px){
  .stdir{ min-height:460px; }
  .stdir__track-wrap{ padding:24px 68px 46px 22px; width: calc(var(--st-card-w) * 3 + var(--st-gap) * 2 + var(--st-peek) + 90px); }
}
@media (max-width: 640px){
  .stdir{ border-radius:12px; }
  .stdir__floating-title{ right:18px; top:14px; max-width:70%; }
  .stdir__track-wrap{ left:0; right:0; padding:32px 16px; width:auto; -webkit-mask-image:none; mask-image:none; }
  .stdir__track{ gap:16px; }
  .stdir__card{ flex-basis: 72vw; height: 58vh; }
  .stdir__nav{ bottom:16px; left:16px; }
  .stdir__nav--next{ left:70px; }
  .stdir__info{ right:16px; bottom:16px; max-width:60%; }
}