/* Subscription WebP cards
   Stable layer for uploaded subscription card images.
   These images are used only on the dedicated subscription detail page.
   The subscriptions list keeps the original CSS card style. */

.subscription-card-image {
  position: relative;
  overflow: hidden;
  background: rgba(8, 15, 30, 0.72);
}

.subscription-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subscription-card-image-fallback {
  display: none;
  width: 100%;
  height: 100%;
}

.subscription-card-image.is-fallback img {
  display: none;
}

.subscription-card-image.is-fallback .subscription-card-image-fallback {
  display: block;
}

.subscription-hero-card.subscription-hero-card-image {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.subscription-hero-card.subscription-hero-card-image::before,
.subscription-hero-card.subscription-hero-card-image::after {
  display: none;
}

/* Арт тарифа на детальной странице — СТИЛЯМИ, без файла-картинки. Цвет берётся из
   .sub-visual-<tier> (те же градиенты, что у карточек на полке региона), поэтому менять
   вид тарифа = поменять один градиент в CSS. Прежний webp с нарисованной рамкой и
   капсулой «12 МЕСЯЦЕВ» здесь больше не используется (файлы остались для корзины). */
.subscription-card-image.is-detail {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.subscription-card-image.is-detail .sub-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 26px 24px;
  text-align: center;
}

/* Подпись бренда — в цвет надписи тарифа: на светлых артах тёмная, на тёмных светлая. */
.subscription-card-image.is-detail .sub-visual-essential .sub-art-brand,
.subscription-card-image.is-detail.sub-art-light .sub-art-brand { color: #071226; }

/* Крупная цифра срока — ЗА надписями по центру, очень бледная: читается как фактура
   фона, а не как текст. Крупнее названия тарифа. Меняется при выборе срока. */
.subscription-card-image.is-detail .sub-art-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-size: clamp(190px, 62vw, 360px);   /* крупнее надписи — она читается поверх цифры */
  line-height: 1;
  font-weight: 900;
  letter-spacing: -10px;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.subscription-card-image.is-detail .sub-art-brand {
  position: relative;
  z-index: 1;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 800;
  letter-spacing: 2.4px;
  opacity: 0.72;
}

.subscription-card-image.is-detail .sub-visual-label {
  /* Сброс раскладки плитки: на полке надпись позиционируется абсолютно (left/top 37%),
     здесь она — обычный элемент по центру блока. */
  position: static;
  transform: none;
  margin: 0;
  max-width: 100%;
  z-index: 1;
  font-size: clamp(34px, 11vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}

.subscription-card-image.is-detail .sub-visual-glow {
  position: absolute;
  right: -14%;
  top: -16%;
  width: 62%;
  height: 62%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

/* Цвет подписи бренда по тарифам (градиенты тарифов — в subscription-list-layout.css). */
.subscription-card-image.is-detail .sub-visual-essential .sub-art-brand { color: #071226; }
.subscription-card-image.is-detail .sub-visual-extra .sub-art-brand { color: #11120a; }
.subscription-card-image.is-detail .sub-visual-deluxe .sub-art-brand { color: #fff8e7; }
.subscription-card-image.is-detail .sub-visual-ea .sub-art-brand { color: #ffffff; }

/* Цвет фоновой цифры — в тон надписям тарифа. */
.subscription-card-image.is-detail .sub-visual-essential .sub-art-num,
.subscription-card-image.is-detail .sub-visual-extra .sub-art-num { color: #11120a; }
.subscription-card-image.is-detail .sub-visual-deluxe .sub-art-num,
.subscription-card-image.is-detail .sub-visual-ea .sub-art-num { color: #ffffff; }