/* Home adjustments, 10/21 from 09:39 (Leo on a Mac). Loaded after home.css, hfilm-card.css and card-awards.css on
   purpose: it overrides them. Sections:
   1 · tiles fit a laptop screen          2 · the award logos on hover are back, on a strip under the products
   3 · ROUTE's tile white                 4 · CloudBuds a little smaller            5 · Awards without boxes, logos larger

   1 · Leo 09:39 "做mac版本电脑的适配 … 现在mac上view只能看到一个行 不是我要的那种". home.css sizes every tile to one
   height taken from the window (the fold rule, then "the tiles are big again"). On a MacBook window (1440-1512 x
   790-860) that height is ~680-710 px, so the first row filled the screen and the next row showed as a 44-80 px strip
   of empty grey: it read as one row. A wide product (ElectroGlide, CIHANG, AR Helmet) is drawn at the tile's full
   width anyway, so most of that height was empty tile between the button and the product.
   Here a tile is as tall as its words plus a picture box sized from the tile's WIDTH ((100vw - 36px) / 2 = a tile:
   12 px margins and a 12 px gap): 2 : 1 for the wide products, so they keep exactly the size they had; taller boxes
   for the tall ones (XIONGDA and ROUTE 2 : 1.3, CloudBuds 2 : 1.05), never taller than home.css's --th, so on a wide,
   short window (Leo's PC) nothing grows. The two tiles of a row stretch to the taller one and the pictures fill to the
   bottom, so the products still stand on one line. The heights are written out rather than left to aspect-ratio,
   because the picture box is a size container. Phones (one column) are untouched.

   2 · Leo 10:28 "bug很多 hover之后的获奖logo都没有了". home.css places each product with
   `.works .wcard:not(.wcard--photo) .img img` (absolute, sized from the product's outline), and that rule also caught
   the logos inside the picture box (card-awards.js puts them in .img .ca): they were thrown out of their row and the
   row collapsed to nothing. They get their own size back, and since the products now reach the bottom of the tile,
   every picture box keeps a floor strip (--strip) under the product where the logos come in, centred, on hover. */
@media (min-width:735px){
  .works{--strip:clamp(46px,calc(1.2vw + 30px),58px)}
  .works .wcard{height:auto;min-height:0;max-height:var(--th)}
  .works .wcard:not(.wcard--photo) .img{flex:1 1 auto;min-height:0;height:calc((100vw - 36px) / 4 + var(--strip) - 20px)}
  .works .wcard:has(img[src*="img/xiongda.jpg"]):not(.wcard--photo) .img,
  .works .wcard:has(img[src*="img/route-robot.jpg"]):not(.wcard--photo) .img{height:calc((100vw - 36px) * .325 + var(--strip) - 20px)}
  /* 4 · CloudBuds (Leo 10:22 "稍微缩小一点点"): its box 2 : 1.15 -> 2 : 1.05, the earbuds ~9 % smaller */
  .works .wcard:has(img[src*="img/cloudbuds.jpg"]):not(.wcard--photo) .img{height:calc((100vw - 36px) * .2625 + var(--strip) - 20px)}
  /* the products stand on the strip: it replaces home.css's gap under them (--g, ~20 px), so a box grows by the difference */
  .works .wcard:not(.wcard--photo) .img img:not(.l){--g:max(clamp(16px,6cqh,44px),var(--strip))}
  /* the logos: their own size, never taller than the strip, centred on it */
  .works .wcard .img .ca{left:0;right:0;max-width:none;justify-content:center;bottom:6px}
  .works .wcard .img .ca img.l,.works .wcard:not(.wcard--photo) .img .ca img.l{position:static;left:auto;top:auto;width:auto;
    height:min(calc(var(--h,18) * var(--k)),calc(var(--strip) - 12px));max-width:none;max-height:none;object-fit:contain;
    mix-blend-mode:normal;transform:none!important}
  .works .wcard .img .ca--one img.l,.works .wcard:not(.wcard--photo) .img .ca--one img.l{height:calc(var(--strip) - 12px)}
}

/* 3 · ROUTE's tile white like the others (Leo 10:21 "这个背景调成白色"). The render's grey studio ground was turned to
   white in the picture itself (assets/img/route-robot.jpg, ?v=2: the flat background lifted to white with its floor
   shadow kept, the robot untouched), so it sits on the tile like the other renders. */
.works .wcard--grey,[data-theme="dark"] .works .wcard--grey{--wt:#f5f5f7}
.works .wcard--grey .img img{mix-blend-mode:multiply}

/* 5 · Awards (Leo 10:26 "去掉边框 logo放大"): no grey boxes; each award is its mark, larger, with the words under it. */
.haw{gap:clamp(40px,4.4vw,64px) clamp(24px,3vw,48px)}
.haw__t{justify-content:flex-start;gap:clamp(14px,1.4vw,22px);min-height:0;padding:0;border-radius:0;background:none}
.haw__m{height:clamp(80px,7vw,104px)}
.haw__m img{height:calc(var(--s,1) * clamp(76px,6.6vw,98px))}
@media (max-width:734px){
  .haw{gap:36px 20px}
  .haw__t{gap:12px;min-height:0;padding:0;border-radius:0}
  .haw__m{height:68px}
  .haw__m img{height:calc(var(--s,1) * 64px)}
}