/* ==========================================================================
   Promo carousel — full-bleed rotating hero promos with progress tabs
   ========================================================================== */

.promo-carousel{
  padding-top:40px;padding-bottom:20px;
  --promo-fade-in:.3s;
  --promo-fade-out:.2s;
  --promo-pause:.15s;
}
.promo-carousel__cell{grid-column-end:span var(--ps-grid-columns);min-width:0}
@media (min-width:1350px){
  .promo-carousel__cell{grid-column-start:2;grid-column-end:span 10}
}

.ps-carousel__cards{display:flex;user-select:none}
.ps-carousel__card{
  flex:0 0 100%;transform:translateX(200vw);pointer-events:none;
  transition:transform var(--promo-fade-out) step-end;
}
.ps-carousel__card.is-active{
  pointer-events:auto;
  transform:translateX(calc(var(--card-index,0) * -100%));
  transition-timing-function:step-start;
}

.promo-carousel .promo-card{opacity:0;transition:opacity var(--promo-fade-out)}
.promo-carousel .ps-carousel__card.is-active .promo-card{
  opacity:1;transition-duration:var(--promo-fade-in);
  transition-delay:calc(var(--promo-fade-out) + var(--promo-pause));
}

/* progress tabs */
.ps-carousel__tabs{
  display:flex;align-items:flex-end;gap:8px;width:100%;justify-content:center;height:48px;
  margin:8px 0 40px;opacity:0;transition:opacity var(--promo-fade-out);
}
.ps-carousel__tabs.is-active{opacity:1}
.ps-carousel__tab-wrapper{flex:1 1 0;padding-block:20px;cursor:pointer;background:none;border:0}
.ps-carousel__tab{position:relative;overflow:hidden;height:4px;border-radius:12px}
.ps-carousel__tab::before,.ps-carousel__tab::after{content:"";position:absolute;inset:0;width:100%;background-color:var(--ps-color-neutral-2-500)}
.ps-carousel__tab::before{opacity:1}
.ps-carousel__tab::after{transform:translateX(calc(-100% - 1px));background-color:var(--ps-color-brand-500)}
.ps-carousel__tab-wrapper.is-viewed .ps-carousel__tab::after{transform:translateX(0)}
.ps-carousel__tab-wrapper.is-active .ps-carousel__tab::after{
  animation:psCarouselTabProgress var(--ps-carousel-duration,8s) linear forwards;
}
.ps-carousel.is-paused .ps-carousel__tab-wrapper.is-active .ps-carousel__tab::after{animation-play-state:paused}
@keyframes psCarouselTabProgress{from{transform:translateX(calc(-100% - 1px))}to{transform:translateX(0)}}
@media (min-width:640px){
  .ps-carousel__tab-wrapper{flex:0 1 109px}
}

/* --------------------------------------------------------------------------
   Promo card
   -------------------------------------------------------------------------- */
.promo-card{
  position:relative;display:block;width:100%;height:100%;
  --promo-text-color:var(--sv-white);
  --promo-card-bg-color:var(--ps-color-neutral-3-500);
}
/* charcoal panel */
.promo-card--ink{--promo-card-bg-color:var(--ps-color-neutral-3-500)}
/* quiet steel panel — the same card on a lighter surface */
.promo-card--steel{
  --promo-card-bg-color:var(--ps-color-secondary-3-400);
  --promo-text-color:var(--ps-color-neutral-3-500);
}
.promo-card--steel .promo-card__description{color:var(--ps-color-secondary-5-500)}
.promo-card__inner{position:relative;border-radius:16px;height:100%}
.promo-card__border-bg{position:absolute;inset:0;border-radius:16px;background-color:var(--promo-card-bg-color)}
.promo-card__bg{position:absolute;inset:0;border-radius:16px;overflow:hidden}
/* Below 800px the copy sits directly over the figure, so the figure drops back
   far enough to stay a texture rather than compete with the text. From 800px up
   the copy is confined to the left half and the figure can read at full strength. */
.promo-card__bg > img{height:100%;width:100%;object-fit:cover;object-position:center center;opacity:.28}
@media (min-width:800px){.promo-card__bg > img{object-position:right center;opacity:.85}}
.promo-card__link{position:absolute;inset:0;z-index:1;border-radius:16px}
.promo-card__content-wrapper{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  text-align:left;padding:48px 24px;color:var(--promo-text-color);height:100%;
}
.promo-card__details{margin-bottom:40px;text-transform:uppercase;color:var(--ps-color-brand-400)}
.promo-card--steel .promo-card__details{color:var(--ps-color-brand-600)}
.promo-card__heading{margin:0 0 32px;color:var(--promo-text-color)}
.promo-card__description p{margin:0}
.promo-card__cta-list{position:relative;z-index:4;display:flex;flex-direction:column;align-items:flex-start;row-gap:16px;margin-top:40px}
.promo-card__golden-ratio{display:block;width:100%;aspect-ratio:1.618}
.promo-card .ps-badge{color:var(--promo-card-badge-color);background-color:var(--promo-card-badge-bg-color)}

@media (min-width:640px){
  .promo-card__content-wrapper{padding:48px 40px}
  .promo-card__cta-list{flex-direction:row;column-gap:16px}
}
@media (min-width:800px){
  .promo-card__content-wrapper{padding:80px 112px;min-height:450px}
  .promo-card--half-width-text .promo-card__details,
  .promo-card--half-width-text .promo-card__heading,
  .promo-card--half-width-text .promo-card__description,
  .promo-card--half-width-text .promo-card__cta-list{max-width:50%}
  .promo-card__golden-ratio{display:none}
}