/* HERO: имена + детские фотки + рукописные подписи + countdown.
   Сетка kids: 4 строки × 2 колонки, фото лежат на одной строке. */

.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(48px, 8vw, 96px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(80% 60% at 50% 10%, color-mix(in oklab, var(--color-paper) 70%, transparent), transparent 60%),
    var(--color-bg);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.5vw, 32px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.3vw, 6px);
}

.hero__title-line { display: block; }
.hero__title-amp {
  font-style: italic;
  color: var(--color-gold);
  font-size: 0.85em;
  display: inline-block;
  transform: translateY(-0.02em);
}

.hero__date {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 8px;
}
.hero__date-dot {
  display: inline-block;
  color: var(--color-gold);
}

/* === Детские фотки — 3-row grid, обе подписи сверху, фото на одной строке === */
.kids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "g-cap    b-cap"
    "g-photo  b-photo"
    "g-name   b-name";
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: clamp(10px, 1.5vw, 18px);
  margin-top: clamp(28px, 4vw, 48px);
  width: 100%;
  max-width: 880px;
  align-items: center;
  justify-items: center;
}

.kids__slot--g-cap        { grid-area: g-cap; }
.kids__slot--b-cap        { grid-area: b-cap; }
.kids__photo--g           { grid-area: g-photo; }
.kids__photo--b           { grid-area: b-photo; }
.kids__name:nth-of-type(1){ grid-area: g-name; }
.kids__name:nth-of-type(2){ grid-area: b-name; }

/* На мобильном сохраняем 2 колонки — фото остаются на одной строке.
   Уменьшаем фотки, подписи, стрелки, чтобы помещалось в 360–390px ширины. */
@media (max-width: 640px) {
  .kids {
    column-gap: clamp(8px, 3vw, 18px);
    row-gap: 8px;
  }
  .kids__slot {
    min-height: clamp(70px, 18vw, 110px);
    gap: 2px;
  }
  .kids__caption {
    font-size: clamp(0.92rem, 4vw, 1.2rem);
    max-width: 100%;
    line-height: 1.1;
  }
  .kids__arrow {
    width: clamp(34px, 9vw, 50px);
    height: clamp(34px, 9vw, 50px);
  }
  .kids__photo {
    width: clamp(118px, 38vw, 175px);
  }
  .kids__name {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    margin-top: 4px;
  }
}

/* === Слоты с подписями ===
   Обе подписи теперь над фотками: подпись прижата сверху, стрелка снизу
   указывает на фото. */
.kids__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: clamp(120px, 16vw, 160px);
  justify-content: flex-end;  /* подпись прижата к фото снизу слота */
}

.kids__caption {
  font-size: var(--fs-hand);
  color: var(--color-ink);  /* и у жениха, и у невесты — чёрный */
  text-align: center;
  line-height: 1.15;
  max-width: 280px;
}

.kids__arrow {
  display: inline-block;
  width: clamp(48px, 7vw, 72px);
  height: clamp(48px, 7vw, 72px);
  color: var(--color-gold);
  margin-top: 2px;
}
.kids__arrow svg { width: 100%; height: 100%; overflow: visible; }
/* Стрелка над фотом жениха — наклоняется влево-вниз. */
.kids__slot--g-cap .kids__arrow { transform: rotate(-12deg); }
/* Стрелка над фотом невесты — зеркально, вправо-вниз (зеркало X). */
.kids__slot--b-cap .kids__arrow { transform: rotate(12deg) scaleX(-1); }
.kids__arrow--down { /* класс остался для совместимости */ }
.kids__arrow--up   { /* класс остался для совместимости */ }

/* Анимация рисования стрелки маркером (запускается через GSAP) */
.kids__arrow-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* === Фото с marker-рамкой === */
.kids__photo {
  position: relative;
  width: clamp(170px, 28vw, 240px);
  aspect-ratio: 3 / 4;
  background: var(--color-paper);
  border: var(--stroke-mid) solid var(--color-ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 600ms var(--ease-out-expo);
  will-change: transform;
}
.kids__photo--g { transform: rotate(-2.5deg); }
.kids__photo--b { transform: rotate(2.5deg); }
.kids__photo--g:hover { transform: rotate(0) scale(1.03); }
.kids__photo--b:hover { transform: rotate(0) scale(1.03); }

.kids__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 800ms var(--ease-out-expo);
}
.kids__photo:hover img { transform: scale(1.06); }

.kids__photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--color-soft);
  line-height: 1.25;
  padding: 16px;
  background: var(--color-paper);
  z-index: 0;
}

/* Уголок с лентой "плёнки" — лёгкая декорация */
.kids__photo::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 60px;
  height: 20px;
  background: color-mix(in oklab, var(--color-gold) 25%, transparent);
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(42, 37, 34, 0.1);
}

.kids__name {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--color-gold-deep);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* === Countdown === */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
  margin-top: clamp(20px, 3vw, 32px);
  padding: 18px clamp(16px, 2vw, 28px);
  border: var(--stroke-thin) solid var(--color-line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-paper) 60%, transparent);
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.countdown__cell > span:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown__label {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (max-width: 480px) {
  .countdown { padding: 14px 16px; gap: 8px; border-radius: 24px; }
  .countdown__cell > span:first-child { font-size: 1.2rem; }
}