/* =================================================================================================
   LFD registration hub — four directions, and whether each one is open

   The status is a WORD in a box, not a colour on a card. Colour carries it too, and the colour
   is the season accent rather than traffic lights, because this is an editorial site and a green
   dot would be the only piece of UI chrome on it. But nothing here depends on the colour being
   seen: every card says Open, Closing Soon, Closed or Coming Soon in text.
   ================================================================================================= */

.lfd-reg-hub {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
  padding-block: var(--lfd-space-section, 4.5rem);
  box-sizing: border-box;
  color: var(--lfd-color-ink, #111);
}

/* The wrapper lfd_blocks_section() adds already declares the section padding. */
.lfd-section > .lfd-reg-hub {
  padding-block: 0;
}

.lfd-reg-hub * {
  box-sizing: border-box;
}

.lfd-reg-hub__head {
  max-inline-size: 46rem;
  margin-block-end: var(--lfd-space-xl, 3rem);
}

.lfd-reg-hub__eyebrow {
  margin: 0 0 var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label-lg, 0.18em);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-reg-hub__title {
  margin: 0;
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-lg, clamp(2.75rem, 5vw, 4.5rem));
  font-weight: var(--lfd-weight-regular, 400);
  line-height: var(--lfd-leading-display, 0.95);
  letter-spacing: var(--lfd-tracking-display, -0.01em);
  text-transform: uppercase;
}

.lfd-reg-hub__intro {
  margin: var(--lfd-space-md, 1.25rem) 0 0;
  max-inline-size: var(--lfd-width-text, 68ch);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  line-height: var(--lfd-leading-body, 1.65);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.62));
}

/* --- the board -------------------------------------------------------------------------------- */

.lfd-reg-hub__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lfd-space-md, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-reg-hub__item {
  min-inline-size: 0;
}

.lfd-reg-hub__card {
  display: flex;
  flex-direction: column;
  gap: var(--lfd-space-sm, 0.75rem);
  block-size: 100%;
  /* A card is a target. 44px is the comfortable size; this is far above it. */
  min-block-size: 11rem;
  padding: var(--lfd-space-lg, 2rem);
  text-decoration: none;
  color: inherit;
  background: var(--lfd-color-mist, #f4f3f1);
  border: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.1));
  transition:
    background var(--lfd-duration-fast, 0.18s) var(--lfd-ease-standard, ease),
    border-color var(--lfd-duration-fast, 0.18s) var(--lfd-ease-standard, ease);
}

.lfd-reg-hub__card--link:hover,
.lfd-reg-hub__card--link:focus-visible {
  background: var(--lfd-color-paper, #fff);
  border-color: var(--lfd-color-ink, #111);
}

.lfd-reg-hub__status {
  align-self: flex-start;
  padding: 0.35rem 0.6rem;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-3xs, 0.625rem);
  font-weight: var(--lfd-weight-bold, 700);
  letter-spacing: var(--lfd-tracking-label-lg, 0.18em);
  line-height: var(--lfd-leading-label, 1.2);
  text-transform: uppercase;
  color: var(--lfd-color-paper, #fff);
  background: var(--lfd-color-ink, #111);
}

/*
 * Open is filled with the accent. Closing Soon - still open, a deadline - is filled with ink.
 * Closed and Coming Soon are not filled at all: muted text in an outline. The word is always
 * there; the fill is never the only signal.
 */
.lfd-reg-hub__status[data-state="open"] {
  background: var(--lfd-color-accent, #b39258);
  /*
   * --lfd-color-accent-ink, NOT --lfd-color-accent-on-ink. They are near-identical names for
   * opposite jobs: `-ink` is the text colour that belongs ON the accent, `-on-ink` is the accent
   * rendered AS text on an ink ground. Using the second here put gold text on a gold badge, and
   * the measurement was a solid gold rectangle with the word invisible inside it.
   */
  color: var(--lfd-color-accent-ink, #0a0a0a);
}

.lfd-reg-hub__status[data-state="closing_soon"] {
  background: var(--lfd-color-ink, #111);
  color: var(--lfd-color-paper, #fff);
}

.lfd-reg-hub__status[data-state="closed"],
.lfd-reg-hub__status[data-state="coming_soon"] {
  background: transparent;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 0 0 1px var(--lfd-color-line, rgba(0, 0, 0, 0.22));
}

.lfd-reg-hub__name {
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-sm, 1.5rem);
  line-height: var(--lfd-leading-snug, 1.2);
  text-transform: uppercase;
}

.lfd-reg-hub__note {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body, 1.6);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.6));
}

.lfd-reg-hub__go {
  margin-block-start: auto;
  font-size: var(--lfd-size-body-lg, 1.125rem);
  line-height: 1;
}

/* --- support ---------------------------------------------------------------------------------- */

.lfd-reg-hub__support {
  margin-block-start: var(--lfd-space-xl, 3rem);
  padding-block-start: var(--lfd-space-lg, 2rem);
  border-block-start: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
  max-inline-size: var(--lfd-width-text, 68ch);
}

.lfd-reg-hub__support-title {
  margin: 0 0 var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-transform: uppercase;
}

.lfd-reg-hub__support-text,
.lfd-reg-hub__support-email {
  margin: 0 0 var(--lfd-space-xs, 0.5rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  line-height: var(--lfd-leading-body, 1.65);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.62));
}

.lfd-reg-hub__support-email a {
  color: var(--lfd-color-ink, #111);
}

/* --- responsive: 1440 / 1180 / 834 / 390 / 320 ------------------------------------------------- */

@media (max-width: 1180px) {

  .lfd-reg-hub__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {

  .lfd-reg-hub__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfd-reg-hub__card {
    min-block-size: 0;
    padding: var(--lfd-space-md, 1.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .lfd-reg-hub__card {
    transition: none;
  }
}