/* =========================================================
   HappySoul24 — State Pages (Universal)
   Author: HS24
   ========================================================= */

/* ---------- CSS VARIABLES ---------- */
:root{
  --hs-bg:#ffffff;
  --hs-card:#ffffff;
  --hs-ink:#1f2937;

  --hs-muted:#4b5563;
  --hs-line:#e5e7eb;

  --hs-accent:#33a7b5;
  --hs-accent2:#33a7b5;

  --hs-soft:rgba(51,167,181,.10);
  --hs-soft2:rgba(51,167,181,.18);

  --hs-radius:18px;
  --hs-shadow:0 10px 30px rgba(17,24,39,.08);

  /* 🔑 ГЛАВНЫЙ РЕГУЛЯТОР ОТСТУПОВ ОТ КРАЯ ЭКРАНА */
  --hs-outer-gutter: 26px;
}

/* ---------- PAGE WRAPPER ---------- */
.hs24-state-page{
  background:var(--hs-bg);
  color:var(--hs-ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  line-height:1.55;

  /* 🔥 съедаем внешние отступы темы / WPBakery */
  margin-left: calc(-1 * var(--hs-outer-gutter));
  margin-right: calc(-1 * var(--hs-outer-gutter));
}

/* ---------- INNER WRAP ---------- */
.hs24-wrap{
  max-width:1160px;
  margin:0 auto;
  padding:12px 8px 24px;
}

/* ---------- HERO ---------- */
.hs24-hero{
  border:1px solid var(--hs-line);
  background:
    radial-gradient(900px 400px at 10% 0%, var(--hs-soft), transparent 60%),
    radial-gradient(900px 400px at 90% 20%, var(--hs-soft2), transparent 60%),
    #fff;
  border-radius:calc(var(--hs-radius) + 6px);
  box-shadow:var(--hs-shadow);
  padding:24px 18px;
}

.hs24-subtitle{
  margin:0 0 16px;
  color:var(--hs-muted);
  font-size:15px;
  max-width:70ch;
}

/* ---------- CHIPS ---------- */
.hs24-chiprow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 16px;
}

.hs24-chip{
  border:1px solid var(--hs-line);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--hs-muted);
}

/* ---------- BUTTONS ---------- */
.hs24-btnrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hs24-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid var(--hs-line);
  background:#fff;
  color:var(--hs-ink);
  font-weight:700;
  font-size:13px;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(17,24,39,.06);
}

.hs24-btn--primary{
  background:var(--hs-accent);
  color:#fff;
  border-color:transparent;
}

.hs24-btn--soft{
  background:#f3f4f6;
}

/* ---------- SECTIONS ---------- */
.hs24-section{
  margin-top:18px;
  border:1px solid var(--hs-line);
  border-radius:var(--hs-radius);
  background:var(--hs-card);
  box-shadow:0 6px 18px rgba(17,24,39,.05);
  overflow:hidden;
}

.hs24-section-head{
  padding:16px 16px 0;
}

.hs24-section-head h2{
  margin:0 0 6px;
  font-size:18px;
}

.hs24-section-head p{
  margin:0 0 10px;
  color:var(--hs-muted);
  font-size:14px;
}

.hs24-section-body{
  padding:0 16px 16px;
}

/* ---------- GRID ---------- */
.hs24-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}

.hs24-col-6{ grid-column:span 6; }
.hs24-col-12{ grid-column:span 12; }

/* ---------- LIST ---------- */
.hs24-list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:grid;
  gap:8px;
}

.hs24-li{
  border:1px solid var(--hs-line);
  border-radius:14px;
  padding:10px;
  display:flex;
  gap:10px;
  background:#fff;
}

.hs24-bullet{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hs-accent);
  margin-top:6px;
}

