/* webapp/shared/styles/pages/creator/home.css */

.creator-home-v2 {
  width: 100%;
}

.creator-home-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
  align-items: stretch;
}

.creator-home-v2-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creator-home-v2-card {
  border: none;
  outline: none;
  text-align: left;
  width: 100%;

  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.06);

  color: #fff;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  position: relative;
}

.creator-home-v2-card:active {
  transform: translateY(0.5px);
  filter: brightness(1.02);
}

.creator-home-v2-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

/* TOTAL CARD */
.creator-home-v2-card--total {
  min-height: 86px;
  display: flex;
  align-items: center;
}

.creator-home-v2-total-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creator-home-v2-total-line1 {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  line-height: 18px;
}

.creator-home-v2-total-line2 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.creator-home-v2-total-count {
  font-size: 20px;
  font-weight: 800;
  line-height: 22px;

  /* градиент числа */
  background: linear-gradient(90deg, #ff4d9b 0%, #9157ea 55%, #5b3aef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.creator-home-v2-total-word {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

/* DONATE + SUB CARDS */
.creator-home-v2-card--donate,
.creator-home-v2-card--sub {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* Выравнивание стрелок по центру вертикально */
.creator-home-v2-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%); /* Центрирование по вертикали */
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* Подписка (градиент как на макете) */
.creator-home-v2-card--sub {
  background: linear-gradient(135deg, #ff4d9b 0%, #9157ea 55%, #5b3aef 100%);
}

/* BIG CREATE CARD */
.creator-home-v2-big {
  border: none;
  outline: none;
  width: 100%;
  min-height: 170px;
  border-radius: 18px;
  padding: 16px 16px 14px 16px; /* Верхний отступ такой же как левый */

  color: #fff;
  text-align: left;

  position: relative;
  overflow: hidden;
  cursor: pointer;

  background: linear-gradient(180deg, #2f7cff 0%, #1b4dff 100%);
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  
  /* Явное выравнивание по верхнему краю */
  display: flex;
  align-items: flex-start; /* Выравнивание по верху */
  justify-content: flex-start; /* Выравнивание по левому краю */
}

.creator-home-v2-big:active {
  transform: translateY(0.5px);
  filter: brightness(1.02);
}

/* Текст с правильными отступами */
.creator-home-v2-big-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
  max-width: 180px;
  margin: 0; /* Убираем все отступы */
  padding: 0; /* Убираем внутренние отступы */
  display: flex;
  flex-direction: column;
  gap: 2px; /* Небольшой отступ между строками */

  /* Гарантируем правильный перенос */
  word-break: keep-all;
  white-space: normal;
}

/* Увеличенный плюсик в круге */
.creator-home-v2-plus {
  position: absolute;
  left: 14px;
  bottom: 14px;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creator-home-v2-plus-icon {
  width: 30px;
  height: 30px;
}

/* Увеличенная и смещенная картинка */
.creator-home-v2-illustration {
  position: absolute;
  right: -35px; /* Еще +10px вправо (было -25px) */
  bottom: -35px; /* Еще +10px вниз (было -25px) */
  width: 195px; /* Увеличение на 30% (150px * 1.3 = 195px) */
  height: auto;
  pointer-events: none;
}

@media (max-width: 420px) {
  .creator-home-v2-grid {
    grid-template-columns: 1fr 1.35fr;
  }
  
  /* Адаптация увеличенной картинки на мобилках */
  .creator-home-v2-illustration {
    width: 180px;
    right: -30px;
    bottom: -30px;
  }
}

/* Creator Home - белые карточки в светлой теме (только 2 блока) */
:root.theme-light .creator-home-v2-card--total,
:root.theme-light .creator-home-v2-card--donate {
  background: #ffffff;
  color: #000000; /* чтобы текст не был белым на белом */
}

/* Стрелка на белой карточке (только donate) */
:root.theme-light .creator-home-v2-card--donate .creator-home-v2-arrow {
  filter: brightness(0) saturate(100%); /* делает иконку чёрной */
}