/**
 * category-grid block — product category directory.
 *
 * Deliberately distinct from the white product cards (machine-card / tag-card):
 * full-bleed image tiles with a dark gradient scrim, the WHOLE tile is the link.
 * The section carries its own tinted background.
 */

@layer mm-block {
  .mm-x-category-directory {
    background: var(--mmx-soft);
  }

  .mm-x-cat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cat-cols, 3), 1fr);
    gap: 22px;
    margin-top: 34px;
  }

  /* Whole tile is one link. */
  .mm-x-cat-card {
    position: relative;
    display: block;
    min-height: 320px;
    border-radius: var(--mmx-radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(18, 24, 33, .10);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .mm-x-cat-card:hover,
  .mm-x-cat-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--mmx-shadow);
  }

  .mm-x-cat-card:focus-visible {
    outline: 3px solid var(--mmx-orange);
    outline-offset: 2px;
  }

  .mm-x-cat-card-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }

  .mm-x-cat-card:hover .mm-x-cat-card-img {
    transform: scale(1.07);
  }

  /* Gradient scrim so the white text stays readable over any image. */
  .mm-x-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 17, 19, 0) 28%, rgba(16, 17, 19, .60) 66%, rgba(16, 17, 19, .92) 100%);
  }

  .mm-x-cat-card-count {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--mmx-red);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
  }

  .mm-x-cat-card-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 22px 20px;
  }

  .mm-x-cat-card-title {
    margin: 0 0 6px;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
  }

  .mm-x-cat-card-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mm-x-cat-card-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
  }

  .mm-x-cat-card-more em {
    font-style: normal;
    transition: transform .25s ease;
  }

  .mm-x-cat-card:hover .mm-x-cat-card-more em {
    transform: translateX(5px);
  }
}

@layer mm-responsive {
  @media (max-width: 980px) {
    .mm-x-cat-grid { grid-template-columns: repeat(2, 1fr); }
  }
}

@layer mm-responsive {
  @media (max-width: 640px) {
    .mm-x-cat-grid { grid-template-columns: 1fr; }
    .mm-x-cat-card { min-height: 240px; }
  }
}