/* =========================================================
   STEPS
   Vavada Mirror
========================================================= */

/* =========================================================
   1. SECTION
========================================================= */

.steps {
  margin: 48px 0;
}

/* =========================================================
   2. STEPS GRID
========================================================= */

.steps__grid {
  position: relative;

  display: grid;
  gap: 18px;

  padding-left: 72px;
}

/* =========================================================
   3. TIMELINE
========================================================= */

.steps__grid::before {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 25px;

  width: 1px;

  content: '';
  pointer-events: none;

  background: linear-gradient(180deg, transparent 0%, rgba(255, 47, 91, 0.5) 10%, rgba(126, 92, 160, 0.35) 50%, rgba(255, 47, 91, 0.5) 90%, transparent 100%);

  box-shadow: 0 0 8px rgba(255, 47, 91, 0.1);
}

/* =========================================================
   4. STEP CARD
========================================================= */

.steps__item {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 340px);
  align-items: center;
  gap: 34px;

  min-width: 0;
  min-height: 190px;
  padding: 20px 22px 20px 30px;

  background:
    radial-gradient(circle at 88% 50%, rgba(255, 47, 91, 0.035), transparent 30%) padding-box,
    linear-gradient(180deg, #22233a 0%, #191b30 100%) padding-box,
    linear-gradient(115deg, rgba(255, 47, 91, 0.38) 0%, rgba(119, 91, 154, 0.52) 42%, rgba(111, 117, 149, 0.36) 100%) border-box;

  border: 1px solid transparent;
  border-radius: 18px;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    transform 200ms ease,
    filter 200ms ease,
    box-shadow 200ms ease;
}

.steps__item:hover {
  filter: brightness(1.035);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(255, 47, 91, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transform: translateY(-2px);
}

/* =========================================================
   5. STEP NUMBER
========================================================= */

.steps__number {
  position: absolute;
  top: 24px;
  left: -72px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  color: var(--accent);

  background:
    linear-gradient(180deg, #292239 0%, #17192c 100%) padding-box,
    linear-gradient(135deg, rgba(255, 47, 91, 0.82), rgba(142, 68, 173, 0.58)) border-box;

  border: 1px solid transparent;
  border-radius: 13px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.2),
    0 0 13px rgba(255, 47, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;

  transition:
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.steps__item:hover .steps__number {
  color: var(--accent-light);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    0 0 17px rgba(255, 47, 91, 0.14);

  transform: translateY(-1px);
}

/* =========================================================
   6. CONTENT
========================================================= */

.steps__content {
  position: relative;

  min-width: 0;
  padding-bottom: 24px;
}

.steps__content h3 {
  margin: 0 0 12px;

  color: #ffffff;

  font-size: clamp(23px, 2vw, 28px);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.steps__text {
  width: 100%;
  max-width: 560px;
  margin: 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.65;

  overflow-wrap: anywhere;
}

.steps__text p {
  margin: 0 0 10px;
}

.steps__text p:last-child {
  margin-bottom: 0;
}

/* bottom content accent */

.steps__content::after {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 48px;
  height: 2px;

  content: '';

  background: linear-gradient(90deg, #ff285c 0%, #d72b79 60%, rgba(215, 43, 121, 0) 100%);

  border-radius: 999px;

  opacity: 0.8;

  transition:
    width 220ms ease,
    opacity 180ms ease;
}

.steps__item:hover .steps__content::after {
  width: 72px;
  opacity: 1;
}

/* =========================================================
   7. IMAGE
========================================================= */

.steps__image {
  position: relative;

  width: 100%;
  max-width: 340px;
  justify-self: end;

  padding: 1px;

  overflow: hidden;

  border-radius: 16px;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(255, 47, 91, 0.055);

  transition:
    box-shadow 220ms ease,
    transform 220ms ease;
}

.steps__image img {
  display: block;

  width: 100%;
  height: 180px;
  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0;
  border-radius: 15px;

  box-shadow: none;

  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 220ms ease;
}

.steps__item:hover .steps__image {
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.24),
    0 0 19px rgba(255, 47, 91, 0.085);

  transform: translateY(-1px);
}

.steps__item:hover .steps__image img {
  filter: brightness(1.035);

  transform: scale(1.025);
}

/* =========================================================
   8. TABLET
========================================================= */

@media (max-width: 900px) {
  .steps__grid {
    gap: 15px;

    padding-left: 62px;
  }

  .steps__grid::before {
    left: 22px;
  }

  .steps__item {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, 280px);
    gap: 24px;

    min-height: 170px;
    padding: 17px 17px 17px 24px;
  }

  .steps__item::before {
    left: -40px;

    width: 40px;
  }

  .steps__number {
    left: -62px;

    width: 44px;
    height: 44px;

    font-size: 14px;
  }

  .steps__content h3 {
    font-size: 22px;
  }

  .steps__text {
    font-size: 14px;
  }

  .steps__image {
    max-width: 280px;
  }

  .steps__image img {
    height: 155px;
  }
}

/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 680px) {
  .steps {
    margin: 34px 0;
  }

  .steps__grid {
    gap: 12px;

    padding-left: 0;
  }

  .steps__grid::before {
    display: none;
  }

  .steps__item {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      'number content'
      'image image';
    align-items: start;
    gap: 12px;

    min-height: 0;
    padding: 14px;

    border-radius: 15px;
  }

  .steps__item::before,
  .steps__item::after {
    display: none;
  }

  .steps__number {
    position: static;

    grid-area: number;

    width: 46px;
    height: 46px;

    border-radius: 11px;

    font-size: 14px;
  }

  .steps__item:hover .steps__number {
    transform: none;
  }

  .steps__content {
    grid-area: content;

    padding: 2px 0 22px;
  }

  .steps__content h3 {
    margin-bottom: 8px;

    font-size: 20px;
  }

  .steps__text {
    max-width: none;

    font-size: 13px;
    line-height: 1.5;
  }

  .steps__content::after {
    width: 38px;
  }

  .steps__image {
    grid-area: image;

    width: 100%;
    max-width: none;
    margin-top: 2px;

    justify-self: stretch;

    border-radius: 13px;
  }

  .steps__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;

    border-radius: 12px;
  }
}

/* =========================================================
   10. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .steps {
    margin: 28px 0;
  }

  .steps__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;

    padding: 12px;
  }

  .steps__number {
    width: 40px;
    height: 40px;

    border-radius: 10px;

    font-size: 12px;
  }

  .steps__content {
    padding-bottom: 20px;
  }

  .steps__content h3 {
    margin-bottom: 7px;

    font-size: 18px;
  }

  .steps__text {
    font-size: 12px;
  }

  .steps__image img {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================================
   11. TOUCH DEVICES
========================================================= */

@media (hover: none) {
  .steps__item:hover,
  .steps__item:hover .steps__number,
  .steps__item:hover .steps__image,
  .steps__item:hover .steps__image img {
    transform: none;
  }

  .steps__item:hover,
  .steps__item:hover .steps__image img {
    filter: none;
  }

  .steps__item:hover .steps__content::after {
    width: 48px;
  }
}

/* =========================================================
   12. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .steps__item,
  .steps__number,
  .steps__content::after,
  .steps__image,
  .steps__image img {
    transition: none;
  }
}