/*
 * BMSDock Feature Cards
 * Single source of truth for Feature Card geometry and interaction states.
 *
 * Standard:
 * - fixed card geometry (no jumping between slides)
 * - Title: one line, ellipsis on overflow
 * - Description: maximum four lines, ellipsis after line 4
 * - Icon: fixed 80x80, aligned with the four-line Description row
 * - pagination dots: fixed inside the bottom of the card
 *
 * Typography remains owned by start-typography.css.
 */

#statsFeaturePanel{
  --feature-card-height:144px;
  --feature-card-pad-top:10px;
  --feature-card-pad-x:16px;
  --feature-card-pad-bottom:28px;
  --feature-title-row:20px;
  --feature-title-gap:6px;
  --feature-body-row:80px;
  --feature-icon-size:80px;
  --feature-column-gap:14px;
  --feature-dots-bottom:10px;

  position:relative;
  box-sizing:border-box;
  width:100%;
  height:var(--feature-card-height);
  min-height:var(--feature-card-height);
  max-height:var(--feature-card-height);
  margin:8px 0 14px;
  padding:0;
  border:1px solid rgba(148,163,184,.34);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.07);
  overflow:hidden;
}

#statsFeaturePanel.hidden{display:none !important;}

#statsFeaturePanel .feature-track{
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  height:100%;
  min-height:0;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  user-select:none;
  cursor:grab;
  contain:layout paint;
}
#statsFeaturePanel .feature-track::-webkit-scrollbar{display:none;}
#statsFeaturePanel .feature-track.dragging{
  scroll-snap-type:none;
  scroll-behavior:auto;
}
#statsFeaturePanel .feature-track.drag-ready,
#statsFeaturePanel .feature-track.dragging{cursor:grabbing;}

#statsFeaturePanel .feature-card,
#statsFeaturePanel .feature-card.active{
  position:relative;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--feature-icon-size);
  grid-template-rows:var(--feature-title-row) var(--feature-body-row);
  column-gap:var(--feature-column-gap);
  row-gap:var(--feature-title-gap);

  flex:0 0 100%;
  width:100%;
  min-width:100%;
  max-width:100%;
  height:100%;
  min-height:100%;
  max-height:100%;

  padding:var(--feature-card-pad-top) var(--feature-card-pad-x) var(--feature-card-pad-bottom);
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:left;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  contain:layout paint;
  transform:none;
}
#statsFeaturePanel .feature-card:nth-child(4n+1){
  background:linear-gradient(135deg,#f0fdf4 0%,#eff6ff 58%,#ffffff 100%);
}
#statsFeaturePanel .feature-card:nth-child(4n+2){
  background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 55%,#ffffff 100%);
}
#statsFeaturePanel .feature-card:nth-child(4n+3){
  background:linear-gradient(135deg,#fff7ed 0%,#f8fafc 55%,#ffffff 100%);
}
#statsFeaturePanel .feature-card:nth-child(4n+4){
  background:linear-gradient(135deg,#f5f3ff 0%,#f8fafc 55%,#ffffff 100%);
}

/* Flatten only the visual wrapper: semantics of h2/p remain unchanged. */
#statsFeaturePanel .feature-copy{display:contents;}

#statsFeaturePanel .feature-title{
  grid-column:1 / -1;
  grid-row:1;
  min-width:0;
  width:100%;
  height:var(--feature-title-row);
  margin:0;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#statsFeaturePanel .feature-desc{
  grid-column:1;
  grid-row:2;
  align-self:start;
  min-width:0;
  width:100%;
  height:var(--feature-body-row);
  max-height:var(--feature-body-row);
  margin:0;
  padding:0;
  overflow:hidden;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
}

#statsFeaturePanel .feature-icon{
  grid-column:2;
  grid-row:2;
  align-self:center;
  justify-self:end;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--feature-icon-size);
  height:var(--feature-icon-size);
  min-width:var(--feature-icon-size);
  max-width:var(--feature-icon-size);
  min-height:var(--feature-icon-size);
  max-height:var(--feature-icon-size);
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
#statsFeaturePanel .feature-icon img{
  display:block;
  width:100%;
  height:100%;
  min-width:100%;
  max-width:100%;
  min-height:100%;
  max-height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

#statsFeaturePanel .feature-dots{
  position:absolute;
  left:50%;
  bottom:var(--feature-dots-bottom);
  z-index:5;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  height:6px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:.72;
  transition:opacity .18s ease;
  pointer-events:auto;
}
#statsFeaturePanel.feature-interacting .feature-dots,
#statsFeaturePanel:hover .feature-dots{opacity:1;}

#statsFeaturePanel .fdot{
  box-sizing:border-box;
  width:6px;
  height:6px;
  min-width:6px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.34);
  opacity:1;
  cursor:pointer;
  transition:width .22s ease,background .22s ease,opacity .22s ease;
}
#statsFeaturePanel .fdot.active{
  width:28px;
  background:#0f172a;
  opacity:1;
}

/* Same geometry on desktop/mobile; narrow screens only tighten horizontal spacing. */
@media (max-width:420px){
  #statsFeaturePanel{
    --feature-card-pad-x:14px;
    --feature-column-gap:10px;
    margin-top:7px;
    margin-bottom:12px;
    border-radius:20px;
  }
}