/* ============================================================
   Секция «Российские ИИ-модели» — DESIGN.md §9а, п.6
   ============================================================ */

/* Ряд: 4 карточки фикс. ширины + вклинивающаяся панель; прижаты влево.
   Ряд может выходить за экран — прячем горизонтальный overflow без скроллбара,
   вертикальный запас для теней/тултипов через padding+отрицательный margin. */
.models__grid {
  display: flex;
  align-items: stretch;
  gap: 30px;
  overflow: hidden;
  padding: 16px 0;
  margin: -16px 0;
}
.model-card { flex: 0 0 232px; }

/* ---------- Карточка модели ---------- */
.model-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 341px;
  padding: 28px 26px;
  border-radius: var(--radius-card);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.model-card::after { z-index: 0; }              /* зерно */
.model-card > * { position: relative; z-index: 1; }

.model-card--gigachat  { background: linear-gradient(150deg, #06BEFF 0%, #0A7CFF 55%, #0158A6 100%); }
.model-card--alisa     { background: linear-gradient(150deg, #3E97FF 0%, #0A3E86 55%, #00264F 100%); }
.model-card--shedevrum { background: linear-gradient(150deg, #0B5EC8 0%, #1C74E6 45%, #032149 100%); }
.model-card--kandinsky { background: linear-gradient(150deg, #7FA4FF 0%, #2E86FF 50%, #6BAEFF 100%); }

.model-card__logo {
  height: 40px;
  margin-bottom: 22px;
}
.model-card__logo img { height: 100%; width: auto; filter: brightness(0) invert(1); }

.model-card__desc {
  font-size: var(--fs-b6);
  line-height: 1.5;
  color: rgba(255,255,255,0.94);
}

/* Активная выбранная модель */
.model-card.is-selected {
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -3px;
  box-shadow: 0 12px 30px rgba(10,124,255,0.35);
}

.model-card__btn {
  margin-top: auto;
  padding-top: 26px;
}

/* Кнопка-капсула карточки — единый стиль .pill.pill--translucent (см. components.css) */
.model-btn { width: 100%; }

/* ---------- Белая панель, вклинивающаяся в ряд ---------- */
.model-panel {
  position: relative;
  display: none;                 /* по умолчанию скрыта — только 4 карточки */
  flex: 0 0 520px;
  margin-left: -30px;            /* примыкает к активной карточке вплотную (0px) */
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  padding: 30px 34px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.model-panel.is-in { display: grid; }
.model-panel.is-in {
  clip-path: inset(0 100% 0 0);  /* стартовое (для раскрытия слева-направо) */
  opacity: 0;
}
.model-panel.is-in.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 0.42s var(--ease), opacity 0.24s var(--ease);
}

/* Кнопка закрытия */
.model-panel__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9AA1AC; font-size: 20px; line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.model-panel__close:hover { background: #F1F4F8; color: var(--color-text); }
.model-panel__main, .model-panel__aside { display: flex; flex-direction: column; }
.model-panel__aside { border-left: 1px solid #ECEEF2; padding-left: 30px; }

.model-panel__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
}
.model-panel__desc {
  margin-top: 16px;
  max-width: 320px;
  font-size: var(--fs-b5);
  line-height: 1.5;
  color: #6B7280;
  transition: opacity var(--dur) var(--ease);
}
.model-panel__foot { margin-top: auto; padding-top: 26px; }

/* Ряд круглых кнопок-иконок «Полезные материалы» */
.model-tools { display: flex; gap: 16px; margin-top: auto; padding-top: 26px; }
.model-tool {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid #DFE3EA;
  background: var(--color-white);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.model-tool i {
  /* цвет через токен --color-text — сама следует за темой */
  display: block; width: 24px; height: 24px; background: var(--color-text);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  transition: background-color var(--dur) var(--ease);
}
.model-tool:hover, .model-tool.is-active { border-color: var(--color-primary); background: #EAF3FF; }
.model-tool:hover i, .model-tool.is-active i { background: var(--color-primary); }

/* Явный оверрайд на смену темы (не полагаемся только на наследование var) */
:root[data-theme='dark'] .model-tool i { background: var(--color-text); }

/* Тултип под кнопкой */
.model-tool__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -6px);
  display: flex; align-items: center; height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-b6);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 3;
}
.model-tool__tip::before {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top: 8px solid var(--color-primary); border-bottom: 0;
}
.model-tool:hover .model-tool__tip,
.model-tool:focus-visible .model-tool__tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* ---------- Адаптив ---------- */
@media (max-width: 620px) {
  .model-card { flex-basis: 78vw; }
  .model-panel { flex-basis: 88vw; grid-template-columns: 1fr; }
  .model-panel__aside { border-left: 0; padding-left: 0; border-top: 1px solid #ECEEF2; padding-top: 22px; }
}