/* ==========================================================================
   AirCrewCentral — секции главной: флот и авиакомпании
   Источник правды: C:\xampp\update\project-2026\02-DESIGN-SYSTEM.md

   Все классы с префиксом .acc-. Существующую вёрстку не трогают.
   Ролевое правило соблюдено: cyan — рабочее, gold — только достижения.
   На этих карточках достижений нет, поэтому золота здесь нет вообще.
   ========================================================================== */

/* --- Общая шапка секции -------------------------------------------------- */

.acc-sec__head {
  margin: 0 0 var(--acc-sp-6);
}

.acc-sec__title {
  margin: 0 0 var(--acc-sp-2);
  font-family: var(--acc-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-sec__lead {
  margin: 0;
  max-width: 62ch;
  font-family: var(--acc-font-text);
  font-size: var(--acc-fs-16);
  line-height: 1.6;
  color: var(--acc-text-dim);
}

.acc-fleet,
.acc-vas,
.acc-steps {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  background: var(--acc-bg-800);
}

/* --- Как это работает ---------------------------------------------------- */

.acc-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--acc-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.acc-steps__item {
  position: relative;
  padding: var(--acc-sp-6) var(--acc-sp-4) var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
  overflow: hidden;
}

/* Номер шага крупно и приглушённо в углу. Он не для чтения, а для того,
   чтобы взгляд сразу понял: это последовательность, а не три равных
   варианта на выбор. */
.acc-steps__num {
  position: absolute;
  top: -6px;
  right: 10px;
  font-family: var(--acc-font-display);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--acc-ghost);
  pointer-events: none;
  user-select: none;
}

.acc-steps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--acc-sp-4);
  border: 1px solid var(--acc-cyan-dim);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-cyan-soft);
  color: var(--acc-cyan);
}

/* Третий шаг про звания и награды — единственное место на главной,
   где золото по правилу ролей уместно. */
.acc-steps__item--gold .acc-steps__icon {
  border-color: var(--acc-gold-dim);
  background: var(--acc-gold-soft);
  color: var(--acc-gold);
}

.acc-steps__h {
  margin: 0 0 var(--acc-sp-2);
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-steps__p {
  margin: 0;
  font-family: var(--acc-font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--acc-text-dim);
}

.acc-steps__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--acc-sp-3);
  margin-top: var(--acc-sp-6);
}

/* --- Флот ---------------------------------------------------------------- */

.acc-fleet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--acc-sp-4);
}

.acc-fleet__card {
  display: flex;
  flex-direction: column;
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
  transition: border-color var(--acc-dur-base) var(--acc-ease),
              transform var(--acc-dur-base) var(--acc-ease);
}

.acc-fleet__card:hover {
  border-color: var(--acc-cyan-dim);
  transform: translateY(-2px);
}

/* Поле под силуэт одной высоты у всех карточек — иначе единый масштаб
   съедет: у 737 останется воздух сверху, у 747 обрежется крыло. */
.acc-fleet__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  margin-bottom: var(--acc-sp-3);
  color: var(--acc-cyan);
}

.acc-fleet__art .acc-ac {
  max-width: 100%;
  height: auto;
}

.acc-fleet__name {
  margin: 0 0 2px;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-fleet__role {
  margin: 0 0 var(--acc-sp-3);
  font-family: var(--acc-font-text);
  font-size: 13px;
  line-height: 1.45;
  color: var(--acc-text-dim);
}

.acc-fleet__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--acc-sp-3);
  margin: auto 0 0;
  padding-top: var(--acc-sp-3);
  border-top: 1px solid var(--acc-glass-brd);
}

.acc-fleet__spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--acc-sp-2);
}

.acc-fleet__spec dt {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  font-weight: 400;
}

.acc-fleet__spec dd {
  margin: 0;
  font-family: var(--acc-font-mono);
  font-size: 12px;
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

/* --- Авиакомпании -------------------------------------------------------- */

.acc-vas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--acc-sp-4);
}

.acc-vas__card {
  display: flex;
  align-items: flex-start;
  gap: var(--acc-sp-4);
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
  transition: border-color var(--acc-dur-base) var(--acc-ease),
              transform var(--acc-dur-base) var(--acc-ease);
}

.acc-vas__card:hover {
  border-color: var(--acc-cyan-dim);
  transform: translateY(-2px);
}

.acc-vas__crest {
  flex: 0 0 auto;
  line-height: 0;
}

.acc-vas__body {
  min-width: 0;
}

.acc-vas__name {
  margin: 0 0 2px;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-vas__profile {
  margin: 0 0 var(--acc-sp-3);
  font-family: var(--acc-font-text);
  font-size: 13px;
  line-height: 1.45;
  color: var(--acc-text-dim);
}

.acc-vas__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}

.acc-vas__icao,
.acc-vas__hub {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-pill);
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
}

.acc-vas__icao {
  border-color: var(--acc-cyan-dim);
  color: var(--acc-cyan);
}

.acc-vas__hub {
  color: var(--acc-text-dim);
}

.acc-vas__types {
  margin: 0;
  font-family: var(--acc-font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--acc-text-mute);
}

/* --- Узкие экраны -------------------------------------------------------- */

@media (max-width: 575.98px) {
  .acc-fleet__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .acc-fleet__art { height: 120px; }
  .acc-fleet__spec { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-fleet__card:hover,
  .acc-vas__card:hover { transform: none; }
}