/* =====================================================
   SPC Scroll Gallery — Card System (Namespaced)
===================================================== */

:root {
  --image-card-width: 520px;
  --text-card-width: 320px;
  --card-radius: 18px;
  --card-bg: #fff;
  --card-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
  --card-padding: 32px;

  --spc-logo-size: 32px;
  --spc-logo-gap: 20px;
}

/* ---------- Gallery Wrappers ---------- */

.spc-scroll-gallery {
  position: relative;
  overflow: hidden;
}

.spc-scroll-row {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  will-change: transform;
}

/* ---------- Base Scroll Card ---------- */

.spc-scroll-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);

  aspect-ratio: 16 / 9;
}

/* ---------- Image Card ---------- */

.spc-scroll-card--image {
  width: var(--image-card-width);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Text Card ---------- */

.spc-scroll-card--text {
  position: relative;
  width: var(--text-card-width);

  font-family: "Editors Note", serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.45;
  text-align: center;

  color: var(--wpex-palette-252-color);

  padding-bottom: calc(
    var(--spc-logo-size) +
    var(--spc-logo-gap) +
    24px
  );
}

/* ---------- Logo Mark ---------- */

.spc-scroll-card--text::after {
  content: "";
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);

  width: var(--spc-logo-size);
  height: var(--spc-logo-size);

  background-image: url("https://shorepoint.church/wp-content/themes/shorepoint/logos/walnut/svg/icon-walnut.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .spc-scroll-row {
    gap: 16px;
    margin-bottom: 16px;
  }

  .spc-scroll-card {
    aspect-ratio: auto;
  }
}