/* Estimate pages: /estimate and the three results pages (/estimate-result-patio, -driveway, -garden).
   Linked with `styles: estimate`. Framed look (26 Sep 2026): the heroes, lists and bands come from
   site.css; the results pages' shared sections are in src/_templates/inserts-estimate.mjs. */

/* ---- /estimate: hero ---------------------------------------------------------- */
/* Wide look (7 Oct 2026): a real job in a photo hero, shorter than a service page's so the
   calculator starts sooner. */
.frame-hero--estimate { height: min(68vh, 680px); min-height: 520px; }
.frame-hero--estimate .frame-hero__lead { max-width: 34em; }
.estimate-start { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 24px; }
.estimate-start::after { content: '\2193'; }
@media (max-width: 900px) {
  .frame-hero--estimate { height: auto; min-height: 0; }
  .frame-hero--estimate .frame-hero__body { padding-top: 120px; padding-bottom: 32px; }
}

/* ---- /estimate: the calculator ------------------------------------------------------ */
.framed .estimate-calc { padding-bottom: clamp(48px, 5vw, 72px); }
/* The calculator fills the page width. On a phone it runs edge to edge (its `bleed` attribute
   drops the card's side frame). */
@media (max-width: 700px) {
  .framed .estimate-calc { padding-top: 0; }
  .estimate-calc mt-calculator { width: auto; margin-inline: calc(-1 * var(--g)); }
}

/* ---- /estimate: the calculator's slot ------------------------------------------- */
/* Holds the live calculator's height until its script defines the element; after that the
   calculator sizes itself. Taller when an ad's ?service= skips straight to step 2. */
.estimate-calc mt-calculator { display: block; }
.estimate-calc mt-calculator:not(:defined) { min-height: 607px; }
.estimate-calc--preselected mt-calculator:not(:defined) { min-height: 1112px; }
@media (max-width: 700px) {
  .estimate-calc mt-calculator:not(:defined) { min-height: 563px; }
  .estimate-calc--preselected mt-calculator:not(:defined) { min-height: 1244px; }
}

/* ---- Results (the thank-you step, 7 Oct 2026): the range over a real job ----------- */
.frame-hero h1.estimate-range { max-width: none; font-variant-numeric: tabular-nums; }
.estimate-range__sep { font-weight: 400; }
.frame-hero--result { height: min(76vh, 760px); min-height: 560px; }
.frame-hero--result .frame-hero__lead { max-width: 34em; }
@media (max-width: 900px) { .frame-hero--result { height: auto; min-height: 0; } }

/* What the range covers, beside one useful thing to do before the call */
.estimate-covers { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(48px, 6vw, 112px); align-items: end; }
.estimate-covers .lead { margin-top: 24px; max-width: 36em; }
.estimate-covers__tip { padding: clamp(24px, 2.6vw, 40px); background: var(--stone); border-left: 3px solid var(--brass); border-radius: var(--radius-card); }
.estimate-covers__tip p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) { .estimate-covers { grid-template-columns: 1fr; } }
#next .sec-note a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
#next .sec-note { margin-top: 32px; }

/* A real job: before and after (or one finished photo and the client's review) beside the story */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(48px, 6vw, 112px); align-items: center; }
.story__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.story__imgs--one { grid-template-columns: 1fr; }
.story__img { margin: 0; }
.story__img .frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); }
.story__imgs--one .story__img .frame { aspect-ratio: 4 / 3; }
.story__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__img figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--slate); }
.story__img figcaption::before { content: ''; width: 20px; height: 1.5px; background: var(--brass); }
.story__text .lead { margin-top: 24px; }
.story__quote { margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--brass); }
.story__quote p { font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--indigo); }
.story__quote footer { margin-top: 10px; font-size: 14px; color: var(--slate); }
.story__text .arrow-link { margin-top: 24px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }