/* components.css — shared UI components (implementation-plan §3)
   Built once, reused everywhere; react to --accent. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.7em 1.4em;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn--secondary:hover { background: var(--accent-soft); }

/* ---------- Category tag chip ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-muted);
  white-space: nowrap;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ---------- App card ---------- */
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.app-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.app-card__head { display: flex; align-items: center; gap: var(--space-2); }
.app-card__icon {
  width: 56px; height: 56px;
  border-radius: 13px;
  box-shadow: var(--shadow-1);
  flex: none;
}
.app-card__name { margin: 0; font-size: var(--step-1); }
.app-card__pitch { margin: 0; color: var(--color-muted); flex: 1; }
.app-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-top: auto;
}
.app-card a.app-card__link::after {
  content: "";
  position: absolute; inset: 0;
}
.app-card { position: relative; }

/* ---------- Store badges ----------
   Official Apple / Google badge artwork is rendered unaltered as <img>; the
   row gap supplies the clear space each store's guidelines require. Available
   badges are the real artwork; "coming soon" is a deliberately non-official
   label so it can't be mistaken for an official store badge. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.store-badge { display: inline-flex; align-items: center; }
.store-badge__img {
  display: block;
  height: 48px;
  width: auto;
}
.store-badge:hover { text-decoration: none; opacity: 0.85; }

.store-badge--soon {
  height: 48px;
  padding: 0 1.1em;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: default;
}
.store-badge--soon:hover { opacity: 1; }

/* ---------- Feature highlight ---------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.feature__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.feature__title { margin: 0; font-size: var(--step-0); font-weight: 700; }
.feature__body { margin: 0; color: var(--color-muted); font-size: var(--step--1); }

/* ---------- Screenshot gallery / device frames ---------- */
.gallery {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
}
.device {
  flex: none;
  scroll-snap-align: start;
  background: var(--color-fg);
  padding: 8px;
  border-radius: 28px;
  box-shadow: var(--shadow-2);
}
.device--phone { width: 240px; }
.device--tablet { width: 360px; }
.device img { border-radius: 20px; }

/* ---------- Section heading ---------- */
.section-head { max-width: var(--container-narrow); margin-bottom: var(--space-4); }

/* ---------- Filter chips (index) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.filter-chip {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* ---------- Responsive grid helpers ---------- */
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid--features {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}