/*******
 SECTION CARDS
********/
:root{
  --ink:#16171A; --ink-soft:#5F5F5F;
  --card-bg:#FFFFFF; --img-bg:#F2F2F2;
  --accent:#E8442A;
  --radius:32px;
  --card-shadow:8px 8px 12px #0000004A;

  --cards-gutter:20px;
  --cards-gap:40px;
}
@media (min-width:1140px){
  :root{ --cards-gutter:40px; }
}


#mdpage section.feature{ 
  overflow:visible;
  justify-content: center; 
}

/* CARD */
#mdpage .f-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  list-style:none;
}
#mdpage .f-card .thumb{background:var(--img-bg);display:flex;align-items:center;justify-content:center}
#mdpage .f-card .thumb .ph{font-weight:600;font-size:clamp(44px,6vw,64px);color:#1D1D1F;user-select:none}
#mdpage .f-card .body{padding:25px 20px 20px;display:flex;flex-direction:column}
#mdpage .f-card .body .eyebrow{font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:#1A1A1A;margin:0 0 12px}
#mdpage .f-card .body h3{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#141414;margin:0}
#mdpage .f-card .body p{font-size:16px;line-height:1.4;color:var(--ink-soft);margin:16px 0 0}

#mdpage .feature{position:relative}

#mdpage .feature .f-top{
  padding-block:40px 40px;
} 

#mdpage .f-track{
  display:block;
  margin:0;
  padding:10px 0 20px;
  list-style:none;
}

#mdpage .f-card{
  position:sticky;
  top:80px;
  width:90%;
  margin:0 auto 24px;
}
#mdpage .f-card .thumb{aspect-ratio:4/3}
#mdpage .f-progress{display:none}


@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #mdpage .f-card{animation:card-press linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    @keyframes card-press{to{transform:scale(.93) translateY(-14px);filter:brightness(.9)}}
  }
}


@media (min-width:768px){

  #mdpage section.feature{
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  #mdpage .feature .f-top{
    flex:0 0 auto;
  }

  #mdpage .f-stage{
    flex:0 1 auto;
    min-height:0;
    display:flex;
    height: auto;
    align-items:flex-start;
    padding-bottom:var(--cards-gap);

    overflow-x:auto; overflow-y:hidden; 
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  #mdpage .f-stage::-webkit-scrollbar{
    display:none;
  }

  #mdpage .f-track{
    display:flex; align-items:stretch; gap:30px;
    max-height:100%;
    padding-inline:var(--cards-gutter); 
    will-change:transform;
  }

  #mdpage .f-card{
    position:static;
    flex:0 0 clamp(320px,34vw,400px);
    width:auto; height:auto; margin:0;
    scroll-snap-align:center;
    animation:none;
  }
  #mdpage .f-card .thumb{flex:0 0 auto;/*aspect-ratio:16/9;*/ overflow: hidden;}
	#mdpage .f-card .thumb img {width: 100%; width: 100%; height: 100%; object-fit: cover; display: block;}
  #mdpage .f-card .body{flex:1 1 auto;min-height:0;overflow:auto}

  #mdpage .feature.is-pinned .f-stage{overflow:hidden;scroll-snap-type:none}

  #mdpage .f-progress{
    display:block;position:absolute;left:0;bottom:0;height:4px;width:100%;
    transform:scaleX(0);transform-origin:left;
  }
  #mdpage .feature:not(.is-pinned) .f-progress{display:none}
}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }