/* site\assets\css\pages\home.css: where the home page's parts sit and how big they are (specs\home.md), with the tokens
   of design\system.css. Their look is the catalog's, in design\components.css. Part 1: the hero (first builder), then
   the leak, the calculator, the plan, the services, the FAQ and the start band (second builder). */

/* ---------- hero ---------- */
/* The spec's grid: at 1440 the copy is 560 wide from the container's left and the panel starts at x 700; at 1024 the
   copy is 470 and the panel starts at x 540; in between both follow the width, and on wider screens the panel follows
   the container. 100% here is the hero's width. */
.hero {
  --copy-l: max(var(--gutter), (100% - var(--max-w)) / 2);
  --copy-w: clamp(470px, 470px + (100% - 1024px) * 0.2163, 560px);
  --panel-l: max(540px + (100% - 1024px) * 0.3846, var(--copy-l) + var(--copy-w) + 29px);
}

/* the field crops (scenes\hero-week.md, Stage): computer. Health and wellness differs from the table: its client lies
   face up low in the clip (x .54 to .62, y .70 to .81), just where the week card sits, so her face is kept right of it. */
.hero__slide--home { --crop-x: 24%; }
.hero__slide--health { --crop-x: 34%; }
.hero__slide--pro { --crop-x: 60%; }
.hero__slide--retail { --crop-x: 71%; }

@media (min-width: 900px) {
  .hero {
    --pad: var(--space-4); --gap-line: var(--space-3); --gap-form: var(--space-4);
    display: flex; align-items: flex-start; min-height: max(100vh - var(--header-h), 780px);
  }
  /* the panel: from the header's bottom to the band's bottom, its left edge on the diagonal */
  .hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: var(--panel-l); clip-path: polygon(var(--diag) 0, 100% 0, 100% 100%, 0 100%); }
  /* the week card keeps to the part of the panel in the first screen (the Stage table's place at 1440x900 and 1024x768) */
  .hero__scene { left: 64px; top: calc(min(100%, 100vh - var(--header-h)) - 54px - 210px); width: 380px; height: 210px; }
  /* the copy sits in the middle of the first screen, the form box's question and choices always inside it */
  .hero__copy {
    position: relative; z-index: 1; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    width: var(--copy-w); min-height: calc(100vh - var(--header-h)); margin-left: var(--copy-l);
    padding-block: var(--pad);
  }
  /* two lines in the 560 copy column: at --fs-display (84 px) "with paying clients." needs 657 px */
  .hero__title { font-size: var(--fs-h1); }
  /* three even lines rather than a short last one */
  .hero__line { margin-top: var(--gap-line); text-wrap: balance; }
  .hero__form { margin-top: var(--gap-form); }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .hero__slide--home { --crop-x: 25%; }
  .hero__slide--health { --crop-x: 41%; }
  .hero__slide--pro { --crop-x: 66%; }
  .hero__slide--retail { --crop-x: 72%; }
  /* under about 920 px the panel is too narrow for 40 + 330: the card moves left (still clear of the diagonal) */
  .hero__scene { left: min(40px, 100% - 338px); top: calc(min(100%, 100vh - var(--header-h)) - 32px - 190px); width: 330px; height: 190px; }
}
/* a shorter first screen: the gaps close first, then the line, the form box's own spacing and the headline step down
   (the line is three lines from 1280 px: at 1440x900 and 1536x864 the whole form box stays in the first screen; at
   1280x800, 1366x768 and 1280x720 the question, its four choices and the assure line) */
@media (min-width: 900px) and (max-height: 920px) {
  .hero { --pad: var(--space-3); --gap-form: var(--space-3); }
}
@media (min-width: 900px) and (max-height: 880px) {
  .hero { --gap-line: var(--space-2); }
  .hero__line { font-size: var(--fs-body); line-height: var(--lh-snug); }
  .hero__form .plan-form__head { margin-bottom: var(--space-2); }
  .hero__form .plan-form__next, .hero__form .plan-form__assure { margin-top: var(--space-2); }
}
@media (min-width: 900px) and (max-height: 768px) {
  .hero { --pad: var(--space-2); --gap-form: var(--space-2); }
  .hero__form { padding-top: 20px; }
  .hero__form .plan-form__q { margin-bottom: var(--space-2); }
}
@media (min-width: 900px) and (max-height: 740px) {
  .hero__title { font-size: var(--fs-h2); }
  .hero__form .choice { padding: var(--space-2); gap: var(--space-1); }
}

