/* Apps catalog — visual card grid (inspired by norns.community/explore & dubby.studio) */

/* --- Intro --- */
.apps-intro {
  font-size: 1.08em;
  line-height: 1.7;
  max-width: 52em;
  margin-bottom: 2em;
}

.apps-intro strong {
  color: var(--color-foreground-primary);
}

/* --- Category pills --- */
.apps-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 2em;
}

.apps-filter-btn {
  padding: 0.35em 1em;
  font-size: 0.85em;
  border: 1px solid var(--color-background-border);
  border-radius: 20px;
  background: var(--color-background-secondary);
  color: var(--color-foreground-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.apps-filter-btn:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.apps-filter-btn.active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}

/* --- Card grid --- */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5em;
  margin-bottom: 2.5em;
}

/* --- Individual card --- */
.app-card {
  border: none;
  overflow: hidden;
  background: var(--color-background-secondary);
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
}

.app-card:hover {
  transform: translateY(-3px);
}

.app-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Screen / image area */
.app-card-screen {
  aspect-ratio: 16 / 9;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Per-app placeholder colours */
.app-screen-groovebox { background: #1b2838; }       /* deep navy */
.app-screen-multifx   { background: #2d1b4e; }       /* purple */
.app-screen-mcl       { background: #1a3328; }        /* forest green */
.app-screen-midi      { background: #3b2314; }        /* warm brown */
.app-screen-debug     { background: #2a2a2a; }        /* charcoal */
.app-screen-usb       { background: #1a2e3b; }        /* steel blue */
.app-screen-uitest    { background: #33291a; }         /* amber dark */
.app-screen-game      { background: #2e1a2e; }         /* plum */

.app-card-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder screen (when no screenshot yet) */
.app-card-screen .app-placeholder {
  color: #8888aa;
  font-size: 2.2em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Status indicator dot */
.app-card-screen .app-status {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.app-status.shipping { background: #22c55e; }
.app-status.planned  { background: #f59e0b; }

/* Card body / info area */
.app-card-body {
  padding: 1em 1.1em;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-card-body h3 {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.3em 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0;
  color: var(--color-foreground-primary);
  line-height: 1.3;
}

.app-card-body .app-tagline {
  font-size: 0.88em;
  color: var(--color-foreground-secondary);
  margin: 0 0 0.7em 0;
  line-height: 1.5;
  flex: 1;
}

/* Tags row */
.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: auto;
}

.app-tag {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 0;
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
}

/* Tag colours */
.app-tag-sequencer    { background: #dbeafe; color: #1e40af; }
.app-tag-synth        { background: #ede9fe; color: #5b21b6; }
.app-tag-fx           { background: #fce7f3; color: #9d174d; }
.app-tag-midi         { background: #d1fae5; color: #065f46; }
.app-tag-link         { background: #fef3c7; color: #92400e; }
.app-tag-audio        { background: #ffedd5; color: #9a3412; }
.app-tag-utility      { background: #f3f4f6; color: #6b7280; }
.app-tag-controller   { background: #e0e7ff; color: #3730a3; }
.app-tag-default      { background: #dcfce7; color: #166534; }
.app-tag-planned      { background: #fef9c3; color: #854d0e; }
.app-tag-community    { background: #f0fdf4; color: #15803d; }

/* Dark mode tag overrides */
@media not print {
  body[data-theme="dark"] .app-tag-sequencer  { background: #1e3a5f; color: #93c5fd; }
  body[data-theme="dark"] .app-tag-synth      { background: #3b0764; color: #c4b5fd; }
  body[data-theme="dark"] .app-tag-fx         { background: #4a1942; color: #f9a8d4; }
  body[data-theme="dark"] .app-tag-midi       { background: #064e3b; color: #6ee7b7; }
  body[data-theme="dark"] .app-tag-link       { background: #78350f; color: #fcd34d; }
  body[data-theme="dark"] .app-tag-audio      { background: #7c2d12; color: #fdba74; }
  body[data-theme="dark"] .app-tag-utility    { background: #1f2937; color: #9ca3af; }
  body[data-theme="dark"] .app-tag-controller { background: #312e81; color: #a5b4fc; }
  body[data-theme="dark"] .app-tag-default    { background: #14532d; color: #86efac; }
  body[data-theme="dark"] .app-tag-planned    { background: #713f12; color: #fde68a; }
  body[data-theme="dark"] .app-tag-community  { background: #14532d; color: #86efac; }

  body[data-theme="dark"] .app-card {
    background: var(--color-background-secondary);
  }
  body[data-theme="dark"] .app-card:hover {
    transform: translateY(-3px);
  }
  body[data-theme="dark"] .app-card-screen {
    background: #0f0f1a;
  }
}

/* --- "Build Your Own" CTA card --- */
.app-card.app-card-cta .app-card-screen {
  background: #1a2e1a;
  border-bottom: none;
}

.app-card.app-card-cta .app-placeholder {
  color: #66bb6a;
  font-size: 3em;
}

/* --- Section headers --- */
.apps-section-header {
  font-size: 1.3em;
  font-weight: 700;
  margin: 2em 0 0.6em 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--color-foreground-primary);
  border-radius: 0;
  color: var(--color-foreground-primary);
}

/* --- Architecture blurb --- */
.apps-architecture {
  background: var(--color-background-secondary);
  border: none;
  padding: 1.2em 1.5em;
  margin: 1.5em 0 2.5em 0;
  font-size: 0.95em;
  line-height: 1.7;
}

/* --- Install tip callout --- */
.apps-install-tip {
  background: #EFF6FF;
  border: 1px solid #93C5FD;
  border-left: 4px solid #2563EB;
  border-radius: 6px;
  padding: 1em 1.3em;
  margin: 0.5em 0 1.5em 0;
  font-size: 0.92em;
  line-height: 1.6;
  color: #1E3A5F;
}
.apps-install-tip a {
  color: #2563EB;
  font-weight: 600;
  text-decoration: none;
}
.apps-install-tip a:hover {
  text-decoration: underline;
}
body[data-theme="dark"] .apps-install-tip {
  background: #1E293B;
  border-color: #3B82F6;
  color: #CBD5E1;
}
body[data-theme="dark"] .apps-install-tip a {
  color: #60A5FA;
}

.apps-architecture code {
  font-size: 0.9em;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .apps-grid {
    grid-template-columns: 1fr;
    gap: 1em;
  }
}