/* public/design/hm-discovery.css
 * ─────────────────────────────────────────────────────────────────────────
 * "Discovery" family (site redesign, step 3): the hotel template
 * (public/hotel.html, /hotels/:destination/:hotelSlug) and the generated
 * month pages (scripts/gen-month-pages.js, /hotels/:dest/:month-:year).
 * Requires hm-tokens.css.
 *
 * CONTRACT: every selector is scoped to `body.hm-discovery`, so this file
 * styles nothing until a page opts in by carrying that class. It restyles the
 * classes those templates already use -- the markup keeps every id, JS hook,
 * server-rendered value, affiliate link and structured-data block untouched.
 *
 * The two templates are deliberately kept in step: gen-month-pages.js says so
 * in its own header ("lifted from public/hotel.html -- keep the two templates
 * in step"), and they share .hero-grid, .cards, .card, .rail, .chips-bar,
 * .crumb, .stat, .sim and h2.sec. One stylesheet therefore serves both.
 *
 * TWO HERO VARIANTS, deliberately explicit. hotel.html is in the shell's
 * OVERLAY set (scripts/sync-site-chrome.js), so its hero sits *under* the
 * 64px transparent header and must keep clearing it. The month pages are not
 * overlay pages and start below a solid header. Because this file loads after
 * each page's inline <style> and outranks it, the offset cannot be left to the
 * page -- getting it wrong puts the header on top of the breadcrumb. The
 * modifier class hm-discovery--overlay carries the difference.
 *
 * COLOUR. Everything comes from hm-tokens.css with the token value repeated as
 * the literal fallback, as in hm-shell.css and hm-trips.css. Two accents used
 * on dark grounds only have no --hm- token and are taken unchanged from
 * public/brand.css, which names colours by ROLE and warns against introducing
 * a second name for an existing one:
 *   #8ad9b0  brand.css --accent-brightest, 9.57:1 on --hm-navy-deep
 *   #c9a84c  brand.css --gold,             6.96:1 on --hm-navy-deep
 * Neither is ever used for text on a light surface (gold is only 2.29:1 on
 * white). No new tokens were added for them.
 *
 * Breakpoints follow the documented system in hm-tokens.css: 1050 / 750 / 500.
 */

