/* =====================================================================
   text-columns-carousel (.tcc) — горизонтальная карусель из 6 текст-колонок
   Структура: 3 пары × 2 колонки. В viewport видна 1 пара.
   Gap внутри пары = X, между парами = 2X.
===================================================================== */

.tcc {
  /* Full-bleed: секция выходит из .page-container (max-width 1280, padding 55/54)
     на всю ширину viewport, чтобы стрелку можно было анкорить под бургер шапки.
     Колонки и mobile-стек ниже принудительно возвращаются в исходную геометрию,
     чтобы визуально ничего, кроме положения стрелки, не изменилось. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;

  --tcc-edge-x: clamp(24px, 5.7vw, 82px);
  --tcc-gap-pair: clamp(40px, 6vw, 88px);
  --tcc-stack-gap: 40px;
  /* Геометрия .page-container — повторяется внутри full-bleed .tcc */
  --tcc-page-max: 1280px;
  --tcc-page-pad-l: 73px;
  --tcc-page-pad-r: 54px;
  --tcc-page-pad-mobile: 30px;
}

/* ===== Desktop: Embla carousel =====
   .tcc__carousel повторяет ширину/центрирование .page-container и добавляет
   к её паддингам исходный --tcc-edge-x — итоговая ширина viewport-а карусели
   совпадает 1-в-1 с тем, что было до full-bleed. position: relative УБРАН,
   чтобы стрелка анкорилась к .tcc (full-bleed), а не к .tcc__carousel. */
.tcc__carousel {
  /* Снимаем position:relative, унаследованный от глобального .carousel —
     иначе стрелка анкорится к этому контейнеру (1280px), а не к full-bleed .tcc */
  position: static;
  max-width: var(--tcc-page-max);
  margin-inline: auto;
  padding-inline-start: calc(var(--tcc-page-pad-l) + var(--tcc-edge-x));
  padding-inline-end: calc(var(--tcc-page-pad-r) + var(--tcc-edge-x));
}

.tcc__viewport {
  width: 100%;
  overflow: hidden;
}

/* Embla сам управляет позицией трека — native scroll-snap из общего .carousel__viewport
   ломает drag/click на стрелке, поэтому глушим, как у .about-flex */
.wp-block-lazyblock-text-columns-carousel .tcc__viewport {
  overflow: hidden !important;
  scroll-snap-type: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior-x: auto !important;
}

.tcc__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Ширина колонки: (track − pair-gap) / 2 → 2 колонки + 1 малый gap = ровно вьюпорт */
.tcc__col {
  flex: 0 0 calc((100% - var(--tcc-gap-pair)) / 2);
  min-width: 0;
  margin: 0;
}

/* Малый gap внутри пары — после 1, 3, 5 колонки */
.tcc__col:nth-child(odd):not(:last-child) {
  margin-right: var(--tcc-gap-pair);
}

/* Большой gap между парами — после 2, 4 колонки */
.tcc__col:nth-child(even):not(:last-child) {
  margin-right: calc(var(--tcc-gap-pair) * 2);
}

/* ===== Типографика колонки ===== */
.tcc__col-title {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #595959;
  margin: 0 0 12px;
}

.tcc__col-content {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.8;
  color: #595959;
}

.tcc__col-content p { margin: 0 0 1em; }
.tcc__col-content p:last-child { margin-bottom: 0; }

/* Картинки в WYSIWYG — поведение alignleft / alignright / aligncenter из classic editor */
.tcc__col-content img {
  height: auto;
  max-width: 100%;
  display: block;
}

.tcc__col-content .alignleft,
.tcc__col-content img.alignleft {
  float: left;
  margin: 0 14px 14px 0;
  max-width: 50%;
}

.tcc__col-content .alignright,
.tcc__col-content img.alignright {
  float: right;
  margin: 0 0 14px 14px;
  max-width: 50%;
}

.tcc__col-content .aligncenter,
.tcc__col-content img.aligncenter {
  margin: 0 auto 14px;
}

.tcc__col-content::after {
  content: "";
  display: block;
  clear: both;
}

/* ===== Колонки «Галереи» и «Контакты»: 2-х колоночный layout =====
   Слева — заголовок (узкая под-колонка), справа — компактный список.
   Используем grid с auto-шириной списка — иначе list растягивается на всю
   ширину колонки и контент разбегается далеко от title. */
