/* ad-hoc, not part of product: Bajala location page (location.html), redesign variant 1.
   Page-scoped additions only (prefix .loc-); every token, type style and component comes from style.css.
   Reused as is: .room-hero, .crumbs, .intro, .spec__key/.spec__title, .split--reverse, .details__tag,
   .band, .location__map-frame (the muted map embed). */

/* ==========================================================================
   01 Hero: the shared room hero, plus the pin + address line under the title
   ========================================================================== */
.loc-place {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: calc(var(--space-5) * -.5) 0 var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.loc-place .icon { font-size: .9375rem; flex: none; }

/* ==========================================================================
   02 Getting here + 03 Around Bajala: two editorial splits on the same 12-col grid,
   zig-zagging against the hero (hero photo right, map left, aerial right), so both text columns share
   the homepage split measure
   ========================================================================== */
/* 02: the map runs the full width (same 2px seam as the homepage tiles), then the three
   routes sit under it as three 4-column cells of the container grid */
.loc-way__map { margin-top: var(--space-8); padding-inline: var(--seam); }
.loc-way__frame { height: clamp(24rem, 62vh, 40rem); }
.loc-way__frame .location__map-frame {
  position: absolute;
  inset: 0;
}
.loc-way__list {
  margin: var(--space-6) auto 0;
  padding: 0;
  list-style: none;
}
.loc-way__item {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-4);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.loc-way__body {
  max-width: 24rem;
  margin-bottom: var(--space-3);
}
.loc-way__link { margin-top: auto; }

/* 03 follows a full-width section, so it opens with the section rhythm, not the 2px seam */
.loc-around { margin-top: var(--section-large); }
/* text on cols 1-5: the same left edge as the hero copy, the routes and the footer;
   col 6 stays empty as the gutter before the aerial (mirror of the room-details split) */
.loc-around .split__text { grid-column: 1 / span 5; }

.loc-near {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--space-6);
  border-top: var(--hairline-thin) solid var(--c-line);
}
.loc-near li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline-thin) solid var(--c-line);
}
.loc-near__num {
  flex: none;
  width: 1.5rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-text-3);
}
.loc-near__name {
  font-size: var(--fs-h4);
  line-height: 1.1;
}
.loc-near__text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.loc-near__note { margin-top: var(--space-3); }

/* ==========================================================================
   04 Need help finding us: centred title block on the alt band (like the homepage
   location section), then the seafront photo framed at the map's width
   ========================================================================== */
.loc-arrival {
  margin-top: var(--seam);
  padding: var(--section-main) 0 var(--section-large);
  background: var(--c-bg-2);
}
.loc-tel {
  color: var(--c-ink);
  white-space: nowrap;
  text-decoration: none;
}
.loc-tel:hover { text-decoration: underline; text-underline-offset: .2em; }
.loc-arrival__photo {
  width: calc(100% - (100% - var(--gutter) * 11) / 12 * 2 - var(--gutter) * 2);
  margin: var(--space-8) auto 0;
}
.loc-arrival__photo .media { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Responsive: the shared .split rules stack both blocks (text, then the map / aerial)
   ========================================================================== */
@media (max-width: 991px) {
  .loc-arrival__photo { width: 100%; }
}

@media (max-width: 767px) {
  .loc-way__item { grid-column: 1 / -1; padding-bottom: var(--space-4); }
  .loc-way__item + .loc-way__item { margin-top: 0; }
  .loc-way__frame { height: 26rem; }
}

@media (max-width: 767px) {
  .loc-arrival__photo .media { aspect-ratio: 4 / 3; }
}

@media (max-width: 599px) {
  .loc-near { grid-template-columns: minmax(0, 1fr); }
}