/* McKinley Group — transaction record + property detail. Scoped .tx- / .pd- ; uses tokens.css. */

/* ---------- filter bar ---------- */
.tx-filter {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: .8rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tx-f { display: flex; flex-direction: column; gap: .5rem; }
.tx-f label {
  font-family: var(--sans); font-size: var(--cap); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--grey);
}
.tx-f input, .tx-f select {
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
  padding: .78rem .9rem; min-height: 46px; width: 100%;
  transition: border-color .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.tx-f select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2364615b' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.tx-f input:focus, .tx-f select:focus { outline: none; border-color: var(--green); }

.tx-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.tx-count { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.tx-count b { font-style: normal; }
.tx-reset {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--grey);
  background: none; border: 0; padding: .4rem 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) { .tx-reset:hover { color: var(--green); } }

/* ---------- record grid ---------- */
.tx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.4vw, 2.2rem); }
.tx-card {
  display: block; background: var(--white); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
@media (hover: hover) { .tx-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(28,26,24,.13); border-color: rgba(44,52,38,.34); } }
.tx-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper); }
.tx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) { .tx-card:hover .tx-card__img img { transform: scale(1.04); } }
.tx-card__status {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--white); background: rgba(28,26,24,.82); padding: .42rem .75rem;
}
.tx-card__status--active { background: var(--green); }
.tx-card__n {
  position: absolute; bottom: .9rem; right: .9rem; z-index: 2;
  font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  color: var(--white); background: rgba(28,26,24,.7); padding: .32rem .6rem;
}
.tx-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.tx-card__price { font-family: var(--serif); font-size: 1.55rem; color: var(--ink); line-height: 1.1; }
.tx-card__addr {
  font-family: var(--sans); font-weight: 500; font-size: .95rem; line-height: 1.45;
  color: rgba(28,26,24,.82); margin: .4rem 0 .55rem;
}
.tx-card__spec { font-size: .84rem; color: var(--grey); letter-spacing: .02em; }
.tx-card__foot {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .3rem;
}
.tx-side {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--green);
}
.tx-credit { font-size: .74rem; color: var(--grey); line-height: 1.5; }

.tx-more { text-align: center; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.tx-empty { text-align: center; padding: 4rem 0; color: var(--grey); }

@media (max-width: 1080px) { .tx-filter { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 980px)  { .tx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tx-grid { grid-template-columns: 1fr; } .tx-filter { grid-template-columns: 1fr 1fr; } .tx-f--q { grid-column: 1 / -1; } }

/* ---------- property detail ---------- */
.pd-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--grey);
  text-decoration: none; margin-bottom: 1.6rem;
}
@media (hover: hover) { .pd-back:hover { color: var(--green); } }

.pd-head { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pd-head h1 { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--ink); line-height: 1.06; }
.pd-price { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--green); line-height: 1; margin-bottom: .7rem; }
.pd-spec { font-size: 1rem; color: var(--grey); letter-spacing: .02em; margin-top: 1rem; }
.pd-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.pd-tag {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .48rem .85rem; border: 1px solid var(--line); color: var(--grey);
}
.pd-tag--side { border-color: var(--green); color: var(--green); }
.pd-aside { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.2rem); }
.pd-aside h3 {
  font-family: var(--sans); font-size: var(--cap); font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em; color: var(--ink); margin-bottom: 1.1rem;
}
.pd-facts { list-style: none; }
.pd-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.pd-facts li:last-child { border-bottom: 0; }
.pd-facts dt, .pd-facts .k { color: var(--grey); }
.pd-facts .v { color: var(--ink); text-align: right; font-weight: 500; }
.pd-aside .btn { width: 100%; text-align: center; margin-top: 1.2rem; }

.pd-desc { max-width: 68ch; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.pd-desc p { font-size: 1.06rem; line-height: 1.75; color: rgba(28,26,24,.8); }

/* gallery */
.pd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.pd-shot { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper); border: 0; padding: 0; cursor: zoom-in; }
.pd-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { .pd-shot:hover img { transform: scale(1.05); } }
.pd-shot--wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 780px) { .pd-head { grid-template-columns: 1fr; } .pd-gallery { grid-template-columns: repeat(2, 1fr); } .pd-shot--wide { grid-column: span 2; } }

/* lightbox */
.pd-lb { position: fixed; inset: 0; z-index: 90; background: rgba(16,14,12,.95); display: none; align-items: center; justify-content: center; }
.pd-lb.on { display: flex; }
.pd-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.pd-lb__x, .pd-lb__p, .pd-lb__n {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; width: 48px; height: 48px; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pd-lb__x { top: 1.2rem; right: 1.2rem; }
.pd-lb__p { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.pd-lb__n { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.pd-lb__c { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.72); font-size: .82rem; letter-spacing: .1em; }

/* amenities */
.pd-amen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); }
.pd-amen div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.pd-amen .k { color: var(--grey); }
.pd-amen .v { color: rgba(28,26,24,.86); }
@media (max-width: 780px) { .pd-amen { grid-template-columns: 1fr; } }

