/* home.css: the home page's own placing and sizing (specs\home.md), with the tokens of design\system.css only. The
   components' looks are in design\components.css. */

/* ---------- hero: the header that changes its field ---------- */
.hero { container-type: inline-size; }
/* the copy column: the left 46% of the header (56% under 1100px), measured from the page's column */
.hero__copy { --copy-w: calc(46cqw - max(var(--gutter), (100cqw - var(--max-w)) / 2 + var(--gutter))); }
.hero__copy > .hero__lead, .hero__copy > .picker { max-width: var(--copy-w); }
/* the headline sets on three lines for every field ("Steady new / clients for your / roofing company."), and holds
   that height, so nothing moves as the word changes */
.hero__title { max-width: 14ch; min-height: calc(3em * 1.06); }

@media (min-width: 980px) {
  .hero { display: flex; align-items: center; height: max(640px, min(100svh - 76px, 860px)); }
  .hero__copy { padding-block: var(--space-5); }
  /* the cards: at the right, in the lower part of the frame, the booking card above the forecast (every slide's free
     corner is its lower right: progress.md, "Media taken") */
  .hero__slide { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 48px; }
  .hero__booking { width: 300px; }
}
@media (min-width: 980px) and (max-width: 1099px) {
  .hero__copy { --copy-w: calc(56cqw - max(var(--gutter), (100cqw - var(--max-w)) / 2 + var(--gutter))); }
  .hero__forecast { display: none; }
}
@media (min-width: 980px) and (max-height: 700px) {
  .hero__slide { padding: 32px 40px; }
}

/* under 980px: the clip on top (16:10), its booking card inside its lower right, 12px in; the words under it on navy */
@media (max-width: 979px) {
  .hero__media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero__shade, .hero__forecast, .hero__line { display: none; }
  .hero__slide { display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; }
  .hero__booking { max-width: min(300px, 100%); }
  .hero__copy { padding-block: 22px 32px; }
  .hero__copy > .hero__lead, .hero__copy > .picker { max-width: 620px; }
  .hero__lead { margin-top: 14px; font-size: 17px; line-height: 1.5; }
  .hero__copy .picker { margin-top: 20px; }
}
/* on a phone the booking card leaves more of its 16:10 clip in view: a little narrower, its icon a little smaller */
@media (max-width: 599px) {
  .hero__booking { max-width: min(276px, 100%); gap: 10px; }
  .hero__booking .live-card__icon { width: 30px; height: 30px; }
}
@media (max-width: 359px) {
  .hero__title { min-height: calc(4em * 1.06); }
}

/* ---------- plan: the free plan, working ---------- */
.plan .sec-head__title { max-width: 24ch; }
/* on the computer the heading and its lead share the top line, so the whole tour reads on one screen */
@media (min-width: 1100px) {
  .plan .sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-5); align-items: end; }
  .plan .sec-head__lead { margin: 0; }
}
/* the stage holds the three scenes: a box 460 to 530 high (the stage's own height) and 340 to 760 wide; the radar
   fills it, the leads chart and the budget size their own card and center in it */
.tour__scene { width: 100%; max-width: 760px; height: 100%; }
@media (max-width: 699px) {
  .tour__stage { height: 500px; }
}

/* ---------- how: three steps lit by a chat ---------- */
/* 1440: the steps 7 of 12 columns, the phone 5 (340x640); 1024: 6 and 6, the phone 300x580 (its plan card a little
   smaller); under 900px the steps first and the phone under them, centered */
