/* ---------------------------------------------------------------------
   Region guide page — Hakone.
   Loads AFTER css/styles.css and uses only the tokens defined there
   (--cream, --paper, --ink, --ink-soft, --indigo, --indigo-deep,
    --crimson, --gold, --teal, --border, --radius, --serif, --sans).
   No new colours are introduced here.
   --------------------------------------------------------------------- */

/* --- Hero: portrait illustration set beside the title ---------------- */
.guide-hero {
  background: var(--indigo-deep);
  background-image: radial-gradient(rgba(255, 253, 248, 0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--paper);
  padding: 48px 0 56px;
}
.guide-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}
.guide-hero-art {
  margin: 0;
  width: 100%;
  max-width: 460px;
  border: 1px solid rgba(255, 253, 248, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.guide-hero-art img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 38%;
}
.guide-hero-text { text-align: center; }
.guide-hero .eyebrow { color: var(--gold); }
.guide-hero h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.25;
  margin: 6px 0 10px;
}
.guide-hero p {
  color: rgba(255, 253, 248, 0.78);
  margin: 0 auto 20px;
  max-width: 48ch;
}

@media (min-width: 760px) {
  .guide-hero-inner { flex-direction: row; gap: 40px; }
  .guide-hero-art { width: 250px; flex: 0 0 250px; }
  .guide-hero-art img { aspect-ratio: 3 / 4; object-position: center; }
  .guide-hero-text { text-align: left; }
  .guide-hero p { margin-left: 0; }
}

/* --- Section headings -------------------------------------------------- */
.guide-section { padding-top: 56px; }
.guide-section > h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 6px 0 24px;
}

/* --- Quick entry guide ------------------------------------------------- */
.matcher-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 28px;
}
.matcher-card h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 6px 0 4px;
}
.matcher-card .lede { color: var(--ink-soft); font-size: 15px; margin: 0 0 4px; }

/* narrow screens scroll the table rather than crushing it to one word per line */
.matcher-scroll { overflow-x: auto; margin-top: 16px; }
.matcher-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 15px; }
.matcher-table th {
  background: var(--cream);
  color: var(--teal);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.matcher-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.matcher-table tr:last-child td { border-bottom: none; }

/* --- Facility cards ----------------------------------------------------- */
.facility-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
}
.card-media {
  flex: 0 0 auto;
  background: var(--cream);
  line-height: 0;
  border-bottom: 1px solid var(--border);
}
.card-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (min-width: 650px) {
  .facility-card { flex-direction: row; min-height: 333px; }
  .card-media {
    flex: 0 0 250px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .card-media img { aspect-ratio: auto; }
}
.card-content {
  padding: 26px;
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-content .btn-primary { align-self: flex-start; margin-top: 18px; }
.card-title { font-family: var(--serif); font-size: 21px; margin: 6px 0 0; }
.card-desc { font-size: 15px; color: var(--ink-soft); margin: 8px 0 0; }
.card-vibe { font-size: 14px; color: var(--teal); margin: 10px 0 0; }

/* --- Status stamps ------------------------------------------------------ */
.stamp {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius);
  margin: 0 6px 6px 0;
  border: 1px solid var(--crimson);
  color: var(--crimson);
  background: rgba(169, 50, 38, 0.05);
}
.stamp-indigo { border-color: var(--indigo); color: var(--indigo); background: rgba(43, 58, 92, 0.05); }
.stamp-teal   { border-color: var(--teal);   color: var(--teal);   background: rgba(31, 110, 92, 0.05); }

/* --- Traveller's note ---------------------------------------------------- */
.note {
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 36px 0 0;
  font-size: 15px;
}
.note .eyebrow { display: block; margin-bottom: 4px; }

/* --- Region list --------------------------------------------------------- */
.region-note { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; }
.region-row.is-soon { color: var(--ink-soft); }

/* --- Listings generated from data/hakone-facilities.json ------------------ */
.group-lede {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 24px;
  max-width: 60ch;
}

/* most properties have no artwork yet, so the media panel is optional */
.facility-card.no-media { min-height: 0; }
.facility-card.no-media .card-content { flex: 1 1 auto; }

.card-jp { font-size: 14px; color: var(--ink-soft); margin: 3px 0 0; }

.card-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--border);
}


/* Confidence is the most important thing on these cards: a traveller turned
   away at the door cares more about how sure we are than about the wording of
   the policy. Confirmed reads positive, everything else reads cautious. */
.stamp-plain { border-color: var(--border); color: var(--ink-soft); background: transparent; }
.conf-ok   { border-color: var(--teal);    color: var(--teal);    background: rgba(31,110,92,0.06); }
.conf-part { border-color: #a87c22;        color: #7d5c17;        background: rgba(201,147,46,0.10); }
.conf-warn { border-color: var(--crimson); color: var(--crimson); background: rgba(169,50,38,0.08); }
.conf-none { border-color: var(--border);  color: var(--ink-soft); background: transparent; }

/* --- Contact details, shown only where verified ---------------------------- */
.card-contact {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.card-contact .eyebrow { display: block; margin-bottom: 5px; }
.contact-links { margin: 0; font-size: 14px; }
.contact-links a { color: var(--crimson); text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }
.contact-tel { font-variant-numeric: tabular-nums; font-weight: 500; }
.contact-address { margin: 5px 0 0; font-size: 13px; color: var(--ink-soft); }
.contact-unverified { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* --- Card call to action --------------------------------------------------- */
.card-cta { align-self: flex-start; margin-top: 18px; }

/* --- Jump index ------------------------------------------------------------
   Colour-coded pills, filled rather than outlined: at a glance the reader sees
   how many routes exist and roughly how many places each holds. Each colour is
   the same one its group and stamps use, so the coding means something. */
.jump-index { padding-top: 40px; }
.jump-index .eyebrow { display: block; margin-bottom: 12px; }
.jump-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(36, 30, 27, 0.18);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.jump:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(36, 30, 27, 0.22);
  filter: saturate(1.15);
}
.jump:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(36, 30, 27, 0.18); }
.jump:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* the count rides along in its own well, so the number reads as data */
.jump-n {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.22);
  color: var(--paper);
}

.idx-open     { background: var(--teal); }
.idx-seal     { background: var(--crimson); }
.idx-private  { background: var(--indigo); }
.idx-swimwear { background: #2f6d86; }
.idx-check    { background: #7d5c17; }

@media (prefers-reduced-motion: reduce) {
  .jump, .jump:hover { transition: none; transform: none; }
}

/* so a jumped-to heading doesn't sit flush against the top of the viewport */
[id^="group-"] { scroll-margin-top: 24px; }

/* group heading links across to the homepage explainer for that category */
.group-explain {
  white-space: nowrap;
  color: var(--crimson);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 50, 38, 0.35);
}
.group-explain:hover { border-bottom-color: var(--crimson); }

/* small qualifier on a card, e.g. adults only — not a policy badge */
.card-flag {
  display: inline-block;
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
}

/* The operator's own policy wording, in Japanese. Set apart from the English
   summary because it has a second job: it is what you show at the front desk. */
.card-quote {
  margin: 10px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--indigo);
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-soft);
}