/* Hero mechanism carousel — Figma-spec layered showcase.
   3 slots positioned absolute inside a fixed-height stage.
   Center on top, near-flanks dimmed + setback + mask-faded at outer edges.
   Nav below: left arrow · dots · right arrow. */

#hw-mech-carousel {
  width: 100%;
  contain: layout style;
  /* host owns NO horizontal padding — sits inside .hero-shell which
     already gutter-pads. Only bottom space for the nav row. */
  padding: 0 0 64px;
}

.mech-carousel {
  position: relative;
  width: 100%;
  /* Fluid stage height: tall enough on every viewport that the full chat
     (label + banner + tabs + EHR rows + chat panel + input) fits without
     clipping. Content min = 320 (top) + 300 (chat) + ~140 chrome = 760.
     Stage floor 780 keeps both panels at their minimum on small laptops;
     max 900 fits Galaxy Z Fold + tablets without ballooning on 4K. */
  height: clamp(780px, 55vw, 900px);
  isolation: isolate;
}

/* every slot starts absolute; specific position rules drive depth */
.mech-slot {
  position: absolute;
  display: flex; flex-direction: column;
  border-radius: 32px;
  background: var(--bone-100, #FAF8F2);
  border: 1px solid var(--rule, rgba(26,43,76,0.12));
  overflow: hidden;
  cursor: pointer;
  transition:
    top 0.55s cubic-bezier(.4,.05,.2,1),
    bottom 0.55s cubic-bezier(.4,.05,.2,1),
    left 0.55s cubic-bezier(.4,.05,.2,1),
    right 0.55s cubic-bezier(.4,.05,.2,1),
    opacity 0.55s ease,
    filter 0.55s ease,
    box-shadow 0.45s ease,
    z-index 0s 0.2s;
  will-change: top, bottom, left, right, opacity;
}

/* center — full size, on top. Insets scale w/ viewport. */
.mech-slot-center {
  top: 0;
  bottom: 0;
  left: clamp(80px, 14vw, 200px);
  right: clamp(80px, 14vw, 200px);
  opacity: 1;
  z-index: 3;
  filter: none;
  box-shadow: 0 28px 56px rgba(26, 43, 76, 0.14);
  cursor: default;
}

/* near-flank left — inset 40px vertical, peeks from left edge.
   Animation keeps running underneath; .mech-slot-glass overlay diffuses it. */
.mech-slot-left {
  top: 40px;
  bottom: 40px;
  left: 0;
  right: calc(100% - clamp(140px, 18vw, 240px));
  opacity: 1;
  z-index: 2;
  box-shadow: 0 14px 30px rgba(26, 43, 76, 0.08);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 35%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 35%);
}

.mech-slot-right {
  top: 40px;
  bottom: 40px;
  left: calc(100% - clamp(140px, 18vw, 240px));
  right: 0;
  opacity: 1;
  z-index: 2;
  box-shadow: 0 14px 30px rgba(26, 43, 76, 0.08);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 35%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 35%);
}

/* Glass overlay — sits above chat content inside the slot.
   Center: invisible (animation reads sharp). Flanks: frosted glass diffuses
   the always-running animation so it stays alive but never competes. */
.mech-slot-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.55s ease, backdrop-filter 0.55s ease;
  background: rgba(244, 241, 234, 0.45);
  -webkit-backdrop-filter: saturate(0.55) blur(6px);
          backdrop-filter: saturate(0.55) blur(6px);
}
.mech-slot-left .mech-slot-glass,
.mech-slot-right .mech-slot-glass {
  opacity: 1;
}
.mech-slot-left:hover .mech-slot-glass,
.mech-slot-right:hover .mech-slot-glass {
  opacity: 0.55;
  -webkit-backdrop-filter: saturate(0.85) blur(3px);
          backdrop-filter: saturate(0.85) blur(3px);
}

/* Flank slots are clickable to promote — keep cursor pointer. */
.mech-slot-left, .mech-slot-right { cursor: pointer; }

/* Hide the scripted cursor sprite + overlay text inside flanks — they
   show through the glass as distracting dark elements at full saturation. */
.mech-slot-left  .chatx-cursor,
.mech-slot-right .chatx-cursor,
.mech-slot-left  .ehr-chat-overlay,
.mech-slot-right .ehr-chat-overlay {
  opacity: 0 !important;
}

/* label bar — inside card, above content */
.mech-slot-label {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: rgba(26,43,76,0.06);
  border-bottom: 1px solid var(--rule, rgba(26,43,76,0.12));
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-700, #1A2B4C);
  font-weight: 600;
  flex-shrink: 0;
  min-height: 38px;
}
.mech-slot-label-mark {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange, #F5A623);
}
.mech-slot-label-sep { opacity: 0.4; margin: 0 0.15rem; }

.mech-slot[data-product="md"]  .mech-slot-label-mark { background: #5EA070; }
.mech-slot[data-product="biz"] .mech-slot-label-mark { background: #C58413; }
.mech-slot[data-product="edu"] .mech-slot-label-mark { background: #243C6A; }

.mech-slot-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1.1rem 1.1rem;
}

/* Placeholder — used only if a product Comp isn't loaded yet. Live mounts
   replace this once the JSX module compiles. */
.mech-slot-placeholder {
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.5rem; padding: 1rem 0.6rem; height: 100%;
}
.mech-slot-ph-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-600, #243C6A); opacity: 0.7;
}
.mech-slot-ph-title {
  font-size: 1rem; font-weight: 700; color: var(--navy-700, #1A2B4C);
  letter-spacing: -0.01em;
}
.mech-slot-ph-body {
  font-size: 0.78rem; color: rgba(15, 24, 48, 0.6); line-height: 1.4;
}

/* Nav row — arrows + dots */
.mech-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0 0;
  margin-top: 0.5rem;
}
.mech-nav-arrow {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--navy-700, #1A2B4C);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, transform 0.15s;
  line-height: 0;
}
.mech-nav-arrow:hover {
  background: rgba(26,43,76,0.08);
}
.mech-nav-arrow:active { transform: scale(0.95); }
.mech-nav-arrow svg { display: block; }

.mech-carousel-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.5rem;
}
.mech-dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  background: rgba(26,43,76,0.85);
  border-radius: 50%;
  transition: width 0.3s, height 0.3s, opacity 0.3s, background 0.3s;
  width: 12px;
  height: 12px;
  opacity: 0.5;
  display: inline-block;
}
.mech-dot.active {
  width: 16px;
  height: 16px;
  opacity: 1;
  background: var(--navy-700, #1A2B4C);
}

/* loading state */
#hw-mech-carousel.mech-loading {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hw-mech-carousel.mech-loading::before {
  content: 'loading mechanism…';
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15, 24, 48, 0.45);
}
#hw-mech-carousel.mech-boot-failed::before {
  content: 'mechanism unavailable';
  color: #b03a3a;
}

/* mobile — single center, flanks hidden.
   Card height MUST fit the full chat (label + banner + tabs + EHR rows +
   chat panel + input). EHR + chat are flex 1 1 50% w/ min-height 240px
   each, so absolute minimum content = ~620px. Use 680 floor + grow to
   90vh on tall portrait phones (Galaxy Z Fold unfolded inner display
   measures ~1812w x 2176h — 90vh of 2176 = 1958, cap at 880). */
@media (max-width: 820px) {
  .mech-carousel {
    height: auto;
    min-height: clamp(760px, 95vh, 900px);
  }
  .mech-slot { position: relative; }
  .mech-slot-center {
    inset: auto;
    top: auto; bottom: auto; left: auto; right: auto;
    width: 100%;
    height: clamp(760px, 95vh, 900px);
    z-index: 1;
    border-radius: 24px;
  }
  /* Match overlay corner radius to mobile card radius so the text
     overlay's rounded corners line up exactly with the slot edges. */
  .mech-slot-center .ehr-chat-overlay { border-radius: 24px; }
  .mech-slot-left, .mech-slot-right { display: none; }
  .mech-slot-glass { display: none; }
}