/* ============================================================
 * studio.html — 4-step merchant flow (v4)
 * ============================================================ */

.studio {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-24);
}

/* ---------- Step indicator chips ---------- */
.studio-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.studio-steps__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: var(--ga-card);
  color: var(--ga-mute);
  font-weight: var(--weight-medium);
}
.studio-steps__chip.is-active {
  background: var(--ga-black);
  color: var(--ga-lime);
}
.studio-steps__chip.is-done {
  background: var(--ga-lime);
  color: var(--ga-black);
}

/* ---------- Step container ---------- */
.studio-step { display: none; }
.studio-step.is-active { display: block; }
.studio-step[hidden] { display: none !important; }

.studio-step__header {
  margin-bottom: var(--space-10);
  max-width: 76ch;
}
.studio-step__title {
  font-family: var(--ga-body-font);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  text-transform: lowercase;
  letter-spacing: var(--track-snug);
  margin-bottom: var(--space-3);
}
.studio-step__sub {
  font-size: var(--text-lg);
  color: var(--ga-graphite);
  text-transform: lowercase;
}
.studio-step__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  align-items: center;
}
.studio-step__attempt-info {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-10);
}

/* ---------- Product grid (step 1) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* Более крупный gap, чтобы 5 white-tiles не сливались в одну стрипу. */
  gap: var(--space-6);
}
.product-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
  border-radius: var(--radius-xl);
  overflow: visible;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out-expo);
}
.product-card:hover { transform: translateY(-4px); }
.product-card:hover .product-card__photo {
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.14);
}
.product-card:focus-visible {
  outline: 2px solid var(--ga-black);
  outline-offset: 4px;
  border-radius: var(--radius-xl);
}
.product-card.is-selected .product-card__photo {
  outline: 2px solid var(--ga-lime);
  outline-offset: -2px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.14);
}
.product-card__photo {
  aspect-ratio: 1 / 1;
  background: var(--ga-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Subtle elevation — каждая фото-плашка визуально отрывается от cream-фона. */
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.06);
  transition:
    outline var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}
/* Изображение замощает всю квадратную плашку (object-fit: cover) — source webp
   с goldapple.ru имеют собственный padding вокруг продукта, при cover отрезаются
   ровно эти боковые поля, бутылка остаётся в центре и не теряется. */
.product-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}
.product-card__meta {
  padding: var(--space-4) var(--space-1) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.product-card__brand {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ga-mute);
}
.product-card__name {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-transform: lowercase;
  font-weight: var(--weight-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__category {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ga-mute);
  margin-top: var(--space-1);
}

/* Upload card variant — full-row to balance the 5-preset row above */
.product-card--upload {
  grid-column: 1 / -1;
  border: 2px dashed var(--ga-line);
  background: var(--ga-cream);
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
}
.product-card--upload .product-card__photo {
  aspect-ratio: auto;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.product-card--upload .product-card__meta {
  flex: 1 1 auto;
  padding: 0;
}
.product-card--upload:hover {
  border-color: var(--ga-black);
  background: var(--ga-card);
}
.product-card--upload.is-dragover {
  border-color: var(--ga-black);
  background: rgba(222, 254, 0, 0.16);
}
/* Disabled variant — non-interactive informational card while upload is off. */
.product-card--upload.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
  border-color: var(--ga-line);
  background: var(--ga-cream);
}
.product-card--upload.is-disabled:hover {
  border-color: var(--ga-line);
  background: var(--ga-cream);
  transform: none;
}
.product-card--upload.is-disabled .upload-zone__icon {
  background: var(--ga-line);
  color: var(--ga-mute);
}
.product-card__photo--upload { background: transparent; }
@media (max-width: 720px) {
  .product-card--upload {
    flex-direction: column;
    align-items: stretch;
  }
}
.upload-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ga-mute);
  padding: var(--space-6);
}
.upload-zone__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ga-lime);
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--ga-black);
  margin-bottom: var(--space-3);
}
.upload-zone__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-transform: lowercase;
  color: var(--ga-black);
}
.upload-zone__hint {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ga-mute);
}

/* ---------- Confirm panel (step 2) ---------- */
.confirm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.confirm-panel__product {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--ga-card);
  border-radius: var(--radius-xl);
  /* Полная ширина — название товара не должно рваться в узкой колонке. */
  width: 100%;
}
.confirm-panel__product > div { flex: 1 1 auto; min-width: 0; }
/* Same 1:1 tile as on the product grid, so the confirm thumb matches
   shape & inner scale exactly. !important on flex props — иначе
   `.confirm-panel__product > div { flex: 1 1 auto }` тянет wrapper в высоту/ширину. */
