/* =====================================================================
   PRESET SEARCH RAIL  (W1, 2026-09-05)
   ---------------------------------------------------------------------
   The Sierra "popular searches" cluster, done as a chart-plate rail
   instead of a card grid.

   Rendered by inc/preset-rail.php. Enqueued only on templates that
   actually call milner_preset_rail(); style.css is not touched.

   Palette: canon only.
     paper   #FAFBFC   mist  #EEF3F7   ink   #16283E
     channel #2E6FA3   grey  #64798C   live  #0FA3B1 (live states only)
   Zero gold-family hexes. No card shadows stacked into a grid; the rail
   is ruled type, which is what the design system asks for.
   ===================================================================== */

.preset-rail {
  --pr-paper: #FAFBFC;
  --pr-mist: #EEF3F7;
  --pr-ink: #16283E;
  --pr-channel: #2E6FA3;
  --pr-grey: #64798C;
  --pr-live: #0FA3B1;
  --pr-rule: rgba(22, 40, 62, 0.12);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  color: var(--pr-ink);
}

/* ---- blocks -------------------------------------------------------- */

.preset-rail__block { margin-bottom: 2.25rem; }
.preset-rail__block:last-child { margin-bottom: 0; }

.preset-rail__kicker {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pr-grey);
  margin-bottom: 0.5rem;
}

.preset-rail__heading {
  font-family: var(--font-editorial, var(--font-heading, 'Cormorant Garamond', serif));
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--pr-ink);
  margin: 0 0 0.5rem;
}
.preset-rail__heading--sm { font-size: 1.2rem; }

.preset-rail__note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pr-grey);
  margin: 0 0 1rem;
}

/* ---- preset links: ruled ledger, not cards -------------------------- */

.preset-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pr-rule);
}
.preset-rail__list li { border-bottom: 1px solid var(--pr-rule); }

.preset-rail__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.25rem;
  text-decoration: none;
  color: var(--pr-ink);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.preset-rail__link:hover,
.preset-rail__link:focus-visible {
  color: var(--pr-channel);
  padding-left: 0.6rem;
}
.preset-rail__link:focus-visible {
  outline: 2px solid var(--pr-channel);
  outline-offset: 2px;
}

/* Registry fallback links go to the search app, not an indexable page.
   Marked with a live dot so the difference is honest on screen. */
.preset-rail__link--search .preset-rail__label::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.45rem;
  border-radius: 50%;
  background: var(--pr-live);
  vertical-align: middle;
}

.preset-rail__label { flex: 1 1 auto; }
.preset-rail__arrow {
  flex: 0 0 auto;
  color: var(--pr-channel);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.preset-rail__link:hover .preset-rail__arrow,
.preset-rail__link:focus-visible .preset-rail__arrow {
  opacity: 1;
  transform: translateX(0);
}

.preset-rail__all {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
}
.preset-rail__all a {
  color: var(--pr-channel);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 111, 163, 0.35);
  padding-bottom: 1px;
}
.preset-rail__all a:hover { border-bottom-color: var(--pr-channel); }

/* ---- neighborhood chips -------------------------------------------- */

.preset-rail__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.preset-rail__chips a {
  display: inline-block;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--pr-rule);
  border-radius: 2px;
  background: var(--pr-paper);
  font-size: 0.82rem;
  color: var(--pr-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.preset-rail__chips a:hover,
.preset-rail__chips a:focus-visible {
  border-color: var(--pr-channel);
  color: var(--pr-channel);
}

/* ---- guides / tools ------------------------------------------------- */

.preset-rail__reads { list-style: none; margin: 0; padding: 0; }
.preset-rail__reads li { margin-bottom: 0.55rem; }
.preset-rail__reads li:last-child { margin-bottom: 0; }
.preset-rail__reads a {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--pr-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pr-rule);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.preset-rail__reads a:hover,
.preset-rail__reads a:focus-visible {
  color: var(--pr-channel);
  border-bottom-color: var(--pr-channel);
}

/* ---- booking card (ghost, not the page's solid CTA) ----------------- */

.preset-rail__card {
  background: var(--pr-mist);
  border-top: 2px solid var(--pr-ink);
  padding: 1.35rem;
}
.preset-rail__card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--pr-grey);
  margin: 0 0 1rem;
}
.preset-rail__cta {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--pr-ink);
  border-radius: 2px;
  background: transparent;
  color: var(--pr-ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.preset-rail__cta:hover,
.preset-rail__cta:focus-visible {
  background: var(--pr-ink);
  color: #fff;
}

/* =====================================================================
   VARIANT: rail  (sticky aside inside a two-column grid)
   ===================================================================== */

.preset-rail--rail {
  position: sticky;
  top: 6rem;
  align-self: start;
}
@media (max-width: 900px) {
  .preset-rail--rail {
    position: static;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pr-rule);
  }
}

/* =====================================================================
   VARIANT: band  (full-width section on single-column hub templates)
   ===================================================================== */

