/* ============================================================
   PROMOS — promos.html. Uses the shared header.css/footer.css/
   mobile-booking.css site-wide components (same as index.html/
   about.html) rather than a page-specific header/footer, per
   explicit request to match главная/о клинике everywhere.
   ============================================================ */
body.page--promos { background: #fff; color: var(--c-text); }

/* ── DESKTOP (≥768px) — hidden on mobile, mirrors home.css's pattern ── */
.promos-desktop { display: flex; flex-direction: column; align-items: center; gap: 160px; margin-top: var(--header-h); padding-bottom: 160px; }
.promos-hero-group { display: flex; flex-direction: column; align-items: center; gap: 56px; width: 100%; padding-top: 56px; }

.promos-active { width: 100%; }
.promos-active__heading {
  font-size: clamp(32px, 3.33vw, 64px); font-weight: 400; letter-spacing: -0.04em; line-height: 1;
  color: var(--c-text); margin: 0 0 48px;
}
.promos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
/* та же причина, что и в promo-offer.css: панель внутри плитки — доля
   её ширины, и в две колонки ниже ~1000px в заголовок не влезает слово */
@media (max-width: 1000px) { .promos-grid { grid-template-columns: 1fr; gap: 20px; } }
.promo-tile {
  position: relative; overflow: hidden; border-radius: 16px;
  aspect-ratio: 767 / 485; display: block; text-decoration: none;
}
.promo-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-tile__panel {
  position: absolute; left: 4.173%; top: 30.515%; width: 36.767%; height: 62.887%;
  background: rgba(255,253,249,0.2);
  border-radius: 20px; overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: clamp(14px, 1.4583vw, 28px) clamp(12px, 1.25vw, 24px);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.promo-tile:hover .promo-tile__panel { transform: translateY(-4px); }
.promo-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.promo-tile__title {
  font-size: clamp(12px, 0.9375vw, 18px); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em;
  color: rgba(48,54,46,0.6); max-width: 82.9%; margin: 0;
}
.promo-tile__arr {
  flex-shrink: 0; width: clamp(24px, 2.08vw, 40px); height: clamp(24px, 2.08vw, 40px); border-radius: 50%;
  background: var(--c-accent); display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.promo-tile:hover .promo-tile__arr { transform: translate(3px, -3px); }
.promo-tile__arr svg { width: 35%; height: 35%; }
.promo-tile__body { display: flex; flex-direction: column; gap: clamp(4px, 0.52vw, 10px); color: rgba(48,54,46,0.6); }
.promo-tile__num { font-size: clamp(32px, 4.6875vw, 90px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; margin: 0; }
.promo-tile__desc { font-size: clamp(10px, 0.78vw, 15px); font-weight: 400; line-height: 1.4; letter-spacing: -0.04em; opacity: 0.7; margin: 0; }

/* Booking + map section reuses the shared .sec-booking/.booking-* component
   (css/components/forms.css) verbatim — same markup/styles as index.html. */

@media (max-width: 767px) { .promos-desktop { display: none; } }

/* ── MOBILE (<=767px) — reuses .mh-booking/.mh-footer verbatim
   (mobile-booking.css); only the promo-cards hero here is unique
   to this page, styled after home.css's proven .mh-hero__promo
   glass-card pattern for visual consistency. ── */
.mobile-promos { display: none; }
@media (max-width: 767px) {
  footer.site-footer { display: none !important; }
  .mobile-promos { display: flex; flex-direction: column; gap: 64px; padding-top: 84px; }
  /* .mobile-promos already spaces its children via flex `gap`; base.css's
     generic `section + footer` auto-spacing rule would otherwise stack an
     extra margin-top on .mh-footer here (64+64=128px) since .mh-booking
     is a <section>. Cancel it so the Figma-spec 64px gap isn't doubled. */
  .mobile-promos .mh-footer { margin-top: 0; }
  .mh-promos-hero { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; }

  .mh-promos-heading { font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-text); text-align: center; padding: 0 20px; margin: 0; }
  .mh-promos-cards { display: flex; flex-direction: column; gap: 18px; padding: 0 20px; width: 100%; }
  .mh-promo-card { position: relative; height: 432px; border-radius: 16px; overflow: hidden; background: #23241d; }
  .mh-promo-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .mh-promo-card__panel { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 190px; background: rgba(255,253,249,0.2); border-radius: 16px; overflow: hidden; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .mh-promo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  /* .mh-promo-arr is normally styled by home.css (shared component), which
     this page doesn't load — without it the span has no size/background,
     just a bare white-stroke svg with nothing behind it. */
  .mh-promo-arr { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; }
  .mh-promo-card__label { font-size: 16px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: rgba(48,54,46,0.6); max-width: 229px; margin: 0; }
  .mh-promo-card__body { display: flex; flex-direction: column; gap: 6px; color: rgba(48,54,46,0.6); }
  .mh-promo-card__pct { font-size: 52px; font-weight: 500; line-height: 1; margin: 0; }
  .mh-promo-card__desc { font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: -0.04em; opacity: 0.8; margin: 0; }
}

/* ── Нечётное количество акций ─────────────────────────────────────
   При трёх акциях в двухколоночной сетке справа оставалась пустая
   ячейка. Последняя непарная плитка занимает всю строку и получает
   вытянутую пропорцию, чтобы по высоте совпадать с обычным рядом. */
.promos-grid > .promo-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1560 / 485; }
.promos-grid > .promo-tile:last-child:nth-child(odd) .promo-tile__panel { left: clamp(14px, 2.05%, 28px); width: clamp(180px, 18%, 290px); }
/* широкая плитка режет исходный кадр по вертикали втрое сильнее обычной:
   при центрированном кропе от клиента остаётся половина лица, поэтому
   окно кропа сдвинуто вниз — к лицу клиента */
.promos-grid > .promo-tile:last-child:nth-child(odd) .promo-tile__img { object-position: center 78%; }
@media (max-width: 1000px) {
  /* в одну колонку растягивать уже нечего — пропорция обычная */
  .promos-grid > .promo-tile:last-child:nth-child(odd) { aspect-ratio: 767 / 485; }
  .promos-grid > .promo-tile:last-child:nth-child(odd) .promo-tile__panel { left: 4.173%; width: 36.767%; }
}