/*
 * The redesigned town page (area-next.php), and nothing else.
 *
 * Loaded only by that template, and every rule is either prefixed .tp- or
 * scoped to .page-area-next, so nothing in here can reach the live town page.
 * That is the whole reason this is a separate file rather than a block at the
 * bottom of site.css.
 *
 * Colour, type and spacing come from the brand custom properties rendered by
 * brand_css_vars() onto :root. Nothing below hardcodes a colour: a second
 * agent's site is a token swap, and a hex value here would survive it.
 *
 * Two page-level measurements are tokens of their own, because three separate
 * rules have to agree about them: how tall the sticky site header is, and how
 * tall this page's own section nav is. Get either wrong and an anchor target
 * lands underneath the chrome.
 */

.page-area-next {
  --tp-header-h: 112px;   /* .hnav__inner min-height in site.css */
  --tp-nav-h: 52px;       /* .tp-nav__inner min-height below */
  --tp-section: clamp(2.5rem, 5vw, 4rem);
  --tp-hairline: 1px solid var(--c-line);
}

@media (max-width: 960px) {
  .page-area-next { --tp-header-h: 84px; }
}

/*
 * Reused sections are tightened to this page's rhythm.
 *
 * partials/town-search.php, partials/faq.php, partials/town-siblings.php and
 * the reading grid all carry .section, whose padding is the site-wide
 * clamp(4.5rem, 10vw, 9rem). Nine rem above and below every block put 288
 * pixels of nothing between two sections on the same background. This
 * overrides the padding for this page only, by body class, so the partials
 * themselves and the rule in site.css are both left alone.
 */
.page-area-next .section { padding: var(--tp-section) 0; }
.tp-section { padding: var(--tp-section) 0; }
.tp-section--muted { background: var(--c-paper-alt); }

/* An anchor target has to clear the site header and this page's nav strip. */
.tp-anchor { display: block; height: 0; overflow: hidden; }
.tp-anchor,
.tp-section[id],
.page-area-next .section[id] {
  scroll-margin-top: calc(var(--tp-header-h) + var(--tp-nav-h) + 1rem);
}

/* --- Hero ---------------------------------------------------------------- */

/*
 * Shorter than the live hero and split in two. The old one was most of a
 * screen of photograph with a name on it, which pushed everything a visitor
 * came for below the fold.
 */
.tp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 42vh, 460px);
  background: var(--c-paper-alt);
  overflow: hidden;
}
.tp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A shade under the type only, so the photograph stays a photograph. */
.tp-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-ink) 78%, transparent) 0%, color-mix(in srgb, var(--c-ink) 18%, transparent) 70%, transparent 100%);
}
.tp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  /* Room under the block for the glance tiles to overlap into. */
  padding-block: clamp(1.75rem, 4vw, 2.75rem) calc(clamp(1.75rem, 4vw, 2.75rem) + 2.5rem);
}
.tp-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
  color: var(--c-muted);
}
.tp-hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.tp-hero__lede {
  margin: 0.8rem 0 0;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.tp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}
.tp-hero--photo .tp-hero__eyebrow { color: color-mix(in srgb, var(--c-white) 72%, transparent); }
.tp-hero--photo .tp-hero__title { color: var(--c-white); }
.tp-hero--photo .tp-hero__lede { color: color-mix(in srgb, var(--c-white) 88%, transparent); }

/* The agent card. Solid, so it reads over a photograph or over a pale band. */
.tp-agent {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  background: var(--c-paper);
  border: var(--tp-hairline);
  border-radius: var(--s-radius);
}
.tp-agent__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.tp-agent__body > p { margin: 0; }
.tp-agent__name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--c-ink);
}
.tp-agent__role,
.tp-agent__broker {
  margin-top: 0.15rem !important;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--c-muted);
}
.tp-agent__call { margin-top: 0.5rem !important; }
.tp-agent__call a {
  font-family: var(--f-data);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 1px;
}
.tp-agent__call a:hover { color: var(--c-accent-deep); }

/* --- Glance tiles, overlapping the hero ---------------------------------- */

.tp-glance {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
}
.tp-glance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0;
  background: var(--c-paper);
  border: var(--tp-hairline);
  border-radius: var(--s-radius);
}
.tp-glance__tile {
  padding: 1.1rem 1.25rem;
  border-left: var(--tp-hairline);
}
.tp-glance__tile:first-child { border-left: 0; }
.tp-glance__tile dt {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tp-glance__tile dd {
  margin: 0.4rem 0 0;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  color: var(--c-ink);
}
.tp-glance__tile p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--c-body);
}
.tp-glance__source {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--c-muted);
}

