/*
  OPTIONAL — NOT PART OF THE CLAUDE DESIGN.
  The design is desktop-only (fluid vw/vh sizing, no breakpoints). Desktop (>1024px) is untouched.
  Delete the <link> to this file in the Blade partial to reproduce the design with no additions.
*/

@media (max-width: 1024px) {
  .qc { padding: 12vh 6vw; }
  .qc .qc-intro { grid-template-columns: minmax(0, 1fr); gap: 8vh; }
  .qc .qc-intro__title { font-size: min(9vw, 64px); }
  .qc .qc-body { font-size: 16px; }
  .qc .qc-intro__media { height: 80vw; max-height: 640px; }
  .qc .qc-badge { width: min(18vw, 120px); }
  .qc .qc-badge__b { font-size: min(4.4vw, 26px); }

  .qc .qc-cards { grid-template-columns: minmax(0, 1fr); }
  .qc .qc-policy, .qc .qc-certs { padding: 40px 32px; }
  .qc .qc-policy__title { font-size: min(7vw, 40px); }
  .qc .qc-certs__title { font-size: min(6vw, 34px); }
  .qc .qc-certs__lede { font-size: 15px; }
  .qc .qc-cert__b { font-size: min(5vw, 26px); }
  .qc .qc-cert__t { font-size: 15px; }
  .qc .qc-certs__foot { font-size: 14px; }

  .qc .qc-commit__title { font-size: min(9vw, 60px); }
  .qc .qc-commit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc .qc-tile { height: 44vw; max-height: 380px; }
  .qc .qc-tile__t { font-size: min(4vw, 26px); }

  .qc .qc-modal__panel { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .qc .qc-modal__preview { padding: 32px; }
  .qc .qc-modal__sheet { max-width: 360px; max-height: none; }
  .qc .qc-modal__sheet-code { font-size: 44px; }
  .qc .qc-modal__info { padding: 32px; }
  .qc .qc-modal__code { font-size: 36px; }
}

@media (max-width: 640px) {
  .qc .qc-policy, .qc .qc-certs { padding: 28px 22px; border-radius: 24px; }
  .qc .qc-cert { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .qc .qc-cert__code { min-width: 0; }
  .qc .qc-cert__t { grid-column: 1 / -1; grid-row: 2; }
  .qc .qc-cert__actions { grid-column: 2; grid-row: 1; }
  .qc .qc-commit__grid { grid-template-columns: minmax(0, 1fr); }
  .qc .qc-tile { height: 64vw; }
  .qc .qc-tile__t { font-size: 22px; }
  .qc .qc-modal { padding: 3vh 4vw; }
  .qc .qc-modal__btn { flex: 1 1 100%; justify-content: center; }
}