/*
  Work cards (.cards; Figma homepage 63:7xx, Work page 158:1220 "Case studies"). Three 480px cards edge to edge, each
  an image, a category row and a title + caption, divided by white hairlines. A red "View work" CTA follows the cursor
  over the images (/shared/cards.js); touch devices and phones get a static badge on each image instead.

  Markup:
    <div class="cards" data-follow>
      <article class="card">
        <div class="card__img" data-follow-zone data-title="Great Dane" data-href="/case-studies/great-dane/"><img class="cover" src alt></div>
        <div class="card__cat">physical</div>
        <div class="card__body">
          <h3><a href="/case-studies/great-dane/">Great Dane</a></h3>
          <p>Caption</p>
        </div>
      </article>
      …
      <a class="view-work" href="#" aria-label="View work"><span class="cta__label">View work</span><span class="cta__arrow"><img src="/home-assets/arrow-red.svg" alt=""></span></a>
    </div>
  A card without a case study yet has data-href="#" (or no data-href) and a plain title: it gets no CTA or badge.
  The case-study cards on the homepage and the Work page are generated by /build.py between CASE-STUDIES markers,
  from /case-studies/cards.json (order) and each study.json's "card" (category, summary, crop, alt); the image is the
  study's hero master, which the page transition then flies into the hero.

  The follow CTA (.view-work) and its touch badges also serve other hover zones, e.g. the homepage Insights wall
  ([data-follow] on the container, [data-follow-zone] on each zone).
*/
.cards{position:relative;display:grid;grid-template-columns:repeat(3,48rem)}
.card{display:grid;grid-template-rows:44.35rem 4.2rem 19.79rem}
.card__img{position:relative;overflow:hidden;border-bottom:var(--rule) solid var(--fg)}
.card__img img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover .card__img img{transform:scale(1.04)}
.card__cat{display:flex;align-items:center;padding-left:3.94rem;font-size:1.2rem;line-height:1.7rem;color:var(--grey-2);text-transform:uppercase;border-bottom:var(--rule) solid var(--fg)}
.card:not(:last-of-type) .card__img,
.card:not(:last-of-type) .card__cat{border-right:var(--rule) solid var(--fg)}
.card__body{padding:1.4rem 0 0 3.94rem}
.card__body h3{font-size:2.2rem;line-height:4rem;font-weight:500;letter-spacing:-.022rem}
.card__body h3 a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.4rem;transition:text-decoration-color .25s}
.card__body h3 a:hover{text-decoration-color:currentColor}
.card__body p{margin-top:.3rem;width:34.6rem;font-size:2rem;line-height:2.3rem;color:var(--grey)}

/* Cursor-following CTA (Figma 63:802 "View work", 63:896 "Read article") */
.view-work{
  position:absolute;left:0;top:0;z-index:2;display:flex;height:5rem;color:#fff;
  background:var(--red);                     /* hidden behind its parts */
  opacity:0;transform:scale(.96);visibility:hidden;
  transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .3s;
}
.view-work.is-on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.view-work:hover .cta__arrow img{transform:translate(.3rem,-.3rem)}

/* Touch devices can't hover, so each zone that has somewhere to go gets a static badge instead: the CTA's own label
   and the white arrow box, drawn as one ::before. cards.js marks those zones with data-badge (the CTA label text), so
   a zone with nothing to open never shows one, and every container gets the right wording with no overrides.
   The label box is at least 173px (Figma 63:802) and grows with longer text; the arrow box is a square on the right. */
@media (hover:none),(max-width:767px){
  .view-work{display:none!important}
  [data-badge]{cursor:pointer}
  [data-badge]::before{
    content:attr(data-badge);position:absolute;z-index:1;left:var(--badge-x);bottom:var(--badge-y);
    min-width:calc(var(--badge-min) + var(--badge-h));height:var(--badge-h);
    padding:0 calc(var(--badge-h) + var(--badge-pad)) 0 var(--badge-pad);white-space:nowrap;
    color:#fff;font-weight:500;font-size:var(--badge-font);line-height:var(--badge-h);
    background:url("/home-assets/arrow-red.svg") no-repeat right calc((var(--badge-h) - var(--badge-glyph)) / 2) center / var(--badge-glyph),
               linear-gradient(#fff,#fff) no-repeat right center / var(--badge-h) 100%,
               var(--red);
  }
}
@media (hover:none){[data-badge]{--badge-x:3.94rem;--badge-y:3rem;--badge-h:5rem;--badge-min:17.32rem;--badge-pad:2rem;--badge-glyph:2.09rem;--badge-font:2.4rem}}

/* ═════════════════════════ PHONES: one card per row ═════════════════════════ */
@media (max-width:767px){
  .cards{grid-template-columns:1fr}
  .card{grid-template-rows:30rem 3.6rem auto}
  .card:not(:last-of-type){border-bottom:var(--rule) solid var(--fg)}
  .card:not(:last-of-type) .card__img,.card:not(:last-of-type) .card__cat{border-right:0}
  .card__cat{padding-left:2rem;font-size:1.1rem}
  .card__body{padding:1.4rem 2rem 3.2rem}
  .card__body h3{font-size:2rem;line-height:3.2rem}
  .card__body p{width:auto;margin-top:.4rem;font-size:1.6rem;line-height:2.2rem}

  [data-badge]{--badge-x:2rem;--badge-y:2rem;--badge-h:4.4rem;--badge-min:13.6rem;--badge-pad:1.4rem;--badge-glyph:1.8rem;--badge-font:1.8rem}
}