/* ==========================================================================
   Exhibitor listings: "Nhà triển lãm" (node 7043:14076) and "Gian hàng kỹ
   thuật số" (node 7043:14255).

   One sheet for both pages because they are the same page twice - a heading
   over a grid of cards. The card shell they share is .brand-card in cards.css;
   what each puts inside the box is here.
   ========================================================================== */
.page-exhibitors,
.page-booths {
  background: var(--c-bg);
}

.exhibitors > .container,
.booths > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);

  @media (min-width: 1024px) {
    gap: var(--space-4xl);
  }
}

/* Both pages open with the same 64px uppercase title. The design paints it
   #111; --c-ink is #0b0b0b, the same to the eye, so no fourth near-black
   token is introduced for it. */
.exhibitors__title,
.booths__title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-org);
  text-align: center;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --- Nhà triển lãm --------------------------------------------------------
   Four across in the design; the grid steps down rather than shrinking the
   cards past the point where a logo is readable. */
.exhibitors__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
}

@media (min-width: 640px) {
  .exhibitors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .exhibitors__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 1440px) {
  .exhibitors__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* contain, not cover: these are brand images of every shape and the box is
   white anyway, so fitting one whole is invisible where cropping it is not.
   The ratio is the one the design's fixed 360px card leaves for the image. */
.exhibitor-card__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 404 / 247;
  object-fit: contain;
}

.exhibitor-card__name {
  font-size: var(--fs-xl);
  text-align: center;
}

/* --- Gian hàng kỹ thuật số ------------------------------------------------ */
/* Figma node 6710:609 - shown instead of the grid while no booth is listed. */
/* Title to notice 24 → 36px (375 → 1920 wide); notice to footer adds on top of
   the section's own bottom padding so the total lands on 164px at 1920. */
.booths > .container:has(> .booths__empty) {
  gap: clamp(1.5rem, 1.318rem + 0.777vw, 2.25rem);
}

.booths__empty {
  margin-bottom: clamp(0rem, -1.889rem + 8.062vw, 7.785rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: 690px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  text-align: center;
}

.booths__empty-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.booths__empty-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  color: var(--c-primary);
}

.booths__empty-desc {
  font-size: var(--fs-body);
  color: var(--c-ink-muted);
}

.booths__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .booths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .booths__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* The frame is only here to hang the booth code on. */
.booth-card__frame {
  position: relative;
  width: 100%;
}

.booth-card__photo {
  --media-ratio: 557 / 368;

  border-radius: var(--radius-sm);
}

.booth-card__code {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px var(--space-xs);
  border: 1px solid var(--c-tag-booth-border);
  border-radius: var(--radius-xs);
  background: var(--c-tag-booth);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--c-on-dark);

  @media (min-width: 768px) {
    font-size: var(--fs-xl);
  }
}

.booth-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.booth-card__logo {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.booth-card__name {
  font-size: var(--fs-sm);

  @media (min-width: 768px) {
    font-size: var(--fs-lg);
  }
}

/* --- Entrance --------------------------------------------------------------
   Each card reveals on its own as it scrolls into view (data-reveal on the
   card, not the section) - the grid can run many rows, so one trigger for the
   whole section would animate rows nobody can see yet. Cards animate together, not one
   after another.

   Keyframes rather than a transition: a link card has its own hover
   transition, which a reveal transition would replace. `reveal-up` is defined
   in home.css. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .exhibitor-card[data-reveal]:not(.is-revealed),
  .has-reveal .booth-card[data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

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