/* ===========================================================
   Spacivo Design Session — centered title above a responsive row of step
   images, each with a caption underneath. Self-contained plugin CSS (no
   theme dependency beyond the theme's own .container wrapper). Title and
   caption font/size/color come from inline styles (admin-configurable);
   this file only handles layout.
   =========================================================== */

.spacivo-ds-section { padding: 3rem 0; }
.spacivo-ds-heading { margin: 0 0 2rem; text-align: center; }

.spacivo-ds-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}

.spacivo-ds-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.spacivo-ds-step__image {
  width: 100%; aspect-ratio: 4 / 3; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.spacivo-ds-step__image img { width: 100%; height: 100%; object-fit: contain; }
.spacivo-ds-step__text { margin: 0; line-height: 1.4; }

.spacivo-ds-unconfigured-notice {
  font-size: .85rem; color: #a22022; background: #fff3f3; border: 1px dashed #a22022;
  padding: .75rem 1rem; margin: 1rem auto; max-width: 1280px;
}

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

@media (max-width: 600px) {
  .spacivo-ds-grid { grid-template-columns: 1fr; }
}