/* ai-automation.css: the AI automation page's own placing (plan.md, "AI automation"). Every component and token comes
   from components.css and system.css; this file only places and sizes the page's parts. */

/* ---------- #top: the electrician's hands at the wall box, full bleed; the words and the picker on a navy wash on
   the left, the call answered and booked in glass over the white wall on the right ---------- */
.ai-top { position: relative; background: var(--c-ink); color: var(--c-on-ink); }
.ai-top__grid { display: grid; grid-template-columns: max(var(--gutter), (100% - var(--max-w)) / 2) minmax(0, 26.5rem) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; min-height: clamp(660px, calc(100vh - var(--header-h)), 880px); padding-block: 2rem 2.5rem; }
.ai-top__stage { grid-area: 1 / 1 / -1 / -1; position: relative; overflow: hidden; margin-block: -2rem -2.5rem; --ai-col: calc(max(var(--gutter), (100% - var(--max-w)) / 2) + 26.5rem); }
.ai-top__photo { position: absolute; inset: -1px; }
.ai-top__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
/* the wash: deep navy under the words, clear from just past them, so the hands and the meter show */
.ai-top__stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(13 27 51 / 0.94) 0, rgb(13 27 51 / 0.88) calc(var(--ai-col) - 30px), rgb(13 27 51 / 0) calc(var(--ai-col) + 100px)); }
/* the call in glass over the white wall, right of the wall box */
.ai-top__stage .ai-top__scene { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; left: auto; right: max(var(--gutter), (100% - var(--max-w)) / 2); width: 400px; height: min(660px, calc(100% - 64px)); }
.ai-top__stop { top: 20px; right: max(var(--gutter), (100% - var(--max-w)) / 2); }
.ai-top__copy { grid-column: 2; grid-row: 2; position: relative; z-index: 2; display: grid; gap: var(--space-3); }
.ai-top h1 { color: var(--c-on-ink); font-size: clamp(2.1rem, 1.1rem + 2vw, 3rem); max-width: 15ch; }
.ai-top__line { font-size: var(--fs-lead); color: var(--c-on-ink-soft); max-width: 26rem; }
.ai-top__picker { grid-column: 2; grid-row: 3; position: relative; z-index: 2; margin-top: 2.6rem; color: var(--c-ink); }
@media (max-width: 1239px) {
  /* the words on the ivory, then the photo with the call over the wall, then the picker */
  .ai-top { background: var(--c-paper); color: var(--c-ink); }
  .ai-top__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "stage" "pick"; min-height: 0; padding-block: 0 2.5rem; }
  .ai-top__copy { grid-area: copy; padding: 2.25rem var(--gutter) 1.75rem; }
  .ai-top h1 { color: var(--c-ink); max-width: 18ch; }
  .ai-top__line { color: var(--c-ink-soft); }
  .ai-top__stage { grid-area: stage; height: 760px; margin-block: 0; }
  .ai-top__photo img { object-position: 72% 50%; }
  .ai-top__stage::after { display: none; }
  .ai-top__stage .ai-top__scene { top: 50px; translate: none; right: var(--gutter); width: 380px; height: 660px; }
  .ai-top__stop { top: 16px; left: var(--gutter); right: auto; }
  .ai-top__picker { grid-area: pick; margin: 2.6rem var(--gutter) 0; max-width: 40rem; }
}
@media (max-width: 759px) {
  /* the hands at the wall box above, the call over the white wall below them, the wall fading into the ivory */
  .ai-top__stage { height: 940px; }
  .ai-top__photo { inset: -1px -1px auto -1px; height: 681px; }
  .ai-top__photo img { object-position: 46% 50%; }
  .ai-top__photo::after { content: ''; position: absolute; inset: auto 0 -1px 0; height: 40%; background: linear-gradient(180deg, rgb(248 243 234 / 0), rgb(248 243 234 / 0.7) 60%, var(--c-paper)); }
  .ai-top__stage .ai-top__scene { top: 340px; left: 0; right: 0; width: auto; height: 600px; }
  /* the stop icon at the call's top left, beside its timer, so the icon and the call fit one view */
  .ai-top__stop { top: 352px; left: 12px; }
}

/* the choice pictures' own answers: the clock's minute hand moving on */
.choice .pic-hand { transform-box: view-box; transform-origin: 18px 22px; }
.choice:has(input:checked) .pic-hand { transform: rotate(150deg); }

/* ---------- #night: the scene's own sky over the rooftops, the whole width ---------- */
.night { padding-bottom: 0; }
.night .head { margin-bottom: var(--space-5); }
.night__band { position: relative; height: 420px; }
.night__band .night__scene { position: absolute; inset: 0; }
.night__stop { top: 14px; right: var(--gutter); }
@media (max-width: 600px) { .night__band { height: 500px; } }

/* ---------- #change: two framed photos side by side, one call across both ---------- */
.change .head { margin-bottom: var(--space-5); }
/* the photos and the scene's lanes are laid by the same container width (the scene's own rules) */
.change__pair { position: relative; container-type: inline-size; }
.change__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.change__photo { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.change__photo img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 0% 40%; }
/* the missed afternoon a little cooler, the booked one as it is */
.change__photo--missed img { filter: saturate(0.72) brightness(1.02); }
.change__photo--missed::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(96 120 160 / 0.12); }
.change__pair .change__scene { position: absolute; inset: 0; z-index: 2; }
.change__stop { top: 14px; left: 14px; right: auto; }
@container (width < 1000px) {
  .change__grid { grid-template-columns: 1fr; gap: 16px; }
  .change__photo { aspect-ratio: 16 / 9; }
  .change__photo img { object-position: 50% 60%; }
}
@container (width < 600px) {
  .change__photo { aspect-ratio: auto; height: 440px; }
  /* the phone lit on the ladder's step shows right of the missed card */
  .change__photo--missed img { object-position: 20% 50%; }
  .change__photo--booked img { object-position: 70% 50%; }
}

/* ---------- #day: the signature, the gold pen's day on the ivory ---------- */
.day__k { left: -14%; top: -12%; }
.day__grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-5) clamp(2rem, 4vw, 4.5rem); align-items: center; }
.day__stage { position: relative; height: 620px; }
.day__stage .day__scene { position: absolute; inset: 0; }
.day__stop { top: 0; left: 0; right: auto; }
@media (max-width: 900px) {
  .day__grid { grid-template-columns: minmax(0, 1fr); }
  .day__stage { height: 600px; }
}

/* ---------- #messages: her evening chat answered in seconds, the chat in glass beside her ---------- */
.messages .head { margin-bottom: var(--space-5); }
.messages__stage { aspect-ratio: 2 / 1; }
.messages__stage > video, .messages__stage > .kit-first { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-position: 50% 35%; }
.messages__stage .messages__scene { position: absolute; z-index: 2; top: 0; bottom: 0; left: auto; right: 4%; width: min(400px, 36%); display: grid; align-content: center; }
@media (max-width: 760px) {
  /* her face above, the chat over her laptop below */
  .messages__stage { aspect-ratio: auto; height: 560px; }
  .messages__stage > video { object-position: 48% 30%; }
  .messages__stage .messages__scene { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 300px; padding: 0 12px 12px; align-content: end; }
  .messages__stage .stop { top: 12px; left: 12px; right: auto; }
}

/* ---------- #inbox: every lead into one inbox, on the deeper ivory ---------- */
.inbox__k { right: -12%; bottom: -14%; }
.inbox .head { margin-bottom: var(--space-5); }
.inbox__stage { position: relative; width: min(100%, 900px); height: 520px; margin-inline: auto; }
.inbox__stage .inbox__scene { position: absolute; inset: 0; }
/* the stop icon just above the stage's top right corner, clear of the inbox */
.inbox__stop { top: -48px; right: 0; }
@media (max-width: 640px) { .inbox__stage { height: 640px; } }