/* =========================================================
   TravelMentor — Global CSS (tm-*)
   Для: главная, /hubs/, /spb/, статьи
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --tm-text: #0b1220;
  --tm-ink: #0f172a;

  --tm-border: rgba(15,23,42,0.14);
  --tm-card-border: rgba(15,23,42,0.10);

  --tm-hero-bg: rgba(255,255,255,0.86);
  --tm-shadow: 0 18px 56px rgba(15,23,42,0.18);

  --tm-soft-shadow: 0 10px 30px rgba(15,23,42,0.06);
  --tm-soft-shadow-2: 0 10px 28px rgba(15,23,42,0.06);

  --tm-accent: rgba(2,132,199,0.18);
  --tm-accent-2: rgba(2,132,199,0.10);
}

/* ---------- Base layout & typography ---------- */
.tm-article,
.tm-spb-hub{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--tm-ink);
}

.tm-article{
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 16px 52px;
}

.tm-pageWide{ max-width: 1120px; }

.tm-h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--tm-text);
}
.tm-h2{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.tm-h3{
  margin: 12px 0 6px;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tm-p,
.tm-desc{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.92;
}
.tm-lead{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.92;
  max-width: 880px;
  color: var(--tm-text);
}

.tm-ul, .tm-ol{
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.92;
}
.tm-ul li, .tm-ol li{ margin: 6px 0; }

.tm-link{
  color: var(--tm-ink);
  font-weight: 1000;
  text-decoration: none;
}
.tm-link:hover{ text-decoration: underline; }

.tm-note{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.76;
  color: var(--tm-text);
}
.tm-note code{
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.10);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 12px;
}

/* ---------- Hero (универсальный, читабельный на фото) ---------- */
.tm-hero{
  border: 1px solid var(--tm-border) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  background: var(--tm-hero-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--tm-shadow) !important;
}

/* Контраст текста внутри hero */
.tm-hero .tm-h1,
.tm-hero .tm-lead,
.tm-hero .tm-note{ color: var(--tm-text) !important; }
.tm-hero .tm-lead{ opacity: 0.92 !important; }
.tm-hero .tm-note{ opacity: 0.76 !important; }

/* ---------- Breadcrumbs ---------- */
.tm-breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 10px;
}
.tm-breadcrumbs__link{ color: var(--tm-ink); text-decoration:none; }
.tm-breadcrumbs__link:hover{ text-decoration:underline; }
.tm-breadcrumbs__sep{ opacity:0.6; }
.tm-breadcrumbs__current{ font-weight: 1000; }

/* ---------- Chips (в hero и на хабах) ---------- */
.tm-chips{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 14px; }
.tm-chip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
  font-size: 13px;
  color: var(--tm-text) !important;
}

/* ---------- TOC / Quick links ---------- */
.tm-toc{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top: 12px;
}
.tm-toc__item{
  text-decoration:none;
  color: var(--tm-ink);
  font-size: 13px;
  font-weight: 1000;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.65);
}
.tm-toc__item:hover{ background: rgba(255,255,255,0.92); }

/* Чтобы якоря не прятались под липким хедером */
.tm-section{ scroll-margin-top: 92px; }

/* ---------- Sections ---------- */
.tm-section{
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--tm-card-border);
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: var(--tm-soft-shadow);
}
.tm-section--mini{ background: rgba(255,255,255,0.98); }

/* ---------- Callout / Mini block ---------- */
.tm-callout{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(2,132,199,0.20);
  background: rgba(2,132,199,0.08);
}
.tm-callout__title{
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.tm-callout__text{ font-size: 14px; line-height: 1.6; }

.tm-mini{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.tm-mini__title{ font-weight: 1000; font-size: 13px; margin-bottom: 4px; }
.tm-mini__text{ font-size: 13.5px; line-height: 1.6; opacity: 0.92; }

/* ---------- Buttons / CTA ---------- */
.tm-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }

.tm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 13px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,0.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  will-change: transform;
}
.tm-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}
.tm-btn--primary{
  background: var(--tm-ink);
  color:#fff;
  border-color: var(--tm-ink);
}
.tm-btn--ghost{
  background: rgba(255,255,255,0.70);
  color: var(--tm-ink);
}

