/*
 * 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, always rendered above the icon and given the full card width
 * - Description: maximum four lines, ellipsis after line 4
 * - Icon: large high-resolution asset, anchored to bottom-right and intentionally clipped
 * - 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:min(33.333%, 140px);
  --feature-icon-right:-12px;
  --feature-icon-bottom:-16px;
  --feature-copy-width:66.667%;
  --feature-title-width:100%;
  --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:block;

  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%);
}

/*
 * The title owns the full card width and always renders above the icon.
 * The description keeps the safe left text zone so the artwork can remain
 * visually large without reducing body-copy readability.
 */
#statsFeaturePanel .feature-copy{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  pointer-events:none;
}

#statsFeaturePanel .feature-title{
  position:relative;
  z-index:3;
  min-width:0;
  width:var(--feature-title-width);
  max-width:var(--feature-title-width);
  height:var(--feature-title-row);
  margin:0 0 var(--feature-title-gap);
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
}

#statsFeaturePanel .feature-desc{
  min-width:0;
  width:var(--feature-copy-width);
  max-width:var(--feature-copy-width);
  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{
  position:absolute;
  right:var(--icon-right, var(--feature-icon-right));
  bottom:var(--icon-bottom, var(--feature-icon-bottom));
  z-index:1;
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  width:calc(var(--feature-icon-size) * var(--icon-scale, 1));
  height:auto;
  aspect-ratio:1 / 1;
  margin:0;
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
  pointer-events:none;
}
#statsFeaturePanel .feature-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/*
 * Per-icon optical tuning lives in feature-icons-config.css.
 * Keep this file limited to shared card geometry/behavior.
 */

#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-icon-right:-10px;
    --feature-icon-bottom:-14px;
    margin-top:7px;
    margin-bottom:12px;
    border-radius:20px;
  }
}