/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT»
   pages/locations.css — dark cinematic Locations page.
   Hero: cinemascope 2.39 with scroll-driven letterbox bars.
   Then a pitch statement, a "doubles for" marquee, four full-width
   terrain plates and a B2B CTA. Tokens only — no hardcoded
   colour / size / duration. Load AFTER tokens/base/layout.
   ============================================================ */

/* ============================================================
   HERO — full-bleed cinemascope frame, content bottom-hung.
   The .lb bars (driven by app.js --lb-p) iris the full frame
   into a 2.39:1 crop as the page scrolls. Reduced motion pins
   them closed = a static scope frame.
   ============================================================ */

.loc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-letterbox);
}

.loc-hero__stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-frame);
}
.loc-hero__stage .xf__img {
  /* Slight scale so the frame never shows an edge as bars move */
  transform: scale(1.04);
}

/* Scrim: dark floor + a cold vignette so light type holds contrast */
.loc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-bg) 58%, transparent) 0%,
      transparent 26%,
      color-mix(in srgb, var(--c-bg) 30%, transparent) 55%,
      var(--c-bg) 100%),
    radial-gradient(120% 80% at 15% 100%,
      color-mix(in srgb, var(--c-bg) 72%, transparent) 0%,
      transparent 60%);
}

.loc-hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  /* Keep content inside the scope crop: clear of the bottom bar */
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: calc(var(--letterbox-h) + var(--sp-9));
}

.loc-hero__eyebrow { color: var(--c-text); }

.loc-hero__title {
  margin-top: var(--sp-5);
  max-width: 16ch;
}

.loc-hero__intro {
  margin-top: var(--sp-6);
  color: var(--c-text);
  max-width: 46ch;
}

.loc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-7);
  margin-top: var(--sp-7);
  color: var(--c-muted);
}
.loc-hero__meta span { display: inline-flex; gap: var(--sp-2); }

/* Scroll cue, pinned bottom-right inside the scope crop */
.loc-hero__scroll {
  position: absolute;
  z-index: var(--z-content);
  right: var(--gutter);
  bottom: calc(var(--letterbox-h) + var(--sp-7));
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
  writing-mode: vertical-rl;
}
.loc-hero__scroll::after {
  content: '';
  display: block;
  width: var(--bw);
  height: var(--sp-8);
  margin-top: var(--sp-3);
  margin-inline: auto;
  background: linear-gradient(180deg, var(--c-accent), transparent);
}
@media not (prefers-reduced-motion: reduce) {
  .loc-hero__scroll::after { animation: loc-scroll-pulse 2s var(--e-ease) infinite; }
}
@keyframes loc-scroll-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}
@media (max-width: 768px) { .loc-hero__scroll { display: none; } }

/* ============================================================
   PITCH — the "doubles for" statement, large, with an aside.
   ============================================================ */

.loc-pitch { border-bottom: var(--border); }

.loc-pitch__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: clamp(var(--sp-7), 5vw, var(--sp-11));
}

.loc-pitch__kicker { margin-bottom: var(--sp-6); }

.loc-pitch__quote {
  max-width: 22ch;
  font-size: var(--fs-quote);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h2);
  line-height: 1.08;
  text-wrap: balance;
}

.loc-pitch__sub {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.loc-pitch__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--border);
  list-style: none;
}
.loc-pitch__stats li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.loc-pitch__num {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-flat);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.loc-pitch__stats .t-label { max-width: 16ch; }

@media (max-width: 900px) {
  .loc-pitch__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .loc-pitch__quote { max-width: 26ch; }
}

/* ============================================================
   DOUBLES-FOR — cinematic marquee of stand-in regions.
   Reuses the shared .ticker component (cloned + paused on hover
   by app.js). The label sits above it.
   ============================================================ */

.loc-doubles {
  padding-block: var(--sp-9);
  border-bottom: var(--border);
}
.loc-doubles__label { margin-bottom: var(--sp-5); }
.loc-doubles .ticker__item { color: var(--c-text); }

/* ============================================================
   TYPES — four full-width cinematic plates.
   Media (2.39 scope frame) + editorial body, alternating side.
   ============================================================ */

.loc-types__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-9);
}

.loc-plates {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.loc-plate {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: clamp(var(--sp-6), 4vw, var(--sp-10));
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Alternate: even plates put the frame on the right */
.loc-plate:nth-child(even) .loc-plate__media { order: 2; }
.loc-plate:nth-child(even) .loc-plate__body  { order: 1; }

.loc-plate__media {
  position: relative;
  min-width: 0;
}

.loc-plate__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar-scope);
  background: var(--g-frame);
  border: var(--border);
  box-shadow: var(--sh-2);
}
.loc-plate__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.loc-plate:hover .loc-plate__frame > img { transform: scale(1.03); }

/* Inner letterbox hairlines to sell the scope framing */
.loc-plate__frame::before,
.loc-plate__frame::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--sp-3);
  background: var(--c-letterbox);
  z-index: var(--z-scrim);
  pointer-events: none;
}
.loc-plate__frame::before { top: 0; }
.loc-plate__frame::after  { bottom: 0; }

.loc-plate__cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.loc-plate__body { min-width: 0; }

.loc-plate__idx {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.loc-plate__num {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-flat);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.loc-plate__idx .t-label { color: var(--c-muted); }

.loc-plate__title { margin-bottom: var(--sp-4); }

.loc-plate__desc {
  color: var(--c-text);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 40ch;
}

.loc-plate__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--border);
}
.loc-plate__meta div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.loc-plate__meta .k {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.loc-plate__meta .v {
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.4;
}

/* ============================================================
   CTA — B2B panel: lead + a "beyond the four" list.
   Red-accented plate.
   ============================================================ */

.loc-cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: clamp(var(--sp-8), 5vw, var(--sp-11));
  padding: clamp(var(--sp-8), 5vw, var(--sp-11)) clamp(var(--sp-6), 5vw, var(--sp-10));
  background: var(--c-surface);
  border: var(--bw) solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  box-shadow: var(--sh-2);
}

.loc-cta__title {
  margin-top: var(--sp-5);
  max-width: 26ch;
}
.loc-cta__body {
  margin-top: var(--sp-6);
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text);
}
.loc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

.loc-cta__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  list-style: none;
}
.loc-cta__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: var(--border);
}
.loc-cta__row:first-child { padding-top: 0; border-top: 0; }
.loc-cta__k {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.loc-cta__v {
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.45;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .loc-cta__panel { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .loc-plate {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  /* Media always first on stacked layout */
  .loc-plate:nth-child(even) .loc-plate__media { order: 0; }
  .loc-plate:nth-child(even) .loc-plate__body  { order: 0; }
  .loc-plates { gap: var(--sp-10); }
}

@media (max-width: 560px) {
  .loc-hero__meta { gap: var(--sp-2) var(--sp-5); }
  .loc-plate__desc,
  .loc-cta__body,
  .loc-cta__v,
  .loc-pitch__sub { max-width: 100%; }
}