/* card-flow.css - pairs with card-flow.js (house card-group rule). Theme with custom properties. */
[data-card-flow]:not(.is-flow-carousel) > [data-flow-clone] { display: none !important; }

[data-card-flow].is-flow-carousel {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: var(--flow-gap, 20px);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-card-flow].is-flow-carousel::-webkit-scrollbar { display: none; }
/* Snap is off only while the script is drifting it; the moment a hand takes over it is back on. */
[data-card-flow].is-flow-carousel.is-drifting { scroll-snap-type: none; }
[data-card-flow].is-flow-carousel > * {
  flex: 0 0 var(--flow-card-w, min(82%, 340px));
  min-width: 0;
  grid-column: auto;
  scroll-snap-align: start;
}
/* Scroll-reveal would leave off-screen cards at opacity 0 (an IntersectionObserver never sees them). */
[data-card-flow].is-flow-carousel > [data-reveal] { opacity: 1; transform: none; transition: none; }

.card-flow-bar { display: none; }
.card-flow-bar.is-on {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.card-flow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: background 0.18s ease-out, transform 0.18s ease-out;
}
.card-flow-btn svg { width: 20px; height: 20px; }
.card-flow-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.card-flow-btn:active { transform: scale(0.94); }
.card-flow-btn:focus-visible { outline: 2px solid var(--flow-focus, var(--accent-blue, currentColor)); outline-offset: 2px; }
.card-flow-btn[hidden] { display: none; }