/* Featured Patient Education (homepage) — approved by Vicky 9 Nov 2026.
   Load AFTER styles.css. Reuses .feature-card--editorial for size (4:5, 3-up desktop,
   2-up tablet, Perspectives' phone width), gold label and arrow; adds the warm
   background, lighter overlay, Apple-style details and (2026-11-10) Perspectives' continuous glide at half speed. */

/* Section: the site's own cream (same as "What We Believe"), so it sits in the brand palette */
.fpe { position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.75rem, 5.5vw, 4rem);
  background: var(--cream); }
.fpe__heading { color: var(--purple); font-size: var(--fs-h2); margin: 0 0 clamp(1rem, 2vw, 1.4rem); }

/* Glide (2026-11-10): the same continuous drift as Perspectives (styles.css pcarousel-drift), at half its speed.
   fpe.js clones the six cards once (aria-hidden, links out of the tab order), so moving to -50% lands exactly one
   set to the left: a seamless wrap. The space between cards is a margin on each card (not flex gap, as in
   Perspectives' .marquee__item), so one set is an exact half of the track. fpe.js sets --fpe-dur from the measured
   set width (15px/s at every viewport). Pause states flip animation-play-state, keeping the position; keyboard focus
   (.is-kbd) switches to a static native scroller so the focused card can scroll into view. NO-JS: a swipeable row. */
.fpe__viewport { --gap: clamp(0.9rem, 2vw, 1.25rem); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  padding: 0.6rem 0.6rem 2.4rem; margin-inline: -0.6rem; }
.js .fpe__viewport { overflow-x: hidden; }
.fpe__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.fpe__item { flex: 0 0 auto; display: flex; margin-inline-end: var(--gap); }
.js .fpe__viewport.is-animated .fpe__track { animation: fpe-drift var(--fpe-dur, 80s) linear infinite; will-change: transform; }
@keyframes fpe-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* The pause and keyboard rules repeat .js and .is-animated so they outrank the animation shorthand above
   (a shorthand resets animation-play-state to running; at lower specificity a pause would never take effect). */
.js .fpe__viewport.is-animated.is-paused .fpe__track { animation-play-state: paused; }
.js .fpe__viewport.is-animated.is-kbd .fpe__track { animation: none; }
.js .fpe__viewport.is-kbd { overflow-x: auto; }

/* Card: lighter overlay so the photos keep their colour */
.fpe .feature-card { box-shadow: 0 18px 26px -14px rgba(46, 33, 80, 0.38);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, opacity .5s ease; }
.fpe .feature-card__img { filter: saturate(1.18) brightness(1.06); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
/* Editorial card — clean photo on top, words on white below (no overlay, no plate) */
.fpe .fpe__card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(58, 42, 102, 0.08); }
.fpe .fpe__card::before { display: none; }
.fpe .fpe__media { position: relative; flex: 0 0 62%; overflow: hidden; }
.fpe .fpe__media .feature-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fpe .feature-card__body { position: static; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 1.05rem 3rem 1.1rem 1.25rem; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fpe .feature-card__label { color: var(--purple); text-shadow: none; margin-bottom: .3rem; line-height: 1.25; }
.fpe .feature-card__teaser { color: var(--text-muted); text-shadow: none; line-height: 1.45; }
.fpe .feature-card__arrow { color: var(--gold-deep); right: 1.2rem; bottom: 1.15rem; }
.fpe .fpe__play { top: 50%; }
.fpe .fpe__img--pv01 { object-position: 50% 50%; }
@media (hover: hover) { .fpe__card:hover .feature-card__label { color: var(--purple-bright); } }

/* Apple-style hover */
@media (hover: hover) {
  .fpe__track:hover .fpe__card { opacity: .72; }
  .fpe__track .fpe__card:hover { opacity: 1; transform: translateY(-6px) scale(1.035); z-index: 2;
    box-shadow: 0 30px 40px -18px rgba(46, 33, 80, 0.48), 0 0 0 1px rgba(187, 134, 63, 0.55); }
  .fpe__card:hover .feature-card__img { transform: scale(1.06); }
  .fpe__card:hover .fpe__play { transform: translate(-50%, -50%) scale(1.1); }
}
.fpe__card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; opacity: 1 !important; }

/* Glass label and play button: translucent fill first, blur on top */
.fpe__chip { top: 1rem; left: 1rem; padding: .32rem .7rem; border-radius: 999px; color: #E7C97A;
  background: rgba(46, 33, 80, 0.80); border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.fpe__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%);
  background: rgba(46, 33, 80, 0.42); border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(20, 14, 40, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s ease; }
.fpe__play svg { margin-inline-start: 3px; }
.fpe__img--pv03 { object-position: 50% 30%; }

/* RTL: the slide keeps its left-to-right track; card content stays right-to-left */
html[dir="rtl"] .fpe__viewport { direction: ltr; }
html[dir="rtl"] .fpe__card { direction: rtl; }

/* Fade-up as the section scrolls in (visible where unsupported) */
@keyframes fpeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fpe .container { animation: fpeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}

/* Phones glide too (2026-11-10: the swipe row is gone, as Perspectives glides on phones). */
@media (prefers-reduced-motion: reduce) {
  .fpe__item--clone { display: none; }
  .fpe .feature-card, .fpe .feature-card__img, .fpe__play { transition: none !important; }
  .js .fpe__viewport .fpe__track { animation: none !important; }   /* NO automatic motion of any kind */
  .js .fpe__viewport { overflow-x: auto; }                        /* static, manually swipeable row */
}