/* ============================================================
   Shams Convention — Page-scoped layout
   Depends on: tokens.css, base.css, layout.css, components.css
   ============================================================ */

/* ---------- Hero (home) -----------------------------------
   A split layout, not the full-bleed landscape hero the Stitch landing
   screen drew. The only real photo of the venue is 720x1280 portrait,
   and stretching it across a 1440px hero would be visibly soft. This
   frames it at close to its native aspect instead.               */

.hero { padding-block: var(--s-8) var(--section-gap); }

.hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); }
}

.hero__copy { display: grid; gap: var(--s-3); justify-items: start; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* The keyword phrase lives inside the H1 for SEO but must read as a
   subtitle, not compete with the wordmark. Mono + small + wide tracking
   matches the system's label voice. */
.hero__title span {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(.6875rem, .58rem + .42vw, .875rem);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.6;
  color: var(--bronze-deep);
  margin-top: .9em;
  text-transform: uppercase;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

.hero__media {
  position: relative;
  aspect-ratio: 64 / 88;
  max-height: min(76vh, 700px);
  padding: 10px;
}

@media (min-width: 900px) { .hero__media { justify-self: end; width: 100%; } }

.hero__media .frame { height: 100%; border-radius: var(--r-lg); }

.hero__badge {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
}

/* Two-column text/media split, top-aligned. */
.split { display: grid; gap: var(--s-6); align-items: start; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
}

/* Facts strip under the hero. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--outline-variant);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--s-6);
}

@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.facts__item {
  background: var(--glass-fill-strong);
  padding: var(--s-3);
  display: grid;
  gap: .25rem;
  text-align: center;
}

.facts__value {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--bronze-deep);
  line-height: 1.2;
}

.facts__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* ---------- Bento gallery ---------------------------------
   Cells are sized so each photo sits near its native aspect ratio and
   object-fit barely has to crop. Tile 01 is the portrait exterior;
   02 and 03 are wide; 04-06 are landscape.                       */

.bento { display: grid; gap: var(--gutter); }

.bento > * { min-height: 260px; }

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 300px;
  }
  .bento > * { min-height: 0; }
  .bento__a { grid-column: span 5; grid-row: span 2; }
  .bento__b { grid-column: span 7; }
  .bento__c { grid-column: span 7; }
  .bento__d,
  .bento__e,
  .bento__f { grid-column: span 4; }
}

.bento .frame { height: 100%; }

/* The tile is a button so it is keyboard-reachable, not just clickable. */
.tile {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  cursor: zoom-in;
}

/* ---------- Pricing tiers --------------------------------- */

.tiers { display: grid; gap: var(--s-4); align-items: stretch; }

@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

/* Two-up variant. Without this the pair sits in columns 1 and 2 of a three-column
   grid and leaves a hole; the max-width stops two cards spanning the full 1440px. */
@media (min-width: 900px) {
  .tiers--2 { grid-template-columns: repeat(2, 1fr); max-width: 60rem; margin-inline: auto; }
}

.tier { position: relative; padding: var(--s-5) var(--s-4); }

.tier__head { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); }

.tier__name { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--bronze); }

.tier__price {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--on-surface);
  line-height: 1.15;
}

.tier__price small {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--on-surface-variant);
  margin-top: .25rem;
}

.tier__blurb { color: var(--on-surface-variant); font-size: var(--fs-small); }

.tier .ticks {
  border-top: 1px solid var(--outline-variant);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  flex-grow: 1;
}

.tier__cta { margin-top: var(--s-4); }

.tier--featured {
  border-color: rgba(179, 126, 95, .42);
  box-shadow: var(--shadow-lift), var(--bevel);
}

@media (min-width: 900px) { .tier--featured { transform: translateY(-12px); } }

.tier__flag {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}

/* ---------- Comparison table ------------------------------ */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}

.compare { min-width: 680px; font-size: var(--fs-small); }

.compare th, .compare td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  background: rgba(255, 255, 255, .55);
  border-bottom: 1px solid var(--outline-variant);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--bronze-deep);
  position: sticky;
  top: 0;
}

.compare tbody tr { border-bottom: 1px solid var(--outline-variant); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare tbody tr:hover { background: rgba(255, 255, 255, .45); }
.compare th[scope='row'] { font-weight: var(--fw-semibold); color: var(--on-surface); }
.compare td { color: var(--on-surface-variant); }

/* ---------- FAQ ------------------------------------------- */

.faq-layout { display: grid; gap: var(--s-6); }

@media (min-width: 1000px) {
  .faq-layout { grid-template-columns: 260px 1fr; gap: var(--s-8); align-items: start; }
}

.faq-rail { display: none; }

@media (min-width: 1000px) {
  .faq-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-3));
    padding: var(--s-3);
  }
}

.faq-rail a {
  display: block;
  padding: .625rem .875rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--on-surface-variant);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.faq-rail a:hover { color: var(--on-surface); background: rgba(255, 255, 255, .5); }

.faq-rail a.is-active {
  background: var(--bronze-wash);
  border-left-color: var(--bronze);
  color: var(--bronze-deep);
  font-weight: var(--fw-semibold);
}

.faq-section + .faq-section { margin-top: var(--s-8); }

.faq-section__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.faq-section__head svg { width: 22px; height: 22px; color: var(--bronze); flex-shrink: 0; }

/* ---------- Contact --------------------------------------- */

.contact-layout { display: grid; gap: var(--s-4); }

@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; }
}

.contact-side { display: grid; gap: var(--s-4); }

.info-grid { display: grid; gap: var(--s-4); }

@media (min-width: 600px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }

.map-panel {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  text-align: center;
  gap: var(--s-2);
}

/* Once a real map is embedded the panel stops being a centred call-to-
   action and becomes a frame: map on top, address and directions below. */
.map-panel--live {
  display: block;
  padding: 0;
  min-height: 0;
  text-align: left;
  overflow: hidden;
}

.map-panel--live iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 34vh, 360px);
  border: 0;
  /* The embed paints its own white; keep it from bleeding past the radius. */
  background: var(--surface-high);
}

.map-panel__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3);
  border-top: 1px solid var(--outline-variant);
}

/* ---------- CTA band -------------------------------------- */

.cta-band {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  justify-items: center;
  border-left: 3px solid var(--bronze);
}

@media (min-width: 800px) {
  .cta-band {
    grid-template-columns: 1fr auto;
    text-align: left;
    justify-items: start;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6);
  }
}

/* ---------- Prose (privacy / terms style pages) ----------- */

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-title); color: var(--bronze); margin-top: var(--s-5); }
.prose p, .prose li { color: var(--on-surface-variant); }
.prose p + p { margin-top: var(--s-2); }