/* Solutions We Build (/web-development).
   Sits between #built-solution and #roadmap. A fanned deck of six skewed,
   accent-coloured cards; hovering (or tapping) a card unfolds it toward the
   viewer — un-skews, brightens and glows in its accent colour. */

#solutions .content {
  /* Clip the fanned deck horizontally (so it can't push the page wider),
     but keep generous vertical padding inside the clip so the active card's
     accent glow isn't sheared off at the bottom. */
  overflow: hidden;
  padding: 34px 0 62px;
}

#solutions .sw-deck {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 46px 0 34px;
}

/* ---------- Card ---------- */

#solutions .sw-card {
  --skew: -14.5deg;
  flex: 0 0 auto;
  width: 306px;
  height: 606px;
  margin-left: -104px;
  border-radius: 30px;
  transform: rotate(var(--skew)) skewX(var(--skew)) scaleY(0.97);
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.24, 1), box-shadow 0.45s ease;
  cursor: pointer;
  outline: none;
}

#solutions .sw-card:first-child {
  margin-left: 0;
}

#solutions .sw-card__inner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  border-radius: 30px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 85%, transparent);
  background: rgba(18, 18, 18, 0.92);
  overflow: hidden;
  box-shadow: 6px 11px 12.8px rgba(0, 0, 0, 0.5),
    inset -9px 0 8.2px rgba(0, 0, 0, 0.25),
    inset 8px 0 13.6px rgba(255, 255, 255, 0.1);
  transition: filter 0.45s ease;
  filter: brightness(0.9) saturate(0.96);
}

/* Left strip: number + accent icon + vertical title */
#solutions .sw-card__side {
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 20px;
}

#solutions .sw-card__num {
  font-size: 18px;
  color: #fff;
  opacity: 0.5;
}

#solutions .sw-card__titlegroup {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 0;
}

#solutions .sw-card__cat {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--accent);
}

#solutions .sw-card__cat svg {
  width: 100%;
  height: 100%;
}

#solutions .sw-card__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Right column: media + text + features + button */
#solutions .sw-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 20px 2px;
}

#solutions .sw-card__media {
  position: relative;
  flex: 0 0 auto;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
}

#solutions .sw-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

#solutions .sw-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 6, 0.3), rgba(18, 18, 18, 0.88));
  transition: opacity 0.45s ease;
}

#solutions .sw-card__desc {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
}

#solutions .sw-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
}

#solutions .sw-feature {
  display: flex;
  align-items: center;
  gap: 8px;
}

#solutions .sw-feature__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

#solutions .sw-feature__icon svg {
  width: 18px;
  height: 18px;
}

#solutions .sw-feature__label {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

#solutions .sw-card__btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 999px;
  background: #57a6fb;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

/* ---------- Unfold on hover / active ---------- */

#solutions .sw-card:hover,
#solutions .sw-card:focus-visible,
#solutions .sw-card.is-active {
  transform: rotate(0deg) skewX(0deg) scale(1.06);
  z-index: 5;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5),
    0 0 60px -2px color-mix(in srgb, var(--accent) 80%, transparent),
    0 12px 40px -8px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 40%, transparent);
}

#solutions .sw-card:hover .sw-card__inner,
#solutions .sw-card:focus-visible .sw-card__inner,
#solutions .sw-card.is-active .sw-card__inner {
  filter: brightness(1) saturate(1);
  border-left-color: var(--accent);
  /* Accent edge only (left). The glow lives OUTSIDE the card (the
     .sw-card box-shadow); no inner bottom glow. */
  box-shadow: 6px 11px 12.8px rgba(0, 0, 0, 0.5),
    inset 2px 0 0 var(--accent),
    inset 10px 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

#solutions .sw-card:hover .sw-card__media::after,
#solutions .sw-card:focus-visible .sw-card__media::after,
#solutions .sw-card.is-active .sw-card__media::after {
  opacity: 0;
}

/* ---------- Tablet / mobile: horizontal scroll of upright cards ---------- */

@media (max-width: 1200px) {
  #solutions .content {
    overflow: visible;
  }

  #solutions .sw-deck {
    --sw-card-w: 306px;
    justify-content: flex-start;
    gap: 20px;
    /* Vertical padding gives the centred card's glow room (overflow-x:auto
       also clips vertically); the horizontal padding lets every card —
       including the first and last — snap to the CENTRE of the viewport, so
       the card in focus is unambiguous and its glow isn't clipped at the edge. */
    padding: 66px calc((100% - var(--sw-card-w)) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }

  #solutions .sw-card {
    margin-left: 0;
    transform: none;
    scroll-snap-align: center;
    width: 306px;
    height: 600px;
  }

  /* mobile has no hover — show every card fully clear (bright card + crisp
     browser mock-up), not the dimmed desktop resting state */
  #solutions .sw-card__inner {
    filter: none;
  }

  #solutions .sw-card__media::after {
    opacity: 0;
  }

  #solutions .sw-card.is-active {
    transform: scale(1.04);
  }
}

@media (max-width: 480px) {
  #solutions .sw-deck {
    --sw-card-w: min(86vw, 330px);
  }

  #solutions .sw-card {
    width: 86vw;
    max-width: 330px;
  }
}