/* ===========================================================
   Section 5 — Location & Location Advantages
   "The Ledger" — a map at rest on the left, and on the right a
   quiet directory of everything nearby: category tabs above,
   distances set out like a timetable, name and minutes joined
   by a dotted leader rather than boxed into cards.
   =========================================================== */

.sec5 {
  position: relative;
  background: var(--onyx);
  padding: clamp(40px, 5vw, 70px) 0 clamp(50px, 5.5vw, 84px);
  overflow: hidden;
}

.sec5::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -16%;
  width: min(50vw, 720px);
  height: min(50vw, 720px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--gold) 11%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.sec5__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(28px, 6vw, 88px);
}

/* ---------------------------------------------------------
   Eyebrow + heading — same rhythm as sections 2–4
   --------------------------------------------------------- */
.sec5__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0 0 clamp(26px, 3.4vw, 40px);

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s var(--ease-luxe),
    transform 0.9s var(--ease-luxe);
}

.sec5__eyebrow-index {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.sec5__eyebrow-rule {
  width: 48px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

.sec5__eyebrow-label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.sec5__head {
  max-width: 820px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.1s var(--ease-luxe) 0.1s,
    transform 1.1s var(--ease-luxe) 0.1s;
}

.sec5__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ivory);
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: 0.015em;
  margin: 0 0 clamp(18px, 2vw, 26px);
}

.sec5__subhead {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ivory-dim);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.75;
  margin: 0;
}

.sec5.is-inview .sec5__eyebrow,
.sec5.is-inview .sec5__head {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   Two-column stage — map at rest, ledger alongside
   --------------------------------------------------------- */
.sec5__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 76px);
}

/* ---- Map column ---- */
.sec5__map {
  position: sticky;
  top: 110px;

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease-luxe) 0.15s,
    transform 1s var(--ease-luxe) 0.15s;
}

.sec5.is-inview .sec5__map {
  opacity: 1;
  transform: none;
}

.sec5__map-frame {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background: var(--onyx-soft);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--onyx) 62%, transparent);
  overflow: hidden;
}

.sec5__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(22%) brightness(0.92) contrast(1.06);
}

.sec5__map-pin {
  position: relative;
  margin-top: -64px;
  margin-left: clamp(14px, 1.6vw, 22px);
  margin-right: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  background: color-mix(in srgb, var(--onyx) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gold);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--onyx) 55%, transparent);
}

.sec5__map-pin-icon {
  flex: none;
  display: flex;
  color: var(--gold);
}

.sec5__map-pin-icon svg {
  width: 22px;
  height: 22px;
}

.sec5__map-pin-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ivory-dim);
}

.sec5__map-pin-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ivory);
}

.sec5__map-pin-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe);
}

.sec5__map-pin-link svg {
  width: 13px;
  height: 13px;
}

.sec5__map-pin-link:hover {
  gap: 11px;
  color: var(--gold-soft);
}

/* ---- Panel column ---- */
.sec5__panel {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease-luxe) 0.25s,
    transform 1s var(--ease-luxe) 0.25s;
}

.sec5.is-inview .sec5__panel {
  opacity: 1;
  transform: none;
}

/* Tabs — underline directory, not pills */
.sec5__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(20px, 2.6vw, 36px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
}

.sec5__tab {
  background: transparent;
  border: none;
  padding: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  position: relative;
  transition: color 0.35s var(--ease-luxe);
}

.sec5__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transition: right 0.4s var(--ease-luxe);
}

.sec5__tab-index {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--gold-soft);
}

.sec5__tab:hover {
  color: var(--ivory);
}

.sec5__tab.is-active {
  color: var(--ivory);
}

.sec5__tab.is-active::after {
  right: 0;
}

/* Ledger stage — one list visible, crossfaded on switch */
.sec5__stage {
  position: relative;
  margin-top: clamp(6px, 0.8vw, 10px);
}

.sec5__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-luxe),
    transform 0.5s var(--ease-luxe);
}

.sec5__list.is-prep {
  display: block;
}

.sec5__list.is-active {
  display: block;
  opacity: 1;
  transform: none;
}

.sec5__list.is-out {
  display: block;
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: 0.3s;
}

.sec5__row {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(15px, 1.8vw, 20px) 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ivory) 10%, transparent);

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease-luxe),
    transform 0.6s var(--ease-luxe),
    background 0.3s var(--ease-luxe);
}

.sec5__list.is-active .sec5__row {
  opacity: 1;
  transform: none;
}

.sec5__list.is-out .sec5__row {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition-delay: 0s !important;
  transition-duration: 0.22s !important;
}

.sec5__row:nth-child(1) { transition-delay: 0.04s; }
.sec5__row:nth-child(2) { transition-delay: 0.1s; }
.sec5__row:nth-child(3) { transition-delay: 0.16s; }
.sec5__row:nth-child(4) { transition-delay: 0.22s; }
.sec5__row:nth-child(5) { transition-delay: 0.28s; }
.sec5__row:nth-child(6) { transition-delay: 0.34s; }

.sec5__row:hover {
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}

.sec5__row:last-child {
  border-bottom: none;
}

.sec5__row-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.94rem, 1.15vw, 1.05rem);
  letter-spacing: 0.01em;
  color: var(--ivory);
}

.sec5__row-leader {
  flex: 1 1 24px;
  min-width: 24px;
  align-self: flex-end;
  height: 0;
  margin-bottom: 6px;
  border-bottom: 1px dotted color-mix(in srgb, var(--ivory) 24%, transparent);
  transition: border-color 0.3s var(--ease-luxe);
}

.sec5__row:hover .sec5__row-leader {
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
}

.sec5__row-time {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 62px;
  justify-content: flex-end;
}

.sec5__row-time-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  color: var(--gold);
  line-height: 1;
}

.sec5__row-time-unit {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.74rem;
  color: var(--ivory-muted);
}

/* ---------------------------------------------------------
   Tablet — stack, map no longer sticky
   --------------------------------------------------------- */
@media (max-width: 1000px) {
  .sec5__grid {
    grid-template-columns: 1fr;
  }

  .sec5__map {
    position: static;
  }

  .sec5__map-frame {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .sec5 {
    padding: clamp(60px, 15vw, 90px) 0 clamp(56px, 13vw, 84px);
  }

  .sec5__heading {
    font-size: clamp(1.7rem, 7.6vw, 2.3rem);
  }

  .sec5__map-frame {
    aspect-ratio: 4 / 3.4;
  }

  .sec5__map-pin {
    margin-top: -48px;
    flex-direction: column;
    align-items: flex-start;
  }

  .sec5__map-pin-link {
    align-self: flex-start;
  }

  .sec5__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sec5__tabs::-webkit-scrollbar {
    display: none;
  }

  .sec5__tab {
    flex-shrink: 0;
  }

  .sec5__row {
    flex-wrap: wrap;
  }

  .sec5__row-name {
    flex-basis: 100%;
  }

  .sec5__row-leader {
    display: none;
  }

  .sec5__row-time {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec5__list,
  .sec5__row {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}