/* Смартфоны (до 640px): уменьшаем заголовки ТОЛЬКО на /blog и /blog/* */
@media (max-width: 640px) {
  .is-blog h1 { font-size: 25px !important; line-height: 1.3 !important; }
  .is-blog h2 { font-size: 22px !important; line-height: 1.3 !important; }
  .is-blog h3 { font-size: 18px !important; line-height: 1.35 !important; }
  .is-blog h4 { font-size: 14px !important; line-height: 1.35 !important; }
  .is-blog h5 { font-size: 12px !important; line-height: 1.4 !important; }
}


/* === Переключатели проектов и блога: Tornado Medium, плавность только у кнопок === */
:root{
  --ps-bg:#1c171e; --ps-fg:#fff; --ps-active-bg:#fff; --ps-active-fg:#1c171e;
  --ps-radius:10px; --ps-gap:18px; --ps-pad-y:10px; --ps-pad-x:18px;
  --ps-font-size:20px; --ps-font-size-m:16px;
  --ps-ui-dur:.28s; --ps-ease:cubic-bezier(.25,.1,.25,1);
}

.ps{
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0;
  background:var(--ps-bg);
  font-family:'Tornado',sans-serif!important; font-weight:500;
}

.ps-row{
  display:flex; gap:var(--ps-gap); align-items:center; flex-wrap:wrap;
  justify-content:center;
}

.ps .ps-btn{
  appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ps-fg);
  border-radius:var(--ps-radius); padding:var(--ps-pad-y) var(--ps-pad-x);
  font:500 var(--ps-font-size)/1 'Tornado',sans-serif !important;
  letter-spacing:.02em; white-space:nowrap;
  transition: background-color var(--ps-ui-dur) var(--ps-ease),
             color var(--ps-ui-dur) var(--ps-ease),
             transform var(--ps-ui-dur) var(--ps-ease),
             box-shadow var(--ps-ui-dur) var(--ps-ease),
             opacity var(--ps-ui-dur) var(--ps-ease);
  transform:translateY(0);
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}

.ps .ps-btn[aria-pressed="true"]{
  background:var(--ps-active-bg); color:var(--ps-active-fg);
  transform:translateY(-2px);
  box-shadow:0 6px 12px -8px rgba(0,0,0,.35);
}

.ps .ps-btn:hover{ transform:translateY(-1px); opacity:.94 }
.ps .ps-btn:active{ transform:translateY(-2px); opacity:.9 }

.ps .ps-btn:focus-visible{ outline:2px solid #ffffffaa; outline-offset:3px }

.ps-row--cats{
  opacity:0; transform:translateY(6px);
  transition:opacity var(--ps-ui-dur) var(--ps-ease), transform var(--ps-ui-dur) var(--ps-ease);
}
.ps-row--cats.ps-visible{ opacity:1; transform:translateY(0) }

@media (max-width:640px){
  .ps .ps-btn{ font-size:var(--ps-font-size-m) }
  .ps-row--cats{ transform:translateY(8px) }
}

.ps-hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .ps .ps-btn, .ps-row--cats{ transition:none !important; transform:none !important; }
}

/* ===== ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width: 640px) {

  /* Разрешаем скролл родителям (главная проблема Tilda) */
  #rec1612420401,
  #rec1612420401 .t-container,
  #rec1612420401 .t396,
  #proj-switches {
    overflow-x: visible !important;
  }

  /* Горизонтальная прокрутка блока категорий */
  #proj-switches .ps-row--cats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* Кнопки — фиксированный размер, чтобы скроллить */
  #proj-switches .ps-row--cats .ps-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* === Моб. версия — выравнивание слева + анти-обрезание с нормальным размером кнопок === */
@media (max-width: 640px) {

  #proj-switches.ps {
    align-items: flex-start !important;
    padding-left: 22px !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .ps-row {
    justify-content: flex-start !important;
    width: 100%;
    padding-top: 4px !important;   /* меньше, чем раньше */
    padding-bottom: 4px !important;
    overflow: visible !important;
  }

  .ps .ps-btn {
    margin-left: 0 !important;

    /* возвращаем размеры почти как в оригинале */
    padding-top: 10px !important;
    padding-bottom: 10px !important;

    /* минимальный безопасный line-height, чтобы не резало */
    line-height: 1.15 !important;

    overflow: visible !important;
  }
}