/* ==========================================================================
   greetings.css — секция «Приветствия» (десктоп 1920, БЕЗ @media).
   Figma: Section 4 / 79:2113. get_design_context 79:2113.
   Полноширинная тёмная карта c-dark r24: слева заголовок (Cochin 48/56 white)
   + табы персон (Cochin 24/32, активный accent-underline + точка), справа —
   фото 163×210 r12 + имя 32/40 + должность 16/24 + цитата 18/28.
   ========================================================================== */

.s-greetings {
  background: var(--c-bg);
}

/* Карта во всю ширину (79:2113): bg dark, r24, padding 120/40, gap 323 */
.s-greetings__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 323px;
  padding: 120px 40px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  color: #fff;
}

/* Декоративная текстура слева (79:2114): окно 795×1015, картинка op .3 */
.s-greetings__texture {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 795px;
  height: 1015px;
  overflow: hidden;
}
.s-greetings__texture img {
  position: absolute;
  left: -1488px;
  top: -371px;
  width: 2467px;
  height: 1645px;
  max-width: none;
  opacity: 0.3;
  object-fit: cover;
}

/* ---------- Заголовок + навигация (79:2116): 607, gap 152 ---------- */
.s-greetings__main {
  position: relative;
  z-index: 1;
  flex: 0 0 607px;
  width: 607px;
  display: flex;
  flex-direction: column;
  gap: 152px;
}

.s-greetings__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-greetings__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}

/* Навигация-табы (79:2122): col gap 24 */
.s-greetings__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s-greetings__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-on-dark);
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.s-greetings__tab-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: #fff;
  opacity: var(--o-inactive);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.s-greetings__tab-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
}

.s-greetings__tab:hover .s-greetings__tab-name {
  opacity: 1;
}

.s-greetings__tab.is-active {
  border-bottom-color: var(--c-accent);
}
.s-greetings__tab.is-active .s-greetings__tab-name {
  opacity: 1;
}
.s-greetings__tab.is-active .s-greetings__tab-dot {
  opacity: 1;
}

/* ---------- Карточка персоны (79:2132): 752 ---------- */
.s-greetings__person {
  position: relative;
  z-index: 1;
  flex: 0 0 752px;
  width: 752px;
}

.s-greetings__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.s-greetings__panel[hidden] {
  display: none;
}

/* Фото персоны (79:2133): 163×210 r12, слои поверх #d9d9d9 */
.s-greetings__photo {
  position: relative;
  flex-shrink: 0;
  width: 163px;
  height: 210px;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--c-photo-stub);
}
.s-greetings__photo-bg {
  position: absolute;
  left: -325px;
  top: -102px;
  width: 640px;
  height: 640px;
  max-width: none;
  object-fit: cover;
}
.s-greetings__photo-front {
  position: absolute;
  left: -58px;
  top: 11px;
  width: 253px;
  height: 258px;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
}

/* Текст персоны (79:2137): col gap 24 */
.s-greetings__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  color: #fff;
}

.s-greetings__person-title {
  display: flex;
  flex-direction: column;
  width: 410px;
  max-width: 100%;
}

.s-greetings__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: #fff;
}

.s-greetings__role {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: var(--o-inactive);
}

.s-greetings__quote {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  opacity: var(--o-label);
}

/* ==========================================================================
   Адаптив greetings
   ========================================================================== */

