/* ==========================================================================
   Marketplace landing page.

   This used to be a near-copy of category-pages.css: 83 class definitions of
   which the page only ever used 18, because the item grid, cart and detail
   modal all live on the category pages. What remains is the landing page
   itself plus the few shared names the page markup still carries.

   The per-category accent comes from the `--cat-accent` values defined in
   css/category-pages.css, reused here via the same .category-* class names.
   ========================================================================== */

.marketplace-main {
  min-height: 100vh;
  overflow-x: hidden;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 100px) 0 clamp(32px, 3.6vw, 56px);
}

.mp-hero::after {
  content: '';
  position: absolute;
  inset: -45% -6% auto 38%;
  height: 560px;
  background: radial-gradient(48% 50% at 50% 50%, rgba(12, 174, 244, 0.22) 0%, transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}

.mp-hero > * {
  position: relative;
}

.mp-hero__title {
  max-width: 24ch;
  margin-bottom: var(--avia-sp-4);
}

.mp-hero__lead {
  max-width: 62ch;
  margin: 0;
  font-size: var(--avia-fs-lead);
  line-height: 1.55;
  color: var(--avia-text-dim);
}

/* --------------------------------------------------------------------------
   Category grid
   -------------------------------------------------------------------------- */

.mp-cats {
  padding-bottom: clamp(64px, 7vw, 120px);
}

.mp-cats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--avia-sp-4);
}

.mp-cats__title {
  margin: 0;
}

.mp-cats__count {
  font-size: var(--avia-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--avia-text-faint);
  font-variant-numeric: tabular-nums;
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--avia-sp-4);
  margin-top: var(--avia-sp-5);
}

/* --------------------------------------------------------------------------
   Category card
   -------------------------------------------------------------------------- */

.mp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--avia-text);
  background-color: rgba(3, 40, 63, 0.42);
  background-image: var(--avia-card-fill);
  border: 1px solid var(--avia-stroke);
  border-radius: var(--avia-r-md);
  box-shadow: var(--avia-inset-top);
  transition: transform var(--avia-dur) var(--avia-ease), border-color var(--avia-dur) var(--avia-ease),
    box-shadow var(--avia-dur) var(--avia-ease);
}

.mp-card:hover {
  transform: translateY(-5px);
  border-color: var(--cat-accent);
  box-shadow: var(--avia-inset-top), 0 22px 44px -14px var(--cat-glow);
}

.mp-card__index {
  position: absolute;
  top: var(--avia-sp-3);
  right: var(--avia-sp-4);
  z-index: 2;
  font-family: var(--avia-font-display);
  font-size: var(--avia-fs-eyebrow);
  font-weight: var(--avia-fw-bold);
  letter-spacing: var(--avia-ls-eyebrow);
  color: var(--avia-text-faint);
  font-variant-numeric: tabular-nums;
}

.mp-card__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  overflow: hidden;
  /* app-core.js paints the category artwork as a mask over currentColor, so
     this is what actually tints each icon. */
  color: var(--cat-accent-hi);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border-bottom: 1px solid var(--avia-stroke-soft);
}

/* Accent wash behind the icon, tinted per category. */
.mp-card__art::before {
  content: '';
  position: absolute;
  inset: -55% -20% auto -20%;
  height: 300px;
  background: radial-gradient(50% 50% at 50% 70%, var(--cat-glow) 0%, transparent 72%);
  filter: blur(22px);
  transition: opacity var(--avia-dur) var(--avia-ease);
  opacity: 0.75;
}

.mp-card:hover .mp-card__art::before {
  opacity: 1;
}

.mp-card__art svg {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 64%;
  height: auto;
  max-height: 66px;
  filter: drop-shadow(0 0 14px var(--cat-glow));
  transition: transform 0.45s var(--avia-ease);
}

.mp-card:hover .mp-card__art svg {
  transform: scale(1.08);
}

.mp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--avia-sp-2);
  padding: var(--avia-sp-4);
}

.mp-card__title {
  font-family: var(--avia-font-display);
  font-size: var(--avia-fs-h4);
  font-weight: var(--avia-fw-bold);
  line-height: 1.2;
  color: var(--avia-text);
}

.mp-card__desc {
  flex: 1;
  font-size: var(--avia-fs-sm);
  line-height: 1.5;
  color: var(--avia-text-dim);
}

.mp-card__cta {
  margin-top: var(--avia-sp-2);
  font-size: var(--avia-fs-xs);
  font-weight: var(--avia-fw-semi);
  color: var(--cat-accent);
}

.mp-card__cta::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--avia-dur) var(--avia-ease);
}

.mp-card:hover .mp-card__cta::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Names still referenced by the shared page chrome and inline scripts
   -------------------------------------------------------------------------- */

.marketplace-main .container-large,
.marketplace-main .padding-global {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .mp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 520px) {
  .mp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-card__art {
    height: 128px;
  }
}