/* the phone and the tablet: the panel first, full width at 4:3, its bottom edge rising to the right; then the copy */
@media (max-width: 899px) {
  .hero__slide--home { --crop-x: 60%; }
  .hero__slide--health { --crop-x: 25%; }
  .hero__slide--pro { --crop-x: 50%; }
  .hero__slide--retail { --crop-x: 100%; }
  .hero__media { aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%); }
  .hero__scene { left: 24px; bottom: 24px; width: 330px; height: 160px; }
  .hero__copy { padding: var(--space-4) var(--gutter) var(--space-6); }
  .hero__line { margin-top: var(--space-3); text-wrap: balance; }
  .hero__form { margin-top: var(--space-4); }
}
@media (max-width: 599px) {
  .hero__slide--health { --crop-x: 3%; }
  .hero__scene { left: 12px; bottom: 12px; width: 236px; height: 100px; }
}
/* the narrowest phones: two lines still */
@media (max-width: 380px) {
  .hero__title { font-size: var(--fs-h1); }
}

/* From 900 to 1023 px the panel is so narrow that the week card spans almost all of it, and the health client lies just
   where the card sits at any crop that shows her face: this crop keeps both faces off the panel (its visible part ends
   before x .48 of the clip), so no card is ever over a face. */
@media (min-width: 900px) and (max-width: 1023px) {
  .hero__slide--health { --crop-x: 22%; }
}

/* ---------- leak ---------- */
/* 46/54 at 1440 (components.css); 50/50 at 1024 */
@media (min-width: 900px) and (max-width: 1099px) {
  .leak__grid { grid-template-columns: 50% 50%; }
}

/* ---------- calc ---------- */
/* rebuilt in the calculator fix (22 Oct): the two months over the inputs at every width, all in components.css */

/* ---------- plan ---------- */
/* the balanced line never breaks "12-month" at its hyphen */
.split__keep { white-space: nowrap; }
/* text 36% and the stage 760x475 at 1440; 40% and 545x341 at 1024; under 900 the stage first, 4:5 at 390 */
@media (min-width: 1100px) {
  #plan .split__grid { grid-template-columns: 36% minmax(0, 1fr); column-gap: 2.7%; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  #plan .split__grid { grid-template-columns: 40% minmax(0, 1fr); column-gap: 2.1%; }
}
@media (max-width: 599px) {
  #plan .stage__media { object-position: 54% 50%; }
}

/* ---------- services ---------- */
/* tabs 320 px, a 40 px gap and the stage 880x580 at 1440; tabs 260 px and the stage 650x460 at 1024; under 900 the
   pills above a full-width stage, 16:11 from 600 to 899 and 4:5 at 390 */
