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

/* ---------- #top: the words centered on the ivory; under them the framed barbershop footage, the picker's card
   overlapping its top left, the post's card in glass at its right ---------- */
.sw-top { padding-top: clamp(1.5rem, 3vw, 2.75rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.sw-top__copy { display: grid; justify-items: center; text-align: center; gap: var(--space-3); max-width: 46rem; margin: 0 auto 4.25rem; }
.sw-top h1 { font-size: clamp(2.2rem, 1.2rem + 2.1vw, 3.3rem); max-width: 20ch; }
.sw-top__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 36rem; }
.sw-top__panel { position: relative; height: clamp(500px, 62vh, 620px); }
/* the footage's own box, the clip 1 px past each side (kit.md, "Video") */
.sw-top__clip { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.sw-top__clip video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos); }
/* the post's card over the counter on the right, clear of both faces */
.sw-top__panel .sw-top__scene { position: absolute; z-index: 3; top: auto; left: auto; right: 3%; bottom: 6%; width: 320px; height: 470px; }
.sw-top__stop { top: 16px; right: 16px; }
/* the picker over the window on the left, rising past the footage's top edge */
.sw-top__picker { position: absolute; z-index: 4; left: 32px; top: -28px; width: min(360px, 34%); margin: 0; }
@media (max-width: 999px) {
  /* the footage with the card on its right, the picker under it (the panel's padding holds the footage's room: a
     margin on the picker would collapse through the panel) */
  .sw-top__panel { height: auto; padding-top: 588px; }
  .sw-top__clip { inset: 0 0 auto 0; height: 560px; }
  .sw-top__panel .sw-top__scene { top: 0; bottom: auto; height: 540px; right: 3%; }
  .sw-top__picker { position: relative; left: auto; top: auto; width: auto; max-width: 40rem; margin: 0; }
}
@media (max-width: 760px) {
  /* both faces in the footage's upper part; the card across its foot, hanging onto the ivory (at 590 px the clip's
     960 px poster is drawn under 1.1 times its size) */
  .sw-top__copy { margin-bottom: var(--space-5); }
  .sw-top__panel { padding-top: 728px; }
  .sw-top__clip { height: 590px; }
  .sw-top__panel .sw-top__scene { top: 400px; left: 12px; right: 12px; width: auto; height: 300px; }
  /* the stop icon just above the card's top right corner, so both fit one view */
  .sw-top__stop { top: 372px; right: 12px; }
}

/* the choice pictures' own answers: a photo dropping into its day */
.choice .pic-drop { transform: translateY(-10px); opacity: 0.4; }
.choice:has(input:checked) .pic-drop { transform: none; opacity: 1; }

/* ---------- #social: the balayage photographed, the month of posts in glass over the soft left ---------- */
.social .head { margin-bottom: var(--space-5); }
.social__pic { position: relative; }
.social__stage { aspect-ratio: 2 / 1; }
.social__stage img { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-position: 50% 50%; }
.social__pic .social__scene { position: absolute; z-index: 3; top: 0; bottom: 0; left: 3%; right: auto; width: min(480px, 44%); display: grid; align-content: center; }
.social__stop { top: 14px; right: 14px; }
@media (max-width: 1000px) {
  .social__stage { aspect-ratio: 3 / 2; }
  .social__pic .social__scene { width: min(440px, 56%); }
}
@media (max-width: 760px) {
  /* the phone and its screen above, the month across the photo's foot and onto the ivory */
  .social__pic { padding-bottom: 200px; }
  .social__stage { aspect-ratio: auto; height: 660px; }
  .social__stage img { object-position: 46% 50%; }
  .social__pic .social__scene { top: 460px; bottom: auto; left: 0; right: 0; width: auto; height: 400px; align-content: start; }
  /* the stop icon just above the month's top right corner, so both fit one view */
  .social__stop { top: 418px; right: 12px; }
}

/* ---------- #reputation: the signature, the salon's profile on the ivory ---------- */
.reputation__k { left: -12%; bottom: -16%; }
.reputation__head { margin-bottom: var(--space-5); }
.reputation__stage { position: relative; width: min(100%, 960px); height: 560px; margin-left: auto; }
.reputation__stage .reputation__scene { position: absolute; inset: 0; }
/* the stop icon just above the stage's top right corner, clear of the visits */
.reputation__stop { top: -48px; right: 0; }
@media (max-width: 1000px) { .reputation__stage { margin-inline: auto; height: 600px; } }
@media (max-width: 640px) { .reputation__stage { height: 720px; } }