/* =============================================================
   Instant Quote page styles (css/pages/quote.css)
   Loaded after css/main.css by instant-quote.html only.
   ============================================================= */

/* ---------- Compact hero ---------- */
.q-hero { padding: 3.5rem 0 3rem; }
.q-hero-grid { display: grid; gap: 2.25rem; align-items: center; }
.q-hero-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .q-hero { padding: 5rem 0 4.5rem; }
  .q-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; }
}

/* ---------- Calculator layout ---------- */
.quote-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) {
  .quote-grid { grid-template-columns: 1.15fr .85fr; gap: 2rem; }
}

.q-steps { display: grid; gap: 1.5rem; }
.q-step { padding: 1.5rem; }
@media (min-width: 600px) { .q-step { padding: 2rem; } }

.q-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.q-legend {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 0;
  margin-bottom: 1.25rem;
}
.q-step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy-600);
  font-weight: 600;
  font-size: .9375rem;
}
.q-step-title { font-size: 1.25rem; line-height: 1.3; }

/* ---------- Step 1: dimensions ---------- */
.q-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.q-dims .field { margin-bottom: 0; min-width: 0; }
.q-dims input { min-width: 0; }
.q-sqft { margin-top: 1.125rem; font-size: .9375rem; }
.q-sqft strong { color: var(--ink); }

/* ---------- Steps 2 and 3: option tiles ----------
   Real radio inputs, visually hidden but focusable, so the tiles
   keep native keyboard behavior: Tab into the group, arrow keys
   move between options, Space selects. */
.q-tiles { display: grid; gap: .875rem; }
@media (min-width: 560px) {
  .q-tiles-4 { grid-template-columns: 1fr 1fr; }
  .q-tiles-3 { grid-template-columns: repeat(3, 1fr); }
}
.tile { position: relative; display: block; cursor: pointer; }
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tile-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  height: 100%;
  padding: 1.125rem 2.75rem 1.125rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  transition: border-color .15s ease, background-color .15s ease;
}
.tile:hover .tile-body { border-color: var(--muted); }
.tile input:checked + .tile-body { border-color: var(--navy-600); background: var(--navy-100); }
.tile input:focus-visible + .tile-body { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.tile-check {
  position: absolute;
  top: .9375rem;
  right: .9375rem;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--dark-text);
  transition: background-color .15s ease, border-color .15s ease;
}
.tile-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s ease; }
.tile input:checked + .tile-body .tile-check { background: var(--navy-600); border-color: var(--navy-600); }
.tile input:checked + .tile-body .tile-check svg { opacity: 1; }
.tile-name { font-weight: 600; color: var(--ink); line-height: 1.35; }
.tile-price { font-size: .875rem; font-weight: 600; color: var(--navy-600); }
.tile-desc { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.q-removal-note { margin-top: 1rem; }

/* ---------- Result panel ---------- */
.q-result { padding: 1.5rem; }
@media (min-width: 600px) { .q-result { padding: 2rem; } }
@media (min-width: 960px) {
  .q-result { position: sticky; top: calc(var(--header-h) + 24px); }
}
.q-result-title { font-size: 1.25rem; }
.q-result-hint { margin-top: .375rem; font-size: .9375rem; }
.q-range-label { margin-top: 1.25rem; font-size: .875rem; font-weight: 500; }
.q-range {
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.q-breakdown { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.q-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}
.q-row dt { color: var(--muted); }
.q-row dd { font-weight: 600; color: var(--ink); white-space: nowrap; }
.q-disclaimer { margin-top: 1rem; font-size: .8125rem; }
.q-lead { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.q-lead-sub { margin: .375rem 0 1.25rem; font-size: .9375rem; }
.q-submit { width: 100%; }
.q-lead .form-consent { margin-top: .875rem; }

/* ---------- Step 1 blueprint sketch ---------- */
.q-s1-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .q-s1-grid { grid-template-columns: minmax(0, 1fr) 236px; align-items: center; }
}
.q-sketch-wrap { max-width: 300px; margin: 0 auto; width: 100%; }
@media (min-width: 640px) { .q-sketch-wrap { margin: 0; max-width: none; } }
.q-sketch-svg { display: block; width: 100%; height: auto; }
.q-sketch-svg text { font-family: var(--font-stack); }
.q-sketch-empty-text,
.q-sketch-dim-label { font-size: 11px; fill: var(--muted); }
.q-sketch-sqft { font-size: 12px; font-weight: 600; fill: var(--navy-800); }
.q-sketch-dim line { stroke: var(--navy-600); stroke-width: 1; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .q-sketch-svg text { transition: opacity .3s ease; }
}

/* ---------- No-JS fallback ---------- */
.q-noscript { margin-bottom: 1.5rem; padding: 1.5rem 2rem; }

/* Aligned digits wherever numbers stack */
.q-range, .q-breakdown, .q-sqft, .tile-price { font-variant-numeric: tabular-nums; }