/* ============================================================
   Destination and theme pages (/destinations/<place>, /explore/<theme>),
   drawn by lib/collection-pages.js. They wear the hotel page's chrome:
   property.html's inline styles (.prop-hero, .prop-layout, .inquire-card…)
   and assets/sp-light.css. Here: the header's words, the hotels as a ruled
   index with a photograph each, the page links, the perks in the quote card,
   the questions and the links to every other collection.
   Square corners, hairlines, no shadows, no pills.
   A separate file on purpose: the pages are dated by their template's git
   date (lib/sitemap-dates.js), and a style change is not a content change.
   ============================================================ */

/* --- The header: where, what, how many ---------------------------------- */
.sp-light .coll-hero { padding-bottom: 4.6rem; }
.sp-light .coll-hero .container > * { position: relative; }
.sp-light .coll-hero h1 { max-width: 20ch; }
.sp-light .coll-blurb {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  font: 500 clamp(1.4rem, 2.1vw, 1.7rem)/1.3 var(--sp-serif);
  letter-spacing: -0.005em;
  color: var(--sp-ink);
  text-wrap: pretty;
}
.sp-light .coll-lead { max-width: 40rem; margin: 1.3rem 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--sp-ink-2); text-wrap: pretty; }
.sp-light .coll-hero__ctas { margin-top: 2.1rem; }

/* --- The list: a ruled index, a photograph beside each name -------------- */
.sp-light .coll-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; margin: 0 0 1.4rem; }
.sp-light .coll-list__head h2 { margin: 0; }
.sp-light .coll-meta { margin: 0; font-size: 0.86rem; color: var(--sp-ink-3); font-variant-numeric: lining-nums; }
.sp-light .coll-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-ink); }
.sp-light .coll-item { margin: 0; padding: 0; border-bottom: 1px solid var(--sp-line); }
.sp-light .coll-item::before { content: none; }
.sp-light .coll-item__link {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  column-gap: 1.7rem;
  align-items: center;
  padding: 1.15rem 0;
  color: var(--sp-ink);
  text-decoration: none;
}
.sp-light .coll-item__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sp-sand); }
.sp-light .coll-item__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sp-ease); }
.sp-light a.coll-item__link:hover .coll-item__photo img { transform: scale(1.04); }
.sp-light .coll-item__text { min-width: 0; }
.sp-light .coll-item__kicker { display: block; font: 600 0.66rem/1.4 var(--sp-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-ink-3); }
.sp-light .coll-item__name {
  margin: 0.4rem 0 0;
  font: 600 1.6rem/1.1 var(--sp-serif);
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.sp-light a.coll-item__link:hover .coll-item__name { text-decoration-color: currentColor; }
.sp-light .coll-item__detail { display: block; margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.5; color: var(--sp-ink-2); font-variant-numeric: lining-nums; }
.sp-light .coll-item__tags { display: block; margin-top: 0.15rem; font-size: 0.86rem; line-height: 1.5; color: var(--sp-ink-3); }

/* After the first twelve rows (lib/collection-pages.js PHOTO_ROWS) the list
   runs on as text, two to a row on the same hairlines: a Virtuoso photograph
   weighs about 540 KB, and a long list must stay light on a phone. */
.sp-light .coll-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
.sp-light .coll-item { grid-column: 1 / -1; }
.sp-light .coll-item--compact { grid-column: auto; }
.sp-light .coll-item--compact .coll-item__link { display: block; padding: 1rem 0 1.05rem; }
.sp-light .coll-item--compact .coll-item__name { margin-top: 0.3rem; font-size: 1.32rem; line-height: 1.15; }
.sp-light .coll-item--compact .coll-item__detail { margin-top: 0.3rem; }

/* Page links under a long list */
.sp-light .coll-pages { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem 1.6rem; margin: 2.2rem 0 0; font-size: 0.92rem; font-variant-numeric: lining-nums; }
.sp-light .coll-pages__nums { display: flex; flex-wrap: wrap; gap: 0.45rem 0.95rem; }
.sp-light .coll-pages a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.sp-light .coll-pages a:hover { text-decoration-color: var(--sp-ink); }
.sp-light .coll-pages [aria-current="page"] { padding-bottom: 2px; border-bottom: 1px solid var(--sp-ink); color: var(--sp-ink); font-weight: 600; }

/* --- The quote card: the four perks as a ruled list ---------------------- */
.sp-light .coll-perks { margin: 1.7rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-line-strong); }
.sp-light .coll-perks li { margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--sp-line); font-size: 0.88rem; line-height: 1.5; color: var(--sp-ink-3); }
.sp-light .coll-perks b { display: block; margin-bottom: 0.1rem; font: 600 1.15rem/1.2 var(--sp-serif); color: var(--sp-ink); }
.sp-light .inquire-card .coll-perks + .rate-note { margin-top: 1.1rem; padding-top: 0; border-top: 0; }
.sp-light .inquire-card .rate-note a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-ink-3); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* --- Questions: the homepage's ruled accordion -------------------------- */
.sp-light .coll-faq__list { border-top: 1px solid var(--sp-ink); }
.sp-light .coll-faq__list details { border-bottom: 1px solid var(--sp-line); }
.sp-light .coll-faq__list summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font: 600 1.4rem/1.22 var(--sp-serif);
  color: var(--sp-ink);
}
.sp-light .coll-faq__list summary::-webkit-details-marker { display: none; }
.sp-light .coll-faq__list summary::after { content: '+'; flex: none; font: 300 1.6rem/1 var(--sp-sans); color: var(--sp-ink-3); }
.sp-light .coll-faq__list details[open] summary::after { content: '\2212'; }
.sp-light .coll-faq__list details p { max-width: 62ch; margin: 0; padding: 0 0 1.45rem; font-size: 1rem; line-height: 1.7; color: var(--sp-ink-2); }

