/* ============================================================================
   INCA Marketplace. Loads with inca-base.css.
   ========================================================================== */

/* ── Hero disclosure ──────────────────────────────────────────────────────── */
.mp-about-toggle{margin-top:20px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-pill);padding:9px 18px;font-family:var(--font-display);font-weight:600;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.mp-about-toggle:hover{background:rgba(255,255,255,.18)}
.mp-about-toggle::after{content:"+";font-weight:700;font-size:16px;line-height:1}
.mp-about-toggle.is-open::after{content:"\2212"}
.mp-about{margin-top:18px;max-width:760px;display:flex;flex-direction:column;gap:12px}
.mp-about p{font-size:15.5px;line-height:1.65;color:var(--neutral-300)}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.mp-controls{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm);position:sticky;top:0;z-index:20}
.mp-search{position:relative;display:flex;align-items:center;max-width:560px}
.mp-search svg{position:absolute;left:15px;width:18px;height:18px;color:var(--text-muted);pointer-events:none}
.mp-search input{width:100%;font-family:var(--font-body);font-size:15.5px;color:var(--text-strong);
  padding:13px 44px 13px 44px;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:var(--surface-card);outline:none;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.mp-search input:focus{border-color:var(--indigo-300);box-shadow:0 0 0 4px var(--indigo-50)}
.mp-search input::-webkit-search-cancel-button{display:none}
.mp-search__clear{position:absolute;right:8px;width:30px;height:30px;border:none;background:transparent;
  font-size:22px;line-height:1;color:var(--text-muted);cursor:pointer;border-radius:999px}
.mp-search__clear:hover{background:var(--neutral-100);color:var(--text-strong)}

.mp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mp-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:13.5px;
  padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
  background:var(--surface-card);color:var(--text-body);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.mp-chip:hover{border-color:var(--indigo-200);color:var(--indigo-600)}
.mp-chip.is-active{background:var(--indigo-500);border-color:var(--indigo-500);color:#fff}
.mp-chip__n{font-size:11.5px;font-weight:700;opacity:.7}
.mp-count{margin-top:12px;font-size:13.5px;color:var(--text-muted)}

/* ── Listings ─────────────────────────────────────────────────────────────── */
.mp-results{padding-top:var(--section-y-sm);padding-bottom:0}
.mp-section{margin-bottom:clamp(34px,4.6vw,52px)}
.mp-section__head{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;
  color:var(--text-strong);padding-left:14px;border-left:4px solid var(--orange-400);margin-bottom:20px}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.mp-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.mp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--indigo-200)}
.mp-card__logo{height:112px;display:flex;align-items:center;justify-content:center;padding:18px;
  background:var(--neutral-50);border-bottom:1px solid var(--border-subtle)}
.mp-card__logo img{max-height:72px;max-width:100%;width:auto;object-fit:contain}
.mp-card__initials{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--indigo-300)}
.mp-card__body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.mp-card__name{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.25;color:var(--text-strong)}
.mp-card__subtitle{font-size:13px;font-weight:600;color:var(--indigo-500);line-height:1.4}
.mp-card__desc{font-size:14px;line-height:1.55;color:var(--text-body)}
.mp-card__more{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--indigo-500);text-decoration:underline}
.mp-card__more:hover{color:var(--indigo-700)}
.mp-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.mp-tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:var(--indigo-50);color:var(--indigo-600);padding:4px 8px;border-radius:var(--radius-xs)}
.mp-card__foot{border-top:1px solid var(--border-subtle);padding-top:12px;margin-top:10px;display:flex;flex-direction:column;gap:7px}
.mp-card__link{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--indigo-500);text-decoration:none}
.mp-card__link:hover{color:var(--indigo-700)}
.mp-card__contact{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text-muted);word-break:break-word}
.mp-card__contact a{color:var(--text-muted);text-decoration:none}
.mp-card__contact a:hover{color:var(--indigo-600);text-decoration:underline}

.mp-empty{text-align:center;padding:48px 0 60px;font-size:16px;color:var(--text-muted)}
.mp-empty button{background:none;border:none;color:var(--indigo-500);font-weight:700;font-size:16px;cursor:pointer;text-decoration:underline}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){ .mp-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){  .mp-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .mp-grid{grid-template-columns:1fr}
  .mp-controls{position:static}
  .mp-filters{gap:7px}
  /* Long labels such as "Network equipment and hardware" are wider than a
     375px viewport on one line, so let them wrap inside the chip and cap the
     width. Without this the row pushed the page 12px sideways. */
  .mp-chip{font-size:12.5px;padding:7px 12px;max-width:100%;white-space:normal;
    text-align:left;line-height:1.3}
}
