/* ═══════════════════════════════════════════════════════════════════
 * hp-precon.css — the pre-construction block
 *
 * One component, one file, loaded only on pages that use it. That is
 * deliberately NOT the pattern that produced the 22-stylesheet homepage
 * cascade we spent Stage D untangling: nothing here redefines a global,
 * every selector is prefixed .precon-, and every value comes from an
 * --h- token rather than a fresh hex literal. Adding it cannot change
 * any existing page.
 *
 * Requires hp-tokens.css, which is loaded first sitewide.
 * ═══════════════════════════════════════════════════════════════════ */

.precon-grid{
  display:grid;
  /* auto-fit rather than a fixed count: seven cities should not leave a
     single orphan on the last row at every breakpoint. */
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:28px;
}

.precon-card{
  background:var(--h-white);
  border:1px solid var(--h-line);
  /* The accent edge is the only brand colour on the card, and it is what
     makes seven of these read as one set rather than seven boxes. */
  border-top:3px solid var(--h-orange);
  border-radius:10px;
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
}

/* ── The photo ──────────────────────────────────────────────────────
 * Sits above the city name, full-bleed to the card edge, so the card
 * reads as one object rather than a picture pasted inside a box. The
 * card's padding is moved onto the inner content when a photo is
 * present — see .has-photo below.
 *
 * The credit is laid over the bottom of the image, not under the card:
 * a credit that can drift away from its photo during a layout change is
 * a credit that will. */
.precon-photo{
  position:relative;
  margin:-22px -22px 18px;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--h-paper);
  border-radius:9px 9px 0 0;
}
.precon-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.precon-photo figcaption{
  position:absolute;
  right:0; bottom:0; left:0;
  padding:16px 12px 7px;
  background:linear-gradient(to top,rgba(8,19,60,.72),rgba(8,19,60,0));
  color:rgba(255,255,255,.92);
  font-size:.6875rem;
  letter-spacing:.2px;
  text-align:right;
}

.precon-card h3{
  font-family:var(--h-font-display);
  font-size:var(--h-step-2);
  line-height:var(--h-lh-snug);
  color:var(--h-navy);
  margin:0;
}

/* ── Prices by home type ────────────────────────────────────────────
 * Four rows, always all four, label left and price right on one
 * baseline so a reader scanning for "Townhome" finds it in the same
 * place on every card. Tabular figures so the dollar amounts line up
 * down the column rather than jittering with digit widths. */
.precon-types{
  margin:14px 0 0;
  padding:0;
  border-top:1px solid var(--h-line);
}
.precon-type{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--h-line);
}
.precon-type dt{
  margin:0;
  font-size:.875rem;
  color:var(--h-ink);
}
.precon-type dd{
  margin:0;
  font-size:.9375rem;
  color:var(--h-navy);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.precon-type dd strong{
  font-family:var(--h-font-display);
  font-size:1.15rem;
  font-weight:500;
}
.precon-from{
  font-size:.6875rem;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--h-muted);
}
/* A type with no verified price. Muted, so it reads as a state we chose
   rather than a value that failed to load — and it still invites the
   question, which is the point. */
.precon-type.is-ask dt{ color:var(--h-muted); }
.precon-type.is-ask dd{ color:var(--h-muted); font-size:.8125rem; }

.precon-blurb{
  margin:14px 0 0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--h-ink);
}

.precon-projects{
  list-style:none;
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--h-line);
  /* Pushes the list to the bottom so cards with different amounts of
     text still line their lists up across a row. */
  margin-top:auto;
}
.precon-projects li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  padding:7px 0;
}
.precon-project{ font-weight:600; font-size:.875rem; color:var(--h-ink); }
.precon-project-price{
  grid-row:span 2;
  align-self:center;
  font-size:.875rem;
  font-weight:600;
  color:var(--h-navy);
  font-variant-numeric:tabular-nums;
}
.precon-builder{ grid-column:1; font-size:.8125rem; color:var(--h-muted); }

