/* ==========================================================================
   Страница «Международная карта» (card.html). Три ширины: 1920 (база без @media), 768, 375.
   Figma: 1920 — 2311:1322, 768 — 3228:2795, 375 — 3230:3314; правила адаптива — 3230:13560.
   Раскладка из панелей — .panels / .panel в css/components.css, токены --panel-* в css/tokens.css.
   Планшет: @media (min-width: 768px) and (max-width: 1279px); мобильная: @media (max-width: 767px).
   Секции добавляются по задачам (docs/pages/card.md).
   ========================================================================== */

/* ---------- 1. Hero «Международная карта Алтын» (2311:5024 / 3228:2797 / 3230:3316) ----------
   1920: свои поля 41 (не --panel-padding-y), фон — жёлтые углы (SVG 2314:5080), две колонки 620 + 40,
   текст по центру высоты, иллюстрация 549 по центру правой колонки, кнопка-стрелка внизу по центру.
   768 и 375: белая панель без фона и стрелки, колонкой — текст, под ним блок картинки 500 / 320. */
.card-hero {
  position: relative;
  padding: var(--card-hero-padding);
  background: var(--color-white) url("../../assets/images/card/card-hero-bg.svg") center / 100% 100% no-repeat;
}

.card-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-hero-columns-gap);
  align-items: center;
  min-height: var(--card-hero-min-height);
}

.card-hero__text {
  padding-block: 8px; /* Left-column: py 8 */
}

.card-hero__overline {
  font-size: var(--card-hero-overline-size);
  line-height: var(--card-hero-overline-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-card-hero-muted);
}

.card-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-hero-stack-gap);
  margin-top: var(--card-hero-overline-gap);
}

.card-hero__title {
  font-size: var(--card-hero-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--card-hero-title-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-card-hero-title);
}

.card-hero__lead {
  max-width: var(--card-hero-lead-width);
  font-size: var(--card-hero-lead-size);
  line-height: var(--card-hero-lead-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-card-hero-muted);
}

.card-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--card-hero-media-height);
}

/* Картинка слоями (пачка 10): основа (телефон и карта) + 4 плавающих шара для параллакса (js/parallax.js).
   Блок — квадрат 549 / 439.2 / 274.5; слои — в % от блока (границы слоёв Figma «MAin» 2448:3107), поэтому вид
   в покое одинаков на всех ширинах и совпадает с прежней цельной картинкой. */
.card-hero__art {
  position: relative;
  width: var(--card-hero-image-size);
  aspect-ratio: 1;
}

.card-hero__art img {
  position: absolute;
  max-width: none;
  height: auto;
}

.card-hero__base { left: 5.647%; top: 0; width: 88.707%; }               /* 2448:3095: телефон, карта, тень */
.card-hero__layer {
  pointer-events: none;
  will-change: transform;
}
.card-hero__layer--br { left: 78.962%; top: 62.204%; width: 7.286%; }   /* 2448:3103 */
.card-hero__layer--eu { left: 59.745%; top: 16.758%; width: 39.709%; }  /* 2645:2670 */
.card-hero__layer--kr { left: 13.388%; top: 6.102%; width: 11.658%; }   /* 2448:3104 */
.card-hero__layer--us { left: 27.322%; top: 60.656%; width: 24.590%; }  /* 2646:2718 */

/* Планшет и мобильная: колонкой, белая панель без фона */
@media (max-width: 1279px) {
  .card-hero {
    background: var(--color-white);
  }

  .card-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .card-hero__button {
    width: 100%;
  }
}

/* ---------- 2. Строка курсов (3212:11921 / 3228:2813 / 3230:3328) — компонент .rates в css/components.css ---------- */

/* ---------- Заголовок секции .card-heading (секции 3, 5, 7) — токены --card-heading-* ---------- */
.card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--card-heading-gap);
  margin-bottom: var(--panel-heading-gap);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
}

.card-heading__title {
  font-size: var(--card-heading-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--card-heading-title-line-height);
  color: var(--color-card-heading-title);
}

