/* location.html page-scoped styles. Linked ONLY on location.html, after
   styles.css + pages.css, so later-order overrides win at equal specificity.
   Everything is loc- prefixed (or scoped under a loc- wrapper) so this file
   is inert if it ever loads elsewhere. Tokens come from styles.css. */

/* ---------- Hero: editorial left composition on a fixed photo band ---------- */

.loc-hero {
  /* NOT pinned (owner, 2026-08-02, same call as the elopement hero). The base
     .hero in styles.css is position:sticky with `main > :not(.hero)` carrying
     z-index 1, so the venue band below slides up OVER a parked hero, which read
     as the section below being stuck to the screen. The hero now scrolls away
     with the page and the photo is a FIXED backdrop instead. position:relative
     (not static) keeps it the containing block .loc-ticker is positioned
     against, and keeps a positioned box for the ::before layer. */
  position: relative;
  top: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 640px) auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(2.5rem, 7vw, 7rem);
  text-align: left;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: 4rem clamp(1.5rem, 6vw, 6rem) 7.5rem;
  background: #000;
  /* clips the fixed backdrop below to this section. Same idiom as
     .testimonials in styles.css, and for the same reason: it holds on iOS,
     where background-attachment: fixed silently falls back to scroll. */
  clip-path: inset(0);
}
/* The fixed photo layer. This hero declares no background of its own, so the
   photo here is the one it used to inherit from .hero in styles.css, carried
   over byte for byte (including the bare frame: unlike the base hero there is
   no .hero-shade element in this markup and no gradient, because this
   string-light frame is already dark enough to carry white type). */
.loc-hero::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("images/hero-crimson.jpg") center top / cover no-repeat #000;
}
.loc-hero-kicker { letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.85); margin-bottom: 1.6rem; }
.loc-hero .loc-hero-h1 { margin-bottom: 1.4rem; }
.loc-hero-in {
  font-size: 0.4em;
  letter-spacing: 0.32em;
  opacity: 0.85;
  vertical-align: 0.55em;
  margin-right: 0.4em;
}
.loc-hero-town {
  font-size: 1.55em;
  line-height: 0.9;
  color: #fff;
}
.loc-hero .pg-hero-actions { justify-content: flex-start; margin-top: 2rem; }

