/* services.css: the Services page's own parts; the chapters and the closing band are in components.css. */

/* ---------- the header: a phone on a table, in a big frame ---------- */
.svc-hero { padding-block: 16px 0; }
.svc-hero__frame { position: relative; display: flex; align-items: center; min-height: clamp(600px, 78vh, 700px); padding: 40px; border-radius: var(--radius-xl); overflow: hidden; background: var(--c-paper-alt); }
.svc-hero__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.svc-hero__photo img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 48%; }
.svc-hero__screen { font-size: 19px; --bk-r: 26px; }
/* the screen's own ground: as the scene's loop joins, the photo's real screen never shows through */
.svc-hero__photo [data-screen] { background: var(--c-paper-alt); }
.svc-hero__card { position: relative; z-index: 2; display: grid; justify-items: start; gap: 14px; box-sizing: border-box; width: min(560px, 54%); padding: 36px 34px 30px; border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); }
.svc-hero__card h1 { font-size: clamp(2.6rem, 1.5rem + 3vw, 4rem); line-height: 1; }
.svc-hero__card > p { color: var(--c-ink-soft); font-size: 1.1875rem; line-height: 1.45; }
.svc-hero__button { margin-top: 8px; }
.svc-hero__stop { top: 16px; right: 16px; }
@media (max-width: 760px) {
  .svc-hero__frame { display: block; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; }
  .svc-hero__card { width: auto; padding: 18px 0 22px; border-radius: 0; background: none; box-shadow: none; }
  .svc-hero__card h1 { font-size: clamp(2.5rem, 11vw, 3.1rem); }
  .svc-hero__photo { position: relative; inset: auto; height: 470px; border-radius: var(--radius-l); }
  /* the phone large in its box: the table drawn three boxes wide, the phone in its middle */
  .svc-hero__photo img { inset: auto; left: -170%; top: -128px; width: 300%; height: auto; aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .svc-hero__stop { top: auto; bottom: 14px; right: 14px; }
  .svc-hero__screen { font-size: 20px; }
  .svc-hero__link { display: none; }
}

/* ---------- found ---------- */
.svc-found__photo { object-position: 20% 40%; }
#found .chapter__media img { object-position: 20% 40%; }
.svc-found__slot { right: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); top: 50%; width: 430px; height: 560px; transform: translateY(-50%); }
@media (max-width: 1180px) { .svc-found__slot { width: 380px; } #found .chapter__card { width: 400px; } }
@media (max-width: 960px) {
  /* the photo on top, the map's glass over its foot and on down the pale ground, her face well clear */
  #found .chapter__media { height: 810px; background: var(--c-paper-alt); }
  #found .chapter__media img { inset: 0 0 auto; width: 100%; height: 590px; object-position: 25% 50%; }
  .svc-found__slot { left: 0; right: 0; top: 262px; width: auto; height: 540px; transform: none; }
  #found .chapter__card { width: auto; }
}

/* ---------- booked ---------- */
.svc-booked__clip { object-position: 58% 50%; }
.svc-booked__slot { left: 16px; top: 50%; width: 440px; height: 450px; transform: translateY(-50%); }
@media (max-width: 1180px) { .svc-booked__slot { width: 400px; } }
@media (max-width: 960px) {
  .svc-booked__stage { min-height: 770px; background: var(--c-line); }
  .svc-booked__clip { inset: -1px -1px auto; height: 570px; object-position: 84% 30%; }
  .svc-booked__slot { left: 0; right: 0; top: auto; bottom: 8px; width: auto; transform: none; }
}

/* ---------- picked ---------- */
/* mirrored, so the couple sits left of the card: its plant goes under the card, their faces stay clear of it */
#picked .chapter__media img { object-position: 50% 40%; transform: scaleX(-1); }
.svc-picked__slot { left: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); bottom: 28px; width: 420px; height: 300px; }
@media (max-width: 960px) {
  #picked .chapter__media { height: 540px; }
  #picked .chapter__media img { object-position: 62% 0; }
  .svc-picked__slot { left: 0; right: 0; top: 250px; bottom: auto; width: auto; height: 282px; }
}

/* ---------- answered ---------- */
.svc-answered__clip { object-position: 100% 50%; }
.svc-answered__slot { inset: 0; }
@media (max-width: 960px) {
  .svc-answered__stage { min-height: 660px; }
  .svc-answered__clip { inset: -1px -1px auto; height: 520px; object-position: 43% 0; }
  .svc-answered__slot { inset: auto 0 12px 0; height: 300px; }
}

/* ---------- the mix ---------- */
.mix { padding-block: var(--section-y); }
.mix .sec-head { margin-inline: auto; justify-items: center; text-align: center; }
.mix__ground { padding: clamp(18px, 3vw, 40px); }
.mix__scene { height: 600px; }
.mix__stop { top: 16px; right: 16px; }
@media (max-width: 640px) {
  .mix__scene { height: 640px; }
  .mix__stop { top: auto; bottom: 10px; right: 10px; }
  .mix__ground { padding-bottom: 28px; }
}