/* ТТ ГРУПП — Медиацентр: 3D-модели узлов ([ttg_3d]).
   Цвета — токены темы с запасными значениями, как в video.css. Отдельный
   файл, а не video.css: тот закэширован по ?ver= на проде, и 3D не должно
   зависеть от его выпуска. */

.ttg-3d {
   --ttg-3d-surface: var(--surface-2, #1e2327);
   --ttg-3d-line: var(--line, rgba(240, 240, 240, .10));
   --ttg-3d-text: var(--text, #f0f0f0);
   --ttg-3d-muted: var(--text-muted, #9c9c9c);
   --ttg-3d-accent: var(--accent, #2cb5eb);
   margin: 1.5rem 0;
   max-width: 100%;
}
/* Картинка в статье не выше ~560 px: ширина = 560 × пропорция, не больше колонки,
   узкая — по центру. Селектор с figure и :not — сильнее «.wp-content figure
   { max-width: 100% }» темы, иначе квадратная база колонны выше экрана. */
figure.ttg-3d:not(.ttg-3d--compact) {
   max-width: min(100%, 860px, calc(560px * var(--ttg-3d-ar, 1.5)));
   margin-left: auto;
   margin-right: auto;
}
.ttg-3d--compact {
   max-width: 360px;
   margin: .75rem 0 1rem;
}

.ttg-3d__open {
   position: relative;
   display: block;
   overflow: hidden;
   border: 1px solid var(--ttg-3d-line);
   border-radius: 4px;
   background: #5f5f5f; /* цвет вьюпорта Blender: пока грузится картинка, нет белой вспышки */
   text-decoration: none;
   cursor: pointer;
}
.ttg-3d__img {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
   transition: transform .35s ease;
}
.ttg-3d__open:hover .ttg-3d__img,
.ttg-3d__open:focus-visible .ttg-3d__img {
   transform: scale(1.02);
}
.ttg-3d__open:focus-visible {
   outline: 2px solid var(--ttg-3d-accent);
   outline-offset: 2px;
}

.ttg-3d__badge {
   position: absolute;
   left: .75rem;
   bottom: .75rem;
   display: inline-flex;
   align-items: center;
   gap: .45rem;
   padding: .55rem .9rem;
   border-radius: 999px;
   background: rgba(24, 28, 31, .88);
   color: #fff;
   font-size: .9375rem;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
   transition: background-color .2s;
}
.ttg-3d__open:hover .ttg-3d__badge,
.ttg-3d__open:focus-visible .ttg-3d__badge {
   background: var(--ttg-3d-accent);
}
.ttg-3d--compact .ttg-3d__badge {
   left: .5rem;
   bottom: .5rem;
   padding: .45rem .75rem;
   font-size: .8125rem;
}

.ttg-3d__cap {
   margin: .5rem 0 0;
   color: var(--ttg-3d-muted);
   font-size: .875rem;
   line-height: 1.4;
}

/* ---------- плашка «3D-модель» в свёрнутой строке ---------- */

.ttg-3d-chip {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   margin-left: .6rem;
   padding: .3rem .6rem;
   border: 1px solid var(--accent, #2cb5eb);
   border-radius: 999px;
   color: var(--accent, #2cb5eb);
   font-size: .75rem;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
   text-decoration: none;
   vertical-align: middle;
   transition: background-color .2s, color .2s;
}
.ttg-3d-chip:hover,
.ttg-3d-chip:focus-visible {
   background: var(--accent, #2cb5eb);
   color: #fff;
   outline: none;
}

/* ---------- модалка ---------- */

html.ttg-3d-lock,
html.ttg-3d-lock body {
   overflow: hidden;
}

.ttg-3d-modal {
   position: fixed;
   inset: 0;
   z-index: 100000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   background: rgba(0, 0, 0, .78);
}
.ttg-3d-modal[hidden] {
   display: none;
}
.ttg-3d-modal__box {
   position: relative;
   display: flex;
   flex-direction: column;
   width: min(1100px, 100%);
   height: min(760px, 100%);
   border-radius: 6px;
   background: var(--surface, #181c1f);
   color: var(--text, #f0f0f0);
   overflow: hidden;
}
.ttg-3d-modal__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: .75rem .75rem .75rem 1.25rem;
   border-bottom: 1px solid var(--line, rgba(240, 240, 240, .10));
}
.ttg-3d-modal__title {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.3;
}
.ttg-3d-modal__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   flex: 0 0 44px;
   border-radius: 50%;
   color: inherit;
   text-decoration: none;
}
.ttg-3d-modal__close:hover,
.ttg-3d-modal__close:focus-visible {
   background: rgba(255, 255, 255, .08);
   outline: none;
}
.ttg-3d-modal__stage {
   position: relative;
   flex: 1 1 auto;
   min-height: 0;
   background: radial-gradient(circle at 50% 40%, #4a5157 0%, #2a2f33 70%, #202427 100%);
}
.ttg-3d-modal__stage model-viewer {
   display: block;
   width: 100%;
   height: 100%;
   --poster-color: transparent;
   --progress-bar-color: var(--accent, #2cb5eb);
}
.ttg-3d-modal__status {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin: 0;
   padding: .6rem 1rem;
   border-radius: 4px;
   background: rgba(0, 0, 0, .6);
   color: #fff;
   font-size: .9375rem;
   text-align: center;
   pointer-events: none;
}
.ttg-3d-modal__status[hidden] {
   display: none;
}
.ttg-3d-modal__hint {
   margin: 0;
   padding: .6rem 1.25rem;
   color: var(--text-muted, #9c9c9c);
   font-size: .8125rem;
   line-height: 1.4;
}

@media (max-width: 700px) {
   .ttg-3d-modal {
      padding: 0;
   }
   .ttg-3d-modal__box {
      width: 100%;
      height: 100%;
      border-radius: 0;
   }
   .ttg-3d--compact {
      max-width: 100%;
   }
}