.tm-btn[aria-disabled="true"]{
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Cards (в статьях) ---------- */
.tm-cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.tm-card{
  grid-column: span 6;
  border: 1px solid var(--tm-card-border);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--tm-soft-shadow-2);
}
.tm-card__top{ display:flex; justify-content:space-between; gap:10px; margin-bottom: 8px; }

.tm-tag{
  display:inline-flex;
  font-size: 12px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.07);
  border: 1px solid rgba(15,23,42,0.10);
}
.tm-tag--blue{
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.22);
}
.tm-tag--dark{
  background: rgba(15,23,42,0.10);
  border-color: rgba(15,23,42,0.18);
}
.tm-tag--soon{
  background: rgba(2,132,199,0.10);
  border-color: rgba(2,132,199,0.18);
}
.tm-tag--done{
  background: rgba(15,23,42,0.10);
  border-color: rgba(15,23,42,0.18);
}

.tm-meta{ font-size: 12px; opacity: 0.75; white-space: nowrap; }

@media (max-width: 860px){
  .tm-card{ grid-column: span 12; }
}

/* ---------- FAQ ---------- */
.tm-faq{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15,23,42,0.03);
  margin: 10px 0;
}
.tm-faq__q{
  cursor:pointer;
  font-weight: 1000;
  font-size: 14px;
  list-style: none;
}
.tm-faq__q::-webkit-details-marker{ display:none; }
.tm-faq__a{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.92;
}

/* ---------- Footer link (в статьях) ---------- */
.tm-footer{ margin-top: 14px; padding: 0 2px; }
.tm-back{ color: var(--tm-ink); font-weight: 1000; text-decoration:none; }
.tm-back:hover{ text-decoration:underline; }

/* ---------- Hubs page / Hub cards with images ---------- */
.tm-hubGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.tm-hubCard{
  grid-column: span 4;
  border: 1px solid var(--tm-card-border);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--tm-soft-shadow-2);
  display:flex;
  flex-direction: column;
  min-height: 340px;
}
.tm-hubCard__media{
  height: 160px;
  background: rgba(15,23,42,0.04);
  border-bottom: 1px solid var(--tm-card-border);
  position: relative;
}
.tm-hubCard__media svg{
  width: 100%;
  height: 100%;
  display:block;
}
.tm-hubCard__body{
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tm-hubCard__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.tm-hubCard__actions{
  margin-top: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px){
  .tm-hubCard{ grid-column: span 6; }
}
@media (max-width: 640px){
  .tm-hubCard{ grid-column: span 12; }
}

/* ---------- Promocodes list (вариант A) ---------- */
.tm-promoList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.tm-promo{
  border: 1px solid var(--tm-card-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--tm-soft-shadow-2);
  padding: 14px;
}
.tm-promo__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tm-promo__titleRow{
  display:flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
}
.tm-promo__h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tm-badge{
  display:inline-flex;
  font-size: 12px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,132,199,0.10);
  border: 1px solid rgba(2,132,199,0.18);
}
.tm-badge--ok{
  background: rgba(15,23,42,0.07);
  border-color: rgba(15,23,42,0.12);
}
.tm-promo__meta{
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
}
.tm-promo__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.tm-code{
  border: 1px dashed rgba(15,23,42,0.22);
  background: rgba(15,23,42,0.04);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 1000;
  letter-spacing: 0.02em;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.tm-code small{
  font-weight: 900;
  opacity: 0.7;
  letter-spacing: 0;
}
.tm-reveal summary{
  cursor:pointer;
  list-style:none;
}
.tm-reveal summary::-webkit-details-marker{ display:none; }
.tm-reveal__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 1000;
  font-size: 13px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(15,23,42,0.05);
  color: var(--tm-ink);
}
.tm-reveal__btn:hover{ background: rgba(15,23,42,0.08); }

