/* Tejori — How It Works page (storefront/pages/how-it-works.blade.php).
   The banner, numbered steps and FAQ accordion come from faq.css; this file only adds
   the intro, the line + button under each journey and the Buyer Protection block. */

/* ---------- banner ---------- */

/* The banner title now follows the homepage banner (faq.css .pb__h), which has no fixed-width
   white box, so the one-line override it needed for "How Tejori Works" is no longer used:
.hiwp .pb__h {
  width: auto;
  white-space: nowrap;
}
*/

/* The lehenga photo fills the whole banner (client request: "show this image on whole
   banner"). object-fit: cover from faq.css crops its top and bottom to the banner's
   2400:820 shape; this position keeps the embroidered hem, the photo's subject, in view.
   It replaced the uncropped layout below, which centred the 3:2 photo and filled the sides
   with a blurred copy of it. */
.hiwp .pb img {
  object-position: center 70%;
}

/*
.hiwp .pb {
  overflow: hidden;
}

.hiwp .pb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/hiw-lehenga-m.webp') center / cover no-repeat;
  filter: blur(24px) brightness(.85);
  transform: scale(1.15);
}

.hiwp .pb img {
  position: relative;
  object-fit: contain;
}

.hiwp .pb__c {
  z-index: 1;
}
*/

/* ---------- intro ---------- */

.hiw-intro {
  max-width: 62.5vw;
  margin-inline: auto;
  padding: 3.646vw 0 1.042vw;
  text-align: center;
}

.hiw-intro__tag {
  margin: 0;
  font-size: 1.875vw;
  font-weight: 700;
  line-height: 2.5vw;
  color: var(--c-green);
}

.hiw-intro__d {
  margin: 1.302vw 0 0;
  font-size: 1.25vw;
  line-height: 1.979vw;
  color: #000;
}

/* ---------- buyer / seller journeys ---------- */

/* the hanger watermark belongs to the single steps band on the FAQ page, not to two
   bands stacked here */
.hiw-stp .stp__box::after {
  display: none;
}

.hiw-stp--alt {
  background: #fafafa;
}

.hiw-cta {
  margin: 0 0 1.302vw;
  font-size: 1.458vw;
  font-weight: 700;
  text-align: center;
  color: #000;
}

/* the steps band's button is sized for "SELL with us"; these labels are longer */
.stp .hiw-btn {
  max-width: none;
  width: fit-content;
  padding-inline: 1.563vw;
}

.stp__btn {
  display: flex;
  justify-content: center;
}

/* ---------- buyer protection ---------- */

.hiw-bp {
  max-width: 62.5vw;
  margin-inline: auto;
  padding: 3.646vw 0;
  text-align: center;
}

.hiw-bp__h {
  margin: 0;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: #000;
}

.hiw-bp__d {
  margin: 1.302vw 0 0;
  font-size: 1.25vw;
  line-height: 1.979vw;
  color: #000;
}

.hiw-bp__d a {
  color: var(--c-green);
  text-decoration: underline;
}

.hiw-bp__l {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.042vw 3.125vw;
  margin: 2.083vw 0 0;
  padding: 0;
  list-style: none;
}

.hiw-bp__l li {
  display: flex;
  align-items: center;
  gap: .625vw;
  font-size: 1.25vw;
  font-weight: 700;
  color: #000;
}

.hiw-bp__l svg {
  flex: none;
  width: 1.563vw;
  height: 1.563vw;
  padding: .313vw;
  color: #fff;
  background: var(--c-green);
  border-radius: 50%;
}

/* ---------- faqs ---------- */

.hiw-more {
  margin: 2.083vw 0 0;
  font-size: 1.146vw;
  text-align: center;
  color: #000;
}

.hiw-more a {
  color: var(--c-green);
  text-decoration: underline;
}

@media (max-width: 767px) {
  /* Was one line on a phone, in smaller type than faq.css's old boxed banner; the title now
     wraps like the homepage banner's instead:
  .hiwp .pb__c {
    text-align: center;
  }

  .hiwp .pb__h {
    display: inline-block;
    font-size: 5.682vw;
    letter-spacing: .455vw;
  }
  */

  .hiw-intro,
  .hiw-bp {
    max-width: none;
    padding: 9.091vw 5.682vw;
  }

  .hiw-intro {
    padding-bottom: 2.273vw;
  }

  .hiw-intro__tag {
    font-size: 5vw;
    line-height: 6.818vw;
  }

  .hiw-intro__d,
  .hiw-bp__d {
    margin-top: 3.409vw;
    font-size: 3.636vw;
    line-height: 5.682vw;
  }

  /* faq.css's mobile steps band has no top/bottom padding, a left-aligned heading and
     hides the button — fine for its one band, but here "For Sellers" sat flush against
     the buyers' button (client report). Room above and below each band, centred heading,
     the button kept, and slightly larger step text. */
  .hiw-stp .stp__box {
    padding-block: 10.227vw;
  }

  .hiw-stp .stp__h {
    font-size: 7.273vw;
    line-height: 9.091vw;
    text-align: center;
  }

  .hiw-stp .stp__grid {
    padding-top: 6.818vw;
  }

  .hiw-stp .stp__c p {
    font-size: 3.636vw;
    line-height: 5.682vw;
  }

  .hiw-stp .stp__btn {
    display: flex;
  }

  .hiw-cta {
    margin: 8.182vw 0 4.545vw;
    padding-inline: 5.682vw;
    font-size: 4.091vw;
    line-height: 5.682vw;
  }

  .stp .hiw-btn {
    padding-inline: 4.545vw;
  }

  .hiw-bp__h {
    font-size: 6.364vw;
  }

  .hiw-bp__l {
    flex-direction: column;
    align-items: center;
    gap: 3.409vw;
    margin-top: 5.682vw;
  }

  .hiw-bp__l li {
    gap: 2.273vw;
    font-size: 3.864vw;
  }

  .hiw-bp__l svg {
    width: 5.455vw;
    height: 5.455vw;
    padding: 1.136vw;
  }

  .hiw-more {
    margin-top: 5.682vw;
    font-size: 3.409vw;
  }
}