/* ===========================================================
   Spacivo Home Gallery — title/subtitle + CTA button header row above an
   auto-advancing 3-visible-slide image carousel, each slide with a
   bottom-gradient heading caption. Self-contained plugin CSS (no theme
   dependency beyond the theme's own .container wrapper). Title/subtitle/
   button font/size/color come from inline styles (admin-configurable);
   this file only handles layout.
   =========================================================== */

.spacivo-hg-section { padding: 3rem 0; background: #F5F5F5; }

.spacivo-hg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.spacivo-hg-heading { margin: 0 0 .4rem; }
.spacivo-hg-subheading { margin: 0; }

.spacivo-hg-button {
  flex-shrink: 0; display: inline-block; padding: .85rem 1.75rem; border-radius: 999px;
  text-decoration: none; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.spacivo-hg-button:hover { opacity: .9; }

.spacivo-hg-carousel { position: relative; padding: 0 3rem; max-width: 1400px; margin: 0 auto; }

.spacivo-hg-track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.spacivo-hg-track::-webkit-scrollbar { display: none; }

.spacivo-hg-slide {
  position: relative; flex: 0 0 calc(33.333% - 1rem); min-width: 260px;
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e5e5e5;
}
.spacivo-hg-slide__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.spacivo-hg-slide__heading {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color: #fff; font-weight: 700; font-size: 1.05rem;
}

.spacivo-hg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid #eee;
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #2A211D; box-shadow: 0 2px 10px rgba(0,0,0,.12); z-index: 2;
}
.spacivo-hg-nav:hover { background: var(--color-accent, #8A1748); color: #fff; }
.spacivo-hg-nav--prev { left: 0; }
.spacivo-hg-nav--next { right: 0; }

.spacivo-hg-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-hg-slide { flex: 0 0 calc(50% - .75rem); }
}

@media (max-width: 600px) {
  .spacivo-hg-header { flex-direction: column; align-items: flex-start; }
  .spacivo-hg-carousel { padding: 0 2.25rem; }
  .spacivo-hg-slide { flex: 0 0 85%; min-width: 220px; }
}