/* =========================
   Booking Steps
   ========================= */

.bookingSteps {
  background: var(--bookingSteps-bg, #fffef2);
  padding: 0;  
}

/* Inner wrapper */
.bookingSteps__inner {
  width: 100%;
  background-color: #1888a3;
  padding: clamp(26px, 5vw, 78px) 3rem;
}

/* Top row: title left, button right */
.bookingSteps__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

/* Title style (Optima 700) */
.bookingSteps__title {
  margin: 0;
  padding: 10px 14px;

  background-color: var(--bookingSteps-title-bg, #fffef2);
  border-radius: 2px;

  font-family: "Optima", "URW Classico", "Segoe UI", serif;
  font-weight: 700;
  font-size: clamp(30px, 2.5vw, 44px);
  line-height: 1.1;
    color: #f0efe2;
}

/* Button (top-right) */
.bookingSteps__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 3px;
  text-decoration: none;

  background: var(--bookingSteps-btn-bg, rgba(255,255,255,0.85));
  border: 1px solid rgba(0,0,0,0.12);

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #111;

  transition: filter 160ms ease, transform 160ms ease, background 160ms ease;
}

.bookingSteps__btn:hover {
  filter: brightness(1.05);
}

.bookingSteps__btn:active {
  transform: translateY(1px);
}

/* Grid: desktop 4 cols */
.bookingSteps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
  align-items: start;
}

/* Each step */
.bookingStep {
  min-width: 0;
}

.bookingStep__num {
  margin: 0 0 8px 0;

  font-family: "Optima", "URW Classico", "Segoe UI", serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: #f0efe2;
}

.bookingStep__title {
  margin: 0 0 10px 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.2;
    color: #f0efe2;
}

.bookingStep__body {
  margin: 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
    color: #f0efe2;
}

/* =========================
   Responsive
   ========================= */

/* Tablet: 2 cols */
@media (max-width: 980px) {
  .bookingSteps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bookingSteps__top {
    align-items: center;
  }
}

/* Mobile: stack top + 1 col */
@media (max-width: 560px) {
  .bookingSteps__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .bookingSteps__grid {
    grid-template-columns: 1fr;
  }

  .bookingSteps__title {
    width: 100%;
  }
}