/*
 * The place tier — one page per place, and the cards that link to them.
 *
 * Propshaft bundles every file in this directory (see the note at the top of application.css), so
 * this needs no import. Tokens only: nothing here defines a colour of its own.
 */

/* ------------------------------------------------------------- Place cards --- */
/* A card, not a chip: a place needs three lines (which one, what kind and where, who it suits)
   where a guide page needs only its title. */
.place-card {
  display: block; padding: 14px 15px 15px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.place-card:hover { border-color: var(--spark-border); }

.place-card__title { display: block; font: 600 14px/1.35 var(--font-sans); color: var(--spark); }

/* Mono and tracked, the way this design system prints every label. */
.place-card__kind {
  display: block; margin-top: 5px;
  font: 400 9.5px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2);
}

.place-card__best { display: block; margin-top: 7px; font: 400 12.5px/1.5 var(--font-sans); color: var(--muted); }

/* ------------------------------------------------------------ Best for ------ */
.place-best-for {
  margin: 18px 0 0; padding: 12px 14px;
  background: var(--well); border-left: 2px solid var(--spark-border); border-radius: 0 7px 7px 0;
  font: 400 14px/1.55 var(--font-sans); color: var(--bone);
}
.place-best-for__label {
  font: 600 9.5px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); margin-right: 8px;
}

/* ------------------------------------------------------------- Highlights --- */
.place-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.place-tags__tag {
  padding: 5px 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  font: 500 12px/1.3 var(--font-sans); color: var(--muted);
}

/* One column on a phone: two place cards side by side gives each about 150px. */
@media (max-width: 620px) {
  .place-card { padding: 12px 13px 13px; }
}

/* ------------------------------------------------------- Content column --- */
/* The body + aside grid for every content page. It was an inline
   `grid-template-columns: 1fr 268px` with no breakpoint, so on a phone the 268px column pushed the
   page 200px wider than the screen: the masthead's burger sat off-screen and the aside was cut in
   half. */
/* minmax(0, 1fr), never a bare 1fr: a grid track's min-width defaults to `auto`, so the at-a-glance
   table's min-content width pushed the track wider than the screen. The masthead is sticky and
   therefore as wide as the body, so its right-hand burger went off-screen with it, and a phone was
   left with no navigation at all. */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.page-grid > * { min-width: 0; }

@media (min-width: 860px) {
  .page-grid { grid-template-columns: minmax(0, 1fr) 268px; gap: 40px; }
}

/* A long address or a long url still has to go somewhere. Scroll the table, never the page. */
.table-scroll { overflow-x: auto; }