/* ---------- single listing: split hero ----------
   Photo left, details right, both starting at the top edge. The old layout put
   the facts in a card beside a title and left half a screen of paper doing
   nothing. On mobile the panel comes first, because the details at the top is
   the part that already worked. */
.lp-hero { display: grid; grid-template-columns: 1.32fr 1fr; min-height: 76vh; background: var(--ink); }
.lp-hero__media { position: relative; overflow: hidden; background: var(--champagne); }
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero__badge {
  /* clears the fixed nav, which was sitting on top of it */
  position: absolute; top: clamp(5rem, 9vh, 6.2rem); left: 1.3rem; z-index: 2;
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--white); background: var(--green); padding: .48rem .85rem;
}
.lp-hero__all {
  position: absolute; bottom: 1.3rem; right: 1.3rem; z-index: 2;
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink); background: rgba(255,255,255,.94); border: 0;
  padding: .7rem 1.1rem; cursor: pointer; transition: background .25s var(--ease);
}
@media (hover: hover) { .lp-hero__all:hover { background: #fff; } }

.lp-hero__panel {
  /* the nav floats over the hero, so the panel starts below it and the back
     link never slides under the logo on a short listing */
  background: var(--paper); padding: clamp(5.4rem,9vh,6.6rem) clamp(2rem,3.6vw,3.4rem) clamp(2rem,3.6vw,3.4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.lp-hero__back {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--grey);
  text-decoration: none; margin-bottom: 1.6rem;
}
@media (hover: hover) { .lp-hero__back:hover { color: var(--green); } }
/* A new build names its builder under the back link (JJ 9/25) */
.lp-hero__nc { display: inline-block; align-self: flex-start; margin: 0 0 1.1rem; padding: .45em .8em; border: 1px solid var(--line);
  font-size: var(--cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
@media (hover: hover) { .lp-hero__nc:hover { color: var(--green); border-color: currentColor; } }
/* Finishes carried on a thin new build's own page */
.lp-finishes { border-top: 1px solid var(--line); }
.lp-finishes__own { text-align: center; padding: 0 var(--gutter) clamp(3rem, 6vw, 4.5rem); font-size: var(--cap);
  letter-spacing: .18em; text-transform: uppercase; }
.lp-finishes__own a { color: var(--ink); border-bottom: 1px solid currentColor; }
.lp-hero__price { font-family: var(--serif); font-size: clamp(2rem,3.4vw,2.9rem); color: var(--green); line-height: 1; }
.lp-hero__addr { font-family: var(--serif); font-size: clamp(1.5rem,2.5vw,2.15rem); color: var(--ink); line-height: 1.12; margin-top: .5rem; }
.lp-hero__area { font-size: .95rem; color: var(--grey); margin-top: .4rem; }
.lp-hero__spec {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.3rem 0;
  padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lp-hero__spec span { font-size: .84rem; color: var(--grey); letter-spacing: .02em; }
.lp-hero__spec b { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 400; margin-right: .3rem; }
.lp-facts { list-style: none; margin-bottom: 1.5rem; }
.lp-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.lp-facts li:last-child { border-bottom: 0; }
.lp-facts .k { color: var(--grey); }
.lp-facts .v { color: var(--ink); font-weight: 500; text-align: right; }
.lp-cta { display: flex; flex-direction: column; gap: .6rem; }
.lp-cta .btn { width: 100%; text-align: center; }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; min-height: 0; }
  .lp-hero__panel { padding-top: clamp(5.4rem,11vh,6.6rem); }
  .lp-hero__panel { order: 1; }
  .lp-hero__media { order: 2; aspect-ratio: 4/3; }
}

/* ---------- floor plans ----------
   Line drawings are not photographs. Cropping them square cuts the dimensions
   off, so they get their own labelled band, sit whole inside the frame, and
   never share a grid with a photo of the house. */
.pd-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pd-plans--few { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pd-plan { background: var(--white); border: 1px solid var(--line); padding: 0; cursor: zoom-in; }
.pd-plan img { width: 100%; aspect-ratio: 3/2; object-fit: contain; display: block; background: var(--white); }
@media (max-width: 780px) { .pd-plans { grid-template-columns: 1fr; } }

/* a listing with one or two photos never repeats the hero shot below it */
.lp-sparse .pd-gallery { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pd-planfig { display: flex; flex-direction: column; }
.pd-planfig figcaption {
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .17em; color: var(--grey); margin-top: .6rem;
}