/* Platforms hub (/platforms/) — layout specific to this page only.
   Distinct from platform.css, which styles the individual per-platform
   detail pages this hub links out to. Requires tokens.css + shared.css
   loaded first. */

.platforms-hero { position: relative; overflow: hidden; background: var(--background); padding: 80px 0 64px; text-align: center; }
.platforms-hero::before {
  content: '';
  position: absolute; top: -200px; right: -180px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--brand-line) 0%, transparent 70%);
  opacity: .4; pointer-events: none; z-index: 0;
}
.platforms-hero > div { position: relative; z-index: 1; }
.platforms-hero h1 {
  font-weight: 900; font-size: 44px; letter-spacing: -.03em; line-height: 1.12;
  margin: 0 auto 16px; max-width: 640px; color: var(--foreground);
}
.platforms-hero p { font-size: 17px; color: var(--muted-foreground); max-width: 540px; margin: 0 auto; line-height: 1.6; }

/* ── Card grid — live platforms get the full clickable treatment (logo,
   real automation summary, accent-tinted top edge on hover); coming-soon
   platforms get a visually distinct, deliberately quieter card with no
   invented feature claims, just the name and a badge. ── */
.platform-hub-grid {
  max-width: 960px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.platform-hub-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 28px 24px; text-decoration: none; overflow: hidden;
  box-shadow: var(--shadow-raised);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.platform-hub-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
a.platform-hub-card:hover {
  box-shadow: var(--shadow-overlay); border-color: var(--accent); transform: translateY(-2px);
}
a.platform-hub-card:hover::before { transform: scaleX(1); }
.platform-hub-logo-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
}
.platform-hub-logo { height: 24px; width: auto; max-width: 34px; object-fit: contain; }
.platform-hub-name { font-weight: 800; font-size: 18px; color: var(--foreground); margin: 0; }
.platform-hub-desc { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin: 0; flex: 1; }
/* --accent-text overrides --accent for link text specifically -- Depop's
   raw red (#ff2300) is 3.82:1 against white, under WCAG AA's 4.5:1 floor
   for text. Only Depop needs the override (see the card's inline style);
   Poshmark/eBay/Mercari's raw accents already clear AA on their own. */
.platform-hub-link {
  font-size: 13.5px; font-weight: 700; color: var(--accent-text, var(--accent));
  display: inline-flex; align-items: center; gap: 4px;
}

.platform-hub-card.is-soon {
  background: var(--secondary); box-shadow: none; align-items: flex-start;
}
.platform-hub-card.is-soon .platform-hub-logo-wrap { background: var(--surface); filter: grayscale(1); opacity: .55; }
.platform-hub-card.is-soon .platform-hub-name { color: var(--muted-foreground); }
.badge-soon-inline {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9999px;
  padding: 3px 10px; width: fit-content;
}

@media (max-width: 860px) {
  .platform-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .platforms-hero h1 { font-size: 32px; }
  .platform-hub-grid { grid-template-columns: 1fr; }
}