/*
 * Registration countdown section
 * Figma: Desktop 70:147/70:148/70:161 (1440 x 920) · Mobile 86:120 (390 x 593)
 * Top padding keeps clear of the merch T-shirt that overhangs into this section.
 */

.countdown {
  position: relative;
  color: var(--text-primary);
  text-align: center;
}

.countdown__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 188px 28px 147px;
}

.countdown__title,
.countdown__units {
  text-shadow: 0 3.266px 3.266px var(--shadow-text);
}

.countdown__title {
  margin: 0;
}

.countdown__units {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 334px;
  text-transform: uppercase;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.countdown__value {
  font-variant-numeric: tabular-nums;
}

.countdown__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--action-primary);
  color: var(--action-on-primary);
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}

.countdown__button:hover {
  box-shadow: 0 4px 64px var(--action-primary);
}

.countdown__button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* ---------- After registration closes ----------
 * .registration-closed is set on <html> by the inline script in <head>
 * (on load) or by js/countdown.js (if the deadline passes while open). */
.countdown__when-closed,
.registration-closed .countdown__when-open,
.registration-closed [data-register] {
  display: none;
}

.registration-closed .countdown__when-closed {
  display: revert;
}

.registration-closed .countdown__closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 560px;
}

.countdown__message {
  margin: 0;
  text-shadow: 0 3.266px 3.266px var(--shadow-text);
}

/* Same look as the Register button, but a label rather than a link */
.countdown__follow {
  margin: 0;
  padding: 12px 24px;
  background: var(--action-primary);
  color: var(--action-on-primary);
}

.countdown__social {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.countdown__social-link {
  display: block;
  color: inherit;
  transition: transform 0.2s ease;
}

.countdown__social-link svg {
  display: block;
  width: 40px;
  height: 40px;
}

.countdown__social-link:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

@media (hover: hover) {
  .countdown__social-link:hover { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .countdown__social-link { transition: none; }
}

@media (min-width: 768px) {
  .countdown__inner {
    gap: 96px;
    padding: 220px 24px 220px;
  }

  .countdown__units {
    justify-content: center;
    gap: 44px;
    max-width: none;
  }

  .countdown__unit {
    width: 123px;
  }

  .countdown__button {
    margin-top: 29px;
  }
}