/* ===========================================================
   Spacivo Why Choose Us — full-bleed background image behind a
   heading/subheading and a 4-column grid of semi-transparent dark tiles
   (2 rows in the reference design; wraps naturally for other counts).
   Background/overlay structure mirrors spacivo-interior-quote: the image
   lives on the section, a separate absolutely-positioned overlay div
   darkens it at an adjustable opacity, and the content container sits
   above both. Self-contained plugin CSS (no theme dependency).
   =========================================================== */

.spacivo-wcu-section {
  position: relative; overflow: hidden;
  background-color: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat;
  /* Fixed attachment is what keeps the image pinned in place while the
     overlay + content scroll over it (the parallax look), matching
     spacivo-interior-quote's hero treatment. */
  background-attachment: fixed;
}

.spacivo-wcu-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: #000;
}

.spacivo-wcu-container {
  position: relative; z-index: 2; padding: 3.5rem 1.5rem;
}

.spacivo-wcu-header { text-align: center; max-width: 900px; margin: 0 auto 2rem; }
.spacivo-wcu-heading { margin: 0 0 .6rem; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: .15em; }
.spacivo-wcu-heading-underline { display: block; width: 56px; height: 3px; background: #8A1748; margin: 0 auto 1.5rem; }
.spacivo-wcu-subheading { margin: 0; color: #e8e8e8; font-size: .95rem; line-height: 1.6; }

.spacivo-wcu-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1400px; margin: 0 auto;
}

/* Tile background color/opacity are admin-configurable (via the
   --wcu-tile-color/--wcu-tile-opacity custom properties on
   .spacivo-wcu-container) and apply ONLY to the ::before tint layer, not
   the tile itself — so the icon/title/description on top always stay
   fully readable regardless of how transparent the tile background is. */
.spacivo-wcu-item {
  position: relative; overflow: hidden;
  border: .5px solid rgba(255, 255, 255, .08);
  padding: 2rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.spacivo-wcu-item::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--wcu-tile-color, #000000);
  opacity: var(--wcu-tile-opacity, .55);
}
.spacivo-wcu-item__icon {
  position: relative; z-index: 1;
  width: 88px; height: 88px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; flex-shrink: 0;
}
.spacivo-wcu-item__icon img { width: 44px; height: 44px; object-fit: contain; }
.spacivo-wcu-item__title { position: relative; z-index: 1; margin: 0 0 .75rem; color: #8A1748; font-size: 1rem; font-weight: 700; }
.spacivo-wcu-item__desc { position: relative; z-index: 1; margin: 0; color: #ddd; font-size: .85rem; line-height: 1.6; }

.spacivo-wcu-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-wcu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .spacivo-wcu-grid { grid-template-columns: 1fr; }
  .spacivo-wcu-container { padding: 2.5rem 1rem; }
}

/* background-attachment:fixed is unreliable on touch devices (notably iOS
   Safari, which mostly ignores it and can jank scrolling) — fall back to
   a plain scrolling background there instead of fighting the platform. */
@media (max-width: 1024px), (hover: none) {
  .spacivo-wcu-section { background-attachment: scroll; }
}