/* Studio Setup — Accessories section: the equipment every studio is built from,
   one image + heading per item. */
.studio-accessories { background: var(--bg); padding: calc(var(--space-section) + 16px) 0; }
.studio-accessories-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.studio-accessories-head { text-align: center; margin-bottom: 40px; }
.studio-accessories-head h2 { margin: 0 0 10px; }
.studio-accessories-head p { margin: 0; font-size: var(--text-body-lg); color: var(--fg-body); }

.studio-accessory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.studio-accessory {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.studio-accessory:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.studio-accessory-media { aspect-ratio: 1 / 1; background: var(--plate); overflow: hidden; padding: 12px; }
.studio-accessory-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.studio-accessory h3 {
  margin: 0;
  padding: 14px 12px 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
}
.studio-accessory h3 a { color: inherit; text-decoration: none; }
.studio-accessory h3 a:hover { text-decoration: underline; }
.studio-accessory p {
  margin: 6px 14px 16px;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

@media (max-width: 1099px) { .studio-accessory-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px) { .studio-accessory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .studio-accessory-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .studio-accessory { transition: none; } }