/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft — каталог приложений (Aperture 12.0, Apple Glass) */

.catalog-page-main { min-height: calc(100vh - 200px); }

.catalog-hero { padding-block: clamp(30px, 4.4vw, 56px) 20px; }
.catalog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 20px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--fill);
  font-size: 12.5px;
  font-weight: 500;
  transition: transform 0.51s var(--spring), background 0.42s var(--smooth), color 0.42s var(--smooth);
}
.catalog-back:hover { color: var(--ink); background: var(--fill-2); transform: translateX(-2px); }

.catalog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: end; }
.catalog-hero h1 {
  margin: 14px 0 12px;
  font-size: clamp(33px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.catalog-hero p { max-width: 52ch; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; letter-spacing: -.014em; }

/* сегментированный переключатель платформ */
.catalog-switcher {
  display: inline-flex;
  gap: 3px;
  margin-top: 22px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--mat);
}
.catalog-switcher a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.42s var(--smooth), background 0.51s var(--smooth), box-shadow 0.51s var(--smooth);
}
.catalog-switcher a:hover { color: var(--ink); }
.catalog-switcher a.active {
  color: var(--ink);
  background: var(--solid);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* сводка платформы */
.catalog-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: 22px;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.catalog-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 100% 0%, var(--tint-soft), transparent 70%);
  pointer-events: none;
}
.catalog-summary-card > * { position: relative; }
.catalog-summary-card > span { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.catalog-summary-card > strong {
  margin: 10px 0 0;
  font-size: clamp(44px, 6vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.catalog-summary-card > small { color: var(--ink-3); font-size: 12.5px; }
.catalog-summary-card > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}
.catalog-summary-card > div b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.catalog-summary-card > div span { color: var(--ink-3); font-size: 12px; }

/* панель инструментов */
.catalog-content { padding-top: 18px; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.catalog-search { min-width: 280px; }
.catalog-app-grid { min-height: 260px; }

/* Android */
.android-app-card .app-icon, .android-app-card .app-detail-icon { border-radius: 26%; }
.platform-type-badge { color: var(--green); background: rgba(48, 164, 108, .12); }

.android-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.android-info-grid div { padding: 11px 13px; border-radius: var(--r-sm); background: var(--fill); }
.android-info-grid small { display: block; color: var(--ink-3); font-size: 11.5px; }
.android-info-grid strong { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .catalog-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .catalog-summary-card { min-height: 160px; }
}
@media (max-width: 620px) {
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  .catalog-search { min-width: 0; width: 100%; }
  .catalog-switcher { display: flex; }
  .catalog-switcher a { flex: 1; justify-content: center; padding-inline: 12px; }
  .android-info-grid { grid-template-columns: 1fr; }
}

/* Hide scrollbar visuals without disabling scrolling */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }