/* Marketplace — Figma 2324:295 / 2346:1391 (CategoryCard 2358:1851) */
.market__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}
.market__grid > li { display: flex; }

.market__card {
  --cat-angle: 159.3deg;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 205px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
}
.market__card--industrial   { --cat-a: #17514e; --cat-b: #2a8f84; }
.market__card--agricultural { --cat-a: #2c6b41; --cat-b: #63b87f; }
.market__card--residential  { --cat-a: #1a5e74; --cat-b: #3fa5b8; }
.market__card--commercial   { --cat-a: #124a57; --cat-b: #2e7f93; }

/* Photo cap: the category photo, tinted with the card's brand gradient at the
   bottom edge and overlaid with the 22px hairline plot grid from the Figma cap. */
.market__cap {
  position: relative;
  display: block;
  flex: none;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(var(--cat-angle), var(--cat-a) 14.645%, var(--cat-b) 85.355%);
}
.market__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .9s var(--ease);
}
.market__cap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--cat-a) 70%, transparent) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35), #000);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35), #000);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .market__card:hover .market__img { transform: scale(1.09); }
  .market__card:hover .market__cap::after { opacity: .55; }
}

.market__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 17px 19px;
}
.market__title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}
.market__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.market__card:focus-visible { border-radius: 18px; }

@media (hover: hover) {
  .market__card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--el-md);
  }
}

@media (max-width: 1060px) {
  .market__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .market__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .market__card { --cat-angle: 163.4deg; min-height: 0; }
}