/* ==========================================================================
   Booth map page - Figma nodes 7143:19633 (plan + legend) and 7143:13413
   (interactive map + summary).

   Two sections, both full-bleed pictures with something floating over them:
   the legend card over the illustrated plan, and the picker with its summary
   over the faint site outline.

   The map itself brings its own sheet (booth-map.css) and the chips come from
   payment.css's .booth-chip - this file only lays out what is around them.
   ========================================================================== */

/* Both sections are set in Inter rather than the site's Be Vietnam Pro: this
   page's design is drawn in it throughout. Set on the two section roots and
   left to inherit, so anything added inside them picks it up too - the two
   places that opt out say so themselves (the brand lockup has its own face,
   and .btn inherits from wherever it is put). */
.boothplan,
.boothpick {
  font-family: var(--font-inter);
}

/* ==========================================================================
   The illustrated plan
   ========================================================================== */
.boothplan {
  position: relative;
  padding: var(--space-xl) var(--gutter);
}

/* The frame is the legend card's container, so the card can be sized in
   container units and ride the picture's own scale instead of the viewport's.

   `inline-size`, not `size`: size containment would take the frame's height
   out of its contents' hands, and its height IS its contents - the picture.
   The frame would collapse. Nothing is lost by it, because the picture keeps
   a fixed ratio: its height is a constant multiple of its width, so `cqw`
   already scales with the picture in both directions and `cqh` would only be
   the same number wearing a different hat. */
.boothplan__frame {
  container-type: inline-size;
  container-name: boothplan;
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

.boothplan__picture {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.boothplan__image {
  display: block;
  width: 100%;
  height: auto;
}

/* "Mua gian hang" (Figma 7143:19669) - centred under the plan and its legend,
   the glow is the point so it is not tucked away inside .boothplan__frame's
   own max-width logic, just centred on the section like the frame itself. */
.boothplan__cta {
  display: none;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);

  &:hover {
    transform: translateX(-50%);
  }
}

/* --- The legend card ------------------------------------------------------
   In flow under the plan on a phone, floated over its bottom-right corner
   once there is a corner worth floating over. */
.legend-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) auto 0;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.legend-card__figure {
  display: none;
}

.legend-card__figure img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

.legend-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.legend-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

/* The rule between the types that cost money and the ones that do not. It is
   drawn above the first free row rather than after a fixed number of them -
   which row that is is a price, not a position. */
.legend-list__item--ruled {
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border-light);
}

.legend-list__name {
  flex: 1 1 auto;
}

.legend-list__note {
  flex: none;
  font-size: var(--fs-caption);
  color: var(--c-ink-50);
}

.legend-card__contact {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-ink-90);
}

.legend-card__contact p {
  margin: 0;
}

.legend-card__contact a {
  color: var(--c-ink-pure);
  text-decoration: underline;
}

/* Over the picture's own bottom-right corner from the width where there is a
   corner to spare; under it, in flow, on anything narrower.

   Everything about the card is in `cqw` here - 1% of the frame's width, which
   is the picture's width. The card was drawn at 357px against a 1824px plan,
   so 19.6cqw is that same card whatever the plan is scaled to, and the type
   and padding inside it shrink and grow with the artwork rather than sitting
   at a fixed size on top of it. The numbers below are the design's pixels
   over that same 1824.

   Nothing here is clamped on purpose: the card is only ever drawn over the
   picture, so if the picture is small the card should be small with it. Below
   1024px the card leaves the picture, goes back into the flow, and every one
   of these rules stops applying with it. */
@media (min-width: 1024px) {
  .boothplan__legend {
    position: absolute;
    right: 2.6cqw;
    bottom: 2.6cqw;
    margin: 0;
    width: 22cqw;
    gap: 1cqw;
    border-radius: 0.87cqw;
  }

  .boothplan__legend .legend-card__figure {
    padding: 0.87cqw;
    border-radius: 0.87cqw;
    display: grid;
    place-items: center;
    background: var(--c-legend-figure);
  }

  .boothplan__legend .legend-card__figure img {
    max-width: 14.1cqw;
  }

  .boothplan__legend .legend-card__body {
    gap: 1cqw;
    padding: 1.3cqw;
  }

  .boothplan__legend .legend-card__title {
    font-size: 0.87cqw;
  }

  .boothplan__legend .legend-list {
    gap: 1.3cqw;
  }

  .boothplan__legend .legend-list__item {
    gap: 0.6cqw;
    font-size: 0.8cqw;
  }

  .boothplan__legend .legend-list__item--ruled {
    padding-top: 1cqw;
  }

  .boothplan__legend .swatch {
    width: 1.6cqw;
    height: 1.15cqw;
    border-radius: 0.29cqw;
  }

  .boothplan__legend .legend-list__note {
    font-size: 0.7cqw;
  }

  .boothplan__legend .legend-card__contact {
    font-size: 0.87cqw;
  }
}

