/* ============================================================================
   gen-cards.css — карточка поколения (include/complectations/generation_card.php) и список поколений
   (generation_list.php): одни на весь сайт — списки поколений в каталоге и справочнике, превью «Комплектации»,
   «Другие поколения», демо страницы модели. Поведение — js/gen-cards.js. Подключается на всех страницах
   (include/head.php). Общий для desktop и mobile (правится в desktop и копируется).
   ============================================================================ */
.gc, .gcl {
    --gc-ink: #0b1220; --gc-text: #1d2433; --gc-sub: #5b6472; --gc-faint: #8b93a5;
    --gc-line: #e4e8ef; --gc-line-soft: #eef1f5; --gc-card: #fff; --gc-soft: #f4f6fa;
    --gc-accent: #1e4fe0; --gc-accent-bg: rgba(30, 79, 224, .08); --gc-live: #16a34a;
    --gc-shadow: 0 24px 50px -26px rgba(16, 24, 40, .38);
}
html[data-theme="dark"] .gc, html[data-theme="dark"] .gcl {
    --gc-ink: #eef1f6; --gc-text: #dfe4ec; --gc-sub: #9aa4b2; --gc-faint: #6b7482;
    --gc-line: #262b36; --gc-line-soft: #1f2430; --gc-card: #151922; --gc-soft: #1b202a;
    --gc-accent: #6f9bff; --gc-accent-bg: rgba(91, 140, 255, .15); --gc-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
}

/* ---------- карточка ---------- */
.gc { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; border-radius: 20px; overflow: hidden;
      background: var(--gc-card); border: 1px solid var(--gc-line); color: var(--gc-text); text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gc:hover { transform: scale(1.03); box-shadow: var(--gc-shadow); border-color: transparent; color: var(--gc-text); text-decoration: none; }
.gc[hidden] { display: none !important; }
.gc-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gc-soft); }
.gc-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(transparent, rgba(0, 0, 0, .28)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.gc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gc:hover .gc-img { transform: scale(1.03); }
.gc-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gc-faint); font-size: 40px; }
.gc-badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.gc-badge { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #0b1220; font-size: 11.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.gc-badge.is-live { background: var(--gc-live); color: #fff; }
.gc-market { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 12, 20, .62); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; }
/* полоски снимков: видны при наведении (и после касания на телефоне) */
.gc-dots { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.gc-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); transition: background .15s; }
.gc-dots i.is-on { background: #fff; }
.gc-count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 7px; background: rgba(10, 12, 20, .55); color: #fff; font-size: 11.5px; font-weight: 700; transition: opacity .2s; }
.gc:hover .gc-dots, .gc-media.is-touch .gc-dots, .gc:hover .gc-media::after, .gc-media.is-touch::after { opacity: 1; }
.gc:hover .gc-count, .gc-media.is-touch .gc-count { opacity: 0; }
.gc-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.gc .gc-title { margin: 0; color: var(--gc-ink); font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; transition: color .15s; }
.gc:hover .gc-title { color: var(--gc-accent); }
.gc-years { color: var(--gc-sub); font-size: 13px; font-weight: 700; }
.gc-years i { margin-right: 6px; color: var(--gc-faint); }
.gc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-chip { padding: 3px 9px; border-radius: 999px; background: var(--gc-soft); color: var(--gc-text); font-size: 12px; font-weight: 700; }
.gc-chip.is-accent { background: var(--gc-accent-bg); color: var(--gc-accent); }
.gc-specs { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--gc-sub); font-size: 12.5px; font-weight: 700; }
.gc-specs i { margin-right: 5px; color: var(--gc-faint); }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--gc-line-soft); font-size: 12.5px; }
.gc-trims { color: var(--gc-faint); font-weight: 700; }
.gc-more { color: var(--gc-accent); font-weight: 800; white-space: nowrap; }
.gc-more i { margin-left: 4px; transition: transform .2s; }
.gc:hover .gc-more i { transform: translateX(3px); }

/* ---------- список поколений ---------- */
.gcl { margin-bottom: 32px; }
.gcl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.gcl-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--gc-card); border: 1px solid var(--gc-line); }
.gcl-tile-label { color: var(--gc-faint); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gcl-tile-label i { margin-right: 6px; color: var(--gc-accent); }
.gcl-tile b { color: var(--gc-ink); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.gcl-tile small { color: var(--gc-sub); font-size: 12px; font-weight: 600; }
.gcl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.gcl-links > span { color: var(--gc-faint); font-size: 13px; font-weight: 700; }
.gcl .gcl-links a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--gc-accent-bg); color: var(--gc-accent); font-size: 13px; font-weight: 800; text-decoration: none; }
.gcl .gcl-links a:hover { background: var(--gc-accent); color: #fff; }
.gcl-tabs { display: flex; gap: 6px; margin-bottom: 16px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.gcl-tabs::-webkit-scrollbar { display: none; }
.gcl-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--gc-line); background: var(--gc-card); color: var(--gc-text); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gcl-tabs button small { color: var(--gc-faint); font-size: 12px; font-weight: 800; }
.gcl-tabs button:hover { border-color: var(--gc-accent); color: var(--gc-accent); }
.gcl-tabs button.is-active { background: var(--gc-ink); border-color: var(--gc-ink); color: var(--gc-card); }
.gcl-tabs button.is-active small { color: inherit; opacity: .7; }
.gcl-flag { color: var(--gc-faint); font-size: 13px; }
.gcl-tabs button.is-active .gcl-flag { color: inherit; opacity: .8; }
.gc-market i { margin-right: 5px; opacity: .85; }
.gc-foot { justify-content: flex-end; }
.gc-foot .gc-trims { margin-right: auto; }
.gcl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

/* ленты (карусели) — карточки фиксированной ширины */
.gx-gens > .gc, .lp-track > .gc { flex: 0 0 270px; scroll-snap-align: start; height: auto; }

@media (max-width: 767.98px) {
    .gcl-summary { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 2px; scrollbar-width: none; }
    .gcl-summary::-webkit-scrollbar { display: none; }
    .gcl-tile { flex: 0 0 auto; min-width: 132px; padding: 10px 12px; }
    .gcl-tile b { font-size: 17px; }
    .gcl-tabs { margin: 0 -16px 14px; padding: 0 16px 2px; }
    .gcl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gc { border-radius: 16px; }
    .gc-body { gap: 6px; padding: 10px 12px 12px; }
    .gc .gc-title { font-size: 14px; }
    .gc-chip { padding: 2px 7px; font-size: 11px; }
    .gc-specs { font-size: 11.5px; gap: 2px 10px; }
    .gc-foot { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; }
    .gc-market { font-size: 10.5px; padding: 2px 7px; }
    .gx-gens > .gc, .lp-track > .gc { flex-basis: 74%; }
}
@media (max-width: 379.98px) {
    .gcl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* заголовок и подзаголовок страниц со списком поколений (каталог и справочник — одинаково) */
.gcl-h1 { margin: 0 0 8px; }
.gcl-lead { max-width: 760px; margin: 0 0 20px; color: var(--text-muted, #5b6472); font-size: 15px; line-height: 1.55; }
.gcl-empty { padding: 22px 24px; border-radius: 16px; background: var(--bg-light, #f4f6fa); color: var(--text-muted, #5b6472); font-size: 14.5px; }

.mgx-gens > .gc { flex: 0 0 74%; scroll-snap-align: start; height: auto; }