.tcc__col--galleries,
.tcc__col--contacts {
  display: grid;
  grid-template-columns: 130px auto;
  column-gap: 24px;
  align-items: start;
}

.tcc__col--galleries > .tcc__col-title,
.tcc__col--contacts > .tcc__col-title {
  margin: 0;
}

@media (max-width: 991px) {
  .tcc__col--galleries,
  .tcc__col--contacts {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .tcc__col--galleries > .tcc__col-title,
  .tcc__col--contacts > .tcc__col-title {
    margin: 0 0 12px;
  }
}

/* ===== Колонка «Галереи»: элементы списка ===== */
.tcc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tcc-galleries__item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 0 36px;
}

.tcc-galleries__item:last-child { padding-bottom: 0; }

.tcc-galleries__thumb {
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #eadada;
}

.tcc-galleries__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tcc-galleries__info {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.6;
  color: #595959;
}

.tcc-galleries__name {
  font-weight: 400;
  letter-spacing: .04em;
  color: #000;
  margin-bottom: 7px;
}

.tcc-galleries__descr p { margin: 0; }
.tcc-galleries__descr a { color: inherit; }

/* ===== Колонка «Контакты» ===== */
.tcc__col--contacts > .tcc__col-title { text-align: right; }

.tcc-contacts__item { padding: 0 0 69px; }
.tcc-contacts__item:last-child { padding-bottom: 0; }

.tcc-contacts__row {
  display: inline-flex;
  align-items: flex-start;
  gap: 15px;
  text-decoration: none;
  color: inherit;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

a.tcc-contacts__row:hover .tcc-contacts__label { text-decoration: underline; }

.tcc-contacts__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  flex: 0 0 36px;
}

.tcc-contacts__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tcc-contacts__label { color: #000; }

/* ===== Стрелка: одна, фикс справа-снизу (как на главной).
   Базовое opacity:0 / fixed / position уже задано в styles.css:1472,
   .is-active ставит main.js intersection-observer. Здесь только размер/позиция. */
.tcc__btn {
  width: 30px;
  height: 30px;
  z-index: 6;
}

.tcc__btn img { width: 100%; height: 100%; display: block; }

/* Скрытая prev — нужна только для того, чтобы global observer в main.js
   увидел карусель (он требует обе кнопки) и ставил .is-active */
.tcc__btn--prev {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: -1px;
}

@media (min-width: 992px) {
  /* Бургер сидит в .site-header__inner с padding 0 var(--header-pad-x); сама
     header.topbar.site-header имеет padding: 0 !important (styles.css:2793),
     то есть бургер прижат к правому краю viewport минус --header-pad-x.
     Anchor — full-bleed .tcc (100vw), поэтому right отсчитывается от viewport. */
  .wp-block-lazyblock-text-columns-carousel .tcc__btn.carousel__btn--next {
    /* fixed + bottom как в about-flex — привязка к низу окна.
       Видимость (.is-active) ставит отдельный observer в main.js сразу при
       появлении блока в кадре (без эвристики «середина экрана»). */
    position: fixed;
    top: auto;
    left: auto;
    right: var(--header-pad-x, 55px);
    bottom: 70.5px;
    width: 26.785px;
    height: 23px;
    padding: 0;
    transform: none;
  }
}

/* ===== Mobile (≤991): карусель скрыта, колонки вертикально =====
   На мобайле .page-container имеет padding 30/30 (styles.css:1622).
   Внутри full-bleed .tcc возвращаем стек в ту же геометрию. */
.tcc__static {
  display: flex;
  flex-direction: column;
  gap: var(--tcc-stack-gap);
  padding-inline: calc(var(--tcc-page-pad-mobile) + var(--tcc-edge-x));
}

.tcc__static .tcc__col {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
}

@media (max-width: 991px) {
  .tcc__col-content .alignleft,
  .tcc__col-content img.alignleft,
  .tcc__col-content .alignright,
  .tcc__col-content img.alignright {
    float: none;
    margin: 0 0 14px;
    max-width: 100%;
  }

  .tcc__col--contacts > .tcc__col-title {
    text-align: left;
  }
}