/* ===========================================================
   Spacivo Promo Cards — continuously auto-scrolling row of capsule-shaped
   cards (image on top, colored body below tapering into a rounded-pill
   bottom), staggered vertically in a zig-zag. Self-contained plugin CSS
   (no theme dependency beyond the theme's own .container wrapper).

   Continuous scroll uses the same technique as spacivo-marquee: the card
   set is rendered twice back-to-back (templates/shortcode-template.php)
   and this animation translates the track by exactly -50%, so it loops
   with no visible seam and no JS-driven scroll math. Pauses on hover so
   a shopper can actually read/click a card, same as the marquee ticker.
   =========================================================== */

.spacivo-pc-section { padding: 3rem 0; }
.spacivo-pc-header { margin-bottom: .5rem; }
.spacivo-pc-heading { margin: 0 0 .25rem; font-size: 1.4rem; color: #2A211D; }
.spacivo-pc-subheading { margin: 0; font-size: .95rem; color: #6b6b6b; }

.spacivo-pc-carousel { overflow: hidden; padding: 1.5rem 0 1rem; }

.spacivo-pc-track {
  display: flex; width: max-content;
  animation-name: spacivo-pc-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.spacivo-pc-carousel:hover .spacivo-pc-track { animation-play-state: paused; }

@keyframes spacivo-pc-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .spacivo-pc-track { animation: none; }
}

.spacivo-pc-set { display: flex; align-items: flex-start; gap: 2rem; flex-shrink: 0; padding: 0 1rem; }

.spacivo-pc-card {
  position: relative; flex: 0 0 220px; display: flex; flex-direction: column; overflow: hidden;
  background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat;
  /* No slash — same radius both horizontally and vertically keeps the
     bottom a true round dome instead of a stretched oval. */
  border-radius: 16px 16px 110px 110px;
  min-height: 460px;
  /* Zig-zag: odd cards sit lower, even cards shift up — matches the
     reference design's staggered row. */
  margin-top: 60px;
}
.spacivo-pc-card:nth-child(even) { margin-top: 0; }

/* Color tint layer — sits between the card's own background-image (if
   set, via inline style from the settings) and the media/body content.
   Without an image this is just the solid grid color at full opacity;
   with one, its own configured opacity turns it into a tint over the
   image. */
.spacivo-pc-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--pc-card-color, #72192D);
  opacity: var(--pc-card-color-opacity, 1);
}

.spacivo-pc-card__media { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; flex-shrink: 0; background: #00000010; }
.spacivo-pc-card__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.spacivo-pc-card__slide.is-active { opacity: 1; }

.spacivo-pc-card__body {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
  padding: 1rem 1.25rem 2.5rem; color: #fff;
}
.spacivo-pc-card__header { margin: 0 0 .15rem; font-size: 1.2rem; font-weight: 600; }
.spacivo-pc-card__subtitle { margin: 0; font-size: .85rem; opacity: .9; }

.spacivo-pc-card__button {
  align-self: center; margin-top: auto;
  display: inline-block; background: transparent; color: #fff; font-size: .8rem; font-weight: 600;
  padding: .6rem 1.3rem; border: 1px solid #fff; border-radius: 4px; text-decoration: none;
}
.spacivo-pc-card__button:hover { background: rgba(255,255,255,.15); }

.spacivo-pc-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: 750px) {
  .spacivo-pc-card { flex-basis: 170px; min-height: 360px; }
  .spacivo-pc-card:nth-child(even) { margin-top: 40px; }
  .spacivo-pc-card:nth-child(odd) { margin-top: 40px; }
}