/* ============================================================
   LOCATION — Figma 175:3707 "Frame 2147224956" (1920×1080)
   Desktop: absolute canvas, every measure in Figma px via --dpx.
   <992px: title → 16/9 map → full-width card, stacked.
   ============================================================ */

.sec-location .loc-canvas {
  height: calc(1080 * var(--dpx));
  background: var(--cream);
}

/* ---- Map — 175:3708: 2290×1145 @ −317,0 (JSX centres it on 45.83% − 52px = x 828) ---- */
.sec-location .loc-map {
  position: absolute;
  left: calc(-317 * var(--dpx));
  top: 0;
  width: calc(2290 * var(--dpx));
  height: calc(1145 * var(--dpx));
  margin: 0;                              /* Bootstrap gives <figure> a bottom margin */
  overflow: hidden;
  z-index: 0;
  background: var(--cream-dark);
}

.sec-location .loc-map__img {
  object-position: center center;         /* 3600×1800 is exactly 2:1 like its box — no crop on desktop */
}

/* Figma: linear-gradient(-90deg, rgba(241,233,210,0) 37%, rgba(241,233,210,.69) 44.4%, #f1e9d2 50%)
   across the 2290 box → opaque cream-dark from the box's left edge to its middle (x 828 of the frame) */
.sec-location .loc-map__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(-90deg,
    rgba(241, 233, 210, 0)    37%,
    rgba(241, 233, 210, 0.69) 44.4%,
    var(--cream-dark)         50%);
  pointer-events: none;
}

/* ---- Title — 175:3709 ---- */
.sec-location .loc-title {
  position: absolute;
  left: calc(129 * var(--dpx));
  top: calc(84 * var(--dpx));
  width: calc(794 * var(--dpx));
  z-index: 2;
}

/* ---- Watermark — 175:3710 ---- */
.sec-location .loc-mark {
  position: absolute;
  left: calc(-56 * var(--dpx));
  bottom: calc(-56 * var(--dpx));
  width: calc(210 * var(--dpx));
  height: calc(210 * var(--dpx));
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

/* ---- Card — 175:3711 ---- */
.sec-location .loc-card {
  position: absolute;
  left: calc(129 * var(--dpx));
  top: calc(453 * var(--dpx));
  width: calc(585 * var(--dpx));
  height: calc(560 * var(--dpx));
  z-index: 3;
  background: var(--white);
  border: max(1px, calc(1 * var(--dpx))) solid var(--border-light);
  box-shadow: 0 0 calc(14 * var(--dpx)) rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Native scrollbar hidden — the decorative .loc-sb--card mirrors this box's scroll position */
.sec-location .loc-card__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.sec-location .loc-card__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Content column — 175:3712: x 39 inside the border, 480 wide, vertically centred while it fits,
   scrolls from the top once it does not */
.sec-location .loc-card__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(40 * var(--dpx)) 0 calc(40 * var(--dpx)) calc(39 * var(--dpx));
}

/* ---- Accordion ---- */
.sec-location .loc-acc,
.sec-location .loc-list {
  margin: 0;                              /* Bootstrap's ul margin/padding beat the * reset */
  padding: 0;
  list-style: none;
}

.sec-location .loc-acc {
  width: calc(480 * var(--dpx));
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--dpx));
}

.sec-location .loc-acc__item { width: 100%; }

.sec-location .loc-acc__title {
  margin: 0;
  font: inherit;
  line-height: inherit;
}

/* Header row (175:3715 / 175:3739): 24 tall, name left, chevron right, hairline (Vector 118/119) below.
   Closed: 45 Light #8a8a8a, line 18 below. Open: 65 Medium gold, line 21 below. */
.sec-location .loc-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--dpx));
  width: 100%;
  margin: 0;
  padding: 0 0 calc(17 * var(--dpx));            /* 17 + 1px line = Figma's 18 gap (its line has no height) */
  border: 0;
  border-bottom: max(1px, calc(1 * var(--dpx))) solid rgba(85, 85, 85, 0.25);
  border-radius: 0;
  background: none;
  color: var(--text-gray);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: calc(20 * var(--dpx));
  line-height: calc(24 * var(--dpx));
  letter-spacing: calc(1 * var(--dpx));
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
  transition: color 0.35s var(--ease-out), padding-bottom 0.5s var(--ease-out);
}

.sec-location .loc-acc__head:hover { color: var(--dark); }

.sec-location .loc-acc__item.is-open .loc-acc__head {
  color: var(--gold);
  font-weight: var(--fw-medium);
  padding-bottom: calc(20 * var(--dpx));         /* 20 + 1px line = Figma's 21 */
}

