/* Capymapa — виджет главной страницы (хаб), версия 4. Общий для RU/EN.
   Стили переписаны по макету ТЕХНИЧЕСКОЕ/capymapa-mockups-v1.html (раздел «ХАБ»):
   типографика, отступы, тени, радиусы, кнопки, чипы, карточки.
   Классы (.ch-place, .ch-ph, .ch-badge, .ch-art, .thumb и т.д.) НЕ переименованы —
   их генерирует capymapa-hub-<lang>.js, переименование сломает вывод.
   Деплой — git, см. functions.php, capymapa_hub_assets(). */

/* Шрифты подключены прямо здесь, а не через wp_enqueue_style в functions.php:
   так стиль и его шрифт едут одним файлом и не могут разъехаться при деплое.
   @import обязан стоять самой первой директивой файла — ничего выше не добавлять. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

#capymapa-hub, #capymapa-hub *{box-sizing:border-box}
#capymapa-hub .visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

#capymapa-hub{
  /* ===== ДИЗАЙН-ТОКЕНЫ (общие с виджетами сонгтео/курса) — имена прежние, значения из capymapa-tokens.css.
     --blue выведен из палитры (решение 31.08.2026): везде, где он был акцентным/интерактивным цветом,
     теперь бирюза. Единственное намеренное исключение — исходный синий буквально оставлен в JS-массиве
     декоративных градиентов карточек статей (просто один из 4 фоновых цветов-заглушек, не бренд-акцент). */
  --blue:var(--cm-teal-700); --teal:var(--cm-teal-700); --teal-l:var(--cm-teal-500);
  --ink:var(--cm-ink); --grey:var(--cm-ink-soft); --faint:var(--cm-ink-faint);
  --line:var(--cm-line); --line-soft:var(--cm-line-soft); --bg:var(--cm-canvas);
  --green:var(--cm-good); --gold:var(--cm-amber-500); --red:var(--cm-bad);
  --r:var(--cm-r-lg); --r-md:var(--cm-r-md); --r-xl:var(--cm-r-xl);
  --shadow:var(--cm-sh-1); --shadow-2:var(--cm-sh-2); --shadow-3:var(--cm-sh-3);
  --ease:var(--cm-ease);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:500;
  color:var(--ink); background:var(--bg); max-width:1180px; margin:0 auto;
  padding-bottom:78px; position:relative;
}
@media(min-width:900px){ #capymapa-hub{ padding-bottom:0; } }
#capymapa-hub h1,#capymapa-hub h2,#capymapa-hub h3{font-family:"Unbounded",-apple-system,BlinkMacSystemFont,sans-serif;margin:0;text-wrap:balance}
@media(prefers-reduced-motion:reduce){ #capymapa-hub *{animation:none!important;transition:none!important} }

/* ---------- шапка ---------- */
#capymapa-hub .ch-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
#capymapa-hub .ch-logo{display:flex;align-items:center;gap:9px;font-family:"Unbounded",-apple-system,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--teal)}
#capymapa-hub .ch-capy{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto}
#capymapa-hub .ch-city{font-size:13px;font-weight:700;color:var(--grey);background:#fff;border:1px solid var(--line);border-radius:var(--cm-r-full);padding:7px 14px;white-space:nowrap;cursor:default}
#capymapa-hub .ch-ava{width:32px;height:32px;border-radius:50%;background:var(--cm-teal-100);color:var(--teal);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;text-decoration:none}
@media(min-width:900px){ #capymapa-hub .ch-head-mobile{display:none} }

/* ---------- hero ---------- */
/* «сияние с дрейфом» — подложка из макета (см. --cm-halo в токенах):
   статичный многослойный градиент + отдельный анимированный слой на ::before */
#capymapa-hub .ch-hero{padding:18px 16px 20px;position:relative;overflow:hidden;background:var(--cm-halo)}
#capymapa-hub .ch-hero::before{content:'';position:absolute;inset:-30%;pointer-events:none;z-index:0;background:var(--cm-halo-drift);animation:cm-hero-drift 26s var(--ease) infinite alternate}
@keyframes cm-hero-drift{ to{ transform:translate3d(4%,3%,0) scale(1.08) } }
#capymapa-hub .ch-hero > *{position:relative;z-index:1}
@media(min-width:900px){
  #capymapa-hub .ch-hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"hello map" "sub map" "search map" "chips map" "utils map";
    gap:0 34px; padding:38px 34px 34px; align-content:start;
  }
  #capymapa-hub .ch-hello{grid-area:hello}
  #capymapa-hub .ch-sub{grid-area:sub}
  #capymapa-hub .ch-search-wrap{grid-area:search}
  #capymapa-hub .ch-chips{grid-area:chips}
  #capymapa-hub .ch-util-row{grid-area:utils}
  #capymapa-hub .ch-map-entry{grid-area:map;height:100%;min-height:322px;margin:0}
}
#capymapa-hub .ch-hello{font-family:"Unbounded",-apple-system,sans-serif;font-size:27px;font-weight:800;line-height:1.12;letter-spacing:-.04em;margin:0 0 9px;color:var(--ink)}
@media(min-width:900px){ #capymapa-hub .ch-hello{font-size:44px;line-height:1.02;letter-spacing:-.04em;margin-bottom:12px} }
/* дата не должна разрываться между числом и месяцем («1» / «сентября») —
   при нехватке места она целиком переносится на вторую строку, как в макете */
#capymapa-hub .ch-hello span{color:var(--cm-date);white-space:nowrap;font-style:normal}
#capymapa-hub .ch-sub{font-size:13px;color:var(--grey);line-height:1.5;margin:0 0 14px}
@media(min-width:900px){ #capymapa-hub .ch-sub{font-size:15px;max-width:520px;margin-bottom:20px} }

/* поиск */
#capymapa-hub .ch-search-wrap{position:relative}
#capymapa-hub .ch-search{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);height:48px;box-shadow:var(--shadow-2);display:flex;align-items:center;gap:11px;padding:0 16px;font-size:15px;max-width:520px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){ #capymapa-hub .ch-search{height:52px} }
#capymapa-hub .ch-search:focus-within{border-color:var(--teal);box-shadow:var(--cm-ring)}
#capymapa-hub .ch-search > span{color:var(--faint);flex:0 0 auto;display:flex;align-items:center}
/* тема Listeo задаёт полям ввода свою высоту (51px), отступ снизу, радиус и тень —
   поле вылезало выше белой плашки, и был виден край его тени. Гасим всё явно. */
#capymapa-hub .ch-search input{border:none;outline:none;flex:1;min-width:0;font:500 15px/1 "Manrope",sans-serif;color:var(--ink);background:transparent;height:100%;min-height:0;padding:0;margin:0;border-radius:0;box-shadow:none}
#capymapa-hub .ch-search input::placeholder{color:var(--faint)}
#capymapa-hub .ch-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);z-index:50;overflow:hidden;display:none}
#capymapa-hub .ch-search-results.show{display:block}
#capymapa-hub .ch-sr-item{display:flex;gap:10px;align-items:center;padding:10px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-soft)}
#capymapa-hub .ch-sr-item:last-child{border-bottom:none}
#capymapa-hub .ch-sr-item:hover{background:var(--cm-teal-50)}
#capymapa-hub .ch-sr-thumb{width:38px;height:38px;border-radius:9px;flex:0 0 auto;background-size:cover;background-position:center}
#capymapa-hub .ch-sr-title{font-size:13.5px;font-weight:800;line-height:1.25}
#capymapa-hub .ch-sr-cat{font-size:11.5px;color:var(--grey);margin-top:2px}
#capymapa-hub .ch-sr-more{display:block;padding:11px 14px;font-size:13px;font-weight:800;color:var(--teal);text-decoration:none;text-align:center}
#capymapa-hub .ch-sr-empty{padding:14px;font-size:12.5px;color:var(--grey);text-align:center}

/* чипы */
#capymapa-hub .ch-chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
@media(min-width:900px){ #capymapa-hub .ch-chips{margin-top:14px} }
#capymapa-hub .ch-chips::-webkit-scrollbar{display:none}
#capymapa-hub .ch-chip{flex:0 0 auto;font:700 13px/1 "Manrope",sans-serif;background:#fff;border:1px solid var(--line);border-radius:var(--cm-r-full);height:34px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;color:var(--grey);text-decoration:none;white-space:nowrap;transition:.18s var(--ease)}
#capymapa-hub .ch-chip:hover{border-color:var(--cm-teal-300);color:var(--ink)}
#capymapa-hub .ch-chip svg{color:var(--teal);flex:0 0 auto}
/* «Открыто сейчас» — как в макете: обычный чип с зелёной точкой, не заливка.
   Точка рисуется из символа «●» в самой разметке (span.dot), а не псевдоэлементом —
   иначе при несовпадении версий разметки и стилей получаются две точки подряд. */
#capymapa-hub .ch-chip.hot{background:#fff;border-color:var(--line);color:var(--grey)}
#capymapa-hub .ch-chip.hot .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;font-size:0;line-height:0;color:transparent;overflow:hidden}

/* утилиты: курс / сонгтео / прилив */
#capymapa-hub .ch-util-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(min-width:900px){ #capymapa-hub .ch-util-row{grid-template-columns:repeat(3,1fr);max-width:560px;margin-top:20px} }
#capymapa-hub .ch-util{background:#fff;border:1px solid transparent;border-radius:var(--r);box-shadow:var(--shadow);padding:15px 16px;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){ #capymapa-hub .ch-util:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} }
#capymapa-hub .ch-util .t{font:800 11px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
#capymapa-hub .ch-util .v{font-family:"Unbounded",-apple-system,sans-serif;font-size:21px;font-weight:800;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#capymapa-hub .ch-util .d{font-size:12px;color:var(--grey)}
/* десктоп: заголовок и бейдж — одной строкой в сетке, крупное время и подпись под ними.
   Раньше бейдж был прибит абсолютом в угол, под него резервировался отступ справа —
   из-за этого заголовок и подпись ломались на узкой карточке. */
#capymapa-hub .ch-util.tide{border-color:var(--teal-l);display:grid;grid-template-columns:1fr auto;grid-template-areas:"t b" "v v" "d d";align-items:center;column-gap:8px}
/* заголовок тут длиннее соседних («Скоро отлив»), поэтому трекинг чуть уже — чтобы влезал в строку с бейджем */
#capymapa-hub .ch-util.tide .t{grid-area:t;letter-spacing:.06em;min-width:0}
#capymapa-hub .ch-util.tide .v{grid-area:v}
#capymapa-hub .ch-util.tide .d{grid-area:d}
#capymapa-hub .ch-util.tide .bdg{grid-area:b;justify-self:end;display:inline-flex;align-items:center;font:800 10px/1 "Manrope",sans-serif;padding:3px 7px;border-radius:var(--cm-r-full);background:#e6f6ef;color:var(--green);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
@media(max-width:899px){
  #capymapa-hub .ch-util.tide{grid-column:1 / -1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px}
  #capymapa-hub .ch-util.tide .t{order:1}
  #capymapa-hub .ch-util.tide .d{order:2}
  #capymapa-hub .ch-util.tide .v{order:3;font-size:20px;white-space:nowrap;margin-left:auto}
  #capymapa-hub .ch-util.tide .bdg{position:static;order:4}
}

/* ---------- превью карты ---------- */
#capymapa-hub .ch-map-entry{margin:14px 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-3);position:relative;height:168px;display:block;text-decoration:none;color:inherit;
  background:url('https://capymapa.com/wp-content/uploads/2026/07/pattaya-map.webp') center/cover no-repeat,linear-gradient(120deg,#eef3ee 60%,var(--cm-teal-50) 100%)}
@media(min-width:900px){ #capymapa-hub .ch-map-entry{border-radius:var(--r-xl);height:322px} }
#capymapa-hub .ch-map-cta{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2}
/* стекло — единственное место, где оно уместно: под плашкой реальная картинка карты */
#capymapa-hub .ch-map-cta .lbl{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 28px -12px rgba(6,40,46,.35);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-radius:var(--r-md);padding:10px 14px;font:800 14px/1.2 "Manrope",sans-serif}
@supports not (backdrop-filter:blur(1px)){ #capymapa-hub .ch-map-cta .lbl{background:rgba(255,255,255,.95)} }
#capymapa-hub .ch-map-cta .lbl small{display:block;font-size:11.5px;font-weight:500;color:var(--grey);margin-top:2px}
#capymapa-hub .ch-map-cta .btn{background:var(--teal);color:#fff;border-radius:var(--r-md);height:38px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:800 13px/1 "Manrope",sans-serif;box-shadow:var(--shadow);transition:background .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){ #capymapa-hub .ch-map-cta .btn{height:44px;padding:0 18px;font-size:14px} }
#capymapa-hub .ch-map-entry:hover .ch-map-cta .btn{background:#035c64;box-shadow:var(--shadow-2)}

/* ---------- секции ---------- */
#capymapa-hub .ch-sec{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:22px 16px 10px}
@media(min-width:900px){ #capymapa-hub .ch-sec{padding:30px 34px 12px} }
#capymapa-hub .ch-sec h2{font-family:"Unbounded",-apple-system,sans-serif;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
@media(min-width:900px){ #capymapa-hub .ch-sec h2{font-size:22px} }
#capymapa-hub .ch-sec a{font:800 13px/1 "Manrope",sans-serif;color:var(--teal);text-decoration:none;white-space:nowrap}

/* ---------- лента мест ---------- */
#capymapa-hub .ch-rail{display:flex;gap:14px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
@media(min-width:900px){ #capymapa-hub .ch-rail{padding:0 34px 4px} }
#capymapa-hub .ch-rail::-webkit-scrollbar{display:none}
#capymapa-hub .ch-place{flex:0 0 178px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){
  #capymapa-hub .ch-place{flex:0 0 218px}
  #capymapa-hub .ch-place:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
}
#capymapa-hub .ch-ph{height:100px;position:relative;background-size:cover;background-position:center;padding:9px;display:flex;align-items:flex-start}
@media(min-width:900px){ #capymapa-hub .ch-ph{height:118px} }
#capymapa-hub .ch-badge{display:inline-flex;align-items:center;gap:5px;font:800 11px/1 "Manrope",sans-serif;padding:5px 9px;border-radius:var(--cm-r-full)}
#capymapa-hub .ch-b-top{background:var(--cm-amber-50);color:var(--cm-amber-800)}
#capymapa-hub .ch-b-cat{background:rgba(255,255,255,.92);color:var(--ink)}
#capymapa-hub .ch-pbody{padding:12px 14px 14px}
#capymapa-hub .ch-pbody h3{font-family:"Manrope",sans-serif;font-size:14.5px;font-weight:800;line-height:1.28;letter-spacing:0}
#capymapa-hub .ch-pcat{font-size:12px;color:var(--grey);margin-top:5px;display:flex;align-items:center;gap:6px}
#capymapa-hub .ch-skeleton{padding:20px;font-size:13px;color:var(--grey)}

/* ---------- категории ---------- */
#capymapa-hub .ch-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:0 16px}
@media(min-width:900px){ #capymapa-hub .ch-cats{grid-template-columns:repeat(8,1fr);padding:0 34px} }
#capymapa-hub .ch-cat{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);padding:13px 6px;text-align:center;text-decoration:none;color:inherit;display:block;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){ #capymapa-hub .ch-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} }
#capymapa-hub .ch-cat .ic{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#fff}
#capymapa-hub .ch-cat .nm{font:700 11px/1.2 "Manrope",sans-serif;color:var(--grey)}

/* ---------- статьи ---------- */
#capymapa-hub #ch-articles{display:grid;grid-template-columns:1fr;gap:12px;padding:0 16px 12px}
@media(min-width:900px){ #capymapa-hub #ch-articles{grid-template-columns:1fr 1fr;gap:16px;padding:0 34px 12px} }
#capymapa-hub .ch-art{position:relative;margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);display:flex;gap:14px;padding:12px;align-items:center;text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media(min-width:900px){ #capymapa-hub .ch-art:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} }
#capymapa-hub .ch-art .thumb{position:relative;width:150px;height:92px;border-radius:var(--r-md);flex:0 0 auto;background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden}
#capymapa-hub .ch-art h3{font-family:"Manrope",sans-serif;font-size:14.5px;font-weight:800;line-height:1.3}
#capymapa-hub .ch-art p{font-size:12.5px;color:var(--grey);margin-top:5px}
#capymapa-hub .ch-art-badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;font:800 10px/1 "Manrope",sans-serif;padding:4px 8px;border-radius:var(--cm-r-full);background:var(--cm-amber-50);color:var(--cm-amber-800)}
#capymapa-hub .ch-articles-more-wrap{padding:4px 16px 18px;text-align:center}
@media(min-width:900px){ #capymapa-hub .ch-articles-more-wrap{padding:4px 34px 22px} }
#capymapa-hub .ch-articles-more{display:none;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--cm-r-full);height:44px;padding:0 22px;font:800 14px/1 "Manrope",sans-serif;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:.18s var(--ease)}
#capymapa-hub .ch-articles-more:hover{border-color:var(--cm-teal-300)}

/* ---------- SEO-блок ---------- */
#capymapa-hub .ch-seo{margin:22px 16px 24px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:22px 20px}
@media(min-width:900px){
  #capymapa-hub .ch-seo{margin:30px 34px 32px;padding:22px 24px}
  #capymapa-hub .ch-seo-lead,
  #capymapa-hub .ch-seo-body p,
  #capymapa-hub .ch-seo-body h3{max-width:74ch}
}
#capymapa-hub .ch-seo > h2{font-family:"Unbounded",-apple-system,sans-serif;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin-bottom:9px}
#capymapa-hub .ch-seo-lead{font-size:14px;color:var(--grey);line-height:1.65}
#capymapa-hub .ch-seo-details{margin-top:14px}
#capymapa-hub .ch-seo-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;font:800 13.5px/1 "Manrope",sans-serif;color:var(--teal);padding:8px 0}
#capymapa-hub .ch-seo-details summary::-webkit-details-marker{display:none}
#capymapa-hub .ch-seo-details summary .arrow{transition:transform .2s var(--ease)}
#capymapa-hub .ch-seo-details[open] summary .arrow{transform:rotate(180deg)}
#capymapa-hub .ch-seo-body{padding-top:6px;border-top:1px solid var(--line-soft)}
#capymapa-hub .ch-seo-body h3{font-family:"Manrope",sans-serif;font-size:14px;font-weight:800;margin-top:16px;color:var(--ink)}
#capymapa-hub .ch-seo-body p{font-size:13.5px;color:var(--grey);line-height:1.65;margin-top:5px}
#capymapa-hub .ch-seo-body .ch-seo-close{margin-top:16px;color:var(--grey)}
#capymapa-hub .ch-seo-body .faq-q{font-family:"Manrope",sans-serif;font-size:14px;font-weight:800;margin-top:16px;color:var(--ink)}
#capymapa-hub .ch-seo-body .faq-a{font-size:13.5px;color:var(--grey);line-height:1.65;margin-top:4px}
#capymapa-hub .ch-seo-body a{color:var(--teal);font-weight:700}

/* ---------- нижняя навигация (мобайл) ---------- */
#capymapa-hub .ch-bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 0 max(12px,env(safe-area-inset-bottom));z-index:100}
@supports (backdrop-filter:blur(1px)){ #capymapa-hub .ch-bottom-nav{backdrop-filter:blur(14px)} }
#capymapa-hub .ch-bn{text-align:center;font:700 10px/1.2 "Manrope",sans-serif;color:var(--faint);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px}
#capymapa-hub .ch-bn .i{display:flex;align-items:center;justify-content:center}
#capymapa-hub .ch-bn.on{color:var(--teal)}
@media(min-width:900px){ #capymapa-hub .ch-bottom-nav{display:none} }