.card-heading__lead {
  font-size: var(--card-heading-lead-size);
  line-height: var(--card-heading-lead-line-height);
  color: var(--color-card-heading-lead);
}

/* ---------- 3. «Подписки, покупки и поездки — одной картой» (2394:3399 / 3228:2826 / 3230:3341) ----------
   1920: две карточки в ряд (616 + 48 + 616), высота не меньше 828; 768 и 375 — столбиком, снизу поле под картинку.
   Картинка — в рамке Figma (530×501 / 300×283.585), прижата к низу карточки и выходит за него; карточка обрезает.
   Сам WebP шире рамки (слои выходят за неё), сдвиг задан в % от рамки — модификаторами. */
.card-uses__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-uses-gap);
}

.use-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--use-card-gap);
  min-height: var(--use-card-min-height);
  padding: var(--use-card-padding);
  overflow: hidden;
  border-radius: var(--use-card-radius);
  background-color: var(--color-use-card-gray);
  letter-spacing: var(--letter-spacing-tight);
  isolation: isolate;
}

.use-card__head {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--use-card-text-gap);
  text-align: center;
}

.use-card__title {
  font-size: var(--use-card-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--use-card-title-line-height);
  color: var(--color-use-card-title);
}

.use-card__text {
  font-size: var(--use-card-text-size);
  line-height: var(--use-card-text-line-height);
  color: var(--color-use-card-text);
}

.use-card__list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--use-item-gap);
}

.use-card__pic {
  position: absolute;
  bottom: var(--use-card-pic-bottom);
  left: calc(50% + var(--use-card-pic-shift));
  z-index: 1;
  width: var(--use-card-pic-width);
  height: var(--use-card-pic-height);
  transform: translateX(-50%);
  pointer-events: none;
}

.use-card__pic img {
  position: absolute;
  top: var(--pic-top);
  left: var(--pic-left);
  width: var(--pic-width);
  max-width: none;
  height: auto;
}

/* Сдвиг и ширина WebP относительно рамки 530×501 (границы слоёв из Figma) */
.use-card__pic--games { --pic-left: -17.358%; --pic-top: -8.583%; --pic-width: 117.547%; } /* 623×539, −92 / −43 */
.use-card__pic--travel { --pic-left: -1.887%; --pic-top: 8.383%; --pic-width: 101.887%; }  /* 540×435, −10 / +42 */

/* Жёлтая карточка: весь текст #4e4313, круг значка #fff2c8, значок #fec200 */
.use-card--yellow {
  --color-use-card-title: var(--color-use-card-yellow-text);
  --color-use-card-text: var(--color-use-card-yellow-text);
  --color-use-item-icon-bg: var(--color-use-item-icon-bg-yellow);
  --color-use-item-icon: var(--color-use-item-icon-yellow);
  background-color: var(--color-brand-300);
}

/* Пункт: значок 44 + название Bold 20/26 и описание Regular 20/32 через 10 */
.use-item {
  display: flex;
  align-items: flex-start;
  gap: var(--use-item-gap);
}

.use-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--use-item-icon-size);
  height: var(--use-item-icon-size);
  border-radius: 50%;
  background-color: var(--color-use-item-icon-bg);
}

.use-item__icon::before {
  content: "";
  width: var(--use-item-glyph-size);
  height: var(--use-item-glyph-size);
  background-color: var(--color-use-item-icon);
  -webkit-mask: var(--use-glyph) center / contain no-repeat;
  mask: var(--use-glyph) center / contain no-repeat;
}

.use-item__icon--work { --use-glyph: url("../../assets/icons/uses/work.svg"); }
.use-item__icon--games { --use-glyph: url("../../assets/icons/uses/games.svg"); }
.use-item__icon--study { --use-glyph: url("../../assets/icons/uses/study.svg"); }
.use-item__icon--hotel { --use-glyph: url("../../assets/icons/uses/hotel.svg"); }
.use-item__icon--food { --use-glyph: url("../../assets/icons/uses/food.svg"); }
.use-item__icon--withdraw { --use-glyph: url("../../assets/icons/uses/withdraw.svg"); }

