/* ---------------- Customer Hub feature selector (2026-09-07) ----------------
   Scope: the #customer-hub section of energy-management-systems.html only.

   Three real iPhone Air captures sit in ONE horizontal row. The row is a
   native scroll container with scroll-snap, so whenever the row overflows,
   touch and trackpad get the platform's own horizontal gesture with nothing
   fighting it. Only when all three fit - no scroll range to give - does the
   script add .is-fitting and take the horizontal axis. Vertical scroll and
   pinch zoom are untouched in both cases.

   Two states:
     base (no JS)  - the rail is a static horizontal gallery and all three
                     feature descriptions are stacked and readable below it.
     .is-enhanced  - ems-hub-features.js has wired the tabs; one description
                     shows at a time in a height-reserved panel, and the
                     Previous / Next controls become visible because they are
                     now functional.

   Nothing here draws device hardware. The frame comes from
   assets/previews/iphone-air.css, which is untouched. */

.hub-desktop{
  margin:clamp(30px,4vw,48px) auto 0;
  max-width:min(100%,900px);
}

.hub-features{
  margin-top:clamp(28px,3.6vw,44px);
}

/* ---- the row ---- */
.hub-rail{
  display:flex;
  align-items:flex-end;
  gap:clamp(14px,2.2vw,30px);
  margin:0;
  padding:6px 0 12px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* `safe` keeps the first slide reachable once the row does overflow;
     without it a centred flex line clips its own start edge */
  justify-content:center;
  justify-content:safe center;
  /* the phone artwork must never be draggable as an image */
  -webkit-user-select:none; user-select:none;
}
.hub-rail::-webkit-scrollbar{display:none}
/* Set by the script only while all three slides fit, i.e. while the rail has
   no horizontal scroll range for the platform to give away. Vertical panning
   and pinch zoom stay with the page; the horizontal axis becomes ours, so a
   swipe can step the selection instead of doing nothing. When the rail does
   overflow the class is absent and touch-action is the default again. */
.hub-rail.is-fitting{touch-action:pan-y pinch-zoom}

.hub-slide{
  flex:0 0 auto;
  width:min(260px,30%);
  margin:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  text-align:center;
}
.hub-slide img{-webkit-user-drag:none}

.hub-slide__cap{
  display:block;
  margin-top:12px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--mid-on-paper);
  line-height:1.4;
}
/* the selected marker is a rule under the label, not a card around the
   hardware - the device render stays the only object on the paper */
.hub-slide__cap::after{
  content:'';
  display:block;
  width:26px; height:2px; margin:7px auto 0;
  border-radius:2px; background:transparent;
  transition:background .12s var(--ease-out);
}

/* 120ms, not 280ms (2026-09-07): the expand/shrink has to land while the
   finger is still moving, so the highlight reads as tracking the gesture
   rather than trailing it. Same easing, same end states - only the
   duration changed. */
.is-enhanced .hub-slide{
  cursor:pointer;
  opacity:.5;
  transition:opacity .12s var(--ease-out),transform .12s var(--ease-out);
  transform:scale(.955);
  transform-origin:50% 100%;
}
.is-enhanced .hub-slide.is-active{opacity:1; transform:none}
.is-enhanced .hub-slide.is-active .hub-slide__cap{color:var(--teal-ink)}
.is-enhanced .hub-slide.is-active .hub-slide__cap::after{background:var(--fmc-teal)}
.is-enhanced .hub-slide:hover{opacity:.8}
.is-enhanced .hub-slide.is-active:hover{opacity:1}
.is-enhanced .hub-slide:focus-visible{
  outline:2px solid var(--fmc-teal); outline-offset:8px; border-radius:22px;
}

/* ---- previous / next ---- */
.hub-nav{
  display:none;
  justify-content:center; align-items:center;
  gap:10px;
  margin-top:clamp(14px,1.8vw,20px);
}
.is-enhanced .hub-nav{display:flex}
.hub-nav__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border:1px solid var(--paper-line); border-radius:980px;
  background:#fff; color:var(--teal-ink);
  font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer;
  transition:background .18s,border-color .18s,opacity .18s;
}
.hub-nav__btn:hover{background:var(--paper-2)}
.hub-nav__btn:focus-visible{outline:2px solid var(--fmc-teal); outline-offset:3px}
.hub-nav__btn[aria-disabled="true"]{opacity:.4; cursor:default; background:#fff}
.hub-nav__btn svg{width:11px; height:11px; flex:none}

/* ---- the description ---- */
.hub-detail{
  margin-top:clamp(20px,2.6vw,28px);
  display:grid;
  gap:clamp(20px,2.6vw,30px);
  max-width:56ch;
  margin-inline:auto;
}
.hub-detail__item h3{font-size:18px; margin-bottom:8px}
.hub-detail__item p{font-size:15px; color:var(--mid-on-paper); line-height:1.65}
.hub-detail__item:focus-visible{outline:2px solid var(--fmc-teal); outline-offset:6px; border-radius:8px}

/* Enhanced: every description occupies the same grid cell, so the panel is
   as tall as the tallest one and selecting never reflows the section below.
   visibility:hidden (not display:none) is what keeps that height while still
   removing the inactive copy from the accessibility tree. */
.is-enhanced .hub-detail{gap:0}
.is-enhanced .hub-detail__item{
  grid-area:1 / 1;
  visibility:hidden; opacity:0;
  transition:opacity .12s var(--ease-out);
}
.is-enhanced .hub-detail__item.is-active{visibility:visible; opacity:1}

/* ---- responsive ----
   At <=900px the row overflows on purpose: the phones stay at a readable
   size and the neighbours stay half-visible, which is the discoverability
   cue for the swipe. The ::before/::after spacers exist only here, so the
   first and last slide can still reach the centre snap position; on wide
   desktop they are absent and all three fit with no scroll range at all. */
@media (max-width:900px){
  .hub-rail{
    justify-content:flex-start;
    padding-left:0; padding-right:0;
  }
  .hub-rail::before,
  .hub-rail::after{
    content:'';
    flex:0 0 calc((100% - min(260px,68%)) / 2 - clamp(14px,2.2vw,30px));
    min-width:4px;
  }
  .hub-slide{width:min(260px,68%)}
}
@media (max-width:520px){
  .hub-slide__cap{font-size:12.5px}
  .hub-detail__item h3{font-size:17px}
  .hub-detail__item p{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .hub-rail{scroll-behavior:auto}
  .is-enhanced .hub-slide,
  .is-enhanced .hub-detail__item,
  .hub-slide__cap::after,
  .hub-nav__btn{transition:none}
}