/* Market-Space discovery hub (Figma 1075:35911). All selectors are scoped under
   .mkt-hub (or .mkt-* classes only used inside it) so nothing here can affect the
   home/galaxy view or the security ecosystems. Reuses the app design system:
   Poppins body / Unbounded headings, 2px black borders + hard drop-shadows,
   white/mint cards, green accents. */

.mkt-hub { width: 100%; }

/* shared inner width for the discovery bands */
.mkt-hub .mkt-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 64px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mkt-hub .mkt-band { background: transparent; }

/* the first discovery band sits directly on the page background (no distinct band
   / window chrome - matches Figma); just give it a normal top gap under the hero. */
.mkt-hub .mkt-launch .mkt-inner { padding-top: 40px; }

/* Hero tools row (Figma 1075:35911): the shared .hero-search element lives here
   (right under the subtitle) beside a "Browse All" button - on EVERY view. The
   button's target follows the active view (galaxy.js updateBrowseAll): the
   Market-Space catalog on home/Market-Space, the full connector list on
   Claude/Copilot. Grid so the results can span the FULL row width (search input
   + Browse All), not just the input's column: row 1 = [input | Browse All],
   row 2 = results spanning both columns. */
.mkt-hero-tools {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "search browse" "results results";
  align-items: center; column-gap: 12px; row-gap: 0;
  width: 100%; max-width: 695px; margin: 24px auto 0;
}
/* .hero-search is a passthrough (display:contents) so its input + results become
   grid items of the row - letting the results occupy the full-width second row. */
.mkt-hero-tools .hero-search {
  display: contents; margin: 0;
}
/* "Browse All" CTA (mirrors the Figma black primary button beside the search) */
.mkt-browse-all {
  flex: none; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
  text-transform: uppercase; color: #fff;
  background: #000; border: none; border-radius: 100px;
  padding: 18px 32px; box-shadow: none;
  transition: transform .12s ease, opacity .12s ease;
}
.mkt-browse-all:hover { transform: translateY(-1px); opacity: .9; }
/* Centered "Browse More" button under the Cleared For Launch row -> catalog */
.mkt-hub .mkt-row-more { display: flex; justify-content: center; margin-top: 4px; }
/* match the Figma search bar: crisp thin border, slightly slimmer than the hero default */
.mkt-hero-tools .search-input-wrap {
  grid-area: search; border: 1.5px solid #000; padding: 14px 22px;
}
.mkt-hero-tools .mkt-browse-all { grid-area: browse; }
/* Results render as a relative list (NOT a floating dropdown) on the full-width
   second grid row, so it lines up with the search bar + Browse All and pushes the
   content below it down - same list design as the Claude/Copilot hero search. */
.mkt-hero-tools .search-results { grid-area: results; }

/* ---------- section header ---------- */
.mkt-hub .mkt-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.mkt-hub .mkt-sec-titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mkt-hub .mkt-sec-title {
  margin: 0; font-family: 'Unbounded', 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; color: #000;
}
.mkt-hub .mkt-sec-sub {
  margin: 0; font-family: 'Poppins', sans-serif; font-weight: 400;
  font-size: 16px; color: #57534e;
}
.mkt-hub .mkt-sec-btn {
  flex: none; align-self: center; white-space: nowrap; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #000;
  background: #fff; border: 2px solid #000; border-radius: 100px;
  padding: 11px 22px; box-shadow: 4px 4px 0 #000;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mkt-hub .mkt-sec-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }

/* ---------- type-filter chips (All / Plugins / Connectors / Skills...) ---------- */
.mkt-hub .mkt-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Figma: solid black pills, the SELECTED one turns yellow (matches the catalog
   source chips). */
.mkt-hub .mkt-chip {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: #fff;
  background: #000; border: 1.5px solid #000; border-radius: 100px;
  padding: 9px 20px; cursor: pointer;
  transition: transform .1s ease, opacity .1s ease, background .1s ease, color .1s ease;
}
.mkt-hub .mkt-chip:not(.active) { opacity: .85; }
.mkt-hub .mkt-chip:hover { transform: translateY(-1px); opacity: 1; }
.mkt-hub .mkt-chip.active {
  background: #F8F872; color: #000; box-shadow: 2.5px 2.5px 0 #000;
}

/* ---------- card rows (Cleared For Launch / Rising Stars) ---------- */
/* a responsive 4-up grid; cards reuse the global .hr-card design */
.mkt-hub .mkt-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;   /* every card in the row is the same height */
}
/* equal-size cards: a fixed min-height keeps every card the same size across all
   type filters (plugins/skills/etc.), and the CTA is pinned to the bottom */
.mkt-hub .mkt-row > .hr-card { width: auto; height: 100%; min-height: 234px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; }
.mkt-hub .mkt-row > .hr-card .hr-card-cta { margin-top: auto; }

/* Cleared For Launch: in Figma the cards are compact (~320x206, wider than tall).
   Tighten the global .hr-card so the row matches: smaller padding/gaps and a
   2-line description clamp. Scoped to .mkt-hub .mkt-row so home/catalog cards are
   untouched. */
.mkt-hub .mkt-row > .hr-card { padding: 18px; gap: 10px; }
.mkt-hub .mkt-row > .hr-card .hr-card-body { gap: 4px; }
.mkt-hub .mkt-row > .hr-card .hr-card-desc { -webkit-line-clamp: 2; line-clamp: 2; }

