/* Modern Health, Everlab direction: shared carousel family, used by
   index.html and services.html, round 2, 2026-10-05. Moved here (cut,
   not copied) from styles/round1-pages.css, where it used to be
   services.html's own copy only: the founders asked that Therapies and
   Consultations run as drifting belts on the homepage again, the same
   belts services.html already had, so this is now the one definition
   both pages link to, directly after styles/base.css and before each
   page's own round1 stylesheet. motion-effects.js drives every
   [data-carousel-block] on either page off this same markup convention.
   Reuses design tokens from styles/tokens.css and layout primitives from
   styles/base.css; never redefines either. */

.carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 1rem 0.25rem 1.5rem;
  margin: 0 -0.25rem;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-pill); }

.service-card {
  flex: 0 0 auto;
  width: 17rem;
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(24, 24, 24, 0.03);
  transition: transform 0.35s var(--ease-reveal), box-shadow 0.35s var(--ease-reveal);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(24, 24, 24, 0.08);
}
.service-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(0.88);
}
.service-thumb-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}
.service-detail {
  position: absolute;
  inset: 0;
  margin: 0;
  list-style: none;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease-reveal), transform 0.28s var(--ease-reveal), visibility 0s linear 0.28s;
}
.service-detail li { font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); padding-left: 1rem; position: relative; }
.service-detail li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; background: var(--accent); border-radius: 1px; }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px) scale(1.04);
    z-index: 3;
    box-shadow: 0 24px 48px rgba(24, 24, 24, 0.12);
  }
  .service-card:hover .service-detail { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
}
.service-card:focus-visible { transform: translateY(-6px) scale(1.04); z-index: 3; }
.service-card:focus-visible .service-detail { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-detail { transition: none; }
}
.service-card h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.service-card p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.service-fam { font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* service-card--soon, 2026-10-05: founders are still awaiting the HBOT
   and red light units. The detail blurb stays in the markup (screen
   readers, search) but reads as visually unavailable: blurred and
   non-selectable, with its own small, unblurred "Coming soon" label
   ahead of it inside the same panel. service-fam swaps to the same
   wording and the thumb photo is desaturated a touch so the whole card
   reads as "not yet", without hiding what it will eventually be. */
.service-card--soon .service-detail li {
  filter: blur(5px);
  user-select: none;
}
.service-card--soon .service-detail-soon {
  filter: none;
  user-select: auto;
  padding-left: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.service-card--soon .service-detail-soon::before { content: none; }
.service-card--soon .service-fam { color: var(--accent); }
.service-card--soon .service-thumb-img { filter: saturate(0.5); opacity: 0.85; }

/* Carousel progress rail. */
.carousel-rail { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.carousel-rail-track { flex: 1; height: 2px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; display: block; }
.carousel-rail-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(1); }
.carousel-rail-label { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; flex: none; }

/* Wrapper for one carousel + its heading + its rail. */
.carousel-block .section-head { margin-bottom: 1.5rem; }
.carousel-block-hr {
  height: 1px;
  background: var(--line);
  margin: 0 0 2rem;
}

/* Note under the Consultations belt (index.html and services.html).
   2026-10-05, round 2: moved here from services.html's own inline
   <style> so both pages' copies of this block share one definition;
   index.html's new carousel version reuses the exact same markup. */
.consult-note {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.consult-note p {
  max-width: 32rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}