/* ---------- Global Header (bigger, readable) ---------- */
.tm-siteHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.84);
  border-bottom: 1px solid var(--tm-card-border);
}
.tm-siteHeader__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 16px; /* ~ +50% */
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.tm-brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  color: var(--tm-ink);
  font-weight: 1100;
  letter-spacing: -0.01em;
  font-size: 16px;
}
.tm-brand__mark{
  width: 50px; height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1200;
  font-size: 15px;
}
.tm-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.tm-nav__link{
  text-decoration:none;
  color: var(--tm-ink);
  font-weight: 950;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.tm-nav__link:hover{
  border-color: rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
}

/* Mobile menu without JS */
.tm-navMobile{ display:none; }
.tm-navMobile summary{ list-style:none; cursor:pointer; user-select:none; }
.tm-navMobile summary::-webkit-details-marker{ display:none; }
.tm-navMobile__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.92);
  font-weight: 1100;
  font-size: 15px;
  color: var(--tm-ink);
}
.tm-navMobile__panel{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 18px 56px rgba(15,23,42,0.10);
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.tm-navMobile__panel a{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  text-decoration:none;
  color: var(--tm-ink);
  font-weight: 950;
  font-size: 15px;
  background: rgba(15,23,42,0.03);
}
.tm-navMobile__panel a:hover{ background: rgba(15,23,42,0.06); }

@media (max-width: 820px){
  .tm-nav{ display:none; }
  .tm-navMobile{ display:block; }
}

/* ---------- Minor responsive tweaks ---------- */
@media (max-width: 640px){
  .tm-hero{ padding: 14px !important; }
  .tm-section{ padding: 14px; }
  .tm-toc__item{ padding: 7px 9px; }
}
/* =========================================================
   TravelMentor — Hub layout helpers (for /spb/, /msk/ etc.)
   Scoped to .tm-spb-hub to avoid affecting articles
   ========================================================= */

.tm-spb-hub .tm-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 16px 56px;
}

.tm-spb-hub .tm-crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  opacity:0.92;
  margin-bottom: 14px;
}
.tm-spb-hub .tm-crumbs__link{
  color: var(--tm-ink);
  text-decoration:none;
  font-weight: 900;
}
.tm-spb-hub .tm-crumbs__link:hover{ text-decoration: underline; }
.tm-spb-hub .tm-crumbs__sep{ opacity:0.6; }
.tm-spb-hub .tm-crumbs__current{ font-weight: 1000; }

.tm-spb-hub .tm-main{ margin-top: 18px; }

.tm-spb-hub .tm-secHead{ margin-bottom: 12px; }

.tm-spb-hub .tm-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}

/* Карточки в хабах (не трогаем карточки в статьях) */
.tm-spb-hub .tm-grid .tm-card{
  grid-column: span 6;
  min-height: 170px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Действия/кнопки в карточках хабов */
.tm-spb-hub .tm-actions{ display:flex; gap:10px; }
.tm-spb-hub .tm-smallBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 1000;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.05);
  color: var(--tm-ink);
}
.tm-spb-hub .tm-smallBtn:hover{ background: rgba(15,23,42,0.08); }
.tm-spb-hub .tm-smallBtn--disabled{ cursor:not-allowed; opacity: 0.7; }

.tm-link--disabled{ cursor:not-allowed; opacity: 0.9; text-decoration:none; }

/* Список в мини-секции */
.tm-spb-hub .tm-list{
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}

/* Нижний CTA-блок как на /spb/ */
.tm-spb-hub .tm-bottom__box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: rgba(15,23,42,0.92);
  color:#fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(15,23,42,0.18);
}
.tm-spb-hub .tm-bottom__title{
  font-weight: 1100;
  letter-spacing:-0.01em;
  margin-bottom: 4px;
}
.tm-spb-hub .tm-bottom__sub{
  font-size: 13px;
  opacity: 0.85;
  max-width: 760px;
}

@media (max-width: 980px){
  .tm-spb-hub .tm-grid .tm-card{ grid-column: span 12; }
  .tm-spb-hub .tm-bottom__box{ flex-direction: column; align-items:flex-start; }
}