.preset-rail--band {
  display: block;
  background: var(--pr-mist);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.preset-rail--band .preset-rail__block { margin-bottom: 2.75rem; }
.preset-rail--band .preset-rail__block:last-child { margin-bottom: 0; }
.preset-rail--band .preset-rail__heading { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.preset-rail--band .preset-rail__heading--sm { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

/* The band renders the preset links as a multi-column ruled ledger so a
   19-link cluster reads as one instrument, not a wall. */
.preset-rail--band .preset-rail__list {
  column-count: 3;
  column-gap: 2.5rem;
  border-top: 1px solid var(--pr-rule);
}
.preset-rail--band .preset-rail__list li { break-inside: avoid; }
@media (max-width: 900px) { .preset-rail--band .preset-rail__list { column-count: 2; } }
@media (max-width: 600px) { .preset-rail--band .preset-rail__list { column-count: 1; } }

.preset-rail--band .preset-rail__chips { max-width: 70ch; }
.preset-rail--band .preset-rail__reads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 2.5rem;
}
@media (max-width: 900px) { .preset-rail--band .preset-rail__reads { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .preset-rail--band .preset-rail__reads { grid-template-columns: 1fr; } }

/* =====================================================================
   STAT STRIP  (Sierra's dated stat row, done honestly)
   ---------------------------------------------------------------------
   Rendered by inc/preset-stats.php. Tabular numerals so the digits line
   up in a row, display size on the number, quiet source line under it.
   ===================================================================== */

/* NAME COLLISION NOTE (found 2026-09-05 by looking at a deployed shot):
   style.css:6049 already defines a `.stat-strip` component as
   `display:grid; grid-template-columns:repeat(4,1fr)`. Naming this section
   .stat-strip made the browser apply that rule to the <section>, which
   turned it into a 4-column grid whose single child collapsed to a 180px
   track inside a 676px column. The numbers stacked in a thin ribbon and
   the mechanical battery still reported "strip present, 3 numbers".
   Namespaced to .milner-stats to keep the two components apart. */
.milner-stats {
  --pr-paper: #FAFBFC;
  --pr-mist: #EEF3F7;
  --pr-ink: #16283E;
  --pr-channel: #2E6FA3;
  --pr-grey: #64798C;
  --pr-live: #0FA3B1;
  --pr-rule: rgba(22, 40, 62, 0.12);
  display: block; /* defensive: never inherit a grid from a same-named rule */
  background: var(--pr-mist);
  padding-block: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
}

.milner-stats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  border-top: 1px solid var(--pr-rule);
  border-bottom: 1px solid var(--pr-rule);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}

.milner-stats__stat { display: flex; flex-direction: column; gap: 0.3rem; }

.milner-stats__num {
  font-family: var(--font-editorial, var(--font-heading, 'Cormorant Garamond', serif));
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--pr-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.milner-stats__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-grey);
}

.milner-stats__scope {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--pr-grey);
  max-width: 78ch;
}

/* ---- freshness stamp ------------------------------------------------ */

.milner-fresh {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--pr-grey, #64798C);
}
.milner-fresh__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pr-live, #0FA3B1);
  flex: 0 0 auto;
  animation: milner-fresh-pulse 2.4s ease-in-out infinite;
}
@keyframes milner-fresh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .milner-fresh__dot { animation: none; }
}

/* =====================================================================
   Neighborhood template side column.
   ---------------------------------------------------------------------
   page-neighborhood.php used to put .neighborhood-facts straight into
   .neighborhood-grid as the second column, and style.css made THAT box
   position:sticky. Now the facts box and the rail share one column, so
   the sticky behaviour has to move up to the wrapper. Without this the
   facts box would stick and the rail would scroll out from under it.
   ===================================================================== */

.neighborhood-side {
  position: sticky;
  top: 6rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* The content column now carries the stat strip and the listings strip,
   both of which are full-bleed <section> components. Unwrap their padding
   and containers in here so they sit flush in the column, same treatment
   as .preset-shell__main. */
.neighborhood-content > .milner-stats,
.neighborhood-content > .section-lux {
  padding-block: 0;
  margin-top: 2.5rem;
  background: transparent;
}
.neighborhood-content > .milner-stats > .container,
.neighborhood-content > .section-lux > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
.neighborhood-content .listings-strip__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .neighborhood-content .listings-strip__grid { grid-template-columns: 1fr; }
}
/* The strip is inside a column now, so its mist background would read as a
   stray block. Keep the rule lines, drop the fill. */
.neighborhood-content > .milner-stats .milner-stats__row {
  border-top: 1px solid var(--pr-rule, rgba(22, 40, 62, 0.12));
  border-bottom: 1px solid var(--pr-rule, rgba(22, 40, 62, 0.12));
}
.neighborhood-side .neighborhood-facts { position: static; top: auto; }
.neighborhood-side .preset-rail--rail { position: static; top: auto; }

@media (max-width: 900px) {
  .neighborhood-side {
    position: static;
    margin-top: 2.5rem;
  }
  .neighborhood-side .preset-rail--rail {
    margin-top: 0;
    padding-top: 2rem;
    border-top: 1px solid var(--pr-rule, rgba(22, 40, 62, 0.12));
  }
}

/* =====================================================================
   Two-column page shell used by the preset + community templates.
   ===================================================================== */

.preset-shell {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .preset-shell { grid-template-columns: 1fr; } }

.preset-shell__main { min-width: 0; }

/* milner_render_listings_strip() renders a full <section class="section-lux">
   with its own .container. Dropped inside the shell that double-pads and
   double-gutters. Unwrap it in here only; the component is untouched
   everywhere else on the site. */
.preset-shell__main > .section-lux { padding-block: 0; }
.preset-shell__main > .section-lux > .container,
.preset-shell__main > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
.preset-body { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* The shell's listings grid has less room than a full-bleed strip, so it
   drops to two columns before the global breakpoint would. */
.preset-shell__main .listings-strip__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .preset-shell__main .listings-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .preset-shell__main .listings-strip__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .preset-rail__link,
  .preset-rail__arrow,
  .preset-rail__chips a,
  .preset-rail__reads a,
  .preset-rail__cta { transition: none; }
}