/* ==========================================================================
   Arthur Labs — products showcase (ART-300)
   Alternating rows: copy + device preview. Reuses .device / .mock-* from
   home.css; swap the CSS mockups for real screenshots inside .product__visual.
   ========================================================================== */

.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Full-width rows. A 3-up track crushes the inner copy | mockup grid. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.product {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 840px) {
  /* Copy stays the wider track; the coming-soon banner stays a single column. */
  .product:not(.product--soon) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-12);
    padding: var(--space-12);
  }
  .products > li:nth-child(even) .product:not(.product--soon) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  /* alternate: visual on the left for every second product */
  .products > li:nth-child(even) .product__visual { order: -1; }
}

.product__copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  min-width: 0;
  align-content: center;
}

.product__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.product__name { margin: 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.product__logo {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}
.product--fit .product__logo { background: #16a34a; color: #fff; }
.product--labuta .product__logo { background: #f59e0b; color: #140d0a; }

.product__tagline { margin: 0; font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; }

.product__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.product__features li { position: relative; padding-left: var(--space-6); }
.product__features li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  rotate: -45deg;
}

.product__platforms { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.product__cta { margin-top: var(--space-2); white-space: nowrap; }
.product__cta svg { transition: transform var(--duration-fast) var(--ease-out); }
.product__cta:hover svg { transform: translateX(2px); }

.product__visual {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.product__visual .device { --device-w: 200px; }

/* Coming soon slot */
.product--soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  justify-items: start;
  align-items: start;
  padding: var(--space-8);
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.product--soon .product__name { font-size: var(--text-xl); }

@media (max-width: 480px) {
  .product, .product--soon { padding: var(--space-5); }
}