/* from 1100px the phone stands beside the heading and the steps together (the part reads in one screen) */
@media (min-width: 1100px) {
  .how > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }
  .how .sec-head { grid-column: 1 / span 7; grid-row: 1; }
  .how__grid { display: contents; }
  .how .steps { grid-column: 1 / span 7; grid-row: 2; }
  .how .phone { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 1099px) {
  .how .steps { grid-column: span 6; }
  .how .phone { grid-column: span 6; width: 300px; height: 580px; }
  .how .msg__plan .forecast__big b { font-size: 30px; }
  .how .msg__plan .forecast__bars { height: 42px; margin-top: 10px; }
}
@media (max-width: 899px) {
  .how__grid { display: flex; flex-direction: column; align-items: stretch; }
  .how .phone { align-self: center; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .how .phone { height: auto; min-height: 580px; }
}
/* the phone keeps the latest messages in view: the chat fills from the top, and as the thread outgrows the screen the
   oldest give way, so no message is ever cut by the screen's edge (measured on both phones; under reduced motion the
   phone shows the whole conversation). The first three go when the plan arrives; on the 300x580 phone the website
   question too when "Let's do it" does. */
@media (prefers-reduced-motion: no-preference) {
  .phone__chat:has(> .msg__plan:not([hidden])) > :nth-child(-n + 3) { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
  .phone__chat:has(> :nth-child(10):not([hidden])) > :nth-child(5) { display: none; }
}

/* ---------- outcomes: each scene over its clip's free side, never over a face (progress.md, "Media taken") ---------- */
/* From 760px: row 1, the clip a fifth larger, held at the panel's left, so her face moves to about 60 to 73% of the
   panel and the scene at the left keeps its full width (min(360px, 48%)) off it; row 2, the scene at the left over the
   plain wall (his face at 64 to 72%); row 3 (no faces) and row 4 (his face at 30 to 39%), the scene at the right. A
   scene's box holds 14px at its right for its pop card, so at the right it sits 10px in and its card 24px in, like the
   cards at the left. */
@media (min-width: 760px) {
  div.rows > article.row:nth-child(1) .row__clip { top: -10%; left: 0; width: 120%; height: 120%; object-position: 0% 50%; }
  div.rows > article.row:nth-child(3) .row__panel, div.rows > article.row:nth-child(4) .row__panel { --row-side: 270deg; }
  div.rows > article.row:nth-child(3) .row__scene, div.rows > article.row:nth-child(4) .row__scene { left: auto; right: 10px; }
}
/* side by side (from 1100px), rows 2 and 4 take their scene's full 360px where the panel allows (the answer's booked
   card and the work chart's heading break into short lines under it), still clear of the faces: row 2's scene ends
   12px before his face (64%), row 4's starts 12px after his (39%) */
@media (min-width: 1100px) {
  div.rows > article.row:nth-child(2) .row__scene { width: min(360px, calc(64% - 36px)); }
  div.rows > article.row:nth-child(4) .row__scene { width: min(360px, calc(61% - 22px)); }
}
/* Under 760px the scene sits at the 4:5 panel's foot and each face shows above it: her face (y 30 to 45% of the clip)
   and his at the bench (y 38 to 50%) are lifted by a clip a third taller than the panel, held at its foot; the
   painter's face (y 25 to 35%) is above the short call card as it is; each face centered across. */
@media (max-width: 759px) {
  div.rows > article.row:nth-child(1) .row__clip { top: auto; height: 132%; object-position: 50% 50%; }
  div.rows > article.row:nth-child(2) .row__clip { object-position: 83% 50%; }
  div.rows > article.row:nth-child(4) .row__clip { top: auto; height: 136%; object-position: 31% 50%; }
  /* the work chart's box keeps 14px at its right for a pop card that, this narrow, sits inside the card: the box runs to
     the panel's edge, so the card is 14px in on both sides and wide enough for its heading on one line */
  div.rows > article.row:nth-child(4) .row__scene { left: 14px; right: 0; }
}
/* the reviews scene's stars keep Google's gold (components.md) */
div.rows > article.row:nth-child(3) .row__scene { --c-accent: var(--c-star); }

/* ---------- compare ---------- */
/* the owner's face sits at x 38 to 54%, y 14 to 38% of vs-us: its top kept, so the tag above and the lines below stay
   off it */
.vs__side--us .vs__photo { object-position: 50% 0%; }
@media (min-width: 1000px) and (max-width: 1199px) {
  .vs__side { aspect-ratio: 4 / 3; }
}

/* ---------- who: each tile's faces in its upper half, the words over the shade at its foot ---------- */
.tiles > .tile:nth-child(1) .tile__photo { object-position: 80% 50%; }
.tiles > .tile:nth-child(2) .tile__photo { object-position: 70% 50%; }
.tiles > .tile:nth-child(3) .tile__photo { object-position: 50% 0%; }
.tiles > .tile:nth-child(4) .tile__photo { object-position: 50% 50%; }
.tiles > .tile:nth-child(5) .tile__photo { object-position: 50% 0%; }
.tiles > .tile:nth-child(6) .tile__photo { object-position: 50% 50%; }