.use-item__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--use-item-text-gap);
  min-width: 0;
  font-size: var(--body-20-size);
}

.use-item__title {
  font-weight: var(--font-weight-bold);
  line-height: var(--body-20-bold-line-height);
  color: var(--color-use-card-title);
}

.use-item__text {
  line-height: var(--body-20-line-height);
  color: var(--color-use-card-text);
}

@media (max-width: 1279px) {
  .card-uses__grid {
    grid-template-columns: 1fr;
  }
}

/* Заголовок секции слева (секция 5 «ТОП-5»: только H2, без подзаголовка) */
.card-heading--start {
  text-align: left;
}

/* ---------- 5. «ТОП-5 покупок» (2426:10055 / 3228:2865 / 3230:3378) ----------
   Карусель .carousel из карточек .feature-card (components.css, js/carousel.js), под ней плашка «Лимиты» (.plate).
   Секция — контейнер запросов: --carousel-arrow-space = место от края ряда (контейнера) до края панели.
   Стрелкам (≥1280) нужно 56 + зазор + 8 до края панели. Зазор 23 (1920) ужимается до 8; если и этого мало —
   ряд сужается с обеих сторон на --carousel-inset, чтобы стрелки не ложились на карточки (1280–1919, в Figma нет). */
.card-top {
  container-type: inline-size;
  --carousel-arrow-space: calc(var(--panel-padding-x) + max(0px, (100cqw - var(--container-width)) / 2));
}

@media (min-width: 1280px) {
  .card-top .carousel:has(.carousel__arrow:not([hidden])) {
    --carousel-arrow-gap: clamp(8px, var(--carousel-arrow-space) - var(--carousel-arrow-size) - 8px, 23px);
    --carousel-inset: max(0px, var(--carousel-arrow-size) + 16px - var(--carousel-arrow-space));
  }
}

/* Плашка: на 1920 по ширине текста и по центру, на 768 и 375 — на всю ширину; отступ — как заголовок → контент */
.card-top__plate {
  width: fit-content;
  max-width: 100%;
  margin: var(--panel-heading-gap) auto 0;
}

@media (max-width: 1279px) {
  .card-top__plate {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .card-top__plate {
    --plate-font-size: 16px;
    --plate-line-height: 19px; /* 16 × 1.2 = 19.2 */
  }
}

/* ---------- 6. «Выпустите карту в два клика» (2558:1921 / 3228:2894 / 3230:3399) ----------
   Общий промо .promo.promo--yellow.promo--media-free (components.css); размеры этого экземпляра — токены --card-issue-*.
   1920: блок 479, текст по центру высоты; 768: колонки 304 + 24 + 280, высоту задаёт текст;
   375: текст, под ним окно 290, картинка выходит за низ и срезается; кнопка на всю ширину. */
.promo--issue {
  --promo-min-height: var(--card-issue-min-height);
  --promo-body-padding: var(--card-issue-body-padding);
  --promo-title-size: var(--card-issue-title-size);
  --promo-title-line-height: var(--card-issue-title-line-height);
  --promo-title-gap: var(--card-issue-title-gap);
  --promo-action-gap: var(--card-issue-action-gap);
  --promo-text-size: var(--card-issue-text-size);
  --promo-text-line-height: var(--card-issue-text-line-height);
  --promo-media-width: var(--card-issue-media-width);
  --promo-media-height: var(--card-issue-media-height);
  --promo-image-width: var(--card-issue-image-width);
  --promo-image-top: var(--card-issue-image-top);
  --promo-image-right: var(--card-issue-image-right);
  --promo-image-bottom: var(--card-issue-image-bottom);
  --promo-image-left: var(--card-issue-image-left);
}

.promo--issue .promo__body {
  align-self: center;
}

@media (max-width: 767px) {
  .promo--issue .button {
    width: 100%;
  }
}

/* ---------- 7. «Вопросы и ответы» (2438:11409 / 3228:2911 / 3230:3415) ----------
   section.panel.panel--bare (без белой панели) > заголовок слева + белая карточка с общим аккордеоном (.accordion,
   js/main.js). Токены аккордеона подменяются внутри .card-faq; на 1920 — значения по умолчанию.
   Ответ на 375 — снизу 32, как у закрытого вопроса (в кадре 8; docs/open-questions.md). */
.card-faq {
  --accordion-gap: var(--card-faq-gap);
  --accordion-header-gap: var(--card-faq-header-gap);
  --accordion-answer-gap: var(--card-faq-answer-gap);
  --accordion-content-padding-right: var(--card-faq-answer-padding-right);
}

.card-faq .accordion__button {
  font-size: var(--card-faq-question-size);
  line-height: var(--card-faq-question-line-height);
}

.card-faq .accordion__content {
  font-size: var(--card-faq-answer-size);
  line-height: var(--card-faq-answer-line-height);
}

.card-faq__card {
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap);
  padding: var(--card-faq-card-padding);
  background-color: var(--color-white);
  border-radius: var(--card-faq-card-radius);
}

/* Последний вопрос: в Figma снизу такой же отступ, как у остальных, только без разделителя — и у свёрнутого,
   и у раскрытого (так же на faq.html на 768 / 375) */
.card-faq__card > .accordion:last-child {
  padding-bottom: var(--accordion-spacing);
}

.card-faq__card > .accordion:last-child .accordion__content {
  padding-bottom: 0;
}

/* ---------- 8. Финальный CTA «Выпустите международную карту Алтын» (2517:10432 / 3228:2922 / 3230:3426) ----------
   Жёлтая панель: на ≥1280 фон — SVG 2517:10479 (градиент + два белых свечения, растянут на панель, как у Hero),
   ниже — линейный градиент 70.65°. 1920: колонки 620 + 40 + 620, текст по центру высоты 526, картинка Pic 586×474
   по центру правой колонки (монета выступает за рамку на 28 — WebP 614, выступ не влияет на центровку).
   768 / 375: колонкой — текст (поля 8), под ним картинка по центру. Сторы — .store-list (components.css). */
.card-cta {
  padding: var(--card-cta-padding);
  background: var(--color-card-cta-from) url("../../assets/images/card/card-cta-bg.svg") center / 100% 100% no-repeat;
}

.card-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-cta-gap);
  min-height: var(--card-cta-min-height);
  letter-spacing: var(--letter-spacing-tight);
}

.card-cta__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: var(--card-cta-body-gap);
  padding-block: var(--card-cta-body-padding);
}

.card-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-cta-content-gap);
}

.card-cta__title {
  font-size: var(--card-cta-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--card-cta-title-line-height);
  color: var(--color-promo-yellow-title);
}

.card-cta__text {
  max-width: var(--card-cta-text-width);
  font-size: var(--card-cta-text-size);
  line-height: var(--card-cta-text-line-height);
  color: var(--color-promo-yellow-text);
}

.card-cta__media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: var(--card-cta-media-height);
}

.card-cta__media > picture {
  display: block;
  flex-shrink: 0;
}

.card-cta__pic {
  flex-shrink: 0;
  width: var(--card-cta-pic-width);
  max-width: none;
  height: auto;
  margin-right: calc(-1 * var(--card-cta-pic-overflow));
}

@media (max-width: 1279px) {
  .card-cta {
    background: linear-gradient(70.65deg, var(--color-card-cta-from) 8.49%, var(--color-card-cta-to) 93.34%);
  }

  .card-cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-cta__body {
    align-self: stretch;
  }

  .card-cta__media {
    align-items: center;
  }
}

/* Кнопки сторов на 768 — 52 (в блоге на планшете 48) */
@media (min-width: 768px) and (max-width: 1279px) {
  .card-cta {
    --store-btn-height: 52px;
  }
}

@media (max-width: 767px) {
  .card-cta__content,
  .card-cta__content .button,
  .card-cta .store-list {
    align-self: stretch;
  }

  /* Уже 375 (контент < 327) картинка ужимается по ширине колонки, а не распирает страницу */
  .card-cta__media > picture {
    flex-shrink: 1;
    min-width: 0;
  }

  .card-cta__pic {
    max-width: 100%;
  }
}