/* =============================================================================
   location.css  —  Styles for the Location & Travel page (location.html)
   -----------------------------------------------------------------------------
   Loaded only by location.html, on top of styles.css. Warm "story" palette.
   Mostly practical information: fact lists, "getting here" ledger, hotel cards,
   and photography/video of Limelight Boulder. Sections: 1) Opening, 2) Venue,
   3) Getting here, 4) Parking, 5) Where to stay, 6) Boulder, 7) Close.
   ============================================================================= */

/* Page background (cream). */
main {
  background: var(--story-paper);
}

/* --------------------------------------------------------------------------
   1. Opening  (dark hero: headline + lede, plus an address card)
   -------------------------------------------------------------------------- */

.location-open {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  color: var(--story-white);
  background: var(--story-ink);
}

/* Headline/lede on the left, address card on the right. */
.location-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.72fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

.location-open h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.location-open__lede {
  max-width: 48ch;
  margin: 1.75rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
}

/* The bordered address card. */
.address-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 253, 248, 0.22);
}

/* Uppercase label inside the card. */
.address-card__label {
  margin: 0 0 0.9rem;
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Venue name. */
.address-card__name {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* The postal address (address element, un-italicised). */
.address-card address {
  margin: 0 0 1.5rem;
  color: rgba(255, 253, 248, 0.72);
  font-size: 1.05rem;
  font-style: normal;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   2. Venue  (copy + photo, key points, and a two-photo gallery)
   -------------------------------------------------------------------------- */

.venue {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-white);
}

/* Copy on the left, photo on the right. */
.venue__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.venue h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.venue__copy p {
  max-width: 54ch;
  margin: 0 0 1.25rem;
  color: var(--story-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
}

.venue__copy p:last-child {
  margin-bottom: 0;
}

/* The venue photo frame. */
.venue__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--story-paper);
}

/* Photos fill their frames (shared by the venue photo and the gallery). */
.venue__media img,
.venue-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venue__media img {
  object-position: 48% center;
}

/* Caption overlaid on the bottom of a venue/gallery photo. */
.venue__media figcaption,
.venue-gallery figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.75rem 1rem 0.8rem;
  color: var(--story-white);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  background: linear-gradient(to top, rgba(17, 17, 15, 0.78), transparent);
}

/* The 4-across list of venue "key points". */
.venue__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(3.5rem, 7vw, 5.5rem) 0;
  padding: 0;
  list-style: none;
}

/* Each point (top border). */
.venue__points li {
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--story-line);
}

.venue__points h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.venue__points p {
  margin: 0;
  color: var(--story-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* The two-photo gallery band (interior + view). */
.venue-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(0.45rem, 1vw, 0.85rem);
  padding: 0 clamp(0.45rem, 1vw, 0.85rem);
  background: var(--story-ink);
}

.venue-gallery figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: clamp(20rem, 42vw, 42rem);
}

/* Per-photo focal points. */
.venue-gallery__interior img {
  object-position: center center;
}

.venue-gallery__view img {
  object-position: 52% center;
}

/* --------------------------------------------------------------------------
   3. Getting here  (a numbered ledger of travel modes)
   -------------------------------------------------------------------------- */

.travel {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-paper);
}

.travel__head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.travel__head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.travel__head p {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--story-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.travel__list {
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--story-line);
}

/* One travel mode: index label on the left, details on the right. */
.mode {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1.68fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--story-line);
}

/* The small uppercase index (e.g. "By car"). */
.mode__index {
  margin: 0;
  color: var(--story-gold-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mode h3 {
  max-width: 34ch;
  margin: 0 0 0.7rem;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
}

.mode p {
  max-width: 56ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.mode .quiet-link {
  margin-top: 1.25rem;
}

/* Footnote under the travel list. */
.travel__note {
  max-width: 62ch;
  margin-block: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  color: var(--story-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Parking  (dark: copy + a facts list)
   -------------------------------------------------------------------------- */

.parking {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  color: var(--story-white);
  background: var(--story-ink);
}

.parking__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.parking h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.parking__copy p {
  max-width: 58ch;
  margin: 0 0 1.25rem;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}

.parking__copy p:last-child {
  margin-bottom: 0;
}

/* The parking facts list (same pattern as the opening facts). */
.parking__facts {
  margin: 0;
  border-top: 1px solid rgba(255, 253, 248, 0.22);
}

.parking__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 253, 248, 0.22);
}

.parking__facts dt {
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.parking__facts dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   5. Where to stay  (a row of photo-backed hotel cards)
   -------------------------------------------------------------------------- */

.stay {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-white);
}

/* Title on the left, the supporting line held to the top-right, so the two
   read as one header band above the cards. */
.stay__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.stay__head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.stay__head p {
  max-width: 34ch;
  margin: 0.4rem 0 0;
  color: var(--story-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* The 4-across grid of hotels. margin-block rather than the shorthand: the
   shorthand would reset the auto inline margin .container sets and drop the
   grid out of the centred column. */
.stay__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.hotel {
  min-width: 0;
}

/* Each hotel is a photo card: a cover photo, a legibility gradient over it,
   and the text on top. The photo is a real <img> rather than a CSS custom
   property so its relative src resolves against the document (a var()-based
   url() resolves against the stylesheet, which broke the paths). A card with
   no photo still reads as a finished dark card on its base colour. */
.hotel__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(22rem, 30vw, 30rem);
  height: 100%;
  padding: clamp(1.3rem, 1.7vw, 1.9rem);
  color: var(--story-white);
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background-color: #171310;
  box-shadow: 0 1px 2px rgba(17, 17, 15, 0.16);
  transition:
    transform 340ms var(--ease-out),
    box-shadow 340ms var(--ease-out);
}

/* The cover photo sits behind everything; the gradient rides just above it. */
.hotel__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The legibility gradient over the photo (darker top and bottom). */
.hotel__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(12, 9, 6, 0.72) 0%,
    rgba(12, 9, 6, 0.22) 34%,
    rgba(12, 9, 6, 0.42) 66%,
    rgba(12, 9, 6, 0.86) 100%
  );
}

/* Card hover: lift + stronger shadow. */
.hotel__card:hover,
.hotel__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(17, 17, 15, 0.28);
}

/* A gentle push-in on the photo answers the card lift. */
.hotel__photo {
  transition: transform 480ms var(--ease-out);
}

.hotel__card:hover .hotel__photo,
.hotel__card:focus-visible .hotel__photo {
  transform: scale(1.05);
}

/* Hotel name (top of the card). */
.hotel__name {
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 1px 12px rgba(12, 9, 6, 0.4);
}

/* Pushed to the foot of the card so the name holds the top corner and the
   note sits above the website line, as in the reference layout. */
.hotel__note {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 253, 248, 0.9);
  text-shadow: 0 1px 12px rgba(12, 9, 6, 0.5);
}