/* --- Section nav --------------------------------------------------------- */

.tp-nav {
  position: sticky;
  /* Below the site header, which is sticky at 0 with z-index 60. */
  top: var(--tp-header-h);
  z-index: 40;
  margin-top: var(--tp-section);
  background: var(--c-paper);
  border-top: var(--tp-hairline);
  border-bottom: var(--tp-hairline);
}
.tp-nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  min-height: var(--tp-nav-h);
  overflow-x: auto;
  scrollbar-width: none;
}
.tp-nav__inner::-webkit-scrollbar { display: none; }
.tp-nav__link {
  flex: 0 0 auto;
  padding: 0.2rem 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
}
.tp-nav__link:hover { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.tp-nav__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* --- Section headings ---------------------------------------------------- */

.tp-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.tp-head .eyebrow { margin-bottom: 0.5rem; }
.tp-head__title {
  margin: 0;
  font-size: var(--t-display-m);
}
.tp-head__lede {
  margin: 0.7rem 0 0;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--c-body);
}
.tp-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.tp-sub {
  margin: 0 0 1rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.tp-note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* --- Intro band ---------------------------------------------------------- */

/*
 * The first thing under the hero and the tiles: a tinted band of prose at a
 * comfortable measure, with the agent's quote beside it on a wide screen.
 *
 * The measure is the point. Text set across a 1180px wrap is text nobody
 * finishes, so the reading column is capped at 70ch whether or not there is a
 * quote next to it.
 */
.tp-intro { background: var(--c-paper-alt); }
.tp-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 70ch) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* No approved quote for this town: the reading column keeps its measure
   rather than stretching to the full wrap. */
.tp-intro__grid--solo { grid-template-columns: minmax(0, 70ch); }

.tp-intro__body > .eyebrow { margin-bottom: 0.5rem; }
.tp-intro__heading {
  margin: 0 0 0.8rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--c-ink);
}
/* Today's medians. Set apart from the write-up above it, because one is
   approved prose about the place and the other is a figure built on request. */
.tp-intro__live {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-body);
}
.tp-intro__live + .source-note { margin-top: 0.4rem; }
/* The agent's own sentence, always visible, never inside a details. */
.tp-intro__agent {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: var(--tp-hairline);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-ink);
}
.tp-intro__note { padding-top: 0; }

/* The band already carries the page's top padding rhythm; the nav under it
   does not need its own gap as well. */
.tp-intro + .tp-nav { margin-top: 0; }

.tp-writeup__heading {
  margin: 0 0 0.8rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--c-ink);
}
.tp-writeup__lead,
.tp-writeup__more p {
  margin: 0 0 1rem;
  max-width: var(--s-measure);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-body);
}
.tp-writeup__more > summary {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  cursor: pointer;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
}
.tp-writeup__more[open] > summary { margin-bottom: 1.25rem; }
.tp-writeup__more > summary::-webkit-details-marker { display: none; }
.tp-writeup__sources {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.tp-writeup__sources a { color: inherit; }

/* --- Market report ------------------------------------------------------- */

.tp-market { background: var(--c-paper-alt); }

.tp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.tp-stat { padding-top: 1rem; border-top: 3px solid var(--c-ink); }
.tp-stat dt { font-size: 0.86rem; color: var(--c-muted); }
.tp-stat dd {
  margin: 0.35rem 0 0;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  color: var(--c-ink);
}
.tp-stat p {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-body);
}

.tp-market__split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.tp-bands__list { margin: 0; padding: 0; list-style: none; }
.tp-band {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.6rem 0;
  border-top: var(--tp-hairline);
}
.tp-band:last-child { border-bottom: var(--tp-hairline); }
.tp-band__label { font-size: 0.88rem; color: var(--c-ink); }
.tp-band__track {
  display: block;
  height: 10px;
  background: color-mix(in srgb, var(--c-ink) 8%, transparent);
}
/* Unitless custom property multiplied into a length, the same pattern
   partials/brief-bands.php uses. Nothing here needs script. */
.tp-band__fill {
  display: block;
  height: 100%;
  width: calc(var(--tp-w, 0) * 1%);
  background: var(--c-accent);
}
.tp-band__share {
  font-family: var(--f-data);
  font-size: 0.86rem;
  text-align: right;
  color: var(--c-ink);
}