.confirm-panel .confirm-panel__photo {
  flex: 0 0 clamp(140px, 18vw, 200px) !important;
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 1 / 1;
  background: var(--ga-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.06);
}
.confirm-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
}
.confirm-panel__prompt {
  background: var(--ga-black);
  color: var(--ga-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.confirm-panel__prompt pre {
  margin-top: var(--space-3);
  font-family: var(--ga-mono-font);
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgba(255, 255, 255, 0.85);
}
.confirm-panel__camera {
  padding: var(--space-5);
  background: var(--ga-lime);
  color: var(--ga-black);
  border-radius: var(--radius-xl);
  font-family: var(--ga-mono-font);
  font-size: var(--text-sm);
}
.confirm-panel__camera p:not(:first-child) { margin-top: var(--space-2); }

/* ---------- Generating (step 3) ---------- */
.generating-card {
  max-width: 520px;
  margin: var(--space-16) auto;
  padding: clamp(40px, 6vw, 64px);
  background: var(--ga-card);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.orb {
  width: 160px;
  height: 160px;
  margin: 0 auto var(--space-8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #FFFAB8 0%, var(--ga-lime) 30%, var(--ga-lime-dark) 70%, #6F8800 100%);
  box-shadow:
    inset -16px -24px 50px rgba(0, 0, 0, 0.25),
    inset 10px 14px 32px rgba(255, 255, 255, 0.55),
    0 20px 50px rgba(222, 254, 0, 0.45);
  animation: orb-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.generating-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  text-transform: lowercase;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.generating-card__sub {
  font-size: var(--text-base);
  text-transform: lowercase;
  color: var(--ga-graphite);
  min-height: 1.6em;
  margin-bottom: var(--space-6);
}
.generating-card__bar {
  width: 100%;
  height: 6px;
  background: var(--ga-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.generating-card__bar-fill {
  height: 100%;
  width: 0;
  background: var(--ga-lime);
  border-radius: var(--radius-pill);
  transition: width 1.2s var(--ease-out-expo);
}

/* ---------- Video grid (step 4) ---------- */
.video-grid {
  display: grid;
  /* 3 видео на десктопе ровными колонками; на узких — стек. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}
.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ga-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo);
}
.video-card:hover {
  transform: translateY(-2px);
}
.video-card.is-selected {
  border-color: var(--ga-lime);
  box-shadow: 0 0 0 1px var(--ga-black), 0 16px 32px rgba(0, 0, 0, 0.18);
}
/* Video media block — 4:3 (prototype aspect; production может быть 1:1 для каталога).
   Постер (img) лежит поверх video по умолчанию и плавно уходит в opacity 0
   когда видео начинает играть. Так пользователь видит первый кадр сразу при
   рендере, а не чёрный квадрат до момента загрузки video-poster. */
.video-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ga-cream);
  overflow: hidden;
}
.video-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.video-card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  transition: opacity 200ms var(--ease-out-expo);
}
.video-card.is-playing .video-card__poster {
  opacity: 0;
  pointer-events: none;
}
.video-card__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ga-lime);
  color: var(--ga-black);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  font-family: var(--ga-mono-font);
  z-index: 3;
}
.video-card__footer { padding: var(--space-4) var(--space-5); }
.video-card__hint {
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ga-mute);
}
.video-card.is-selected .video-card__hint::after {
  content: ' · выбрано';
  color: var(--ga-black);
  font-weight: var(--weight-medium);
}

/* ---------- Done (step 5) ---------- */
.done-card {
  max-width: 600px;
  margin: var(--space-16) auto;
  padding: clamp(40px, 6vw, 64px);
  background: var(--ga-cream);
  border: 2px solid var(--ga-lime);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.done-card__check {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--ga-lime);
  display: grid;
  place-items: center;
  font-size: 48px;
  color: var(--ga-black);
  font-weight: var(--weight-bold);
}
.done-card__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--weight-medium);
  text-transform: lowercase;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.done-card__sub {
  font-size: var(--text-lg);
  color: var(--ga-graphite);
  text-transform: lowercase;
}
.done-card .studio-step__actions { justify-content: center; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: 1fr; }
  .confirm-panel__product { flex-direction: column; text-align: center; }
}
@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Narrow-screen safety for long Russian button labels
   (e.g. «отправить выбранное на модерацию»). Allow wrap to 2 lines
   instead of horizontal overflow that pushes the layout. */
@media (max-width: 480px) {
  .studio-step__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .studio-step__actions .btn,
  .studio-step__actions .btn-lg {
    width: 100%;
    min-height: 56px;
    padding-inline: var(--space-5);
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    font-size: var(--text-sm);
  }
}