/* ---- ≤1440: уже gap, H2 32/40, табы 18/28, имя 24/32 ---- */
@media (max-width: 1919px) {
  .s-greetings__card {
    /* fit: на 1440 gap = 250 (как в Figma), ниже 1440 коллапсирует, чтобы
       main(440)+person(555) не вылезли за иннер карточки и не клипались. */
    gap: clamp(40px, calc(250px - (1440px - 100vw)), 250px);
  }
  .s-greetings__texture {
    width: 595px;
  }
  .s-greetings__main {
    flex: 0 1 440px;
    width: 440px;
    /* Figma 1440 (105:795): между заголовком и навигацией 152, не 100 — иначе из-за
       align-items:center всё внутри карточки центрируется выше макета. */
    gap: 152px;
  }
  .s-greetings__person {
    flex: 0 1 555px;
    width: 555px;
  }
  .s-greetings__title {
    font-size: 32px;
    line-height: 40px;
  }
  .s-greetings__tab-name {
    font-size: 18px;
    line-height: 28px;
  }
  .s-greetings__name {
    font-size: 24px;
    line-height: 32px;
  }
  .s-greetings__role {
    font-size: 14px;
    line-height: 20px;
  }
  .s-greetings__quote {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ---- ≤768: стек (заголовок → персона → табы в ряд); персона photo|text ---- */
@media (max-width: 1023px) {
  .s-greetings__card {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 60px 40px;
  }
  .s-greetings__main {
    display: contents;
  }
  .s-greetings__head {
    order: 1;
    width: 100%;
  }
  .s-greetings__person {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
  }
  .s-greetings__nav {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
  }
  .s-greetings__tab {
    flex: 1 1 0;
    min-width: 0;
  }
  .s-greetings__tab-name {
    white-space: normal;
  }
  /* панель персоны — фото слева, текст справа */
  .s-greetings__panel {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }
  .s-greetings__text {
    flex: 1 1 auto;
  }
}

/* ---- ≤360: табы 2×2, фото мельче, мелкий кегль ---- */
@media (max-width: 767px) {
  /* Figma 105:2722: padding top/bottom 40, между head→person→nav шаг 40 */
  .s-greetings__card {
    padding: 40px 16px;
    gap: 40px;
  }
  .s-greetings__title {
    font-size: 20px;
    line-height: 28px;
  }
  .s-greetings__photo {
    width: 109px;
    height: 140px;
    /* Figma 105:2732: rounded-[8px] (на десктопе/токене было 12). */
    border-radius: var(--r-8);
    grid-column: 1;
    grid-row: 1;
  }
  /* Figma Frame66 @360: верхний ряд [фото | имя+должность], цитата на всю
     ширину ниже. Grid на панели + display:contents на .text растворяет
     обёртку, чтобы person-title и quote стали прямыми грид-элементами.
     Ряд имени ограничен 1fr (~203px) — без гориз. скролла; цитата 328 ниже. */
  .s-greetings__panel {
    display: grid;
    grid-template-columns: 109px 1fr;
    column-gap: 16px;
    /* Figma 105:2730: фото-ряд(140)→цитата зазор 16 (quote y156), person h376. */
    row-gap: 16px;
    align-items: start;
  }
  .s-greetings__text {
    display: contents;
  }
  /* Figma 105:2736 Title: w203 — снимаем ширину 410 из ≤768, иначе 1fr
     раздувается и грид/цитата уезжают за 328 (гориз. скролл). */
  .s-greetings__person-title {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
  }
  .s-greetings__quote {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  /* Figma 105:2740 Nav: сетка 2×2, ячейка 152, col-gap 24, row-gap 16.
     Каждый таб = имя (lh16) + pb16 + border-b 1px → ряд ~33px. */
  .s-greetings__nav {
    display: grid;
    grid-template-columns: 152px 152px;
    column-gap: 24px;
    row-gap: 16px;
    grid-auto-rows: auto;
    align-items: start;
  }
  /* Figma 105:2742/2745/2748/2750: таб сохраняет border-b + pb16, без px-8.
     Активный — accent-бордер (из не-@360 .is-active), остальные — on-dark. */
  .s-greetings__tab {
    flex: none;
    width: 152px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border-on-dark);
  }
  .s-greetings__tab-name {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
  }
  .s-greetings__name {
    font-size: 20px;
    line-height: 28px;
  }
  /* Должность 12/16 (Figma 105:2738 h16, под именем). */
  .s-greetings__role {
    font-size: 12px;
    line-height: 16px;
  }
  /* Цитата 14/20 (Figma 105:2739 h220 = 11 строк lh20; иначе 16/24 → h312 и nav уезжает вниз). */
  .s-greetings__quote {
    font-size: 14px;
    line-height: 20px;
  }
}