.loc-hero-marker {
  justify-self: start;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: clamp(1.3rem, 2.2vw, 2.2rem);
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.loc-marker-script { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: #fff; }
.loc-marker-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 0.85;
}
.loc-marker-label {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Venue ticker along the hero's top edge. Absolute against .loc-hero, which
   stays position:relative for exactly that reason. (It used to be described as
   covered by the content scrolling over the pinned hero; since the hero
   unpinned, the hero's bottom edge simply scrolls past like any section's.) */
.loc-ticker {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.95rem 0;
}
.loc-ticker-track { display: flex; width: max-content; }
.loc-ticker-run { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
.loc-ticker-run span {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.loc-ticker-run .loc-tick-star { color: #cbb6ae; font-size: 0.8rem; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .loc-ticker-track { animation: loc-tick 38s linear infinite; }
}
@keyframes loc-tick { to { transform: translateX(-50%); } }

/* ---------- Venue photo band: staggered offset trio ---------- */

.loc-venueband { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.loc-vb-grid { grid-template-columns: 1fr 1.28fr 1fr; align-items: start; }
.loc-vb-grid figure:nth-child(1) { margin-top: clamp(1.4rem, 3.5vw, 3rem); }
.loc-vb-grid figure:nth-child(1) .pg-frame img { filter: grayscale(1); }
.loc-vb-grid figure:nth-child(2) .pg-frame img, .loc-vb-grid figure:nth-child(2) .pg-frame video { aspect-ratio: 3 / 4; }
.loc-vb-grid figure:nth-child(3) { margin-top: clamp(2.8rem, 7vw, 6rem); }
.loc-venueband .loc-vb-grid figcaption { text-align: left; padding-left: 0.2rem; }

/* ---------- Venue guide garnish (shared picker classes stay) ---------- */

.loc-venues .pg-ven-item { justify-content: flex-start; }
.loc-venues .pg-ven-arrow { margin-left: auto; transition: opacity 0.3s, translate 0.3s; translate: -6px 0; }
.loc-venues .pg-ven-item.is-live .pg-ven-arrow { translate: 0 0; }
.loc-ven-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--rose);
  opacity: 0.75;
  min-width: 1.7em;
}
.loc-venues .pg-stage-media { overflow: hidden; }
.loc-note-venue {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
@media (prefers-reduced-motion: no-preference) {
  .loc-venues .pg-stage-media img.is-live { animation: loc-kb 16s ease-out both; }
}
@keyframes loc-kb { from { scale: 1; } to { scale: 1.08; } }

/* ---------- What-we-offer: level framed trio with gallery captions ----------
   Reuses the venue band's .pg-frame matting so the two photo moments on the
   page share one language. No stagger, no overlap plates (round 2026-07-24). */

.loc-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  align-items: start;
}
.loc-offer .pg-frame { transition: translate 0.4s ease; }
.loc-offer:hover .pg-frame { translate: 0 -4px; }
.loc-offer-caption { text-align: center; padding: 1.4rem 0.6rem 0; }
.loc-offer-caption h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.3vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.loc-offer-caption p {
  font-family: 'Raleway', var(--body);
  font-size: 0.925rem;
  line-height: 1.7;
  max-width: 34ch;
  margin: 0 auto 1rem;
}

/* ---------- Areas served: the page's inverted band ---------- */

.loc-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.loc-zone { border-left: 1px solid rgba(245, 243, 240, 0.3); padding-left: clamp(1rem, 2vw, 1.6rem); }
.loc-zone-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: rgba(245, 243, 240, 0.28);
  margin-bottom: 0.7rem;
}
.loc-zone h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.loc-zone p { font-family: 'Raleway', var(--body); font-size: 0.95rem; line-height: 1.7; opacity: 0.9; }
.loc-areas .pg-note { opacity: 0.92; }
.loc-areas .pg-chips span,
.loc-areas .pg-chips a { border-color: rgba(245, 243, 240, 0.4); }
.loc-areas .pg-chips a:hover { border-color: #cbb6ae; color: #cbb6ae; }

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .loc-hero {
    grid-template-columns: 1fr;
    /* Start BELOW the ticker band: centering pushes the kicker up under the
       marquee on real-iPhone 100svh (664px with Safari chrome), where the
       two collide. Top padding clears the ticker; tightened gaps + bottom
       padding keep the whole stack inside the hero box. (Still a 100svh box
       after the hero unpinned, so this constraint is unchanged.) */
    align-content: start;
    row-gap: 1.4rem;
    padding: 6rem 1.5rem 4rem;
  }
  /* The distance marker is desktop flavor: with the ticker band above and
     the kicker/H1/lede/CTA stack, it cannot also fit inside the 100svh hero
     at real-iPhone height (664px). Same pattern as the kit hiding
     .oc-reg-frame on small screens. */
  .loc-hero-marker { display: none; }
  .loc-hero-kicker { margin-bottom: 1.2rem; }
  .loc-hero .loc-hero-h1 { font-size: 9.375vw; }
  .loc-hero-town { font-size: 1.6em; }
  .loc-hero-marker {
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 1.2rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 1.2rem 0 0;
  }
  .loc-marker-script { grid-column: 1 / -1; }
  .loc-marker-num { font-size: 16vw; }
  .loc-venues .pg-head h2 .script { display: block; }
  .loc-vb-grid { grid-template-columns: 1fr; max-width: 340px; }
  .loc-vb-grid figure { margin-top: 0 !important; }
  .loc-vb-grid figure:nth-child(2) .pg-frame img, .loc-vb-grid figure:nth-child(2) .pg-frame video { aspect-ratio: 4 / 5; }
  .loc-offers { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .loc-zones { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .loc-ticker-track { animation: none; }
  .loc-venues .pg-stage-media img.is-live { animation: none; }
  .loc-offer .pg-frame { transition: none; }
  .loc-offer:hover .pg-frame { translate: 0 0; }
  .loc-venues .pg-ven-arrow { transition: none; translate: 0 0; }
}