/* ==========================================================================
   Solutions finder — "Start from your market, or from your problem"
   ========================================================================== */

.pathfinder-companion{
  position:relative;display:block;padding-block:48px;
  --pf-title-color:var(--sv-white);
  --pf-text-color:rgba(255,255,255,.74);
  --pf-card-hover-animation:.3s;
  background-color:var(--sv-charcoal);
}
.pathfinder-companion__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.pathfinder-companion__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}


.pathfinder-companion__bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,34,32,.94) 0%,rgba(34,34,32,.88) 100%)}

.pathfinder-companion__grid{width:100%}
.pathfinder-companion__content{grid-column-end:span var(--ps-grid-columns);display:flex;flex-direction:column;gap:40px}
.pathfinder-companion__copy{display:flex;flex-direction:column;gap:20px;text-align:center}
.pathfinder-companion__title{color:var(--pf-title-color)}
.pathfinder-companion__subtitle{color:var(--pf-text-color)}

.pathfinder-companion__cards-viewport{position:relative}
@media (max-width:1349.98px){.pathfinder-companion__cards-viewport{padding-inline:0}}
.pathfinder-companion__group{display:flex;flex-direction:column;gap:20px}
.pathfinder-companion__group-label{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-400);margin:0;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16);
}
.pathfinder-companion__cards{
  display:flex;gap:var(--ps-grid-gutter);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:14px;margin-block:-14px;
}
.pathfinder-companion__cards::-webkit-scrollbar{display:none}
.pathfinder-companion__cell{
  --pf-card-bg-color:#2b2b29;
  --pf-card-border-color:rgba(255,255,255,.14);
  --pf-card-text-color:var(--sv-white);
  --pf-card-description-color:rgba(255,255,255,.62);
  outline-color:var(--pf-card-border-color);
  border:1px solid rgba(255,255,255,.12);
  transition:scale var(--pf-card-hover-animation) ease-in-out,
             border-color var(--pf-card-hover-animation) ease-in-out,
             background-color var(--pf-card-hover-animation) ease-in-out,
             z-index var(--pf-card-hover-animation) step-end;
  border-radius:16px;background:var(--pf-card-bg-color);
  outline:0 solid var(--pf-card-border-color);outline-offset:-1px;
  z-index:0;cursor:pointer;text-align:center;flex:none;scroll-snap-align:start;
  width:calc((100% - var(--ps-grid-gutter)) / 2);
  transition:scale var(--pf-card-hover-animation) ease-in-out,
             outline-width var(--pf-card-hover-animation) ease-in-out,
             z-index var(--pf-card-hover-animation) step-end;
}
.pathfinder-companion__cell:hover,.pathfinder-companion__cell:focus-visible{
  scale:1.04;z-index:1;position:relative;
  background-color:#333331;border-color:var(--ps-color-brand-500);
  transition:scale var(--pf-card-hover-animation) ease-in-out,
             border-color var(--pf-card-hover-animation) ease-in-out,
             background-color var(--pf-card-hover-animation) ease-in-out,
             z-index var(--pf-card-hover-animation) step-start;
}
.pathfinder-companion__card{
  min-height:200px;max-height:400px;display:flex;flex-direction:column;gap:24px;
  padding:24px 16px;text-align:center;height:100%;
}
.pathfinder-companion__card-icon{height:32px;width:100%}
.pathfinder-companion__card-icon{color:var(--ps-color-brand-400)}
.pathfinder-companion__card-icon img{height:100%;width:auto;object-fit:contain;filter:var(--ps-filter-brand-500) brightness(1.35)}
.pathfinder-companion__card-title,
.pathfinder-companion__card-description{
  text-box:none;
  margin-block:calc((-1lh + 1cap + 1px) / 1.605) calc((-1lh + 1cap + 1px) / 3.21);
}
.pathfinder-companion__card-title{
  font:500 16px/20px var(--ps-font);letter-spacing:.5px;
  color:var(--pf-card-text-color);flex:0 1 auto;overflow:hidden;
}
.pathfinder-companion__card-description{color:var(--pf-card-description-color);flex:0 100 auto;overflow:hidden}
.pathfinder-companion__card-description p{margin:0}

.pathfinder-companion__bypass{display:flex;flex-direction:column;align-items:center;gap:16px}
.pathfinder-companion__bypass-text{color:var(--pf-text-color);font:400 14px/20px var(--ps-font);letter-spacing:normal}

@media (min-width:640px){
  .pathfinder-companion{padding-block:64px}
  .pathfinder-companion__cell{width:calc((100% - var(--ps-grid-gutter) * 2) / 3)}
  .pathfinder-companion__card{padding:32px 24px}
  .pathfinder-companion__bypass{flex-direction:row;justify-content:flex-end}
}
@media (min-width:1024px){
  .pathfinder-companion{padding-block:80px}
  .pathfinder-companion__cell{width:calc((100% - var(--ps-grid-gutter) * 3) / 4)}
  .pathfinder-companion__card{padding:40px 24px}
}
@media (min-width:1350px){
  .pathfinder-companion__cards{overflow:visible;padding-block:0;margin-block:0}
  .pathfinder-companion__cell{width:0;flex:1 1 auto}
  .pathfinder-companion__arrow{display:none}
}

/* Carousel arrows shown while the card strip can still be scrolled */
.pathfinder-companion__arrow{
  position:absolute;top:50%;width:40px;height:40px;border-radius:50%;
  background-color:var(--ps-color-brand-500);color:var(--sv-white);
  display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;
  transition:background-color .3s;
}
.pathfinder-companion__arrow svg{width:14px;height:12px}
.pathfinder-companion__arrow:hover,.pathfinder-companion__arrow:focus-visible{background-color:var(--ps-color-brand-600)}
.pathfinder-companion__arrow--prev{left:0;transform:translate(-50%,-50%) rotate(180deg)}
.pathfinder-companion__arrow--next{left:100%;transform:translate(-50%,-50%)}
.pathfinder-companion__cards-viewport.can-scroll-prev .pathfinder-companion__arrow--prev,
.pathfinder-companion__cards-viewport.can-scroll-next .pathfinder-companion__arrow--next{display:flex}