.tp-beds__list { margin: 0; }
.tp-beds__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-top: var(--tp-hairline);
}
.tp-beds__row:last-child { border-bottom: var(--tp-hairline); }
.tp-beds__row dt { font-size: 0.88rem; color: var(--c-ink); }
.tp-beds__row dd {
  margin: 0;
  font-family: var(--f-data);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-accent-deep);
}
.tp-beds__row p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.76rem;
  color: var(--c-muted);
}

/* --- Sold by the agent --------------------------------------------------- */

.tp-sold__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tp-sale {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: var(--tp-hairline);
  border-radius: var(--s-radius);
  overflow: hidden;
}
/* Rule 712: the front exterior photograph or none at all. The data layer
   decides that; this only has to lay out whichever it got. */
.tp-sale__photo {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--c-paper-alt);
  overflow: hidden;
}
.tp-sale__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-sale__body { padding: 1.1rem 1.25rem 1.25rem; }
.tp-sale__date {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tp-sale__address {
  margin: 0.4rem 0 0;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.tp-sale__address a { color: var(--c-ink); text-decoration: none; }
.tp-sale__address a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
.tp-sale__price {
  margin: 0.35rem 0 0;
  font-family: var(--f-data);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-accent-deep);
}
.tp-sale__facts { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--c-muted); }
.tp-sale__story {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-body);
}
.tp-sale__story a { white-space: nowrap; font-weight: 600; }

/* --- Phone --------------------------------------------------------------- */

@media (max-width: 900px) {
  .tp-market__split { grid-template-columns: minmax(0, 1fr); }
  /* The quote drops below the text rather than squeezing beside it. */
  .tp-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .tp-intro__note { padding-top: 0.5rem; }
}

@media (max-width: 760px) {
  .tp-hero__inner { grid-template-columns: minmax(0, 1fr); }
  /* The card becomes one compact row under the lede rather than a panel. */
  .tp-agent { padding: 0.85rem 1rem; gap: 0.85rem; }
  .tp-agent__photo { width: 48px; height: 48px; }
  .tp-agent__name { font-size: 1rem; }
  .tp-agent__broker { display: none; }
  .tp-hero__actions .btn { flex: 1 1 14rem; text-align: center; }

  .tp-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-glance__tile { border-left: 0; border-top: var(--tp-hairline); }
  .tp-glance__tile:nth-child(odd) { border-right: var(--tp-hairline); }
  .tp-glance__tile:nth-child(-n+2) { border-top: 0; }

  /* Scroll-snap, so a swiped nav settles on a whole item rather than between
     two. The strip keeps the page gutter, so the row scrolls inside the same
     measure everything else on the page lines up with. */
  .tp-nav__inner { scroll-snap-type: x proximity; }
  .tp-nav__link { scroll-snap-align: start; }

  .tp-band { grid-template-columns: minmax(0, 1fr) 3rem; }
  .tp-band__track { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .tp-glance__grid { grid-template-columns: minmax(0, 1fr); }
  .tp-glance__tile { border-left: 0; border-top: var(--tp-hairline); }
  .tp-glance__tile:nth-child(odd) { border-right: 0; }
  .tp-glance__tile:nth-child(-n+2) { border-top: var(--tp-hairline); }
  .tp-glance__tile:first-child { border-top: 0; }
}

/* --- Bought for buyers (text only, partials/tp-bought.php) --------------- */

.tp-bought__list { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--c-line); }
.tp-bought__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1.2fr) 7rem minmax(0, 2fr);
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-line);
}
.tp-bought__when { font-family: var(--f-data); font-size: 0.78rem; color: var(--c-accent); }
.tp-bought__addr { font-family: var(--f-editorial); font-size: 1.1rem; color: var(--c-ink); }
.tp-bought__price { font-family: var(--f-data); font-size: 0.88rem; }
.tp-bought__credit { font-size: 0.78rem; color: var(--c-muted); line-height: 1.55; }
@media (max-width: 760px) {
  .tp-bought__row { grid-template-columns: 5rem minmax(0, 1fr); }
  .tp-bought__price, .tp-bought__credit { grid-column: 2; }
}

.tp-hero__credit { position: absolute; right: 0.75rem; top: 0.6rem; z-index: 2; font-size: 0.64rem; color: rgba(255,255,255,0.75); text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.tp-hero__credit:hover { color: #fff; text-decoration: underline; }