/* ============================================================================
   GOSOFT — UTILITIES & PATTERNS (css/utilities.css)
   Повторяющиеся паттерны темы, вынесенные в переиспользуемые классы.
   Подключается ПОСЛЕ tokens.css и style.css.

   ── Зачем ──────────────────────────────────────────────────────────────────
   Аудит style.css показал 51 блок объявлений, повторяющийся 3+ раза.
   Например, заголовок секции (Jost 700 / 25px / uppercase) продублирован
   у 9 разных классов: .about__title, .step__title, .reviews__title и т.д.
   Здесь этот паттерн описан ОДИН раз.

   ── Как применять ──────────────────────────────────────────────────────────
   В новой разметке вешайте утилиту рядом с BEM-классом:
       <h2 class="about__title gs-section-title">…</h2>
   Существующие правила в style.css при этом не трогаются — утилиты не ломают
   текущий вид, а дают способ не плодить копии дальше.

   Created: 2026-08-25
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. LAYOUT
   ------------------------------------------------------------------------ */

/* Контейнер (дублирует [class*="__container"], но именованный и явный) */
.gs-container {
  width: 100%;
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding-inline: var(--gs-container-pad);
}

/* Вертикальный ритм секции */
.gs-section {
  padding-block: var(--gs-section-y);
}
.gs-section--tight {
  padding-block: clamp(24px, 3vw, 40px);
}

/* Сетки */
.gs-grid {
  display: grid;
  gap: var(--gs-grid-gap);
}
.gs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gs-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

@media (max-width: 1024px) {
  .gs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gs-grid--2,
  .gs-grid--3,
  .gs-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Частые flex-раскладки (в style.css встречаются 7–9 раз каждая) */
.gs-row {
  display: flex;
  align-items: center;
  gap: var(--gs-space-3);
}
.gs-row--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gs-space-3);
}
.gs-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gs-space-3);
}

/* ---------------------------------------------------------------------------
   2. ТИПОГРАФИКА
   ------------------------------------------------------------------------ */

/* Заголовок секции — паттерн повторён у 9 классов в style.css */
.gs-section-title {
  font-family: var(--gs-font-display);
  font-size: var(--gs-display-sm);
  font-weight: var(--gs-weight-bold);
  line-height: var(--gs-leading-tight);
  letter-spacing: var(--gs-tracking-tight);
  color: var(--gs-text-strong);
}
/* Историческое поведение темы — КАПС. Отдельным модификатором, чтобы
   новые секции могли обойтись без него. */
.gs-section-title--caps {
  text-transform: uppercase;
}

.gs-section-lead {
  font-family: var(--gs-font-sans);
  font-size: var(--gs-text-xl);
  line-height: var(--gs-leading-normal);
  color: var(--gs-text-muted);
  max-width: 62ch;
}

/* Надзаголовок / метка — единственное место, где уместен КАПС с трекингом */
.gs-eyebrow {
  font-family: var(--gs-font-ui);
  font-size: var(--gs-text-2xs);
  font-weight: var(--gs-weight-semibold);
  line-height: 1;
  letter-spacing: var(--gs-tracking-caps);
  text-transform: uppercase;
  color: var(--gs-text-subtle);
}

.gs-text-muted  { color: var(--gs-text-muted); }
.gs-text-subtle { color: var(--gs-text-subtle); }
.gs-text-accent { color: var(--gs-text-link); }

/* Цена: моноширинные цифры, чтобы не «прыгала» ширина */
.gs-price {
  font-family: var(--gs-font-mono);
  font-weight: var(--gs-weight-medium);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--gs-tracking-tight);
  color: var(--gs-text-price);
}
.gs-price__old {
  font-size: var(--gs-text-md);
  color: var(--gs-text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Обрезка текста по строкам — в теме встречается как ручной набор свойств */
.gs-clamp-1,
.gs-clamp-2,
.gs-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-clamp-1 { -webkit-line-clamp: 1; }
.gs-clamp-2 { -webkit-line-clamp: 2; }
.gs-clamp-3 { -webkit-line-clamp: 3; }

/* ---------------------------------------------------------------------------
   3. ПОВЕРХНОСТИ
   ------------------------------------------------------------------------ */

.gs-card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-lg);
  box-shadow: var(--gs-shadow-xs);
}
.gs-card--sunken {
  background: var(--gs-surface-sunken);
  box-shadow: none;
}
.gs-card--inverse {
  background: var(--gs-surface-inverse);
  border-color: transparent;
  color: var(--gs-text-inverse);
  box-shadow: var(--gs-shadow-md);
}
/* Подъём карточки при наведении — паттерн из home.css/product-page.css */
.gs-card--interactive {
  transition: transform var(--gs-duration-base) var(--gs-ease),
              box-shadow var(--gs-duration-base) var(--gs-ease),
              border-color var(--gs-duration-base) var(--gs-ease);
}
.gs-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--gs-border-strong);
  box-shadow: var(--gs-shadow-md);
}

/* Чип / тег */
.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gs-space-2);
  padding: 5px 10px;
  border-radius: var(--gs-radius-pill);
  border: 1px solid var(--gs-border);
  background: var(--gs-surface-sunken);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-weight-medium);
  line-height: 1.2;
  color: var(--gs-text-muted);
  white-space: nowrap;
}
.gs-chip--success {
  background: var(--gs-success-50);
  border-color: transparent;
  color: var(--gs-success-700);
}
.gs-chip--sale {
  background: var(--gs-buy);
  border-color: transparent;
  color: var(--gs-text-inverse);
  font-weight: var(--gs-weight-semibold);
}

/* Иконка в подложке — повторяется в категориях, доверии, шагах */
.gs-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--gs-radius-lg);
  background: var(--gs-surface-sunken);
  border: 1px solid var(--gs-border);
}
.gs-icon-box--sm { width: 36px; height: 36px; border-radius: var(--gs-radius-md); }
.gs-icon-box--inverse {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gs-border-inverse);
}

/* ---------------------------------------------------------------------------
   4. ДОСТУПНОСТЬ
   ------------------------------------------------------------------------ */

/* Скрыто визуально, доступно скринридеру.
   В теме этого правила НЕ БЫЛО — текст .screen-reader-text протекал в вёрстку. */
.gs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Единое кольцо фокуса. В style.css было всего 4 правила :focus на 13k строк. */
.gs-focusable:focus-visible,
.gs-card--interactive:focus-visible,
.gs-chip:focus-visible {
  outline: 2px solid var(--gs-focus-color);
  outline-offset: 2px;
  border-radius: var(--gs-radius-sm);
}

/* ---------------------------------------------------------------------------
   5. МОУШЕН
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .gs-card--interactive,
  .gs-card--interactive:hover {
    transition: none;
    transform: none;
  }
}

/* На тач-устройствах hover «залипает» — гасим трансформации */
@media (hover: none) {
  .gs-card--interactive:hover {
    transform: none;
    box-shadow: var(--gs-shadow-xs);
  }
}