/* ============================================================
   Product Categories grid

   Geometry follows the reference, measured at 1440x900:
     tile 276 x 227, media band 274 x 157 (7:4), label band 68 tall,
     column gap 18, row gap 35, 4 across, tile radius 6,
     1px hairline border, 0 2px 8px rgba(0,0,0,.1) shadow.

   Colours are ours. The reference fills its tile with a slate blue on
   hover and flips the title to white; the GPS equivalent of that same
   interaction is German Red with white text -- 5.15:1, an approved
   pairing from the deck. Slate blue is not in our palette.
   ============================================================ */

/* The sprite carries the artwork only; it must never take up space. */
.cats__sprite{position:absolute;width:0;height:0;overflow:hidden}

.cats{background:var(--gps-white)}

.cats__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:35px 18px;                 /* row gap / column gap, per the reference */
  margin:0;padding:0;list-style:none;
}
.cats__item{display:flex}        /* stretches every tile to the row height */

/* ---------- Tile ---------- */
.cat-card{
  display:flex;flex-direction:column;width:100%;
  background:var(--grey-100);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-tile);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  overflow:hidden;               /* keeps the media square with the radius */
  text-decoration:none;
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}

/* Media band. White, not grey: the illustrations are drawn for a white
   ground, and it matches the cut-out product shots the reference uses. */
.cat-card__media{
  display:block;position:relative;
  background:var(--gps-white);
  border-bottom:1px solid var(--grey-300);
  aspect-ratio:7/4;
}
.cat-card__art{
  position:absolute;inset:0;width:100%;height:100%;
  padding:var(--sp-3);
}

/* ---------- Label band ---------- */
.cat-card__title{
  display:flex;align-items:center;justify-content:center;
  flex:1 0 auto;                 /* equalises bands across a short row */
  min-height:4.25rem;            /* the reference band is 68px           */
  margin:0;padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-head);
  font-size:clamp(1rem,1.35vw,1.28125rem);   /* tops out at ~20.5px */
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  line-height:1.3;
  text-align:center;text-wrap:balance;
  color:var(--gps-black);
  transition:color var(--dur) var(--ease);
}

/* ---------- Hover / focus ----------
   Pointer and keyboard get the same treatment. :focus-within covers the
   case where focus lands on the <a> -- the global :focus-visible ring
   still draws on top of it, so the tile never relies on colour alone. */
.cat-card:hover,
.cat-card:focus-within{
  background:var(--gps-red);
  border-color:var(--gps-red);
  box-shadow:0 10px 24px rgba(17,17,17,.18);
  transform:translateY(-3px);
}
.cat-card:hover .cat-card__title,
.cat-card:focus-within .cat-card__title{color:var(--gps-white)}

/* The media band keeps its white ground on hover so the artwork stays
   legible; only its hairline picks up the fill, which reads as the
   colour sweeping up behind the illustration. */
.cat-card:hover .cat-card__media,
.cat-card:focus-within .cat-card__media{border-bottom-color:var(--gps-red)}

@media (prefers-reduced-motion:reduce){
  .cat-card{transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
  .cat-card:hover,.cat-card:focus-within{transform:none}
}

/* ---------- Narrower viewports ----------
   Column count steps down rather than letting the tiles squeeze: below
   about 480px a two-up grid wraps "Generators & Compressors" onto three
   lines and the row heights stop matching. */
/* Only the column count steps down. The 35/18 gap is the reference's
   own rhythm and it is a constant there at every width, so overriding
   it per breakpoint — 32/16 at tablet, 16/16 on phones — was quietly
   tightening the grid exactly where the cards get bigger relative to
   the screen and need more air, not less. */
@media (width < 64rem){
  .cats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (width < 48rem){
  .cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width < 30rem){
  .cats__grid{grid-template-columns:minmax(0,1fr)}
  /* One column means a 335px-wide card at 375, so the two reasons the
     label band was collapsed here both disappear: nothing wraps to
     three lines any more, and a 16px title under a 191px-tall image
     reads as a caption rather than the card's name. Back to the
     reference's 68px band, at the size the proportion asks for. */
  .cat-card__title{font-size:var(--fs-lg)}
}