/* VENTURES HARBOR — HOMEPAGE ASSET CARDS (home-cards.css)
 *
 * The homepage's "Explore Real-World Assets" section, in dark navy, with a photo
 * slider on top of each card. Loaded by index.php ONLY, after venture-card.css:
 * everything here is scoped to .vh-assets-dark / .vh-vcard--dark, so Browse and
 * every other page that uses the shared card keep the light design untouched.
 * The layout inside the card is venture-card.css's; this file only recolours it
 * and adds the .vc-media block.
 */

/* ---------- section ---------- */
.vh-assets-dark {
  background:
    radial-gradient(900px 520px at 12% 110%, rgba(37, 99, 235, .12), transparent 65%),
    linear-gradient(180deg, #050D1B 0%, #071427 100%);
}

.vh-assets-dark .vh-filter--dark {
  cursor: pointer;
  font-family: inherit;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .04);
  color: #CBD5E1;
  transition: all .25s;
}
.vh-assets-dark .vh-filter--dark:hover { border-color: rgba(96, 165, 250, .6); color: #fff; }
.vh-assets-dark .vh-filter--dark.is-active {
  border-color: #2563EB;
  background: #2563EB;
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .35);
}

/* Three cards per row (client, 5 Oct 2026 — back from the two-up mock-up), two on
   tablets, one on phones. index.php loads three to fill the row. */
.vh-assets-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1100px) {
  .vh-assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vh-assets-grid { grid-template-columns: 1fr; }
}

/* ---------- card ---------- */
/* Layout — the photo strip, the slider controls and the compact sizing — is
   .vh-vcard--media in venture-card.css, shared with Browse and Saved Assets so all
   three draw the same card (client, 1 Oct 2026). This file only recolours the
   homepage's dark version of it. */
