/* ==========================================================================
   Visitor registration page - built from the Figma visitor page
   (VNF (Copy), node 7028:33001).

   Loaded only on pages using page-templates/template-visitor.php.

   Layout only: the form inside the right column is entirely global
   (forms.css + buttons.css), so nothing here may restyle an input.
   ========================================================================== */

.visitor__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* --- Left column ---------------------------------------------------------- */
.visitor__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  min-width: 0;
}

.visitor__head {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.visitor__lede {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.visitor__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-org);
  color: var(--c-ink);
}

.visitor__text {
  max-width: 707px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-ink-70);
}

/* --- Contact list ---------------------------------------------------------
   Labelled pairs - "Số điện thoại" over the number - which is what separates
   this from the footer's single-line contact strip. */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Shared cell: the three glyphs are different sizes, as in the design. */
.contact-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
}

.contact-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-contact);
}

.contact-list__label {
  font-weight: var(--fw-medium);
  color: var(--c-ink-50);
}

.contact-list__value {
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}

a.contact-list__value:hover { color: var(--c-primary); }

/* --- Partner marquee ------------------------------------------------------ */
.partners {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.partners__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-ink-navy);
}

.partners__rail {
  position: relative;
  display: flex;
  overflow: hidden;
  max-width: 780px;
}

.partners__track {
  display: flex;
  align-items: center;
  flex: none;
  gap: 28px;
  padding-right: 28px;
  animation: partners-scroll 40s linear infinite;
}

.partners__track img {
  width: 185px;
  height: 104px;
  padding-inline: var(--space-md);
  object-fit: contain;
}

/* Fade the right edge, as in the design. */
.partners__rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: clamp(48px, 20%, 200px);
  background: linear-gradient(270deg, var(--c-bg), transparent);
  pointer-events: none;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
  .partners__rail { overflow-x: auto; }
}

/* --- Right column --------------------------------------------------------- */
.visitor__aside {
  min-width: 0;
}

/* The card stretches to the height of the left column on desktop. */
.visitor-form {
  height: 100%;
  justify-content: center;
}

@media (min-width: 1024px) {
  .visitor__grid {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4xl);
  }

  .visitor__intro,
  .visitor__aside { flex: 1 0 0; }
}

/* --- Entrance --------------------------------------------------------------
   The intro, the partner marquee and the form card each reveal on their own as
   they scroll into view. Keyframes rather than a transition so nothing already
   animating on these blocks is replaced; `reveal-up` is defined in home.css. */
@media (prefers-reduced-motion: no-preference) {
  /* A transformed box still counts towards the scrollable overflow. This page
     is barely taller than the window, so the blocks starting 24px lower made
     the scrollbar appear and vanish while they rose, shifting the layout.
     Clipping the section keeps that offset out of the page height. `clip`
     (unlike `hidden`) makes no scroll container, so sticky is unaffected. */
  .has-reveal .visitor {
    overflow: clip;
  }

  .has-reveal .visitor [data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

  .has-reveal .visitor [data-reveal].is-revealed {
    animation: reveal-up var(--reveal-dur) var(--ease) backwards;
  }
}