/* ── Page ground ───────────────────────────────────────────────────────── */
body.hm-discovery {
  background: var(--hm-cream, #faf9f6);
  color: var(--hm-ink, #0d2135);
  font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif);
}
body.hm-discovery .wrap {
  max-width: var(--hm-max-content, 1200px);
  margin: 0 auto;
  padding: 0 var(--hm-gutter, 40px);
  box-sizing: border-box;
}

/* ── Page heading and media: the prototype's light hotel page ─────────────
   (prototype site.css: .page-heading h1 55px, .facts, .dest-blank). Both
   templates now sit under the solid shell header; no overlay variant. */
body.hm-discovery .hero {
  background: var(--hm-cream, #faf9f6);
  color: var(--hm-ink, #0d2135);
  padding: 34px 0 10px;
  margin-top: 0;
}
body.hm-discovery .hero-grid,
body.hm-discovery .hero-inner {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 29px;
  align-items: start;
}
body.hm-discovery .hero-left,
body.hm-discovery .hero-right { min-width: 0; }

body.hm-discovery .crumb { font-size: 12px; margin-bottom: 20px; color: var(--hm-muted, #586976); }
body.hm-discovery .crumb a { color: var(--hm-green, #1a6b4a); text-decoration: none; }
body.hm-discovery .crumb a:hover { text-decoration: underline; }
body.hm-discovery .crumb span.sep { color: var(--hm-muted, #586976); margin: 0 4px; }
body.hm-discovery .crumb .here { color: var(--hm-muted, #586976); }

body.hm-discovery .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hm-green, #1a6b4a);
  margin-bottom: 10px;
}
body.hm-discovery .hero h1 {
  font: 400 55px/1.04 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -1px;
  color: var(--hm-ink, #0d2135);
  margin: 0 0 14px;
  text-wrap: balance;
}
body.hm-discovery .sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-muted, #586976);
  margin: 0 0 4px;
  max-width: 60ch;
}
body.hm-discovery .sub strong { color: var(--hm-ink, #0d2135); font-weight: 600; }
body.hm-discovery .sub a { color: inherit; }

/* Prototype .facts: a ruled row of labelled figures. */
body.hm-discovery .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 15px;
  margin: 22px 0;
  padding: 18px 0;
  border-block: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-discovery .stat .l {
  font-size: 11px;
  font-weight: 500;
  color: var(--hm-muted, #586976);
  margin-bottom: 7px;
}
body.hm-discovery .stat .v {
  font-size: 20px;
  font-weight: 500;
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .stat .v.teal { color: var(--hm-green-dark, #125038); font-weight: 700; }
body.hm-discovery .stat .v.strike { text-decoration: line-through; text-decoration-color: #97a69d; color: var(--hm-muted, #586976); }
body.hm-discovery .stat .v .u { font-size: 12px; font-weight: 500; color: var(--hm-muted, #586976); }

/* Media: the hotel's own scan photograph, rounded as the prototype's gallery. */
body.hm-discovery .hero-imgwrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--hm-radius-panel, 17px);
  overflow: hidden;
  background: #e4ebe3;
  display: block;
}
body.hm-discovery .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.hm-discovery .hero-cap { font-size: 12px; color: var(--hm-muted, #586976); margin-top: 8px; }
body.hm-discovery .hero-thumbs { display: flex; gap: 8px; margin-top: 10px; }
body.hm-discovery .hero-thumb {
  flex: 1 1 0;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border: 0;
  padding: 0;
  border-radius: var(--hm-radius-control, 8px);
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  background: #e4ebe3;
  transition: opacity var(--hm-fast, 150ms) ease;
}
body.hm-discovery .hero-thumb.on,
body.hm-discovery .hero-thumb:hover { opacity: 1; }
body.hm-discovery .hero-thumb.on { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: -2px; }
body.hm-discovery .hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.hm-discovery .hero-thumb:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 2px; }

/* ── Actions: the found deal and the watch strip ───────────────────────── */
body.hm-discovery .bookbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--hm-green, #1a6b4a);
  border-radius: var(--hm-radius-card, 14px);
  padding: 15px 20px;
  text-decoration: none;
  margin-bottom: 12px;
  min-height: var(--hm-control-min, 44px);
  transition: background var(--hm-fast, 150ms);
}
body.hm-discovery .bookbar:hover { background: var(--hm-green-dark, #125038); }
body.hm-discovery .bookbar .p { color: var(--hm-white, #fff); font-weight: 700; font-size: 17px; }
body.hm-discovery .bookbar .p .pill {
  background: rgba(255, 255, 255, .22);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--hm-radius-pill, 999px);
  vertical-align: 2px;
  margin-left: 8px;
}
body.hm-discovery .bookbar .p .d { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .9); margin-top: 3px; }
body.hm-discovery .bookbar .go { color: var(--hm-white, #fff); font-weight: 700; white-space: nowrap; }

body.hm-discovery .watch {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  padding: 12px 14px;
  max-width: 620px;
}
body.hm-discovery .watch .t { flex: 1; font-size: 14px; color: var(--hm-ink, #0d2135); }
body.hm-discovery .watch input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--hm-radius-control, 8px);
  border: 1px solid var(--hm-field-edge, #7f8c84);
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font-family: inherit;
  font-size: 14px;
  min-height: var(--hm-control-min, 44px);
  box-sizing: border-box;
}
body.hm-discovery .watch input::placeholder { color: #7b8a84; }
body.hm-discovery .watch input:focus { outline: none; border-color: var(--hm-green, #1a6b4a); box-shadow: 0 0 0 3px var(--hm-focus-glow, rgba(26, 107, 74, .16)); }
body.hm-discovery .watch button,
body.hm-discovery .watch a {
  padding: 10px 18px;
  border: none;
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  min-height: var(--hm-control-min, 44px);
  display: inline-flex;
  align-items: center;
}
body.hm-discovery .watch button:hover,
body.hm-discovery .watch a:hover { background: var(--hm-green-dark, #125038); }
body.hm-discovery .watch-msg { font-size: 13px; color: var(--hm-muted, #586976); margin-top: 8px; min-height: 17px; }

/* Request-a-scan box (hotel template, unknown hotel). */
body.hm-discovery .reqbox {
  margin-top: 20px;
  padding: 20px;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  max-width: 520px;
}
body.hm-discovery .reqbox input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--hm-radius-control, 8px);
  border: 1px solid var(--hm-field-edge, #7f8c84);
  background: var(--hm-white, #fff);
  color: var(--hm-ink, #0d2135);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 10px;
  min-height: var(--hm-control-min, 44px);
  box-sizing: border-box;
}
body.hm-discovery .reqbox button {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  min-height: var(--hm-control-min, 44px);
}

/* Chain brand row (logo.dev). Absent for ~95% of hotels: no gap when absent. */
body.hm-discovery .brandrow {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  padding: 12px 15px;
  margin-top: 18px;
  max-width: 620px;
}
body.hm-discovery .brandrow img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}
body.hm-discovery .brandrow .bt { font-weight: 700; font-size: 15px; color: var(--hm-ink, #0d2135); }
body.hm-discovery .brandrow .bs { font-size: 13px; color: var(--hm-muted, #586976); margin-top: 2px; }
body.hm-discovery .brandrow a.bl { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--hm-green, #1a6b4a); text-decoration: none; white-space: nowrap; }
body.hm-discovery .brandrow a.bl:hover { text-decoration: underline; }

/* ── Sticky section chips ──────────────────────────────────────────────── */
body.hm-discovery .chips-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--hm-cream, #faf9f6);
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-discovery .chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 13px 0; }
body.hm-discovery .chips a {
  font-size: 13px;
  font-weight: 600;
  color: var(--hm-muted, #586976);
  text-decoration: none;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-pill, 999px);
  padding: 8px 16px;
}
body.hm-discovery .chips a.on,
body.hm-discovery .chips a:hover {
  background: var(--hm-ink, #0d2135);
  border-color: var(--hm-ink, #0d2135);
  color: var(--hm-white, #fff);
}

/* ── Content grid and rail ─────────────────────────────────────────────── */
/* Prototype .hotel-detail-layout: content 1.4fr, stay card .8fr. */
body.hm-discovery .main {
  display: flex;
  gap: 29px;
  align-items: flex-start;
  /* Vertical only: .main shares its element with .wrap, whose side gutters
     must survive, or the content column drifts from the page heading. */
  padding-top: 26px;
  padding-bottom: 64px;
}
body.hm-discovery .cards {
  flex: 1.4;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.hm-discovery .card {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 15px;
  padding: 24px 26px;
  box-sizing: border-box;
}
body.hm-discovery .card.full { grid-column: 1 / -1; }
/* The 52 older month pages carry their priced answer as a bare <section class="sec">
   inside .cards rather than a .card.full; it must span the grid like the card
   it replaced, or it takes one cell and leaves a hole beside the next card. */
body.hm-discovery .cards > section.sec { grid-column: 1 / -1; margin: 0; }
body.hm-discovery .card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--hm-muted, #586976);
  font-weight: 700;
  margin: 0 0 12px;
}
body.hm-discovery .card .big {
  font-size: 20px;
  font-weight: 700;
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .card .meta {
  font-size: 13px;
  color: var(--hm-muted, #586976);
  margin-top: 6px;
  line-height: 1.55;
}
body.hm-discovery .card p { font-size: 14px; color: var(--hm-ink, #0d2135); line-height: 1.62; }
body.hm-discovery .card ul { margin: 0; padding-left: 1.15rem; }
body.hm-discovery .card li {
  font-size: 14px;
  color: var(--hm-ink, #0d2135);
  line-height: 1.62;
  margin: .4rem 0;
}
body.hm-discovery h2.sec {
  font: 400 30px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  letter-spacing: -.5px;
  color: var(--hm-ink, #0d2135);
  margin: 34px 0 14px;
  text-wrap: balance;
}
body.hm-discovery .card h2.sec { margin: 0 0 12px; }

/* The month pages' lead answer block (also the AI-answer region). */
body.hm-discovery .answer {
  background: var(--hm-mint, #edf3ee);
  border-left: 4px solid var(--hm-green, #1a6b4a);
  padding: 16px 18px;
  border-radius: 0 var(--hm-radius-control, 8px) var(--hm-radius-control, 8px) 0;
}
body.hm-discovery .answer p { margin: 0; font-size: 15px; line-height: 1.6; }

/* Prototype .sticky-book: the stay card, white, beside the content. */
body.hm-discovery .rail {
  flex: .8;
  min-width: 250px;
  max-width: 360px;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 15px;
  padding: 24px;
  position: sticky;
  top: 20px;
  color: var(--hm-ink, #0d2135);
  box-sizing: border-box;
}
body.hm-discovery .rail .l {
  font: 400 26px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  text-transform: none;
  letter-spacing: 0;
  color: var(--hm-ink, #0d2135);
  margin-bottom: 12px;
}
body.hm-discovery .rail .price {
  font-size: 32px;
  font-weight: 700;
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
body.hm-discovery .rail .price .u { font-size: 13px; color: var(--hm-muted, #586976); font-weight: 500; }
body.hm-discovery .rail .dates { font-size: 13px; color: var(--hm-muted, #586976); margin: 6px 0 18px; line-height: 1.55; }
body.hm-discovery .rail .dates strong { color: var(--hm-ink, #0d2135); }
body.hm-discovery .rail .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--hm-control-min, 44px);
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--hm-radius-control, 8px);
  padding: 12px;
  text-decoration: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
body.hm-discovery .rail .cta:hover { background: var(--hm-green-dark, #125038); }
body.hm-discovery .rail .ghost {
  display: block;
  border: 0;
  color: var(--hm-green, #1a6b4a);
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 12px;
  cursor: pointer;
}
body.hm-discovery .rail .ghost:hover { color: var(--hm-green-dark, #125038); }
body.hm-discovery .rail .fine { font-size: 12px; color: var(--hm-muted, #586976); line-height: 1.6; }

/* ── Dated example cards (hotel template) ──────────────────────────────── */
body.hm-discovery .ex-card .ex-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--hm-radius-pill, 999px);
  margin-bottom: 10px;
}
body.hm-discovery .ex-card .ex-tag.week {
  background: var(--hm-mint, #edf3ee);
  color: var(--hm-green-dark, #125038);
}
body.hm-discovery .ex-card .ex-tag.peak {
  background: var(--hm-amber-bg, #fbf5e9);
  color: var(--hm-amber, #875519);
}
body.hm-discovery .ex-card .ex-dates { font-size: 13px; color: var(--hm-muted, #586976); margin-bottom: 5px; }
body.hm-discovery .ex-card .ex-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .ex-card .ex-price small { font-size: 12px; font-weight: 500; color: var(--hm-muted, #586976); }
body.hm-discovery .ex-card .ex-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
body.hm-discovery .ex-card .ex-src { font-size: 12px; font-weight: 600; color: var(--hm-muted, #586976); }
body.hm-discovery .ex-card .ex-go {
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: var(--hm-radius-control, 8px);
  text-decoration: none;
  white-space: nowrap;
}
body.hm-discovery .ex-card .ex-go:hover { background: var(--hm-green-dark, #125038); }

/* ── Charts kept from production: sparkline, timeline, source bars ─────── */
body.hm-discovery .timeline-hint { font-size: 12px; color: var(--hm-muted, #586976); font-weight: 600; }
body.hm-discovery #tl { width: 100%; height: 170px; touch-action: none; cursor: ew-resize; }
body.hm-discovery .tl-read { font-size: 13px; color: var(--hm-muted, #586976); margin-top: 8px; }
body.hm-discovery .tl-read strong { color: var(--hm-ink, #0d2135); }
body.hm-discovery .bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
body.hm-discovery .bar-wrap .k { width: 70px; font-size: 12px; color: var(--hm-muted, #586976); text-transform: capitalize; }
body.hm-discovery .bar-wrap .tr {
  flex: 1;
  height: 6px;
  background: var(--hm-surface-muted, #eef2ef);
  border-radius: 3px;
  overflow: hidden;
}
body.hm-discovery .bar-wrap .tr i { display: block; height: 100%; background: var(--hm-green, #1a6b4a); }
body.hm-discovery .bar-wrap .n {
  font-size: 12px;
  font-weight: 700;
  color: var(--hm-ink, #0d2135);
  width: 30px;
  font-variant-numeric: tabular-nums;
}

/* Month-by-month comparison bars (month pages). */
body.hm-discovery .brow {
  display: grid;
  grid-template-columns: 112px 1fr 74px;
  align-items: center;
  gap: .6rem;
  margin: .35rem 0;
  font-size: 13px;
}
body.hm-discovery .brow .m { color: var(--hm-muted, #586976); }
body.hm-discovery .brow .p {
  text-align: right;
  font-weight: 700;
  color: var(--hm-ink, #0d2135);
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .brow.cur .m { font-weight: 700; color: var(--hm-ink, #0d2135); }
body.hm-discovery .bar { height: 22px; border-radius: 4px; background: var(--hm-green, #1a6b4a); }
body.hm-discovery .bar.lo { background: var(--hm-green, #1a6b4a); }
body.hm-discovery .bar.hi { background: var(--hm-amber, #875519); }
body.hm-discovery .bar.cur { background: var(--hm-ink, #0d2135); }
body.hm-discovery .legend { font-size: 12px; color: var(--hm-muted, #586976); margin: .7rem 0 0; line-height: 1.55; }

/* ── Accordions (hotel template detail sections) ───────────────────────── */
/* Prototype .faq-list: one white panel, ruled rows. */
body.hm-discovery details {
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: 13px;
  margin-bottom: -1px;
  overflow: hidden;
}
body.hm-discovery details + details { border-top-left-radius: 0; border-top-right-radius: 0; }
body.hm-discovery details:has(+ details) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.hm-discovery details summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--hm-ink, #0d2135);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
body.hm-discovery details summary::-webkit-details-marker { display: none; }
body.hm-discovery details summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--hm-muted, #586976);
  border-bottom: 2px solid var(--hm-muted, #586976);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--hm-fast, 150ms);
  flex: none;
}
body.hm-discovery details[open] summary::after { transform: rotate(225deg); margin-top: 2px; }
body.hm-discovery details .inner {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--hm-ink, #0d2135);
  line-height: 1.62;
}
body.hm-discovery details summary:focus-visible {
  outline: 2px solid var(--hm-green, #1a6b4a);
  outline-offset: -2px;
}

/* Price-history table inside the accordions. */
body.hm-discovery table.pt { width: 100%; border-collapse: collapse; font-size: 13px; }
body.hm-discovery table.pt th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hm-muted, #586976);
  padding: 8px;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
}
body.hm-discovery table.pt td {
  padding: 8px;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
  font-variant-numeric: tabular-nums;
}

/* Partner chips. */
body.hm-discovery .ota-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-control, 8px);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hm-ink, #0d2135);
  text-decoration: none;
  margin: 0 7px 7px 0;
  background: var(--hm-white, #fff);
}
body.hm-discovery .ota-chip:hover { background: var(--hm-mint, #edf3ee); border-color: var(--hm-green, #1a6b4a); }

/* ── Advisory notices kept from production ─────────────────────────────── */
body.hm-discovery .risknote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--hm-amber-bg, #fbf5e9);
  border: 1px solid var(--hm-amber, #875519);
  border-radius: var(--hm-radius-control, 8px);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--hm-amber, #875519);
  line-height: 1.55;
}
body.hm-discovery .risknote span:last-child { flex: 1; min-width: 0; }
body.hm-discovery .stormb {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hm-radius-pill, 999px);
  vertical-align: 1px;
  margin-left: 6px;
}
body.hm-discovery .stormb.peak { background: var(--hm-error-bg, #fef3f2); color: var(--hm-error, #b42318); }
body.hm-discovery .stormb.season { background: var(--hm-amber-bg, #fbf5e9); color: var(--hm-amber, #875519); }

/* FAQ pairs. */
body.hm-discovery .faq-q { font-weight: 600; color: var(--hm-ink, #0d2135); margin: 14px 0 4px; font-size: 15px; }
body.hm-discovery .faq-a { font-size: 14px; color: var(--hm-muted, #586976); line-height: 1.62; }

/* ── Similar hotels and month links ────────────────────────────────────── */
/* min-width:0 is load-bearing, not tidiness. .sim is a horizontally scrolling
   strip of fixed-width cards inside .card.full, which spans the whole .cards
   grid (grid-column: 1 / -1). A flex/grid item defaults to min-width:auto, so
   without this the strip's min-content -- every card plus every gap, measured
   842px -- becomes the floor for the .cards grid TRACK, and the whole card
   column inflates to 878px regardless of viewport. Measured on the month page:
   523px of horizontal overflow at 375 and 578px at 320, viewport-independent,
   because the floor came from the content rather than the screen. The same
   applies to the grid items that contain it. overflow-x:auto only contains the
   strip once the box is allowed to be narrower than its content. */
body.hm-discovery .cards > *,
body.hm-discovery .card.full { min-width: 0; }
body.hm-discovery .sim {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  min-width: 0;
  max-width: 100%;
}
body.hm-discovery .sim .s {
  position: relative;
  flex: 0 0 200px;
  background: var(--hm-white, #fff);
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-card, 14px);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
body.hm-discovery .sim .s:hover { border-color: var(--hm-green, #1a6b4a); box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08)); }
body.hm-discovery .sim .s img,
body.hm-discovery .sim .s .noimg,
body.hm-discovery .sim .s .ph {
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-surface-muted, #eef2ef);
  display: block;
  margin-bottom: 8px;
}
body.hm-discovery .sim .s .n { font-size: 14px; font-weight: 600; color: var(--hm-ink, #0d2135); line-height: 1.35; }
body.hm-discovery .sim .s .p {
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-green-dark, #125038);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .sim .s .rt {
  font-size: 11px;
  font-weight: 700;
  color: var(--hm-white, #fff);
  background: var(--hm-green, #1a6b4a);
  border-radius: var(--hm-radius-pill, 999px);
  padding: 2px 8px;
}
/* Chain badge over a similar-hotel card. */
body.hm-discovery .s img.blogo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: var(--hm-radius-control, 8px);
  background: var(--hm-white, #fff);
  padding: 3px;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(13, 33, 53, .22);
  box-sizing: border-box;
  margin-bottom: 0;
}

body.hm-discovery .mgrid { display: flex; gap: 10px; flex-wrap: wrap; }
body.hm-discovery .mlink {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--hm-line, #e3e6e2);
  border-radius: var(--hm-radius-control, 8px);
  padding: 11px 15px;
  text-decoration: none;
  background: var(--hm-white, #fff);
  min-width: 120px;
}
body.hm-discovery .mlink:hover { border-color: var(--hm-green, #1a6b4a); background: var(--hm-mint, #edf3ee); }
body.hm-discovery .ml { font-size: 13px; font-weight: 600; color: var(--hm-ink, #0d2135); }
body.hm-discovery .mp {
  font-size: 16px;
  font-weight: 700;
  color: var(--hm-green-dark, #125038);
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .mp .mu { font-size: 11px; font-weight: 500; color: var(--hm-muted, #586976); }

/* ── Floating dock (hotel template) ────────────────────────────────────── */
body.hm-discovery .dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  z-index: 900;
  pointer-events: none;
}
body.hm-discovery .dock-inner {
  pointer-events: auto;
  background: var(--hm-navy-deep, #09233d);
  border-radius: var(--hm-radius-pill, 999px);
  padding: 10px 11px 10px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--hm-shadow-raised, 0 12px 50px rgba(0, 21, 34, .22));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
body.hm-discovery .dock-inner .p { color: var(--hm-white, #fff); font-size: 14px; white-space: nowrap; }
body.hm-discovery .dock-inner .p strong { color: #8ad9b0; font-weight: 700; }
body.hm-discovery .dock-inner .w { color: rgba(255, 255, 255, .82); font-size: 13px; cursor: pointer; white-space: nowrap; }
body.hm-discovery .dock-inner .b {
  background: var(--hm-green, #1a6b4a);
  color: var(--hm-white, #fff);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--hm-radius-pill, 999px);
  text-decoration: none;
  white-space: nowrap;
}
body.hm-discovery .dock-inner .b:hover { background: var(--hm-green-dark, #125038); }

/* ── Server-rendered summary (crawler / no-JS view) ────────────────────── */
body.hm-discovery .ssr-sum { padding: 30px var(--hm-gutter, 40px) 10px; max-width: var(--hm-max-content, 1200px); margin: 0 auto; box-sizing: border-box; }
body.hm-discovery .ssr-sum h2 {
  font: 400 30px/1.15 var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  color: var(--hm-ink, #0d2135);
  margin-bottom: 12px;
}
body.hm-discovery .ssr-sum h3 { font-size: 16px; color: var(--hm-ink, #0d2135); margin: 24px 0 8px; }
body.hm-discovery .ssr-sum h4 { font-size: 15px; color: var(--hm-ink, #0d2135); margin: 18px 0 5px; }
body.hm-discovery .ssr-sum p { font-size: 14px; line-height: 1.62; color: var(--hm-ink, #0d2135); margin-bottom: 9px; }
body.hm-discovery .ssr-sum .ssr-note { font-size: 12px; color: var(--hm-muted, #586976); }
body.hm-discovery .ssr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
body.hm-discovery .ssr-tbl th,
body.hm-discovery .ssr-tbl td {
  text-align: right;
  padding: 8px 11px;
  border-bottom: 1px solid var(--hm-line, #e3e6e2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.hm-discovery .ssr-tbl thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hm-muted, #586976);
}
body.hm-discovery .ssr-tbl th[scope="row"],
body.hm-discovery .ssr-tbl thead th:first-child { text-align: left; font-weight: 600; }

/* ── Breakpoints: 1050 / 750 / 500 (see hm-tokens.css) ─────────────────── */
@media (max-width: 1050px) {
  body.hm-discovery .wrap { padding: 0 24px; }
  body.hm-discovery .ssr-sum { padding-left: 24px; padding-right: 24px; }
  body.hm-discovery .hero h1 { font-size: 48px; }
  body.hm-discovery h2.sec { font-size: 26px; }
  body.hm-discovery .rail { min-width: 210px; }
}

@media (max-width: 750px) {
  body.hm-discovery .wrap { padding: 0 var(--hm-gutter-mobile, 20px); }
  body.hm-discovery .ssr-sum { padding-left: var(--hm-gutter-mobile, 20px); padding-right: var(--hm-gutter-mobile, 20px); }
  body.hm-discovery .hero { padding: 24px 0 6px; }
  body.hm-discovery .hero-grid,
  body.hm-discovery .hero-inner { grid-template-columns: 1fr; gap: 20px; }
  body.hm-discovery .hero h1 { font-size: 44px; }
  body.hm-discovery .sub { font-size: 14px; }
  body.hm-discovery .stats { gap: 22px; }
  body.hm-discovery .stat .v { font-size: 22px; }
  body.hm-discovery .main { flex-direction: column; padding-top: 20px; }
  body.hm-discovery .cards { grid-template-columns: 1fr 1fr; width: 100%; }
  /* The rail is NOT restyled for small screens on purpose. Both templates hide
     it themselves below 820px (hotel.html's own @media block, and the same rule
     in gen-month-pages.js), and everything it carries is already on screen
     twice there: the hero book bar and the fixed dock both show the price and
     the same tracked booking link. Re-showing it would add a third copy of one
     figure, so this file leaves that long-standing behaviour alone. */
  body.hm-discovery .chips-bar { top: 0; }
  body.hm-discovery .brow { grid-template-columns: 92px 1fr 64px; }
}

@media (max-width: 500px) {
  body.hm-discovery .hero h1 { font-size: 38px; }
  body.hm-discovery h2.sec { font-size: 23px; }
  body.hm-discovery .cards { grid-template-columns: 1fr; }
  body.hm-discovery .stats { gap: 16px 26px; }
  body.hm-discovery .card { padding: 16px 17px; }
  body.hm-discovery .bookbar { flex-wrap: wrap; gap: 8px; }
  body.hm-discovery .watch { flex-wrap: wrap; }
  body.hm-discovery .watch input { flex: 1 1 100%; }
  body.hm-discovery .watch button,
  body.hm-discovery .watch a { flex: 1 1 100%; text-align: center; }
  body.hm-discovery .dock-inner { padding: 9px 9px 9px 16px; gap: 10px; }
  body.hm-discovery .dock-inner .p { font-size: 13px; }
  body.hm-discovery .dock-inner .b { padding: 9px 16px; font-size: 13px; }
  body.hm-discovery .brow { grid-template-columns: 78px 1fr 58px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hm-discovery .hero-thumb,
  body.hm-discovery .bookbar,
  body.hm-discovery details summary::after { transition: none; }
}

/* Image reuse policy (src/imagePolicy.js): provider photographs without documented permission
   are replaced by a neutral panel; the frame keeps its size so the layout does not move. */
body.hm-discovery .noimg { display: block; background: var(--hm-surface-muted, #eef2ef); }
body.hm-discovery .hero-imgwrap .noimg { width: 100%; height: 100%; }