/* Sticky card-stack scroll (mobile only — enabled via JS .card-stack-active) */

/* Light mode uses a glass card fill. When cards pin on top of each
   other, that alpha lets the lower card's text show through. Keep
   stacked cards fully opaque so only the intended peek is visible. */
[data-theme="light"] .card-stack-active .card-stack-item {
  --card-bg: #f2f0ec;
  --card-hover: #e8e6e1;
  --surface: #f2f0ec;
  --surface2: #e8e6e1;
  background-color: var(--card-bg);
}

[data-theme="light"] .card-stack-active .card-stack-item:hover,
[data-theme="light"] .card-stack-active .card-stack-item:focus,
[data-theme="light"] .card-stack-active .card-stack-item:focus-within {
  background-color: var(--card-hover);
}

@media (max-width: 768px) {
  section:has([data-card-stack].card-stack-active),
  #facilities-main:has([data-card-stack].card-stack-active) {
    overflow: visible !important;
  }

  section:has([data-card-stack].card-stack-active) .sec,
  #facilities-main:has([data-card-stack].card-stack-active) .sec,
  #values .values-layout,
  #values .reveal-right {
    overflow: visible;
  }

  .card-stack-active {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    grid-template-columns: unset !important;
    transform: none !important;
    opacity: 1 !important;
    padding-bottom: 0;
  }

  .card-stack-reveal-parent.reveal,
  .card-stack-reveal-parent.reveal-left,
  .card-stack-reveal-parent.reveal-right,
  .card-stack-reveal-parent.anim {
    transform: none !important;
    opacity: 1 !important;
  }

  .card-stack-active .card-stack-item {
    position: sticky;
    top: calc(
      var(--card-stack-top, 100px) + var(--stack-offset, calc(var(--stack-i, 0) * 12px))
    );
    z-index: calc(var(--stack-i, 0) + 1);
    margin-bottom: 18px;
    transform: scale(var(--stack-scale, 1));
    transform-origin: center top;
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s ease;
    backface-visibility: hidden;
  }

  .card-stack-active .card-stack-item.is-stack-pinned {
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(201, 125, 39, 0.14);
  }

  [data-theme="light"] .card-stack-active .card-stack-item.is-stack-pinned {
    box-shadow:
      0 14px 36px rgba(30, 30, 35, 0.16),
      0 0 0 1px rgba(150, 110, 20, 0.2);
  }

  .card-stack-active .card-stack-item:last-child {
    margin-bottom: 0;
  }

  .card-stack-active .card-stack-item:hover {
    transform: scale(var(--stack-scale, 1));
  }
}

/* Card stack on all viewports when data-card-stack-all is set */
.card-stack-active[data-card-stack-all] {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  grid-template-columns: unset !important;
  transform: none !important;
  opacity: 1 !important;
  padding-bottom: 0;
}

.card-stack-active[data-card-stack-all] .card-stack-item {
  position: sticky;
  top: calc(
    var(--card-stack-top, 100px) + var(--stack-offset, calc(var(--stack-i, 0) * 12px))
  );
  z-index: calc(var(--stack-i, 0) + 1);
  transform: scale(var(--stack-scale, 1));
  transform-origin: center top;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
  backface-visibility: hidden;
}

.card-stack-active[data-card-stack-all] .card-stack-item.is-stack-pinned {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(201, 125, 39, 0.14);
}

[data-theme="light"]
  .card-stack-active[data-card-stack-all]
  .card-stack-item.is-stack-pinned {
  box-shadow:
    0 14px 36px rgba(30, 30, 35, 0.16),
    0 0 0 1px rgba(150, 110, 20, 0.2);
}

.card-stack-active[data-card-stack-all] .card-stack-item:hover {
  transform: scale(var(--stack-scale, 1));
}

/* Card stack on desktop only (e.g. MRO page) */
@media (min-width: 769px) {
  section:has([data-card-stack-desktop].card-stack-active) {
    overflow: visible !important;
  }

  section:has([data-card-stack-desktop].card-stack-active) .sec {
    overflow: visible;
  }

  .card-stack-active[data-card-stack-desktop] {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    grid-template-columns: unset !important;
    transform: none !important;
    opacity: 1 !important;
    padding-bottom: 0;
  }

  .card-stack-active[data-card-stack-desktop] .card-stack-item {
    position: sticky;
    top: calc(
      var(--card-stack-top, 100px) + var(--stack-offset, calc(var(--stack-i, 0) * 12px))
    );
    z-index: calc(var(--stack-i, 0) + 1);
    margin-bottom: 18px;
    transform: scale(var(--stack-scale, 1));
    transform-origin: center top;
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s ease;
    backface-visibility: hidden;
  }

  .card-stack-active[data-card-stack-desktop] .card-stack-item.is-stack-pinned {
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(201, 125, 39, 0.14);
  }

  [data-theme="light"]
    .card-stack-active[data-card-stack-desktop]
    .card-stack-item.is-stack-pinned {
    box-shadow:
      0 14px 36px rgba(30, 30, 35, 0.16),
      0 0 0 1px rgba(150, 110, 20, 0.2);
  }

  .card-stack-active[data-card-stack-desktop] .card-stack-item:last-child {
    margin-bottom: 0;
  }

  .card-stack-active[data-card-stack-desktop] .card-stack-item:hover {
    transform: scale(var(--stack-scale, 1));
  }
}