/* SK – How It Works: Styles */
.sk-hiw {
  --hiw-bg: #e9fbff; /* light aqua similar to screenshot */
  --hiw-card-bg: #fff;
  --hiw-border: #dbe7ef;
  --hiw-title: #0a0f1a;
  --hiw-step: #17a2b8;
  box-shadow: none; /* no shadow by default */
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.08);
    --radius: 10px;
}

.sk-hiw-grid {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.sk-hiw-card {
  position: relative;
  background: var(--hiw-card-bg);
  border: 1px solid var(--hiw-border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 200px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  transition: flex-grow .35s ease, transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  outline: none;
  flex: 1 1 0;
  min-width: 0; /* allow shrinking inside flex */
  cursor: pointer;
  --desc-max-h: 120px; /* default reserved height for description when expanded */
}

.sk-hiw-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(23,162,184,.35), var(--shadow);
}

.sk-hiw-step {
    color: #4EBECE;
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.sk-hiw-title {
    color: var(--Gray-900, #101828);
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
}

.sk-hiw-desc-wrap {
  height: var(--desc-wrap-h, 50px); /* fixed default unless overridden */
  overflow: hidden;
  transition: height .3s ease;
}

.sk-hiw-desc {
  color: var(--Gray-600, #475467);
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  width: var(--desc-target-w, auto); /* pre-render at final width */
  max-width: none;
  opacity: 0;
  transform: scale(0.94);
  transform-origin: top left;
  transition: opacity .25s ease, transform .35s ease;
  will-change: transform, opacity;
}

.sk-hiw-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 320px; /* taller thumbnail for inactive */
  transition: height .45s ease;
}
.sk-hiw-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom; /* show bottom center on crop */
}

/* Active/expanded state */
.sk-hiw-card.is-active {
  background: var(--hiw-bg);
  transform: translateY(-2px);
  flex-grow: 3; /* expand horizontally */
  box-shadow: var(--shadow); /* shadow only on active */
}
.sk-hiw-card.is-active .sk-hiw-desc {
  height: var(--desc-max-h, 140px); /* reserve space equal to the largest description */
  opacity: 1;
  transform: scale(1);
  transition-delay: 180ms, 180ms; /* wait for most of the width expansion */

/* Remove delay when collapsing so it hides immediately */
.sk-hiw-card:not(.is-active) .sk-hiw-desc {
  transition-delay: 0ms, 0ms;
}
}
.sk-hiw-card.is-active .sk-hiw-media {
  height: 320px; /* reveal more image when expanded */
}

/* Non-active cards show compact description (title-only look) */
.sk-hiw-card:not(.is-active) .sk-hiw-desc {
  opacity: 0;
  transform: scale(0.94);
}

/* Responsive */
@media (max-width: 960px) {
  .sk-hiw-grid { flex-direction: column; }
  .sk-hiw-card { flex: none; }
}