/* ==========================================================================
   KOBIL — SuperApp family: Showcase (Figma component "FeatureTabs")
   /superapp/ 5839:35743 · /digital-workplace-superapp/ 5833:30363
   Component sets: FeatureTabs/superapp 5839:34720 ·
                   FeatureTabs/Digital Workplace 5837:30823

   Three selectable rows on the left, one product screenshot on the right.
   Figma models the three states as component variants (Property 1 = 1/2/3)
   that differ only in which row is blue and which screenshot shows — here
   that's one row list plus three stacked images, cross-faded by JS.
   ========================================================================== */

.sec-sa-showcase__panel {
  display: grid;
  grid-template-columns: minmax(0, var(--w578)) minmax(0, 1fr);
  align-items: center;
  gap: var(--w115);
  margin-top: var(--w48);
}

/* ---- Rows ---- */

.sec-sa-showcase__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--w24);
  width: 100%;
  padding: var(--w20) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--navy-40);
  text-align: left;
  cursor: pointer;
}

.sec-sa-showcase__row:first-child {
  padding-top: 0;
}

/* Both are spans inside the row button (a <button> can't contain block-level
   elements), so they need display:block to stack. */
.sec-sa-showcase__row-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.sec-sa-showcase__row-text {
  display: block;
  margin-top: var(--w8);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* Active row — Figma paints only the title Go Blue, the description stays
   navy-70. */
.sec-sa-showcase__row.is-active .sec-sa-showcase__row-title,
.sec-sa-showcase__row:hover .sec-sa-showcase__row-title {
  color: var(--blue);
}

/* Inline SVG rather than an <img> so the arrow can follow the row's
   active/hover colour the same way the title does. */
.sec-sa-showcase__row-arrow {
  flex: 0 0 auto;
  width: var(--w18);
  height: var(--w18);
  margin-top: var(--w4);
  color: var(--navy);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sec-sa-showcase__row.is-active .sec-sa-showcase__row-arrow,
.sec-sa-showcase__row:hover .sec-sa-showcase__row-arrow {
  color: var(--blue);
  transform: translateX(4px);
}

/* ---- Stacked screenshots ---- */

.sec-sa-showcase__media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: var(--w527);
  /* All three exports are the same 527x472 box, so the stack can reserve
     its height from the aspect ratio and never reflow when tabs change. */
  aspect-ratio: 527 / 472;
}

.sec-sa-showcase__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.sec-sa-showcase__shot.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .sec-sa-showcase__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m32);
    margin-top: var(--m32);
  }

  .sec-sa-showcase__media {
    order: -1;
    justify-self: center;
  }

  .sec-sa-showcase__row {
    padding: var(--m16) 0;
  }

  .sec-sa-showcase__row-title {
    font-size: var(--m18);
    line-height: var(--m24);
  }

  .sec-sa-showcase__row-text {
    font-size: var(--m14);
    line-height: var(--m20);
  }
}