/**
 * FPW Industry Cards: default look.
 *
 * The widget's Style tab overrides these per widget. Its rules are more specific
 * ({{WRAPPER}} .ic__label), so they always win.
 */

/* ==================== CAROUSEL ==================== */
.ic{
  --ic-accent:#00AEEF;            /* top bar colour */
  --ic-ink:#04182b;               /* shows while a photo loads */
  --ic-card-w:clamp(270px,23vw,290px);   /* 270px floor: tablet cards fit the 14px back text */
  --ic-gap:14px;
  --ic-max:1240px;                /* theme content width */
  --ic-inset:max(20px,calc((100vw - var(--ic-max)) / 2));
  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;              /* full-bleed out of any container */
  margin-top:-20px;margin-bottom:-20px;   /* cancels the track's flip room below, so the layout doesn't move */
  overflow:hidden;
}
.ic__track{
  display:flex;
  gap:var(--ic-gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--ic-inset);
  /* no right padding => card bleeds off screen. 24px above and below: room for the
     card's near edge, which grows past the card mid-flip (3D perspective) */
  padding:24px 0 24px var(--ic-inset);
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.ic__track::-webkit-scrollbar{display:none}
/* mouse drag scrolls the row: no text selection or native image dragging inside it */
.ic__track{-webkit-user-select:none;user-select:none}
.ic__track img{-webkit-user-drag:none;user-drag:none}
.ic__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.ic__track.is-dragging .ic__card{pointer-events:none}

.ic__card{
  position:relative;
  flex:0 0 var(--ic-card-w);
  aspect-ratio:1 / 1.1;
  scroll-snap-align:start;
  border-radius:2px;
  overflow:visible;               /* not hidden: the flip would be cut off at the top and bottom (each face clips itself) */
  background:transparent;
  text-decoration:none;
  isolation:isolate;
  outline-offset:3px;
  perspective:1500px;
  -webkit-tap-highlight-color:transparent;
}
.ic__face::before{                 /* accent bar, on each face so it turns with the flip */
  content:"";
  position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--ic-accent);
  z-index:3;
  transition:height .28s ease;
}
.ic__card:hover .ic__face::before,
.ic__card:focus-visible .ic__face::before{height:7px}

.ic__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position: center top;
  filter:saturate(.85) contrast(1.05);
}

.ic__body{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:20px 18px 18px;
  color:#fff;
}
/* any single-colour icon on a transparent background shows white, at its own size up to the cap */
.ic__icon{
  display:block;align-self:flex-start;
  width:auto;height:auto;max-width:100px;max-height:72px;
  filter:brightness(0) invert(1);
}
.ic__label{
  font-family: Raleway;
  font-weight: 700;
  font-size: 20.25px;
  line-height: 100%;
  letter-spacing: 3%;             /* of the font size; browsers without support use 0 */
  text-transform: uppercase;
}

@media (max-width:600px){
  .ic{--ic-card-w:66vw;--ic-inset:18px}
}
@media (prefers-reduced-motion:reduce){
  .ic__face::before,.ic__card-inner{transition:none}
}

/* ==================== FLIP ==================== */
.ic__card-inner{
  position:absolute;inset:0;display:block;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.ic__card.is-flipped .ic__card-inner{transform:rotateY(180deg)}
.ic__face{
  position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.ic__face--front{background:var(--ic-ink)}
.ic__face--back{
  transform:rotateY(180deg);
  background:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:25px 20px;box-sizing:border-box;text-align:left;
}
.ic__label-back{
  font-family:Raleway,sans-serif;font-weight:700;font-size:20.25px;line-height:1.1;
  letter-spacing:3%;text-transform:uppercase;color:#1E1E1E;margin:0 0 14px;
}
.ic__desc{
  font-family:Raleway,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#5C5C5C;
}

/* ==================== PHOTO SHADE ==================== */
/* One shade on every card's photo side: dark at the top behind the icon, clear
   through the middle, dark at the bottom behind the title. Sits over the photo,
   under the icon and title (.ic__body is z-index 2). */
.ic__face--front::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,0) 38%,
    rgba(0,0,0,0) 48%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.7) 100%);
}