/* --- Every other destination and theme ---------------------------------- */
.sp-light .coll-more h2 { margin-bottom: 1.4rem; }
.sp-light .coll-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--sp-ink); }
.sp-light .coll-links ul { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.sp-light .coll-links li { margin: 0; padding: 0; }
.sp-light .coll-links li::before, .sp-light .coll-themes li::before { content: none; }
.sp-light .coll-links__label { margin: 0; font: 600 0.66rem/1.4 var(--sp-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-ink-3); }
.sp-light .coll-links__label--themes { margin-top: 2.8rem; }
.sp-light .coll-themes { display: flex; flex-wrap: wrap; gap: 0.2rem 1.7rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.sp-light .coll-more h2 + .coll-themes { margin-top: 0; padding-top: 1.3rem; border-top: 1px solid var(--sp-ink); }
.sp-light .coll-links a, .sp-light .coll-themes a {
  font: 600 1.3rem/1.65 var(--sp-serif);
  color: var(--sp-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.sp-light .coll-links a:hover, .sp-light .coll-themes a:hover { text-decoration-color: currentColor; }

/* --- When to go: Geisel's advice above the list --------------------------
   On one column property.html moves everything but the first section below
   the quote card; the advice and the list both stay above it, in that order. */
@media (max-width: 900px) {
  .sp-light .prop-main > .coll-when, .sp-light .prop-main > .coll-section { order: 1; }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 760px) {
  .sp-light .coll-hero { padding-bottom: 3.4rem; }
  .sp-light .coll-blurb { margin-top: 1.1rem; font-size: 1.32rem; }
  .sp-light .coll-lead { font-size: 1rem; }
  .sp-light .coll-hero__ctas .sp-btn { width: 100%; }
  .sp-light .coll-item__link { grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 1.05rem; align-items: start; padding: 0.95rem 0; }
  .sp-light .coll-item__name { margin-top: 0.3rem; font-size: 1.3rem; }
  .sp-light .coll-item__detail { margin-top: 0.3rem; font-size: 0.86rem; }
  .sp-light .coll-item__tags { font-size: 0.82rem; }
  .sp-light .coll-list { grid-template-columns: minmax(0, 1fr); }
  .sp-light .coll-item--compact .coll-item__link { padding: 0.85rem 0 0.9rem; }
  .sp-light .coll-item--compact .coll-item__name { font-size: 1.22rem; }
  .sp-light .coll-faq__list summary { font-size: 1.22rem; }
  .sp-light .coll-links { gap: 1.8rem 1.5rem; }
  .sp-light .coll-links a, .sp-light .coll-themes a { font-size: 1.2rem; }
}
@media (max-width: 359px) {
  .sp-light .coll-links { grid-template-columns: minmax(0, 1fr); }
}

/* --- Under a destination's list, when a Four Seasons hotel is on it ------
   (lib/collection-pages.js fsppNote): the link to the Preferred Partner page. */
.sp-light .coll-fspp { max-width: 40rem; margin: 1.6rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--sp-ink-2); }
.sp-light .coll-fspp a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-ink-3); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.sp-light .coll-fspp a:hover { text-decoration-color: var(--sp-ink); }