/* home.css: places and sizes the home page's parts, with the tokens of system.css only. */

/* framework */
.fw-panel .panel__media video { object-position: 50% 45%; }
.fw-panel .panel__grade { background: linear-gradient(90deg, rgba(8, 24, 49, 0.12) 0%, rgba(8, 24, 49, 0.28) 46%, rgba(8, 24, 49, 0.74) 100%); }
#framework .rail { margin-top: 28px; }
@media (max-width: 860px) {
  .fw-panel .panel__media video { object-position: 46% 40%; }
  .fw-panel .panel__grade { background: linear-gradient(180deg, rgba(8, 24, 49, 0.1) 0%, rgba(8, 24, 49, 0.2) 40%, rgba(8, 24, 49, 0.82) 100%); }
}
@media (max-width: 520px) { .fw-panel .panel__media video { object-position: 48% 30%; } }

/* diagnosis: the report cards over the clinic's front desk, blurred into a soft wash */
.dg-stage { min-height: 600px; }
.dg-stage .panel__media { filter: blur(5px) saturate(1.05); transform: scale(1.03); }
.dg-stage .panel__media video { object-position: 45% 40%; }
.dg-stage .panel__grade { background: linear-gradient(135deg, rgba(8, 24, 49, 0.46), rgba(245, 200, 74, 0.12)); }
@media (max-width: 600px) { .dg-stage { min-height: 650px; } }

/* results: the front desk at the top, the four tiles over the deep grade below it */
.res-panel { display: grid; align-content: end; padding: clamp(240px, 22vw, 330px) 24px 24px; }
.res-panel .panel__media video { object-position: 50% 28%; }
.res-panel .panel__grade { background: linear-gradient(180deg, rgba(8, 24, 49, 0.16) 0%, rgba(8, 24, 49, 0.34) 30%, rgba(8, 24, 49, 0.78) 58%, rgba(8, 24, 49, 0.9) 100%); }
.res-panel .panel__stage { pointer-events: none; }
.res-panel .stop { top: 16px; bottom: auto; left: 16px; right: auto; }
@media (max-width: 1000px) { .res-panel .panel__media video { object-position: 40% 26%; } }
@media (max-width: 600px) {
  .res-panel { padding: 250px 14px 14px; }
  .res-panel .panel__media { bottom: auto; height: 330px; }
  .res-panel .panel__media video { object-position: 34% 30%; }
  .res-panel .panel__grade { background: linear-gradient(180deg, rgba(8, 24, 49, 0.12) 0, rgba(8, 24, 49, 0.3) 150px, var(--c-brand) 330px); }
}

/* execute: the worker in the left half (the clip scaled from its right edge), the engine board on the right */
.ex-panel { aspect-ratio: auto; min-height: 600px; }
.ex-panel .panel__media video { object-position: 50% 55%; transform: scale(1.3); transform-origin: 100% 55%; }
.ex-panel .panel__grade { background: linear-gradient(90deg, rgba(8, 24, 49, 0.32) 0%, rgba(8, 24, 49, 0.42) 45%, rgba(4, 13, 29, 0.86) 100%); }
@media (max-width: 760px) {
  .ex-panel { min-height: 640px; }
  .ex-panel .panel__media video { object-position: 69% 50%; transform: none; }
  .ex-panel .panel__grade { background: linear-gradient(180deg, rgba(8, 24, 49, 0.2) 0%, rgba(8, 24, 49, 0.35) 30%, rgba(4, 13, 29, 0.9) 62%); }
}

/* faq: the heading beside the questions on wide screens */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); gap: 24px 64px; align-items: start; }
.faq-wrap .section__head { margin-bottom: 0; position: sticky; top: calc(var(--header-h, 64px) + 40px); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .section__head { position: static; margin-bottom: 8px; } }

/* close: the owner's evening on the right, the words and the picker on the left */
.close-band .panel__media video { object-position: 60% 40%; }
@media (max-width: 860px) { .close-band .panel__media video { object-position: 79% 40%; } }
@media (max-width: 860px) { .close-band .stop { top: 16px; bottom: auto; } }