.precon-cta{
  margin-top:28px;
  padding:24px 26px;
  background:var(--h-paper);
  border:1px solid var(--h-line);
  border-radius:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.precon-cta p{ margin:0; max-width:62ch; font-size:.9375rem; line-height:1.6; color:var(--h-ink); }

.precon-legal{
  margin-top:18px;
  font-size:.75rem;
  line-height:1.6;
  color:var(--h-muted);
  max-width:90ch;
}

@media (max-width:640px){
  .precon-card{ padding:18px; }
  .precon-type dd strong{ font-size:1.05rem; }
  .precon-cta{ flex-direction:column; align-items:flex-start; }
}

/* ── Admin editor ───────────────────────────────────────────────────
 * Loaded on /admin/precon.php only. Scoped to .precon-admin-* so it
 * cannot reach the public block above. */
.precon-admin-city{
  border:1px solid var(--h-line);
  border-radius:10px;
  padding:14px 18px 18px;
  margin:0 0 22px;
}
.precon-admin-city legend{
  font-family:var(--h-font-display);
  font-size:1.15rem;
  color:var(--h-navy);
  padding:0 8px;
}
.precon-admin-table{ width:100%; }
.precon-admin-table th{
  font-size:.6875rem;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--h-muted);
  text-align:left;
  font-weight:600;
}
.precon-admin-table input[type=text],
.precon-admin-table input[type=date]{ width:100%; }
.admin-muted{ color:var(--h-muted); font-size:.8125rem; }

/* The drawn stand-in. Same box as a real photo so a card does not change
   shape when a builder image replaces it. */
.precon-photo-drawn{
  display:block;
  color:var(--h-navy);
}
.precon-house{
  display:block;
  width:100%;
  height:100%;
}


/* ═══════════════════════════════════════════════════════════════════
   THE JUMP TAB — hero shortcut down to this section
   ═══════════════════════════════════════════════════════════════════

   Lives here rather than in hp-start.css because it is part of the
   pre-construction feature and both pages that render the block also
   load this sheet. One less way for the two pages to disagree. */

#precon{
  /* The header is position:absolute on desktop and sticky under the
     mobile-stability sheet. This costs nothing in the first case and
     stops the heading landing underneath the bar in the second. */
  scroll-margin-top:100px;
}

.hp-jump{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px;
  padding:9px 16px 9px 10px;
  border-radius:999px;
  text-decoration:none;
  background:rgba(200,163,90,.13);
  border:1px solid rgba(200,163,90,.42);
  color:var(--h-cream);
  font-size:var(--h-step--1);
  line-height:1;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.hp-jump:hover{
  background:rgba(200,163,90,.22);
  border-color:rgba(200,163,90,.72);
}
.hp-jump:hover .hp-jump-arrow{ transform:translateY(2px); }

.hp-jump-flag{
  padding:4px 8px;
  border-radius:999px;
  background:var(--h-gold);
  color:var(--h-navy-deep);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:var(--h-tracking-label);
  text-transform:uppercase;
}
.hp-jump-label{ font-weight:500; }
.hp-jump-arrow{ color:var(--h-gold); transition:transform .2s ease; }

/* On a cream or white ground the cream text vanishes. The Telugu page's
   hero is navy like /start/, but this sheet is also loaded on pages that
   may not be, so the light-ground case is handled rather than assumed. */
.section-cream .hp-jump,
.hp-jump-on-light{
  background:rgba(200,163,90,.16);
  border-color:rgba(200,163,90,.55);
  color:var(--h-navy);
}

@media (prefers-reduced-motion:reduce){
  .hp-jump, .hp-jump-arrow{ transition:none; }
  .hp-jump:hover .hp-jump-arrow{ transform:none; }
}

@media (max-width:520px){
  .hp-jump{ gap:8px; padding:8px 12px 8px 8px; }
  .hp-jump-label{ font-size:.8125rem; }
}


/* ── The per-city interest button ───────────────────────────────────
 * One per card, at the foot, so a visitor who has just read Milton's
 * price and blurb can act on Milton without scrolling back up to a
 * generic form and typing the city in themselves.
 *
 * Deliberately quieter than the section's main call to action: this is
 * seven of them on one screen, and seven filled buttons would read as a
 * wall of pressure. It fills in on hover. */
.precon-interest{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:auto;                 /* pinned to the card's foot, so the
                                      buttons line up across a row of
                                      cards with different blurb lengths */
  padding:9px 14px;
  border-radius:8px;
  border:1px solid var(--h-line-strong);
  background:transparent;
  color:var(--h-navy);
  font-size:var(--h-step--1);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.precon-interest svg{ transition:transform .18s ease; }
.precon-interest:hover{
  background:var(--h-navy);
  border-color:var(--h-navy);
  color:var(--h-white);
}
.precon-interest:hover svg{ transform:translateX(3px); }
.precon-interest:focus-visible{
  outline:2px solid var(--h-orange);
  outline-offset:2px;
}

/* margin-top:auto only pins to the foot if the card is a column flex
   container. It was not; without this the button sits directly under
   the projects list and the row of cards has seven different button
   heights. */
.precon-card{ display:flex; flex-direction:column; }
.precon-card .precon-projects{ margin-bottom:16px; }

@media (prefers-reduced-motion:reduce){
  .precon-interest, .precon-interest svg{ transition:none; }
  .precon-interest:hover svg{ transform:none; }
}