/* Destination pages. Layered on styles.css, which owns the header, buttons
   and colour variables — this file only adds what the place lists need. */

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }

.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.crumbs a { color: var(--text-muted); }

/* Not `.hero` — styles.css already defines that for the landing page's hero
   section, and its `padding-top: 40px` survived into this image. `object-fit`
   only fills the content box, so those 40 points stayed the placeholder's
   colour and read as the photo failing to fill its frame. */
.dest-hero {
  /* `display: block` because an <img> is inline by default: it sits on the
     text baseline and line-height leaves a strip below it. */
  display: block;
  padding: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 20px;
  background: var(--surface-alt);
}

h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 6px; }
.lead { color: var(--text-muted); margin: 0 0 32px; }

.section { margin-bottom: 40px; }
.section h2 {
  font-size: 20px;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* "별점순" sits beside the heading rather than above the list: it qualifies
   the heading, and a reader should not have to look for what the order means. */
.by {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 3px 9px;
}

/* No ranking numbers: the order is distance, not quality, and a numbered list
   would read as a chart. The photo carries the row instead. */
.places { list-style: none; margin: 0; padding: 0; }
.places li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.places li:first-child { border-top: 0; }

.place-photo {
  display: block;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface-alt);
}
.place-photo-empty { border: 1px solid var(--border); }

.place-body { min-width: 0; flex: 1; }
.place-name { font-size: 16px; font-weight: 700; margin: 0 0 3px; }

address {
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.place-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-muted);
}
.tel { color: var(--text-muted); }

.map-link {
  display: inline-block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral-dark);
}

.empty { color: var(--text-muted); font-size: 14px; }

.attribution {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: -16px 0 40px;
}

.cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.cta h2 { font-size: 19px; margin: 0 0 8px; }
.cta p { color: var(--text-muted); margin: 0 0 20px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 520px) {
  h1 { font-size: 25px; }
  .wrap { padding: 20px 16px 56px; }
  /* The thumbnail keeps its aspect but gives the name room to breathe — at
     this width a 96px square leaves about eight characters per line. */
  .place-photo { flex-basis: 72px; width: 72px; height: 72px; }
}