/* KeepItDirect builder-owned fixes (Oct 19 2026). Loaded after the Down Yonder master CSS on every built site.
   Keep this small and scoped: it only fixes layout problems and styles builder-only sections. */

/* Long contact emails wrap inside their card instead of running past the edge (no ellipsis). */
.footer-grid > .footer-card { min-width: 0; }
.footer-card a.contact-line,
.book-meta a[href^="mailto:"] { overflow-wrap: anywhere; word-break: normal; }
/* Long emails (builder adds .has-long-email when the address is > 30 chars): give the contact card enough width for the
   address on one line. The column never shrinks below the email's one-line width; the after-@ wrap above stays as the
   phone fallback (single-column layout below 760px). */
@media (min-width: 760px) and (max-width: 1023px) {
  .footer-grid.has-long-email { grid-template-columns: minmax(0, 1fr) minmax(max-content, 1.2fr); }
  .footer-grid.has-long-email > .footer-card.listed-card { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {   /* small laptops: the short "Also listed on" card gives up width so the intro card isn't cramped */
  .footer-grid.has-long-email { grid-template-columns: minmax(0, 1.3fr) minmax(max-content, 1.3fr) minmax(0, .8fr); }
}
@media (min-width: 1280px) {
  .footer-grid.has-long-email { grid-template-columns: minmax(0, 1fr) minmax(max-content, 1.3fr) minmax(0, 1fr); }
}
@media (min-width: 760px) {
  .footer-grid.has-long-email .footer-card a.contact-line { white-space: nowrap; }
}

/* "Also listed on" buttons: on phones the Host Portal kit's flex-basis (8.5rem) turned each pill into a 136px-tall blob
   inside the master's column layout. Keep them normal-height pills below 640px. */
@media (max-width: 639px) {
  .footer-card .listed-btns .listed-btn { flex: 0 0 auto; }
}

/* ---------- Host local guide (only present when site.json has local_guide) ---------- */
.lg { margin-top: 1.25rem; }
.lg-head { padding: 1.4rem 1.5rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 1rem; }
.lg-head h3 { font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-bottom: .35rem; }
.lg-head p { color: var(--muted); }
.lg-groups { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .lg-groups { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
.lg-side { display: grid; gap: 1rem; min-width: 0; }
.lg-group { padding: 1.4rem 1.4rem .6rem; min-width: 0; }
.lg-group-title { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: .5rem; }
.lg-icon { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .65rem; background: var(--rose-soft); color: var(--rose); }
.lg-icon svg { width: 1.15rem; height: 1.15rem; }
.lg-list { list-style: none; display: grid; }
.lg-item + .lg-item { border-top: 1px solid var(--line); }
.lg-link { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .85rem .5rem; margin: 0 -.5rem; border-radius: .7rem; color: inherit; text-decoration: none; transition: background .15s ease; }
.lg-link:hover { background: var(--wash); }
.lg-link:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.lg-main { display: grid; gap: .15rem; min-width: 0; }
.lg-name { font-weight: 700; color: var(--ink); font-size: 1rem; }
.lg-note { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.lg-addr { display: flex; align-items: flex-start; gap: .3rem; color: var(--ink); font-size: .86rem; font-weight: 500; margin-top: .15rem; }
.lg-addr svg { flex: none; width: .9rem; height: .9rem; margin-top: .15rem; color: var(--muted); }
.lg-dir { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--rose); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.lg-dir svg { width: .95rem; height: .95rem; }
.lg-link:hover .lg-dir { border-color: var(--rose); }
.lg-foot { margin-top: .9rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 560px) {
  .lg-side { display: grid; gap: 1rem; min-width: 0; }
.lg-group { padding: 1.15rem 1.1rem .4rem; }
  .lg-link { flex-direction: column; align-items: stretch; gap: .6rem; }
  .lg-dir { align-self: flex-start; }
}

/* ---------- Headings: no lone orphan word (Oct 19 2026) ---------- */
h1, h2, h3, h4, .section-head h2, .hero h1 { text-wrap: balance; }
.section-head p, .hero .lede, .area-copy p, .lg-head p { text-wrap: pretty; }
/* Desktop: let section headings use a little more width so short titles stay on one line; intro text keeps its old measure. */
@media (min-width: 1024px) {
  .section-head { max-width: 50rem; }
  .section-head p { max-width: 40rem; margin-left: auto; margin-right: auto; }
}

/* ---------- "The stay" card: one label column, values left-aligned in their own column (Jarrod, Nov 1 2026) ----------
   Each row was its own flex line (space-between), so values started at a different x on every row and long ones wrapped
   under short labels. Rows now share the list's columns (subgrid; fixed 9.5rem label column where subgrid is missing).
   The facts/rules cards size to their own content instead of stretching to the taller neighbor. Phones: label above value. */
.facts { align-items: start; }
.kv-list { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1.25rem; }
.kv-list li { grid-column: 1 / -1; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1.25rem; justify-content: normal; align-items: baseline; }
@supports (grid-template-columns: subgrid) {
  .kv-list { grid-template-columns: max-content minmax(0, 1fr); }
  .kv-list li { grid-template-columns: subgrid; }
}
.kv-list li > span:first-child { white-space: nowrap; }
.kv-list li > strong { min-width: 0; text-align: left; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .kv-list, .kv-list li { grid-template-columns: minmax(0, 1fr); }
  .kv-list li { row-gap: .15rem; }
  .kv-list li > span:first-child { white-space: normal; font-size: .85rem; }
}