/* Breakpoints for the design-canvas pages.
   The artboards carry inline styles, which a stylesheet cannot beat on source
   order, so every reflow rule needs !important. Same trap as the Dino build.
   Grids are targeted by their literal inline value, so the source stays
   untouched and editable on the canvas. */

@media (max-width:1100px){
  [style*="grid-template-columns:1fr 468px"],
  [style*="grid-template-columns:1fr 420px"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:2fr 1fr 1fr 1.2fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:860px){
  /* the box sets overflow:hidden inline, so this needs to win outright */
  .ledger{overflow-x:auto!important}
  [style*="grid-template-columns:76px 1fr 140px"]{min-width:720px}
}

@media (max-width:760px){
  .wrap{padding:0 16px!important}
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1.2fr"]{grid-template-columns:minmax(0,1fr)!important}

  /* Thumbnails stay four across. Collapsing them to one column pushed the prize
     name and the buy box 1500px down the page, which is the block-order failure
     the QA sweep is for. */
  .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important}

  /* one row of header, always: the real build inherits the home page drawer */
  header nav{display:none!important}
  header .wrap{height:64px!important;gap:16px!important}
  header .wrap img{width:44px!important}

  /* display type is sized for 1440; let it shrink rather than wrap to four lines */
  [style*="font-size:58px"]{font-size:clamp(34px,9.5vw,58px)!important}
  [style*="font-size:52px"]{font-size:clamp(32px,8.5vw,52px)!important}
  [style*="font-size:44px"]{font-size:clamp(30px,7.5vw,44px)!important}
  [style*="font-size:40px"]{font-size:clamp(27px,7vw,40px)!important}
  [style*="font-size:36px"]{font-size:clamp(25px,6.5vw,36px)!important}
  [style*="font-size:34px"]{font-size:clamp(24px,6vw,34px)!important}
  [style*="font-size:30px"]{font-size:clamp(23px,5.5vw,30px)!important}

  /* wide flex rows stack rather than squash */
  [style*="align-items:flex-end"][style*="justify-content:space-between"]{flex-wrap:wrap!important}
  [style*="text-align:right"]{text-align:left!important}
  .band{padding:34px 0!important}
}

@media (max-width:420px){
  [style*="grid-template-columns:repeat(5,minmax(0,1fr))"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* a card that goes somewhere should say so */
.cardlink{transition:transform 160ms}
.cardlink:hover .card{border-color:var(--steel)}
.cardlink:hover .btn{background:var(--red-400)}