/* Purpose: Full-bleed registration strip with scrim, detail rows and countdown. */

.register {
  position: relative;
  overflow: hidden;
  padding: var(--space-56) var(--space-16);
  background: var(--color-navy-deep);
}

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

.register__dim {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--color-scrim);
}

.register__card {
  position: relative;
  z-index: var(--z-content);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  max-width: 460px;
  padding: var(--space-40) var(--space-30);
  margin: 0 auto;
  box-shadow: var(--shadow-reg);
}

.register__title {
  font-size: var(--fs-26);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-24);
}

.register__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--color-primary);
}

.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-12) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--fs-19);
  color: var(--color-navy);
  transition: transform var(--duration-base) ease;
}

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

.register__row svg {
  flex: 0 0 26px;
}

.register__countdown {
  margin: var(--space-24) 0 0;
  font-size: var(--fs-16-5);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
}

.register__countdown b {
  color: var(--color-accent);
  font-weight: var(--weight-extra);
  margin-left: var(--space-4);
}

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

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

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