/* ---------- PRACTICES ---------- */
.hs24-practice{
  border-radius:16px;
  border:1px solid rgba(51,167,181,.22);
  background:linear-gradient(180deg, rgba(51,167,181,.08), #fff);
  padding:14px;
}

.hs24-practice.alt{
  background:linear-gradient(180deg, rgba(51,167,181,.14), #fff);
}

.hs24-practice-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.hs24-practice-top h3{
  font-size:15px;
  margin:0;
}

.hs24-tag{
  font-size:11px;
  background:var(--hs-accent);
  color:#fff;
  padding:5px 9px;
  border-radius:999px;
}

/* ---------- MOBILE ---------- */
@media (max-width:780px){

  :root{
    --hs-outer-gutter: 0px; /* 🔑 ещё меньше отступы */
  }

  .hs24-wrap{
    padding:10px 6px 20px;
  }

  .hs24-hero{
    padding:18px 14px;
  }

  .hs24-col-6{
    grid-column:span 12;
  }
}

/* ===== HS24: force full-width (removes theme/WPB padding effect) ===== */
@media (max-width: 780px){
  .hs24-state-page{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* =========================================================
   HS24 — WPBakery FIXES (ONLY FOR BLOG + SPECIALISTS BLOCKS)
   IMPORTANT: assign row classes:
   - Blog row:        hs24-vc-blog
   - Specialists row: hs24-vc-spec
   ========================================================= */

/* 0) НЕ трогаем все vc_row глобально — чтобы НЕ появлялись большие отступы */
.hs24-state-page .vc_row,
.hs24-state-page .wpb_row,
.hs24-state-page .vc_row-fluid{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   1) BLOG BLOCK — 2 columns on mobile
   ========================================================= */

/* убираем внутренние паддинги колонок только в блоке блога */
.hs24-state-page .hs24-vc-blog .vc_column_container > .vc_column-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2 колонки: ловим VC Grid / Post Grid */
@media (max-width: 780px){

  .hs24-state-page .hs24-vc-blog .vc_grid-container,
  .hs24-state-page .hs24-vc-blog .vc_pageable-slide-wrapper{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hs24-state-page .hs24-vc-blog .vc_grid-item,
  .hs24-state-page .hs24-vc-blog .vc_grid-item-mini,
  .hs24-state-page .hs24-vc-blog .vc_pageable-slide-wrapper > *{
    width: calc(50% - 6px) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    float: none !important;
    margin: 0 !important;
  }

  /* на очень узких экранах можно вернуть 1 колонку (если захочешь) */
  /* @media (max-width:360px){
    .hs24-state-page .hs24-vc-blog .vc_grid-item,
    .hs24-state-page .hs24-vc-blog .vc_pageable-slide-wrapper > *{
      width: 100% !important;
    }
  } */
}

/* =========================================================
   2) SPECIALISTS BLOCK — no extra side gutters + нормальная высота
   ========================================================= */

/* только для specialists: убираем колонные паддинги */
.hs24-state-page .hs24-vc-spec .vc_column_container > .vc_column-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* не даём картинкам вытягивать весь блок (точечно!) */
.hs24-state-page .hs24-vc-spec img{
  max-width: 100% !important;
  height: auto !important;
}

/* если у специалистов сетка карточек — делаем картинки аккуратными */
@media (max-width: 780px){
  .hs24-state-page .hs24-vc-spec img{
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
  }
}
@media (min-width: 781px){
  .hs24-state-page .hs24-vc-spec img{
    height: 220px !important;
    object-fit: cover !important;
  }
}





/* ===== HS24 Audio Player (click-to-load) ===== */

.hs24-audioplayer{
  background: var(--hs-card, #fff);
  border: 1px solid var(--hs-line, #e5e7eb);
  border-radius: var(--hs-radius, 18px);
  box-shadow: var(--hs-shadow, 0 10px 30px rgba(17,24,39,.08));
  padding: 16px;
  max-width: 560px;
}

.hs24-audioplayer__head{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.hs24-audioplayer__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--hs-soft, rgba(51,167,181,.10));
  font-size: 22px;
}

.hs24-audioplayer__title{
  font-weight: 800;
  font-size: 18px;
  color: var(--hs-ink, #1f2937);
}

.hs24-audioplayer__sub{
  margin-top: 4px;
  font-size: 14px;
  color: var(--hs-muted, #4b5563);
}

/* Placeholder = “аудио-кнопка” */
.hs24-audioplayer__placeholder{
  width: 100%;
  height: 64px;
  border-radius: 16px;
  border: 1px dashed var(--hs-line, #e5e7eb);
  background: var(--hs-soft, rgba(51,167,181,.08));
  font-size: 16px;
  font-weight: 700;
  color: var(--hs-accent, #33a7b5);
  cursor: pointer;
}

.hs24-audioplayer__placeholder:hover{
  background: var(--hs-soft2, rgba(51,167,181,.18));
}

/* iframe после загрузки */
.hs24-audioplayer iframe{
  width: 100%;
  height: 170px;
  border-radius: 16px;
  border: 0;
  display: block;
}



/* HS24 — горизонтальная лента постов */
.hs24-horizontal-posts .slides,
.hs24-horizontal-posts ul {
  display: flex !important;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.hs24-horizontal-posts li {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/* скрываем скроллбар аккуратно */
.hs24-horizontal-posts ul::-webkit-scrollbar {
  height: 6px;
}
.hs24-horizontal-posts ul::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 6px;
}