/* ──────────────────────────────────────────────────────────────────────────
   guide.css — destination guides and long articles only.
   Linked from templates/destination.html and the eleven article templates.
   Loaded after styles.css and before redesign.css, so anything that has to beat
   redesign.css is written with an extra class of specificity on purpose.
   Site-wide styles live in styles.css / redesign.css and are never edited here.
   Added 2026-09-16 for the site review fixes (place-card text, photo repeats,
   jump-to-section list, lead-photo crop).
   ────────────────────────────────────────────────────────────────────────── */

/* ── "On this page" jump list ───────────────────────────────────────────────
   Every guide/article with five or more sections opens with one. Rendered as a
   <details> so a phone can fold it down to a single 44px row; the inline script
   next to it folds it on narrow screens and leaves it open on a desktop. */
.pt-toc {
  max-width: 720px;
  margin: 0 auto 2.25rem;
  background: var(--white);
  border: 1px solid var(--earth-200);
  border-radius: var(--radius-lg);
  padding: 0 1.15rem;
}
.pt-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.55rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--forest-900);
}
.pt-toc > summary::-webkit-details-marker { display: none; }
.pt-toc > summary::after {
  content: '▾';
  font-size: 0.75rem;
  color: var(--forest-700);
  transition: transform 0.15s ease;
}
.pt-toc[open] > summary::after { transform: rotate(180deg); }
.pt-toc > summary:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 2px; }
.pt-toc-count {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-300);
  margin-left: auto;
  margin-right: 0.6rem;
}
.pt-toc-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
  border-top: 1px solid var(--earth-200);
  padding-top: 0.75rem;
}
.pt-toc-list li { break-inside: avoid; margin: 0; }
.pt-toc-list a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--forest-700);
  text-decoration: none;
}
.pt-toc-list a:hover { text-decoration: underline; }
.pt-toc-list a:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 2px; }
@media (max-width: 700px) {
  .pt-toc-list { columns: 1; }
  .pt-toc-list a { padding: 0.55rem 0; }
}

/* The site header is fixed, so a jumped-to heading has to clear it. */
.bh-city,
.pt-anchor { scroll-margin-top: calc(var(--nav-height) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Place cards ────────────────────────────────────────────────────────────
   The description under each place is the best writing on a guide page, so it
   runs to its natural length instead of being clipped at two lines. Same for
   the hotel note in the "where to stay" strip. */
.places-grid .tile-description,
.dest-hotels-strip .tile-description {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* Photo-free place card: used when the same photos already illustrate the
   written guide lower down the page, so the grid at the top becomes a compact
   index instead of showing every picture a second time. */
.places-grid .tile-card-text { cursor: default; }
@media (hover: hover) {
  .places-grid .tile-card-text:hover { transform: none; box-shadow: var(--shadow-md); }
}
.tile-text-badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.6rem;
  border-radius: 2rem;
  background: var(--earth-100);
  color: var(--forest-800);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tile-text-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--forest-900);
  margin: 0 0 0.5rem;
}
.tile-text-rating {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-300);
  margin-left: 0.45rem;
}

/* One hotel in the "where to stay" strip should not leave half a row empty. */
.dest-hotels-strip.is-single { grid-template-columns: minmax(0, 700px); justify-content: center; }
/* the base-hotel card spans two columns in the strip; with one column that span
   would conjure a second, empty track and stretch the card across the page. */
.dest-hotels-strip.is-single .tile-card-base { grid-column: 1; }

/* ── Lead photo ─────────────────────────────────────────────────────────────
   On a desktop the headline sits in the left half of the band and the crop keeps
   the top of the photo, because landmarks and skylines are framed high and the
   foreground under them is the expendable part.
   On a phone the headline block fills the whole band, so a photo behind it is
   only texture and its subject is lost twice over: the tall band cuts a 3:2
   photo down to the middle half of its width, and the dark wash for the white
   type hides whatever survives (Taipei 101 was a sliver at the left edge).
   Under 640px the photo is therefore shown whole, above the words: nothing is
   cropped out of any guide's lead photo and the wash is not needed. */
.dest-hero .dest-hero-img { object-position: center 22%; }
@media (max-width: 640px) {
  .dest-hero.dest-hero-photo { display: block; min-height: 0; background: var(--forest-900); }
  .dest-hero.dest-hero-photo::after { content: none; }
  .dest-hero .dest-hero-img { position: static; width: 100%; height: auto; aspect-ratio: auto; }
  .dest-hero .dest-hero-inner { padding: 1.6rem 1.35rem 1.7rem; }
}

/* The separator dots between "16 curated places", the read time and the date
   belong to the item in front of them, so a wrap can never start a line with a
   lone dot. Under 520px the three items stack and the dots go away entirely. */
@media (max-width: 520px) {
  .dest-hero .dest-hero-meta { flex-direction: column; gap: 0.3rem; }
  .dest-hero .dest-hero-meta span:not(:last-child)::after { content: none; }
}