/* ==========================================================================
   MotoJoy — category card

   One owner for the .cat-card component, used by the homepage category strip
   block, 404.php, and search.php. It previously lived inside the inherited
   homepage stylesheet, which meant a component used on three surfaces was
   owned by one of them.

   Rewritten to the approved treatment while being extracted. The inherited
   version carried a large radius, a lift-on-hover transform, and a 30px soft
   shadow — all three explicitly rejected in docs/design-system.md §2 — plus
   literal rgba() values. Depth here comes from the plane and the scrim.
   ========================================================================== */

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: var(--wp--custom--ratio-category);
  padding: var(--wp--preset--spacing--5);
  overflow: hidden;
  color: var(--wp--preset--color--text-on-dark);
  text-decoration: none;
  background-color: var(--wp--preset--color--ink);
}

.cat-card__media,
.cat-card__grid,
.cat-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cat-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback plane for a category with no thumbnail set. Depth comes from the
   plane change alone — design-system.md §6. */
.cat-card__grid {
  background-color: var(--wp--preset--color--ink-soft);
}

/* Bottom-weighted scrim so the name stays legible over any supplier image,
   fading out before the top edge so the photograph still reads. */
.cat-card__scrim {
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--wp--preset--color--ink) 58%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--ink) 27%, transparent) 42%,
    color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) 100%
  );
}

.cat-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--4);
}

/* h3 is the "card or block heading" role in design-system.md §4.2, which is
   exactly what this is. Real lowercase in the DOM; uppercase is styling. */
.cat-card__name {
  font-size: var(--wp--preset--font-size--heading-3);
  font-weight: 800;
  line-height: var(--wp--custom--leading-heading);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
}

.cat-card__arrow {
  flex: none;
  font-size: var(--wp--preset--font-size--heading-3);
  line-height: 1;
}

/* The tile deepens rather than lifts — design-system.md §2 rejects
   lift-on-hover. The scrim strengthening is the plane change. */
.cat-card:hover .cat-card__scrim,
.cat-card:focus-visible .cat-card__scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--ink) 44%, transparent) 42%,
    color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent) 100%
  );
}

.cat-card:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid
    var(--wp--preset--color--focus);
  outline-offset: calc(-1 * var(--wp--custom--focus-ring-width));
}

/* The inset ring sits over photography of any tone, so a white band inside
   it keeps the ring's own contrast at 6.65:1 (design-system.md §10). */
.cat-card:focus-visible::after {
  content: "";
  position: absolute;
  inset: var(--wp--custom--focus-ring-width);
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--wp--custom--focus-ring-offset)
    var(--wp--preset--color--bg);
}