/* ==========================================================================
   Value props / interactive demos — pill toggle tabs + media panel
   ========================================================================== */

/* --------------------------------------------------------------------------
   Toggle tabs
   -------------------------------------------------------------------------- */
.toggle-tabs{
  position:relative;display:flex;max-width:100%;margin-inline:auto;margin-bottom:24px;
  grid-column-end:span var(--ps-grid-columns);justify-self:center;width:max-content;
}
.toggle-tabs::before{
  content:"";position:absolute;inset:0;display:block;
  background:var(--ps-color-secondary-3-400);border-radius:28px;z-index:-2;
}
.toggle-tabs::after{
  content:"";position:absolute;display:block;inset:.5px;
  background:var(--ps-color-neutral-3-500);border-radius:26px;
  box-shadow:0 2px 6px 0 rgba(15,14,13,.15);
  transform:translate3d(var(--tab-indicator-position,0),0,0);
  width:calc(var(--tab-indicator-width,0px) - 1px);
  z-index:-1;transition:transform .2s,width .2s;
}
.toggle-tabs.disable-animation::after{transition-duration:0s}
.toggle-tabs__wrapper{display:flex;overflow:hidden;border-radius:28px}
.toggle-tabs__list{display:flex;align-items:center;transform:translateX(var(--tab-list-offset,0));transition:transform .2s}
.toggle-tabs__tab{
  position:relative;display:flex;max-width:195px;width:max-content;align-items:center;
  padding:12px 24px;text-align:center;
  color:var(--ps-color-neutral-3-500);
  font:500 14px/16px var(--ps-font);letter-spacing:normal;
}
.toggle-tabs__tab::before{content:"";position:absolute;inset:0;z-index:-1;display:block;border-radius:26px;background:var(--ps-color-secondary-5-500);opacity:0;transition:opacity .2s}
.toggle-tabs__tab.is-active{color:var(--sv-white)}
.toggle-tabs__tab.is-active::before{background:var(--ps-color-neutral-3-600)}
.toggle-tabs__tab > span{
  font:500 14px/16px var(--ps-font);letter-spacing:normal;display:block;white-space:nowrap;
  text-box:none;
  margin-block:calc((-1lh + 1cap + 1px) / 1.605) calc((-1lh + 1cap + 1px) / 3.21);
}
@media (hover:hover) and (pointer:fine){
  .toggle-tabs__tab:hover{color:var(--sv-white)}
  .toggle-tabs__tab:hover::before{opacity:1}
}
/* Three tabs are wider than a phone viewport, so below 640px the wrapper scrolls
   natively and every tab stays reachable in one tap. The sliding parent indicator
   can't follow a scrolled wrapper, so at that width each tab's own pill — same
   colour, same transition — carries the active state instead. */
@media (max-width:639.98px){
  .toggle-tabs{width:100%;max-width:100%}
  .toggle-tabs::after{display:none}
  .toggle-tabs__wrapper{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  }
  .toggle-tabs__wrapper::-webkit-scrollbar{display:none}
  .toggle-tabs__tab{scroll-snap-align:center}
  .toggle-tabs__tab.is-active::before{opacity:1}
}
@media (min-width:640px){.toggle-tabs{margin-bottom:40px}}
@media (min-width:1024px){.toggle-tabs__tab{max-width:300px}}

/* --------------------------------------------------------------------------
   Value props
   -------------------------------------------------------------------------- */
.value-props{display:block;width:100%;padding-block:32px;--value-props-media-ratio:16/9}
.value-props .toggle-tabs{margin-bottom:24px}
@media (min-width:640px){.value-props{padding-block:64px}}
@media (min-width:1024px){.value-props{padding-block:80px}.value-props .toggle-tabs{margin-bottom:64px}}

.value-props__media-presentation{
  position:relative;grid-column-end:span var(--ps-grid-columns);
  margin-inline:calc(-1 * var(--ps-grid-margin));
  opacity:0;transition:opacity 1s linear;
}
@media (min-width:640px){
  .value-props__media-presentation{margin-inline:0}
}
.value-props__media-presentation.is-active{opacity:1}

/* Editorial figure panel */
.journal-figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--ps-color-neutral-2-100)}
.journal-figure__image{display:block;width:100%;height:auto;aspect-ratio:var(--value-props-media-ratio);object-fit:cover}
.journal-figure__caption{
  display:flex;flex-direction:column;gap:8px;
  padding:24px;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-top:0;
}
.journal-figure__label{
  letter-spacing:.12em;text-transform:uppercase;color:var(--ps-color-brand-600);
}
.journal-figure__text{color:var(--ps-color-neutral-3-500);max-width:62ch}
.value-props__cta-layer{position:relative;display:flex;width:100%;justify-content:flex-end;margin-top:24px}
/* the panel is full-bleed below 640px, so the CTA needs the page margin back */
@media (max-width:639.98px){
  .value-props__cta-layer{justify-content:center;padding-inline:var(--ps-grid-margin)}
}

@media (min-width:640px){
  .journal-figure__caption{padding:28px 32px}
}
@media (min-width:1024px){
  .value-props__media-presentation{grid-column-end:span var(--ps-grid-columns)}
}