/* ============================================================
   SARAH AKRIDGE — the stays
   Loaded only by stays.html and the generated /stays/* pages.

   DIRECTION  a property book: one home per spread, photograph
              bleeding to the outer edge, facts set as a hairline
              row rather than a badge cluster.
   SIGNATURE  the availability ribbon — the next sixty nights
              drawn as a strip under each home, booked nights
              filled in navy, open nights left as paper. It is
              the one thing a visitor arrives wanting to know,
              drawn instead of written.

   ONE COLOUR RULE, enforced throughout this file: gold means
   AVAILABLE and nothing else. Not a heading, not a rule, not a
   hover. If it is gold on this page you can book it.
   ============================================================ */

/* ---------- masthead ---------- */
.stays-head { padding-bottom: var(--y-tight); }
.stays-head h1 { margin-bottom: 0; }
.stays-standfirst { align-self: end; }
.stays-standfirst .lede { font-size: var(--t-0); max-width: 40ch; }
.stays-head .numeral { font-size: clamp(8rem, 20vw, 22rem); }
.stays-body { padding-top: var(--y-tight); }

/* ---------- the list ---------- */
.stays-list { display: grid; gap: clamp(4rem, 9vw, 8rem); }

.stay-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

/* The photograph bleeds past the shell to the outer edge of the viewport.
   Alternating sides is what stops four homes reading as four identical cards —
   the uniform card grid is the exact pattern the rebuild of this site deleted. */
.stay-shot {
  display: block;
  margin-left: calc(-1 * var(--gutter));
  overflow: hidden;
  background: var(--cream-deep);
}
.stay-shot img { width: 100%; height: auto; object-fit: cover; }

.stay-row--flip { direction: rtl; }
.stay-row--flip > * { direction: ltr; }
.stay-row--flip .stay-shot {
  margin-left: 0;
  margin-right: calc(-1 * var(--gutter));
}

@media (hover: hover) {
  .stay-shot img { transition: transform 1.2s var(--ease); }
  .stay-row:hover .stay-shot img { transform: scale(1.028); }
}

.stay-copy { min-width: 0; }
.stay-name { margin-top: .5rem; }
@media (hover: hover) {
  .stay-name a { transition: color .4s var(--ease); }
  .stay-name a:hover { color: var(--gold-deep); }
}
.stay-copy .lede { margin-top: 1rem; max-width: 46ch; }
.stay-go { display: inline-flex; margin-top: 1.6rem; }

/* ---------- facts: a hairline row, not a badge cluster ---------- */
.stay-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.8rem 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stay-facts > div {
  flex: 1 1 0;
  min-width: 4.5rem;
  padding: .85rem 1rem .85rem 0;
}
.stay-facts > div + div {
  border-left: 1px solid var(--line-soft);
  padding-left: 1rem;
}
/* dd first, dt second — the number leads and the word explains it. Set with
   flex-direction rather than reordered markup, so the pairing stays valid. */
.stay-facts > div { display: flex; flex-direction: column-reverse; }
.stay-facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-2);
  line-height: 1;
  font-weight: 400;
}
.stay-facts dt {
  font-family: var(--label);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .45rem;
}
.on-navy .stay-facts, .navy .stay-facts { border-color: var(--line-navy); }
.on-navy .stay-facts dt, .navy .stay-facts dt { color: var(--on-navy-mute); }

/* ---------- SIGNATURE: the availability ribbon ---------- */
.ribbon { margin-top: 1.6rem; }

/* Until stays.js has a real answer, the ribbon is a sentence. It is never a
   strip of sixty open nights drawn on a guess — that is a lie that sells the
   same night twice. */
.ribbon-fallback {
  font-size: .82rem;
  color: var(--ink-mute);
  margin: 0;
}