.vh-vcard.vh-vcard--dark {
  border-radius: 18px;
  background: linear-gradient(180deg, #0D1A31 0%, #0A1528 100%);
  border: 1px solid rgba(59, 130, 246, .38);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.vh-vcard.vh-vcard--dark:hover {
  box-shadow: 0 26px 56px rgba(0, 0, 0, .5), 0 0 0 1px rgba(96, 165, 250, .25);
}
.vh-vcard.vh-vcard--dark.vh-vcard--sample { border-color: #F5C518; }
.vh-vcard--dark .vc-sample-ribbon { border-radius: 17px 17px 0 0; }

/* ---------- photo slider ---------- */
.vh-vcard--dark .vc-media {
  border-radius: 17px 17px 0 0;
  background: linear-gradient(135deg, #10244A, #0A1428);
  border-bottom-color: rgba(59, 130, 246, .22);
}
.vh-vcard--dark .vc-media-initial { color: rgba(147, 197, 253, .45); }

/* ---------- header ---------- */
.vh-vcard--dark .vc-cover {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(96, 165, 250, .25);
  color: #93C5FD;
}
/* Uploaded logos are mostly drawn for a white page, so give them one. */
.vh-vcard--dark .vc-cover:has(img) { background: #fff; }
.vh-vcard--dark .vc-title { color: #fff; }
.vh-vcard--dark .vc-byline,
.vh-vcard--dark .vc-loc { color: #8EA2C0; }
.vh-vcard--dark .vc-byline .vc-sep { color: rgba(255, 255, 255, .2); }
.vh-vcard--dark .vc-chip { background: rgba(255, 255, 255, .06); color: #CBD5E1; }

/* ---------- figures ---------- */
.vh-vcard--dark .vc-stats {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(96, 165, 250, .16);
}
.vh-vcard--dark .vc-stat-value { color: #F1F5FB; }
.vh-vcard--dark .vc-stat-label { color: #7D8FAD; }
.vh-vcard--dark .vc-stat--funded .vc-stat-value { color: #34D399; }
.vh-vcard--dark .vc-progress { background: rgba(255, 255, 255, .08); }
.vh-vcard--dark .vc-progress-fill { background: linear-gradient(90deg, #16A34A, #34D399); }

.vh-vcard--dark .vc-capacity { border-top-color: rgba(255, 255, 255, .1); }
.vh-vcard--dark .vc-cap-label { color: #9AABC5; }
.vh-vcard--dark .vc-cap-figs { color: #E2E8F0; }
.vh-vcard--dark .vc-cap-state { color: #60A5FA; }
.vh-vcard--dark .vc-cap-row--full .vc-cap-state { color: #FBBF24; }
.vh-vcard--dark .vc-cap-track { background: rgba(255, 255, 255, .08); }
.vh-vcard--dark .vc-cap-note {
  border-color: rgba(245, 197, 24, .3);
  background: rgba(245, 197, 24, .08);
  color: #FCD34D;
}
.vh-vcard--dark .vc-cap-note strong { color: #F5C518; }

.vh-vcard--dark .vc-meta { border-top-color: rgba(255, 255, 255, .08); }
.vh-vcard--dark .vc-meta-item { color: #9AABC5; }
.vh-vcard--dark .vc-meta-item svg { color: #6B7F9E; }

/* ---------- actions ---------- */
/* Co-Own is gold on the dark card. Navy text, never white: white on #F5C518 fails
   contrast outright. */
.vh-vcard--dark .btn-join {
  background: linear-gradient(135deg, #F5C518, #FFD84D);
  color: #081421;
}
.vh-vcard--dark .btn-join:hover {
  background: linear-gradient(135deg, #EEBE10, #FFE070);
  box-shadow: 0 8px 22px rgba(245, 197, 24, .35);
}
/* Join Waitlist is gold too (the client asked for that, so a full Asset stands out),
   and here Co-Own is solid gold as well — so the waitlist goes OUTLINED gold to keep
   the two states tellable apart down the grid. */
.vh-vcard--dark .btn-join--waitlist {
  background: transparent;
  border: 1.5px solid #F5C518;
  color: #F5C518;
}
.vh-vcard--dark .btn-join--waitlist:hover {
  background: rgba(245, 197, 24, .12);
  box-shadow: none;
}
.vh-vcard--dark .btn-join--onwaitlist,
.vh-vcard--dark .btn-join--onwaitlist:hover {
  background: rgba(245, 197, 24, .12);
  color: #F5C518;
  border-color: rgba(245, 197, 24, .4);
}
.vh-vcard--dark .btn-join--state,
.vh-vcard--dark .btn-join--state:hover {
  background: rgba(255, 255, 255, .06);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.vh-vcard--dark .btn-join--member,
.vh-vcard--dark .btn-join--member:hover,
.vh-vcard--dark .btn-join--full,
.vh-vcard--dark .btn-join--full:hover {
  background: rgba(34, 197, 94, .14);
  color: #4ADE80;
  border-color: rgba(34, 197, 94, .3);
}
.vh-vcard--dark .btn-join--founder,
.vh-vcard--dark .btn-join--founder:hover {
  background: rgba(99, 102, 241, .18);
  color: #A5B4FC;
  border-color: rgba(129, 140, 248, .35);
}
.vh-vcard--dark .btn-join--sample { background: #157347; color: #fff; }
.vh-vcard--dark .btn-join--sample:hover { background: #10603A; }
.vh-vcard--dark .btn-join--active { background: #15803D; color: #fff; }
.vh-vcard--dark .btn-join--active:hover { background: #166534; }
.vh-vcard--dark .btn-join--pay { background: #D97706; color: #fff; }
.vh-vcard--dark .btn-join--pay:hover { background: #B45309; }

.vh-vcard--dark .btn-details { color: #60A5FA; }
.vh-vcard--dark .btn-details:hover { background: rgba(96, 165, 250, .1); }

.vh-vcard--dark .vc-wish {
  background: transparent;
  border-color: rgba(255, 255, 255, .14);
  color: #8EA2C0;
}
.vh-vcard--dark .vc-wish:hover { color: #60A5FA; border-color: rgba(96, 165, 250, .5); }
.vh-vcard--dark .vc-wish[aria-pressed="true"] {
  color: #93C5FD;
  background: rgba(59, 130, 246, .18);
  border-color: rgba(96, 165, 250, .45);
}