/* Shirazi — contact (W4). Mechanic 6 as a LEFT-ANCHORED PLAQUE, deliberately NOT the
   centred full-measure card reservation uses. Contact is the arrival, not the invitation:
   the stage-bar facade keeps most of the frame, the sage inset narrows to a column that
   starts on the capsule header's own left rule, and the payload rank inverts — the address
   IS the display line, hours/email demote to caps meta under the hairline.
   Self-contained: contact.css and reservation.css never load together. */

/* ---- the arrival plate: a letterbox band, not reservation's full screen ---- */
.loc-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(76svh, 46rem);
  /* the site rail, reproduced as tracks: track 2 is the exact measure the capsule header
     and footer use, so the plaque's left edge lands on the site's left rule, not an
     arbitrary offset. No padding here — an abspos child's inset:0 resolves against the
     PADDING box, which would un-bleed the media. The plaque carries the offsets. */
  display: grid;
  grid-template-columns: minmax(var(--pad), 1fr) minmax(0, var(--cap)) minmax(var(--pad), 1fr);
  align-items: end;
  background: var(--ink);
}

.loc-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(.9) brightness(.8);
}

/* scrim weighted LEFT (reservation's is a plain vertical wash): it seats the plaque and
   leaves the facade legible on the right. The top pass keeps the capsule header readable. */
.loc-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 15, .5), rgba(10, 13, 15, 0) 30%),
    linear-gradient(100deg, rgba(10, 13, 15, .5), rgba(10, 13, 15, .06) 66%);
}

/* ---- the plaque ---- */
.loc-plaque {
  grid-column: 2;
  justify-self: start;
  width: min(34rem, 100%);
  margin-top: calc(var(--hdr-h) + var(--pad));
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  min-height: clamp(20rem, 12rem + 20vw, 30rem);
  padding: clamp(1.4rem, .9rem + 1.7vw, 2.6rem);
  background: var(--sage);
  color: var(--cream);
  display: grid;
  /* row 2 is the deliberate empty gap — ballena's air, kept */
  grid-template-rows: auto 1fr auto auto;
}

.loc-eyebrow {
  grid-row: 1;
}

/* the payload, promoted: address as the display line */
.loc-lead {
  grid-row: 3;
  display: grid;
  justify-items: start;
  gap: clamp(.55rem, .4rem + .5vw, .85rem);
}

.loc-addr {
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
}

.loc-sub {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.loc-cta {
  margin-top: clamp(.6rem, .35rem + .8vw, 1.15rem);
}

/* the payload, demoted: caps meta beneath the hairline */
.loc-meta {
  grid-row: 4;
  display: grid;
  gap: clamp(.7rem, .5rem + .4vw, 1rem);
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  padding-top: clamp(.9rem, .7rem + .5vw, 1.2rem);
  border-top: 1px solid var(--line-cream);
}

.loc-row {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: .2rem .9rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.loc-row dt {
  font-weight: 400;
}

.loc-row dd {
  font-weight: 300;
}

/* below ~640 the plaque fills the rail, so the 1fr air row would collapse against
   content: give it an explicit gap and let the meta stack label-over-value. */
@media (max-width: 640px) {
  .loc-plaque {
    min-height: 0;
    grid-template-rows: none;
    row-gap: clamp(1.75rem, 1rem + 4vw, 2.75rem);
  }

  .loc-eyebrow,
  .loc-lead,
  .loc-meta {
    grid-row: auto;
  }

  .loc-meta {
    row-gap: clamp(.9rem, .7rem + .6vw, 1.1rem);
  }

  .loc-row {
    grid-template-columns: minmax(0, 1fr);
  }
}