/* Purpose: Register strip — full-bleed staff photo under the hero scrim, detail rows and countdown. */

.register {
  position: relative;
  overflow: hidden;
  padding: var(--space-60) var(--space-16);
  background-color: var(--color-bg);
}

.register__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same two-layer scrim as the hero banner, so both photo bands share one tone. */
.register__dim {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--scrim-hero);
}

.register__card {
  position: relative;
  z-index: var(--z-content);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-40) var(--space-30);
  border-radius: var(--radius);
  background: var(--card-reg);
  -webkit-backdrop-filter: var(--blur-card);
  backdrop-filter: var(--blur-card);
  box-shadow: var(--shadow-reg);
}

.register__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: var(--rim);
  background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.register__title {
  position: relative;
  font-size: var(--fs-30);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-26);
}

.register__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 2px;
  background: var(--foil-soft);
  box-shadow: var(--shadow-rule);
}

.register__rows {
  list-style: none;
  margin: 0 0 var(--space-30);
  padding: 0;
}

.register__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-13) 0;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-17);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  transition: transform var(--duration-base) ease;
}

.register__row:last-child {
  border-bottom: 0;
}

.register__row:hover {
  transform: translateX(6px);
}

.register__row .icon {
  flex: 0 0 24px;
  color: var(--color-gold-300);
}

.register__row .icon__fill {
  fill: var(--color-gold-400);
}

.register__countdown {
  margin: var(--space-22) 0 0;
  font-size: var(--fs-15);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-3);
  text-align: center;
}

.register__countdown b {
  margin-left: var(--space-6);
  color: var(--color-gold-200);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-strip);
}

@media (min-width: 561px) {
  .register {
    padding: var(--space-76) var(--space-20);
  }
}

@media (min-width: 821px) {
  .register {
    padding: var(--space-104) var(--space-24);
  }

  .register__card {
    margin: 0 0 0 max(24px, 7vw);
    padding: var(--space-48) var(--space-44);
  }
}