/* =========================
   HOW IT WORKS - shared step grid
   One source of truth for the numbered step cards, their overlay text and
   the responsive behavior. Linked by both the home and use-case partials.
   Page-specific chrome (header layout, home's mobile hide-and-CTA swap) lives
   in components/home/how_it_works.css and pages/use_cases.css respectively.
========================= */

.how-container {
  width: 100%;
  display: block;
}

/* =========================
   STEPS GRID
========================= */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.step-card {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =========================
   TEXT OVER IMAGE
========================= */

.bottom-text {
  position: absolute;
  left: 30px;
  bottom: 35px;
  color: var(--text);
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 18px);
  z-index: 1;
  text-align: left;
}

.text1 { width: 70%; }
.text2,
.text3,
.text4 { width: 80%; }
.text5 { width: 43%; }

/* =========================
   LARGE & SMALL VARIANTS
========================= */

.image-container.step-lg-card-wide {
  grid-column: span 2;
}

.step-sm-card-wide {
  display: none;
}

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

.image-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  padding: 10px 20px;
  font-size: 0.9rem;
  z-index: 2;
}

/* =========================
   MOBILE OVERLAY TEXT
========================= */

.left-text {
  position: absolute;
  left: 7%;
  bottom: 24%;
  width: 60%;
  color: var(--text);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  z-index: 1;
}

.how-container .btn {
  padding: 11px 18px 11px 18px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom-text {
    left: 20px;
    bottom: 25px;
    width: 80%;
  }

  .image-btn {
    bottom: 20px;
    right: 30px;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-lg-card-wide {
    display: none;
  }

  .step-sm-card-wide {
    display: block;
  }

  .image-btn {
    left: 7%;
    bottom: 9%;
    width: 30%;
    font-size: 12px;
  }

  .bottom-text {
    left: 20px;
    bottom: 30px;
    width: 85%;
  }
}

@media (max-width: 576px) {
  .left-text {
    font-size: clamp(14px, 1.5vw, 18px);
    bottom: 22%;
  }

  .image-btn {
    width: 40%;
  }
}

@media (max-width: 491px) {
  .image-btn {
    width: 45%;
    bottom: 5%;
  }
}

@media (max-width: 400px) {
  .bottom-text {
    font-size: clamp(16px, 1.5vw, 18px);
  }
}