/* Rising Stars: visually distinct from Cleared For Launch - a horizontally
   browsable row of WIDER, SHORTER cards (fixed-width cards that scroll sideways
   with snap), one-line description so they stay short. */
.mkt-hub .mkt-row-rising {
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  /* gutter always reserved (thin); bar transparent until hover -> no layout shift */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.mkt-hub .mkt-row-rising:hover { scrollbar-color: #8ECB6E transparent; }
.mkt-hub .mkt-row-rising::-webkit-scrollbar { height: 8px; }
.mkt-hub .mkt-row-rising::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.mkt-hub .mkt-row-rising:hover::-webkit-scrollbar-thumb { background: #8ECB6E; }
.mkt-hub .mkt-row-rising > .hr-card {
  /* A fixed min-height keeps every card the same height across ALL type filters
     (like the Cleared For Launch row above): some connectors have a meta row that
     wraps to two lines, and align-items:stretch would otherwise make only that
     filter's row taller than the others. This floor covers the two-line-meta case
     so switching categories never changes the card height; the CTA pins to the
     bottom and the slack sits above it. */
  flex: 0 0 360px; width: 360px; height: auto; min-height: 206px; scroll-snap-align: start;
  padding: 16px 20px; gap: 8px;
}
.mkt-hub .mkt-row-rising > .hr-card .hr-card-desc { -webkit-line-clamp: 1; line-clamp: 1; }

/* ---------- Featured Collections tiles ---------- */
.mkt-hub .mkt-collections {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px;
}
.mkt-hub .mkt-collection {
  display: flex; flex-direction: column; gap: 18px; text-decoration: none;
  padding: 16px 16px 20px; border: 2px solid #000; border-radius: 16px;
  box-shadow: 5px 5px 0 #000; color: #000;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mkt-hub .mkt-collection:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #000; }
.mkt-hub .mkt-collection-icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 10px;
}
.mkt-hub .mkt-collection-icon svg { width: 24px; height: 24px; }
.mkt-hub .mkt-collection-text { display: flex; flex-direction: column; gap: 10px; }
.mkt-hub .mkt-collection-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.15; color: #000; }
.mkt-hub .mkt-collection-count { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; color: #78716c; }

/* ---------- Browse By Category tiles ---------- */
.mkt-hub .mkt-cats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.mkt-hub .mkt-cat {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 14px 16px; border: 2px solid #000; border-radius: 14px; background: #fff;
  box-shadow: 4px 4px 0 #000; color: #000;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mkt-hub .mkt-cat:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.mkt-hub .mkt-cat-emoji {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 22px; border-radius: 10px; border: 1.5px solid #000;
}
.mkt-hub .mkt-cat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkt-hub .mkt-cat-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.2; color: #000; }
.mkt-hub .mkt-cat-count { font-family: 'Poppins', sans-serif; font-size: 13px; color: #78716c; }

/* ---------- Browse By Ecosystem tiles ---------- */
.mkt-hub .mkt-ecos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.mkt-hub .mkt-eco {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 16px 20px; border: 2px solid #000; border-radius: 14px; background: #fff;
  box-shadow: 4px 4px 0 #000; color: #000;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mkt-hub .mkt-eco:not(.mkt-eco-soon):hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; }
.mkt-hub .mkt-eco-soon { background: #fafaf9; border-color: #d6d3d1; box-shadow: 4px 4px 0 #d6d3d1; cursor: default; }
.mkt-hub .mkt-eco-logo {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 10px; overflow: hidden;   /* tinted per-ecosystem via inline style */
}
.mkt-hub .mkt-eco-soon .mkt-eco-logo { opacity: .5; }
.mkt-hub .mkt-eco-logo img { width: 28px; height: 28px; object-fit: contain; }
.mkt-hub .mkt-eco-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-hub .mkt-eco-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.15; color: #000; }
.mkt-hub .mkt-eco-soon .mkt-eco-name { color: #a8a29e; }
.mkt-hub .mkt-eco-sub { font-family: 'Poppins', sans-serif; font-size: 14px; color: #78716c; }
.mkt-hub .mkt-eco-soon .mkt-eco-sub { color: #a8a29e; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mkt-hub .mkt-inner { padding: 48px 32px; }
  .mkt-hub .mkt-launch .mkt-inner { padding-top: 72px; }
  .mkt-hub .mkt-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mkt-hub .mkt-row-rising { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mkt-hub .mkt-collections { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mkt-hub .mkt-cats, .mkt-hub .mkt-ecos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .mkt-hub .mkt-inner { padding: 36px 18px; gap: 22px; }
  .mkt-hub .mkt-sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mkt-hub .mkt-sec-btn { align-self: flex-start; }
  .mkt-hub .mkt-row, .mkt-hub .mkt-collections, .mkt-hub .mkt-cats, .mkt-hub .mkt-ecos { grid-template-columns: 1fr; }
}

/* mobile: search + Browse All stack instead of clipping the button off-screen */
@media (max-width: 760px) {
  .mkt-hero-tools {
    grid-template-columns: 1fr;
    grid-template-areas: "search" "browse" "results";
    row-gap: 10px;
  }
  .mkt-hero-tools .mkt-browse-all { width: 100%; box-sizing: border-box; padding: 14px 20px; }
}