/* "Getting around" — travel times from the apartments to the places guests actually search for.
   ONE stylesheet, loaded by both index.html (the 19 apartment pages) and /tonight/, because the
   markup itself is extracted from index.html at build time and must look identical on both.

   Why this exists: the ads run against Fenway, Gillette, the hospitals, graduation and Salem, but
   those words appeared on the landing pages only inside JSON-LD - invisible to a guest reading the
   page, and worth nothing to Google's landing-page-experience score. This puts the same facts on
   the screen, with real numbers rather than a claim of being "close to everything". The apartments
   are in Dorchester and Hyde Park, so honesty is the whole point: a guest who is told twenty
   minutes and finds twenty minutes does not cancel. */

.apt-getaround {
  width: min(1040px, 100%);
  margin: 18px auto 26px;
  padding: 20px 24px 18px;
  border: 2px solid var(--ga-ink, #18332f);
  border-radius: 22px;
  background: var(--ga-card, #fffdfa);
  color: var(--ga-ink, #18332f);
}

.apt-getaround-head {
  margin: 0 0 3px;
  font: 800 1.12rem/1.2 Georgia, "Times New Roman", serif;
}

.apt-getaround-note {
  margin: 0 0 14px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ga-soft, #4a5f5b);
}

/* Rows, not cards: a guest is comparing one number against another, and a list they can run their
   eye down beats six boxes. gap does the spacing so nothing collapses between siblings. */
.apt-getaround-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apt-getaround-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(24, 51, 47, .14);
}

.apt-getaround-list li:first-child { border-top: 0; }

.ga-place { font-weight: 750; font-size: .97rem; }

.ga-sub {
  grid-column: 1;
  margin: 2px 0 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ga-soft, #4a5f5b);
}

/* Times line up in a column, so tabular figures - otherwise "15" and "30" sit at different widths
   and the column looks crooked. */
.ga-time {
  grid-column: 2;
  grid-row: 1;
  font-weight: 800;
  font-size: .95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Per-neighbourhood figures. The hospital mileages and the Gillette run genuinely differ between
   Dorchester and Hyde Park, so both are written into the markup and the page shows the one that
   belongs to the apartment being viewed. /tonight/ lists both neighbourhoods at once and so keeps
   data-scope="all", which shows the range instead. */
.apt-getaround[data-scope="dorchester"] .ga-hp,
.apt-getaround[data-scope="dorchester"] .ga-both,
.apt-getaround[data-scope="hyde-park"] .ga-dot,
.apt-getaround[data-scope="hyde-park"] .ga-both,
.apt-getaround[data-scope="all"] .ga-dot,
.apt-getaround[data-scope="all"] .ga-hp { display: none; }


@media (max-width: 760px) {
  /* No left/right margins on a phone: they override the `auto` that centres the card, and they
     also made it narrower than the photos and reviews it sits under. Full container width lines
     its edges up with every other block on the page, and `auto` keeps it centred. */
  .apt-getaround {
    width: 100%;
    margin: 14px auto 22px;
    padding: 16px 16px 14px;
    border-radius: 18px;
  }
  .apt-getaround-list li { padding: 8px 0; }
  .ga-place { font-size: .93rem; }
  .ga-time { font-size: .9rem; }
}