/* The website link at the bottom of the card. */
.hotel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.95rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--story-white);
  text-shadow: 0 1px 12px rgba(12, 9, 6, 0.5);
}

/* The link's arrow glyph. */
.hotel__mark {
  transition: transform 260ms var(--ease-out);
}

.hotel__card:hover .hotel__mark,
.hotel__card:focus-visible .hotel__mark {
  transform: translate(0.2rem, -0.2rem);
}

/* --------------------------------------------------------------------------
   6. Boulder  (an "about the town" section, optionally over drone footage)
   -------------------------------------------------------------------------- */

.boulder {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-paper);
}

/* Played over drone footage of the town the section is describing. The
   video sits behind everything, so the content needs a stacking context of
   its own to stay above it. */
.boulder--film {
  position: relative;
  isolation: isolate;
  color: var(--story-white);
  background: var(--story-ink);
}

/* Lift the content above the video. */
.boulder--film > .container {
  position: relative;
  z-index: 1;
}

/* The video layer. */
.boulder__film {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.boulder__film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heavy enough that body copy stays comfortable over moving footage —
   this section is read, not skimmed. */
.boulder__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(17, 17, 15, 0.92), rgba(17, 17, 15, 0.72) 50%, rgba(17, 17, 15, 0.88)),
    rgba(17, 17, 15, 0.3);
}

/* The rules and muted copy below are set against paper, and have to be
   restated for ink (the film variant). */
.boulder--film .boulder__body article {
  border-color: rgba(255, 253, 248, 0.22);
}

.boulder--film .boulder__body p {
  color: rgba(255, 253, 248, 0.74);
}

/* Heading on the left, article list on the right. */
.boulder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.boulder h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

/* Each article in the list (top divider). */
.boulder__body article {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--story-line);
}

/* Space between stacked articles. */
.boulder__body article + article {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.boulder__body h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* An inline link inside a Boulder article (heading link). */
.boulder__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  transition: color 240ms var(--ease-out);
}

.boulder__link:hover,
.boulder__link:focus-visible {
  color: var(--story-gold);
}

/* The link's arrow glyph. */
.boulder__mark {
  font-size: 0.8em;
  transition: transform 240ms var(--ease-out);
}

.boulder__link:hover .boulder__mark,
.boulder__link:focus-visible .boulder__mark {
  transform: translate(0.2rem, -0.2rem);
}

.boulder__body p {
  max-width: 56ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   7. Close  (closing call-to-action)
   -------------------------------------------------------------------------- */

.location-close {
  padding: clamp(4rem, 9vw, 7rem) 0;
  color: var(--story-white);
  background: var(--story-ink);
}

.location-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.location-close h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.location-close p {
  margin: 1rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tablet: venue key points become 2-across. */
@media (max-width: 1020px) {
  .venue__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow: stack the two-column layouts; hotels fold to 2-across. */
@media (max-width: 900px) {
  .location-open__inner,
  .venue__grid,
  .parking__inner,
  .boulder__grid {
    grid-template-columns: 1fr;
  }

  .boulder__grid h2 {
    margin-bottom: 0.5rem;
  }

  .venue__media {
    max-width: 26rem;
    aspect-ratio: 3 / 2;
  }

  .venue-gallery figure {
    min-height: clamp(19rem, 55vw, 32rem);
  }

  /* Header stacks; four hotel cards fold to two columns. */
  .stay__head {
    grid-template-columns: 1fr;
  }

  .stay__head p {
    max-width: 52ch;
  }

  .stay__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small phone: hotels stack to one column. */
@media (max-width: 640px) {
  .stay__list {
    grid-template-columns: 1fr;
  }

  .hotel__card {
    min-height: clamp(18rem, 62vw, 24rem);
  }
}

/* Phone: single-column gallery/points/modes; full-width close button. */
@media (max-width: 700px) {
  .venue-gallery {
    grid-template-columns: 1fr;
  }

  .venue-gallery figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .venue-gallery__view img {
    object-position: 58% center;
  }

  .venue__points {
    grid-template-columns: 1fr;
  }

  .mode {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .location-close__inner {
    align-items: flex-start;
  }

  /* The button's wrapper is a flex item, so it has to be told to fill the
     row before width:100% on the button itself means anything. */
  .location-close__inner > * {
    flex: 1 1 100%;
  }

  .location-close .cta {
    width: 100%;
    justify-content: center;
  }
}