/* Quality and production follow-up */

/* record: studio photo with an order slip laid over it */
.q-record{margin:0;display:flex;flex-direction:column}
.q-record-photo{background:#fff;padding:24px 24px 80px;width:78%}
.q-record-photo img{width:100%;aspect-ratio:4/3;object-fit:contain}
.q-slip{position:relative;align-self:flex-end;margin-top:-150px;width:min(66%,390px);background:var(--white);box-shadow:0 30px 60px -30px rgba(31,36,39,.6);transform:rotate(-1.2deg)}
.q-slip-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--asphalt);color:var(--white)}
.q-slip-top b{font:600 1.25rem/1 var(--d);text-transform:uppercase}
.q-slip-top span{font-size:.78rem;font-weight:600;color:var(--amber-ink);background:var(--amber);padding:3px 8px;border-radius:2px}
.q-slip dl{padding:6px 18px 14px}
.q-slip dl div{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--haze-2);font-size:.88rem}
.q-slip dt{font-weight:600;color:var(--ink-2)}
.q-slip dd{font-weight:600}
.q-slip dd.q-blank{font-weight:400;color:var(--ink-2);border-bottom:1px dashed var(--asphalt-3);justify-self:start}
.q-record figcaption{font-size:.82rem;color:var(--ink-2);padding-top:18px;max-width:46ch}

/* sample path sits on dark */
.q-path{margin-top:30px}

/* production: stages with update spans underneath */
.q-track{--cols:6;background:#fff;padding:28px clamp(16px,2.4vw,32px) 24px;box-shadow:0 24px 48px -36px rgba(31,36,39,.55)}
.q-stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));position:relative}
.q-stages::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:3px;background:var(--asphalt)}
.q-stages li{position:relative;padding:30px 12px 0 0}
.q-stages li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:#fff;border:3px solid var(--asphalt)}
.q-stages b{display:block;font:600 1.3rem/1.05 var(--d);text-transform:uppercase}
.q-stages span{display:block;margin-top:4px;font-size:.84rem;color:var(--ink-2)}
.q-marks{list-style:none;padding:0;margin-top:26px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));row-gap:8px}
.q-marks li{grid-column:var(--from)/calc(var(--to) + 1);position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;background:var(--haze-3);font-size:.88rem;font-weight:600;color:var(--ink)}
.q-marks i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--asphalt)}
.q-marks li.any{background:transparent;border:1px dashed var(--asphalt-3)}
.q-marks li.alert{background:rgba(224,154,59,.22)}
.q-marks li.alert i{background:var(--amber)}
.q-strip{display:grid;grid-template-columns:4fr 3fr 3fr 3fr;gap:10px;margin-top:20px}
.q-strip figure{margin:0;position:relative;height:clamp(220px,22vw,320px);overflow:hidden}
.q-strip img{width:100%;height:100%;object-fit:cover}
.q-strip figcaption{position:absolute;left:10px;bottom:10px;font-size:.78rem;color:var(--white);background:rgba(43,48,52,.7);padding:3px 8px}
.q-wide-note{max-width:80ch}

/* photos and video */
.q-pair{margin-top:44px}

/* factory checks: four big rows */
.q-checks{list-style:none;padding:0;margin-top:30px;border-top:2px solid var(--ink);counter-reset:qc}
.q-checks li{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);counter-increment:qc}
.q-checks li::before{content:counter(qc);grid-row:1/3;font:700 3.2rem/.9 var(--d);color:var(--amber)}
.q-checks b{font:600 1.7rem/1.05 var(--d);text-transform:uppercase}
.q-checks p{color:var(--ink-2)}

/* problems lane image that is a studio cut-out */
.c2-lane figure img.q-contain{object-fit:contain;background:#fff;padding:16px}

.q-tiles{margin-top:clamp(48px,6vw,80px)}

@media (max-width:1000px){
  .q-record{max-width:640px}
  .q-stages,.q-marks{--cols:3}
  .q-stages{row-gap:22px}
  .q-stages::before{display:none}
  .q-marks li{grid-column:1/-1}
}
@media (max-width:600px){
  .q-record-photo{width:100%;padding:16px 16px 24px}
  .q-slip{align-self:stretch;width:auto;margin:-12px 10px 0;transform:none}
  .q-slip dl div{grid-template-columns:100px 1fr}
  .q-stages,.q-marks{--cols:2}
  .q-strip{grid-template-columns:1fr 1fr}
  .q-strip figure:first-child,.q-strip figure:last-child{grid-column:1/-1}
  .q-strip figure{height:180px}
  .q-checks b{font-size:1.4rem}
  .q-checks li{grid-template-columns:48px minmax(0,1fr)}
  .q-checks li::before{font-size:2.5rem}
}