/* Home component: featured products ("masterpieces") on the machined grid.
   The cards themselves are the shared editorial product card
   (frontend/css/product-card.css); this file only frames the section. */

.masterpieces-section {
  padding: var(--space-16) 0;
  border-block: 1px solid var(--ds-border);
  background:
    radial-gradient(900px 380px at 108% 0%,
      color-mix(in srgb, var(--ds-primary) 6%, transparent), transparent 70%),
    var(--ds-surface);
}

.masterpieces-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.masterpieces-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-bg);
  color: var(--ds-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.masterpieces-all:hover {
  color: var(--ds-primary);
  border-color: color-mix(in srgb, var(--ds-primary) 45%, var(--ds-border));
  transform: translateY(-1px);
}

[dir="rtl"] .masterpieces-all svg { transform: scaleX(-1); }

/* host grid for the shared cards */
.masterpieces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) {
  .masterpieces-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .masterpieces-section { padding: var(--space-10) 0; }
  .masterpieces-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .masterpieces-all { transition: none; }
}