.ribbon-strip {
  display: flex;
  gap: 2px;
  height: 34px;
  align-items: stretch;
}
.ribbon-day {
  flex: 1 1 0;
  min-width: 0;
  background: var(--gold);
  border-radius: 1px;
  position: relative;
}
.ribbon-day.is-busy { background: var(--navy); opacity: .22; }
/* The first of each month gets a taller tick, so sixty nights still read as
   "most of June" rather than as an undifferentiated bar. */
.ribbon-day.is-first::before {
  content: "";
  position: absolute;
  inset: -6px 0 -6px 0;
  background: inherit;
  opacity: inherit;
  border-radius: 1px;
}
.ribbon-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .95rem;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ribbon-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.ribbon-legend i {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
}
.ribbon-legend .k-open { background: var(--gold); }
.ribbon-legend .k-busy { background: var(--navy); opacity: .22; }

/* ---------- a single home ---------- */
.stay-head { padding-bottom: var(--y-tight); }
.stay-head .numeral { font-size: clamp(7rem, 17vw, 18rem); }
.stay-back { border-bottom: 1px solid var(--gold); padding-bottom: .1rem; }
.stay-head .kind { margin-left: .9rem; color: var(--ink-mute); }
.stay-facts--head { margin-top: 0; }

.stay-cover {
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--cream-deep);
}
.stay-cover img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.stay-cover figcaption {
  width: var(--shell);
  margin: .85rem auto 0;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.stay-copy-long p + p { margin-top: 1.1rem; }
.stay-copy-long { font-size: var(--t-1); line-height: 1.7; }
.stay-access { margin-top: 1.6rem !important; font-size: var(--t-0); }
/* Her own caveat about the photographs. Set quieter than the copy but not
   hidden — it is the reason the pictures look the way they do, and burying it
   would make the house look worse than it is. */
.stay-note {
  margin-top: 1.6rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold);
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

.stay-features li { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.stay-features li:last-child { border-bottom: 0; }

.stay-highs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.stay-highs h3 {
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 400;
  margin-bottom: .5rem;
}
.stay-highs p { font-size: .92rem; color: var(--ink-soft); }

/* ---------- gallery: every tile is the shape of its own photograph ----------
   Not one shared ratio. These twenty-six photos run from 1.75:1 to 3:4 inside
   a single house, and forcing them into a common frame is what made this site's
   images "zoomed in and blurry" the first time round. --ar carries the real
   ratio; nothing is cropped. */
/* Multi-column, not a grid.
   A grid forces rows, and rows force a common height — which is the whole
   problem with photographs whose ratios run from 1.75:1 to 3:4 inside one
   house. Columns let each picture keep its own height and pack underneath the
   last, so nothing is cropped and nothing is letterboxed into somebody else's
   shape. (The first attempt WAS a grid with a span-2 rule for landscape
   shots; in a house where every photo is 3:2 that made every tile span two
   columns and collapsed the gallery into one ragged column. Rendering it is
   the only way that shows up.) */
.stay-gallery {
  columns: 2;
  column-gap: clamp(1rem, 2.5vw, 2rem);
}
.stay-gallery figure {
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.stay-gallery img { width: 100%; height: auto; background: var(--cream-deep); }
@media (max-width: 720px) {
  .stay-gallery { columns: 1; }
}
.stay-gallery figcaption {
  margin-top: .6rem;
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- booking ---------- */
.stay-book .cal { margin-top: 1.8rem; }
.cal-fallback { font-size: .88rem; color: var(--on-navy-mute); margin: 0; }

.cal-months { display: grid; gap: 1.6rem; }
.cal-month caption {
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
  text-align: left;
  padding-bottom: .7rem;
}
.cal-month { width: 100%; border-collapse: collapse; }
.cal-month th {
  font-family: var(--label);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
  font-weight: 400;
  padding-bottom: .4rem;
}
.cal-month td { padding: 1px; text-align: center; }

.cal-day {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--on-navy);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cal-day[disabled] { cursor: not-allowed; }
/* Booked and past read the same way — struck through and dimmed — because they
   mean the same thing to the person choosing: not this night. */
.cal-day.is-busy, .cal-day.is-past {
  color: var(--on-navy-mute);
  opacity: .42;
  text-decoration: line-through;
}
.cal-day.is-open { color: var(--on-navy); }
@media (hover: hover) {
  .cal-day.is-open:hover { background: rgba(198,161,91,.22); }
}
.cal-day.is-picked { background: var(--gold); color: #221602; font-weight: 600; }
.cal-day.is-between { background: rgba(198,161,91,.24); }

.cal-hint {
  margin-top: .9rem;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
}
.cal-stale {
  margin-top: .8rem;
  font-size: .8rem;
  color: var(--on-navy-mute);
  border-left: 2px solid var(--gold);
  padding-left: .8rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.stay-form .opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.stay-nights {
  margin: -.6rem 0 1.4rem;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  min-height: 1.1em;
}
.stay-hint { margin: -.9rem 0 1.5rem; font-size: .78rem; color: var(--on-navy-mute); }
.form-msg { margin-top: 1.1rem; font-size: .88rem; color: var(--on-navy-mute); }
.form-msg.ok { color: var(--gold-light); }
.form-msg.bad { color: #F0B6A8; }
.sub-legal { margin-top: 1rem; font-size: .74rem; color: var(--on-navy-mute); }
.stay-form.busy { opacity: .6; pointer-events: none; }

/* ---------- prev / next ---------- */
.post-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.pn { display: block; min-width: 0; }
.pn.next { text-align: right; }
/* INK, not on-navy. This band is `.deep` — cream-deep, a LIGHT surface. The
   rules were lifted from the news post-nav, which sits on navy, and shipped
   cream text (#F1EADC) on a cream ground (#EBE2D2): a contrast ratio of about
   1.05:1, i.e. the link to the next home was invisible. Rendering it and
   measuring the computed colours is what found it; it looked completely
   correct in the source. */
.pn-lb {
  display: block;
  font-family: var(--label);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .5rem;
}
.pn-ttl {
  display: block;
  font-family: var(--display);
  font-size: var(--t-1);
  color: var(--ink);
  max-width: 22ch;
  transition: color .4s var(--ease);
}
.pn.next .pn-ttl { margin-left: auto; }
@media (hover: hover) { .pn:hover .pn-ttl { color: var(--gold-deep); } }
.pn-none { display: none; }

/* ---------- how it works ---------- */
.how-steps { counter-reset: step; display: grid; gap: 1.6rem; }
.how-steps li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line-navy);
}
.how-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
/* grid-row: span 2 is load-bearing, not decoration.
   The <li> is a two-column grid with THREE children. Without this the numeral
   takes (1,1), the <h3> takes (1,2) and the <p> wraps round to (2,1) — the
   3.2rem numeral column — where it renders one word per line. Spanning the
   numeral down both rows pushes the paragraph into column 2 where it belongs.
   Caught by rendering it; a code read shows nothing wrong. */
.how-n {
  grid-row: span 2;
  font-family: var(--display);
  font-size: var(--t-1);
  color: var(--gold);
  line-height: 1.2;
}
.how-steps h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-1);
  margin-bottom: .35rem;
}
.how-steps p { font-size: .92rem; color: var(--on-navy-mute); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .stay-row, .stay-row--flip { grid-template-columns: 1fr; direction: ltr; }
  .stay-shot,
  .stay-row--flip .stay-shot {
    /* Full-bleed both sides on a phone — an image inset by one gutter and
       bleeding off the other looks like a layout fault at this width. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }
  .stay-shot img { max-height: 58vh; }
  .cal-months { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .cal-months { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .stay-facts > div { flex-basis: 50%; }
  .stay-facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .post-nav-grid { grid-template-columns: 1fr; }
  .pn.next { text-align: left; }
  .pn.next .pn-ttl { margin-left: 0; }
  .stay-cover figcaption { width: 90vw; }
}