.sec-location .loc-acc__name {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

/* Chevron — Figma 175:3718: 21×14 (Font Awesome "angle" redrawn as an inline SVG); flips when open */
.sec-location .loc-acc__chev {
  flex: 0 0 auto;
  display: block;
  width: calc(21 * var(--dpx));
  height: calc(14 * var(--dpx));
  color: inherit;
  transition: transform 0.45s var(--ease-out);
}
.sec-location .loc-acc__item.is-open .loc-acc__chev { transform: rotate(180deg); }

/* Panel — animated with the grid-rows trick (0fr → 1fr); works with and without GSAP */
.sec-location .loc-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.sec-location .loc-acc__item.is-open .loc-acc__panel { grid-template-rows: 1fr; }

.sec-location .loc-acc__panel-in {
  min-height: 0;
  overflow: hidden;
}

/* 18 above the list, 17 + 1px closing hairline (175:3737) below → item = 232 like Figma */
.sec-location .loc-acc__body { padding: calc(18 * var(--dpx)) 0 calc(17 * var(--dpx)); }

.sec-location .loc-acc__line {
  height: max(1px, calc(1 * var(--dpx)));
  background: rgba(85, 85, 85, 0.25);
}

/* List + its scrollbar — 175:3720: 471 wide, 442-wide list left, 4px track flush right (x 467) */
.sec-location .loc-list-wrap {
  position: relative;
  width: calc(471 * var(--dpx));
}

.sec-location .loc-list {
  width: calc(442 * var(--dpx));
  max-height: calc(151 * var(--dpx));     /* four rows: 4×22 + 3×21 — more rows scroll */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(21 * var(--dpx));
}
.sec-location .loc-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Row — 175:3722: Neue Haas 45 Light 18, tracking 0.9, name left / time right */
.sec-location .loc-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--dpx));
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.222;
  letter-spacing: calc(0.9 * var(--dpx));
  color: var(--dark);
  text-transform: capitalize;
  white-space: nowrap;
}

.sec-location .loc-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-location .loc-row__time {
  flex: 0 0 auto;
  text-align: right;
}

/* Decorative scrollbar — track #e9e9e9, thumb gold @ 75%, both pill-shaped (175:3734 / 175:3756).
   JS sizes and moves the thumb from the real scroll box; at rest it shows the Figma proportions. */
.sec-location .loc-sb {
  position: absolute;
  width: calc(4 * var(--dpx));
  pointer-events: none;
}

.sec-location .loc-sb__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #e9e9e9;
  border-radius: 999px;
}

.sec-location .loc-sb__thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42.4%;
  background: var(--gold);
  opacity: 0.75;
  border-radius: 999px;
  will-change: transform;
}

/* only a thumb that really scrolls something is draggable */
.sec-location .loc-sb.is-live .loc-sb__thumb {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.sec-location .loc-sb__thumb.is-dragging { cursor: grabbing; opacity: 1; }

/* List scrollbar: x 471 of the 475-wide wrap, as tall as the list; thumb 64/151 at rest */
.sec-location .loc-sb--list {
  right: 0;
  top: 0;
  bottom: 0;
}

/* Card scrollbar — 175:3756: 4×519, centred on 50% + 264.5 of the card (JSX), top 21 of the frame
   (20 inside the border); track starts 3.4 lower (Rectangle 34624309), thumb 100 tall at rest */
.sec-location .loc-sb--card {
  left: calc(50% + 264.5 * var(--dpx));
  top: calc(20 * var(--dpx));
  height: calc(519 * var(--dpx));
  transform: translateX(-50%);
}
.sec-location .loc-sb--card .loc-sb__track { top: calc(3.4 * var(--dpx)); }
.sec-location .loc-sb--card .loc-sb__thumb { height: 19.3%; }

/* No-JS fallback (hidden whenever the accordion is rendered) */
.sec-location .loc-noscript__title {
  margin: 0 0 calc(18 * var(--dpx));
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: calc(20 * var(--dpx));
  letter-spacing: calc(1 * var(--dpx));
  color: var(--gold);
}
.sec-location .loc-noscript {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 2.389;
  letter-spacing: calc(0.9 * var(--dpx));
  color: var(--dark);
}

/* ============================================================
   RESPONSIVE — stacked flow below 992px
   ============================================================ */
@media (max-width: 991px) {
  .sec-location .loc-canvas {
    height: auto;
    padding: 64px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .sec-location .loc-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 30rem;
  }

  /* 16/9 block, no fade; zoomed ~1.6× on the Sai World One marker (76% / 26% of the map) so it stays legible */
  .sec-location .loc-map {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
  }
  .sec-location .loc-map__img {
    object-position: 76% 26%;
    transform: scale(1.6);
    transform-origin: 76% 26%;
  }
  .sec-location .loc-map__fade { display: none; }

  .sec-location .loc-mark { display: none; }

  .sec-location .loc-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    border-width: 1px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
  }
  .sec-location .loc-card__scroll {
    position: relative;
    inset: auto;
    overflow: visible;
  }
  .sec-location .loc-card__inner {
    min-height: 0;
    padding: 28px 24px;
  }

  .sec-location .loc-acc { width: 100%; gap: 1.5rem; }

  .sec-location .loc-acc__head {
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom-width: 1px;
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .sec-location .loc-acc__item.is-open .loc-acc__head { padding-bottom: 1rem; }
  .sec-location .loc-acc__name { white-space: normal; }
  .sec-location .loc-acc__chev { width: 18px; height: 12px; }

  .sec-location .loc-acc__body { padding: 0.9rem 0; }
  .sec-location .loc-acc__line { height: 1px; }

  .sec-location .loc-list-wrap { width: 100%; }
  .sec-location .loc-list {
    width: 100%;
    max-height: none;
    overflow: visible;
    gap: 0.9rem;
  }

  .sec-location .loc-row {
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: normal;
    align-items: flex-start;
  }
  .sec-location .loc-row__name { overflow: visible; text-overflow: clip; }
  .sec-location .loc-row__time { white-space: nowrap; }

  .sec-location .loc-sb { display: none; }

  .sec-location .loc-noscript__title { margin-bottom: 0.9rem; font-size: 1.125rem; letter-spacing: 0.05em; }
  .sec-location .loc-noscript { font-size: 1rem; line-height: 2.2; letter-spacing: 0.05em; }
}

@media (max-width: 767px) {
  .sec-location .loc-canvas { padding: 48px 20px; gap: 24px; }
  .sec-location .loc-card__inner { padding: 24px 18px; }
}