/* =========================================================
   Design System — Category Card (shared component)
   A single product/category row: cut-out image, title + description,
   circular arrow link. Used by the home page's Featured Categories,
   the Supply Chain page's category list and the Product Catalogue (PLP) rows — one definition,
   shared everywhere a category/product needs to list this way.
   Markup:
   <a class="category-card" href="...">
     <div class="category-card__image"><img ... /></div>
     <div class="category-card__info"><h3>...</h3><p>...</p></div>
     <span class="category-card__arrow"><img ... /></span>
   </a>
   ========================================================= */

/* Shared colour grade for product and category imagery across the site: slightly desaturated and warmed,
   so vivid product colours sit calmly with the brand palette. One token, applied by every component
   that shows product photography (category rows, trend tiles, product rows, overlay, search thumbs). */
:root {
  --image-grade: saturate(0.86) contrast(1) sepia(0.05) brightness(1.02);
}

.category-card {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid #e8e8e8;
}

.category-card:first-child { padding-top: 0; }
.category-card:last-child { border-bottom: none; }

/* Category images are always transparent cut-outs: no square crop, no
   rounded mask, no background. Photo/product tiles belong to .trend-card. */
.category-card__image {
  width: 124px;
  height: 124px;
  flex-shrink: 0;
  background: none;
}

.category-card__image img {
  filter: var(--image-grade);
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
  transition: transform 0.4s ease;
}

.category-card:hover .category-card__image img {
  transform: translateY(-6px) rotate(-4deg);
}

.category-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-card__info h3 {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.28;
  letter-spacing: -0.6px;
  color: #111;
}

.category-card__info p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #45454c;
  /* supporting text truncates after 2 lines, at the card level */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.category-card__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.category-card__arrow img { width: 20px; height: 20px; }

.category-card:hover .category-card__arrow {
  transform: translate(2px, -2px);
  border-color: #272c7d;
}

@media (max-width: 720px) {
  .category-card { flex-wrap: wrap; gap: 16px; }
  .category-card__info h3 { font-size: 24px; }
}

/* plain list row (not a link): no pointer cursor, no hover motion */
.category-card--static { cursor: default; }
.category-card--static:hover .category-card__image img { transform: none; }