/* Motor City Suites adjustments on top of the MoveInMetro layout. */

/* Hero copy sits in a column flex with align-items: flex-start, so a paragraph
   sizes to one long line and slides off a phone. Hold it to the column. */
.hero-split,
.hero-split .hero-copy { min-width: 0; max-width: 100%; }
.hero-split .wrap { min-width: 0; }
.hero-split .hero-copy { width: 100%; align-items: stretch; }
.hero-split .hero-copy > * { min-width: 0; max-width: 100%; }
.hero-split .lede,
.hero-split .reassure { width: 100%; max-width: min(34rem, 100%); }
@media (max-width: 860px) {
  .hero-split .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the search inside the header. The long wordmark was pushing Get matched over Text us. */
@media (min-width: 900px) {
  .site-header .wrap.hdr { gap: 0.65rem; }
  .wordmark { font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
  .hs { min-width: 0; }
  .hs-form.bar { max-width: none; }
  .hs-form.bar .s-bar,
  .hs-form.lead-form.bar .s-bar {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .hs-form.bar [data-card="when"] .s-body {
    left: 0;
    transform: none;
    width: min(40rem, 94vw);
  }
  .hs-form.bar .s-card,
  .hs-form.bar .s-head { min-width: 0; }
  .hs-form.bar .s-value { display: block; max-width: 100%; }
  .hs-form.bar .form-error { display: block; }
  .hs-form.bar [data-step="2"] {
    max-height: min(34rem, calc(100vh - 8rem));
    padding-top: 0.4rem;
  }
}

@media (min-width: 900px) and (max-width: 1400px) {
  .header-text { font-size: 0.92rem; }
  .hs-form.lead-form.bar .s-go-wide,
  .hs-form.bar .s-go-wide,
  .hs-form.bar .s-go-narrow { display: none; }
  .hs-form.bar .s-go-ico { display: inline; }
  .hs-form.bar .s-go {
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface);
  padding: 0.35rem 0 0.6rem;
}
.panel-bar h2 { padding-right: 0; }
.panel-bar .panel-x { position: static; flex: none; }

.month-wrap { position: relative; }
.month-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.5rem;
  width: 2.4rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface));
}
.month-hint { margin: 0.15rem 0 0; }

.tour { display: flex; flex-direction: column; gap: 3.25rem; }
.tour-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: -0.4rem 0 1.75rem; font-weight: 600; }
.tour-nav a { color: var(--ink); text-decoration: none; }
.tour-nav a:hover { text-decoration: underline; }
.tour-chapter { display: flex; flex-direction: column; gap: 0.85rem; scroll-margin-top: 6.5rem; }
@media (max-width: 860px) { .tour-chapter { scroll-margin-top: 8.75rem; } }
.tour-chapter h3 { font-size: var(--step-2); }
.modebar .mode-tabs { max-width: none; }
.modebar .mode-tabs a { white-space: nowrap; }
@media (max-width: 560px) {
  .modebar .mode-tabs { max-width: none; flex: 1 1 auto; }
  .modebar .mode-tabs a { font-size: 0.78rem; padding: 0 0.4rem; }
}
.tour-next { margin-top: 1.25rem; }
.tour-cta { margin: 1.25rem 0 0; }
.chapter-note { margin: 0; color: var(--muted); max-width: 40rem; }
.tour-grid { display: grid; gap: 1.35rem 1.1rem; grid-template-columns: 1fr 1fr; align-items: start; }
.tour-lead { grid-column: 1 / -1; }
.tour-portrait { grid-column: 1 / -1; width: min(32rem, 100%); justify-self: center; }
/* Keep the whole tower, with a little sky above the roof. Scale it down
   on a short window instead of cutting the building. */
.hero-split .hero-photo {
  justify-self: end;
  width: max-content;
  max-width: 100%;
}
.hero-split .hero-photo img.hero-full {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - 11.5rem);
  aspect-ratio: 511 / 640;
  object-fit: cover;
  object-position: center bottom;
}
.tour-grid figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.tour-grid img { width: 100%; height: auto; border-radius: 18px; background: var(--tint-2); display: block; }
.tour-grid figcaption { color: var(--muted); font-size: 0.98rem; max-width: 44rem; line-height: 1.45; }
@media (max-width: 700px) {
  .tour { gap: 2.4rem; }
  .tour-grid { grid-template-columns: 1fr; }
  .tour-lead { grid-column: auto; }
}

.place-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .place-grid { grid-template-columns: 1fr; } }
.place-map { border: 0; width: 100%; height: 320px; border-radius: 16px; background: var(--tint-3); }
.landmarks { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.landmarks li { margin: 0.25rem 0; }