@media (min-width: 1100px) {
  .showcase__body { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .showcase__body { grid-template-columns: 260px minmax(0, 1fr); column-gap: calc(var(--space-4) + var(--space-2)); }
  .showcase__media { aspect-ratio: 650 / 460; }
  .tab { padding: 16px 16px 24px 22px; }
  .tab__progress { left: 22px; right: 16px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .showcase__media { aspect-ratio: 16 / 11; }
}
@media (max-width: 599px) {
  .showcase__media { aspect-ratio: 4 / 5; }
}
/* each photo drawn past cover as its scene's Stage table says (its width and offset in the stage's own units) */
.showcase__panel--maps { --pw: calc(1650 / 880); --px: calc(-271 / 880); --py: calc(-175 / 580); }
.showcase__panel--site { --pw: calc(1630 / 880); --px: calc(-479 / 880); --py: calc(-251 / 580); }
.showcase__panel--ads { --pw: calc(1337 / 880); --px: calc(-401 / 880); --py: calc(-186 / 580); }
@media (min-width: 900px) and (max-width: 1099px) {
  .showcase__panel--maps { --pw: calc(1250 / 650); --px: calc(-214 / 650); --py: calc(-122 / 460); }
  .showcase__panel--site { --pw: calc(1304 / 650); --px: calc(-410 / 650); --py: calc(-203 / 460); }
  .showcase__panel--ads { --pw: calc(1238 / 650); --px: calc(-588 / 650); --py: calc(-210 / 460); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .showcase__panel--maps { --pw: calc(1350 / 706); --px: calc(-229 / 706); --py: calc(-138 / 485); }
  .showcase__panel--site { --pw: calc(1370 / 706); --px: calc(-420 / 706); --py: calc(-213 / 485); }
  .showcase__panel--ads { --pw: calc(1340 / 706); --px: calc(-634 / 706); --py: calc(-232 / 485); }
}
@media (max-width: 599px) {
  .showcase__panel--maps { --pw: calc(825 / 358); --px: calc(-177 / 358); --py: calc(-8 / 448); }
  .showcase__panel--site { --pw: calc(1304 / 358); --px: calc(-556 / 358); --py: calc(-209 / 448); }
  .showcase__panel--ads { --pw: calc(672 / 358); --px: calc(-313 / 358); --py: 0; }
}
/* the laptop's own screen on the ads photo shows a call: the screen element covers it at every width */
.showcase__panel--ads .screen { background: var(--sc-dark-bg); }
/* under 600 the map and the ads play in their own card hosts over the photo (334x312 at 12,124 and 334x320 at 12,104
   in the 358x448 stage), not on its screen; the ads photo darkens 35% under its card */
@media (max-width: 599px) {
  .showcase__panel--maps .showcase__screen-scene, .showcase__panel--ads .showcase__screen-scene { display: none; }
  .showcase__card { display: block; left: 0; right: 0; width: min(100% - 2 * 12px, 480px); margin-inline: auto; }
  .showcase__card--maps { top: calc(100cqh * 124 / 448); aspect-ratio: 334 / 312; }
  .showcase__card--ads { top: calc(100cqh * 104 / 448); aspect-ratio: 334 / 320; }
  .showcase__panel--ads .showcase__photo::after { content: ''; position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--c-navy-deep) 35%, transparent); }
}

/* ---------- faq ---------- */
/* the headline in a 360 px column and the list (max 760 px) at 1440; stacked under 900 (components.css) */
@media (min-width: 900px) and (max-width: 1099px) {
  .faq__grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
}

/* ---------- start ---------- */
/* The copy in the left 46% and the form box 480 px at the right at 1440; 50/50 at 1024 (the form box 420 px, 400 px
   under 1024, so a clear space stays between them). The clip's crop is computed at every width so its face (0.52 to
   0.56 across the clip) sits centred in that clear space: --gap-l and --gap-r are the clear space's edges in the band,
   --v the clip's drawn width (cover), and the crop is clamped so the clip always covers the band. */
@media (min-width: 900px) {
  .cta-band { --copy: 0.46; --copy-pad: 0px; --form-w: 480px; }
  .cta-band__copy { padding-right: var(--copy-pad); }
  .cta-band__form { width: min(100%, var(--form-w)); }
  .cta-band__video {
    --v: max(100cqw, 100cqh * 16 / 9);
    --wrap-w: min(100cqw - 2 * var(--gutter), var(--max-w));
    --wrap-l: calc((100cqw - var(--wrap-w)) / 2);
    --gap-l: calc(var(--wrap-l) + var(--copy) * var(--wrap-w) - var(--copy-pad));
    --gap-r: calc(var(--wrap-l) + var(--wrap-w) - min(var(--form-w), (1 - var(--copy)) * var(--wrap-w)));
    object-position: clamp(100cqw - var(--v), (var(--gap-l) + var(--gap-r)) / 2 - 0.54 * var(--v), 0px) 50%;
  }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .cta-band { --copy: 0.5; --copy-pad: calc(var(--space-5) + var(--space-2)); --form-w: 420px; }
  .cta-band__grid { grid-template-columns: 50% minmax(0, 1fr); }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .cta-band { --form-w: 400px; }
}
@media (max-width: 899px) {
  .cta-band__video { object-position: 50% 50%; }
}