/*
 * RETACH FEATURED CASES
 * Shared standard component.
 * Visual follows homepage cases-roll + cases-cta.
 */

.rt-featured-cases,
.rt-featured-cases * {
  box-sizing: border-box;
}


.rt-featured-cases {
  --rtfc-gap:
    clamp(24px, 4vw, 48px);

  position: relative;

  padding:
    clamp(28px, 5vw, 56px)
    0;

  background:
    linear-gradient(
      135deg,
      rgba(127,184,255,.08),
      rgba(175,164,255,.08),
      rgba(255,151,170,.06)
    );
}


.rt-featured-cases__wrap {
  width:
    min(
      1500px,
      calc(100% - 70px)
    );

  margin: 0 auto;
}


.rt-featured-cases__list {
  display: flex;
  flex-direction: column;

  gap:
    var(--rtfc-gap);
}


/* ==================================================
   CASE — SAME PRINCIPLE AS HOMEPAGE cr-row
   ================================================== */

.rt-featured-case {
  display: grid;

  grid-template-columns:
    minmax(320px,1fr)
    minmax(320px,1fr);

  gap:
    16px;

  align-items:
    center;

  padding:
    clamp(16px,2.8vw,24px);

  border:
    1px solid rgba(27,31,35,.08);

  border-radius:
    24px;

  background:
    #fff;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);
}


/* chess order */

.rt-featured-case:nth-child(even)
.rt-featured-case__media {
  order: 2;
}


.rt-featured-case:nth-child(even)
.rt-featured-case__copy {
  order: 1;
}


/* ==================================================
   IMAGE
   ================================================== */

.rt-featured-case__media {
  display: block;

  margin: 0;

  min-width: 0;
}


.rt-featured-case__media img {
  display: block;

  width: 100%;
  height: auto;

  border-radius:
    16px;

  object-fit:
    cover;
}


.rt-featured-case__fallback {
  min-height: 280px;

  display: flex;

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

  padding: 30px;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #f2efff,
      #fcf4ff
    );

  color: #6554ee;

  font-size:
    clamp(24px,3vw,42px);

  font-weight: 700;

  text-align: center;
}


/* ==================================================
   COPY
   ================================================== */

.rt-featured-case__title {
  margin:
    0
    0
    10px;

  color:
    #11131d;

  font-size:
    clamp(28px,4.6vw,56px);

  line-height:
    1.05;

  letter-spacing:
    -.01em;

  font-weight:
    760;
}


.rt-featured-case__text {
  margin:
    0
    0
    14px;

  color:
    #555;

  font-size:
    15px;

  line-height:
    1.45;
}


/* ==================================================
   BUTTONS
   ================================================== */

.rt-featured-case__actions,
.rt-featured-cases__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.rt-featured-case__btn,
.rt-featured-cases__btn {
  min-height: 42px;

  display: inline-flex;

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

  padding:
    10px
    14px;

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    650;
}


.rt-featured-case__btn--primary,
.rt-featured-cases__btn--primary {
  border: 0;

  color: #fff;

  background:
    linear-gradient(
      100deg,
      #604eff,
      #8654f4 52%,
      #df4da9
    );

  box-shadow:
    0 10px 24px rgba(103,76,231,.15);
}


.rt-featured-case__btn--ghost,
.rt-featured-cases__btn--ghost {
  border:
    1px solid rgba(35,38,50,.25);

  color:
    #292b39;

  background:
    rgba(255,255,255,.75);
}


/* ==================================================
   BOTTOM CTA — SAME AS HOMEPAGE cases-cta
   ================================================== */

.rt-featured-cases__cta {
  position: relative;

  overflow: hidden;

  margin-top:
    var(--rtfc-gap);

  padding:
    clamp(28px,6vw,72px)
    clamp(16px,4vw,32px);

  border:
    1px solid rgba(27,31,35,.08);

  border-radius:
    24px;

  background:
    #fff;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

  text-align:
    center;
}


.rt-featured-cases__cta::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      #80b9ff,
      #aea4ff,
      #ff98ab
    );

  opacity: .12;
}


.rt-featured-cases__cta > * {
  position: relative;
  z-index: 1;
}


.rt-featured-cases__emoji {
  display: inline-block;

  font-size:
    clamp(48px,8vw,120px);

  line-height: 1;

  animation:
  
    ease-in-out infinite;
}


@keyframes rtfc-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}


.rt-featured-cases__title {
  margin:
    12px
    0
    10px;

  color:
    #3c4050;

  font-size:
    clamp(40px,6vw,84px);

  line-height:
    1.06;

  letter-spacing:
    -.01em;
}


.rt-featured-cases__text {
  margin:
    0
    0
    14px;

  color:
    #757b8e;

  font-size:
    14px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 900px) {

  .rt-featured-cases__wrap {
    width:
      calc(100% - 30px);
  }


  .rt-featured-case {
    grid-template-columns:
      1fr;
  }


  .rt-featured-case:nth-child(even)
  .rt-featured-case__media,
  .rt-featured-case:nth-child(even)
  .rt-featured-case__copy {
    order:
      initial;
  }

}


@media (max-width: 560px) {

  .rt-featured-case {
    padding: 14px;

    border-radius:
      20px;
  }


  .rt-featured-case__media img,
  .rt-featured-case__fallback {
    border-radius:
      13px;
  }


  .rt-featured-case__title {
    font-size:
      clamp(27px,7vw,39px);
  }


  .rt-featured-case__actions,
  .rt-featured-cases__actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .rt-featured-case__btn,
  .rt-featured-cases__btn {
    width:
      100%;
  }


  .rt-featured-cases__cta {
    border-radius:
      20px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .rt-featured-cases__emoji {
    animation: none;
  }

}