/* ==========================================================================
   The interactive map and its summary
   ========================================================================== */
/* A one-cell grid, so the spacer below and the content can be stacked in the
   same cell: the row ends up as tall as whichever of them is taller, which is
   exactly "at least as tall as the background picture". */
.boothpick {
  position: relative;
  isolation: isolate;
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto` track: an auto track is sized to
     its content's max-content width, and the plan inside is happy to be
     1600px wide, so the column - and with it the page - overflowed the phone
     it was meant to fit. */
  grid-template-columns: minmax(0, 1fr);
}

/* The floor. It has no content and never wins on width, so all it can do is
   stop the row being shorter than the picture drawn across it - which is what
   keeps `object-fit: cover` below from having anything to crop. The ratio is
   written onto the section by section-picker.php, read off the attachment
   itself; the fallback is only for a picture whose size WordPress never
   recorded. */
.boothpick::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--boothpick-bg-aspect, 1920 / 1046);
  pointer-events: none;
}

/* Decoration, and behind everything: the faint outline of the site the map
   sits on top of in the design. Anchored to the top, so on a phone - where
   the content stacks far past the picture's own height and something has to
   give - it is the bottom of the drawing that goes, not the middle. */
.boothpick__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  opacity: 0;

  @media (min-width: 1024px) {
    opacity: 100;
  }
}

/* The section's breathing room is in here rather than on the section itself.
   The background is stretched to the section's whole box, so any padding out
   there would make that box taller than the picture's own shape and cover
   would start trimming the sides to make up the difference. */
.boothpick__inner {
  grid-area: 1 / 1;
  /* A grid item refuses to shrink under its own content unless told to, and
     the plan inside is happy to be 1600px wide - without this the whole
     section overflowed the phone it was meant to fit. */
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
}

.boothpick__map {
  min-width: 0;
}

.boothpick__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.boothpick__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--c-ink-pure);
}

.boothpick__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.boothpick__card-title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  color: var(--c-label);
}

/* --- Price per m², one card per booth type -------------------------------- */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background: var(--c-fill-subtle);
  border-radius: var(--radius-sm);
}

.rate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.rate__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.rate__code {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--c-ink-pure);
}

.rate__unit {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-ink-25);
}

.rate__price {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--c-ink-pure);
}

/* --- Sponsor booths, under the rate card (Figma 6700:400) ------------------
   Colours come from the booth type as custom properties: --sponsor-tint is
   its map colour, mixed half with white for the box; --sponsor-ink is its
   accent, for the area and the caption. */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sponsor {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--sponsor-tint, var(--c-fill-subtle)) 50%, var(--c-surface));
  border-radius: var(--radius-sm);
  color: var(--sponsor-ink, var(--c-ink-pure));
}

.sponsor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 1.8125rem;
}

/* The pictures are squares with a wide transparent margin; the slot is the
   design's 29px tall and the picture overhangs it, the margin it hides being
   empty. */
.sponsor__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1.8125rem;
}

.sponsor__icon img {
  flex: none;
  width: 2.625rem;
  height: 2.625rem;
  max-width: none;
  object-fit: contain;
}

.sponsor__area {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  white-space: nowrap;
}

.sponsor__name {
  font-weight: var(--fw-black);
  font-size: var(--fs-caption);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

/* --- Picked booths, area, subtotal ---------------------------------------- */
.boothpick__picked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.boothpick__label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

.boothpick__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.boothpick__row span {
  color: var(--c-ink-50);
}

.boothpick__row strong {
  font-weight: var(--fw-medium);
  color: var(--c-ink-pure);
}

.boothpick__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-border-light);
}

/* --- The total and the way out -------------------------------------------- */
.boothpick__total {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

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

.boothpick__total-figure strong {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  color: var(--c-primary-deep);
}

@media (min-width: 1024px) {
  .boothpick__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, calc(360/1824*100%));
    align-items: center;
    gap: var(--space-xl);
  }
}

/* --- Entrance --------------------------------------------------------------
   The plan (picture, button and legend as one block - the button and legend
   are pinned to the picture, and the button already uses `transform` to
   centre itself, which an animated transform on it would clobber), then the
   picker's map, heading and each card 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) {
  .has-reveal .boothplan [data-reveal]:not(.is-revealed),
  .has-reveal .boothpick [data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

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