/* ==========================================================================
   Storage Station — business-storage.css
   Page: business-storage.html  (Figma node 198:744)
   Shared service-page styles live in css/service.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bs-hero { padding-bottom: clamp(32px, 2.5vw, 48px); }  /* Figma image overlaps the header by 42px; here it starts below it */
.bs-hero__media { width: 100%; max-width: 1068px; }

/* --------------------------------------------------------------------------
   "הכל במקום אחד" — gradient band with service cards
   -------------------------------------------------------------------------- */
.bs-all__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.2vw, 42px);
  padding-block: clamp(40px, 3.2vw, 61px) clamp(40px, 2.4vw, 46px);
  padding-inline-start: clamp(16px, 6.67vw, 128px);   /* text 128px from the right @1920 */
  padding-inline-end: clamp(16px, 1.93vw, 37px);      /* cards 37px from the left @1920 */
}
.bs-all__intro { flex: 0 0 auto; max-width: 400px; }
.bs-all__title {
  font-size: clamp(40px, 3.67vw, 70.5px);
  font-weight: var(--fw-bold);
  line-height: 0.88;
}
.bs-all__subtitle {
  margin-top: clamp(16px, 1.4vw, 26px);
  font-size: clamp(18px, 1.41vw, 27.1px);
  font-weight: var(--fw-medium);
  line-height: 1.06;
}

.bs-all__cards {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;          /* pushed to the left edge in RTL */
  gap: clamp(16px, 1.88vw, 36px);
  flex: 1;
  min-width: 0;
}
.bs-all__cards > li { flex: 0 1 405px; min-width: 0; }
.bs-all__cards > li:first-child { flex-basis: 440px; }

/* Service card: photo + dark bottom fade + title/arrow/description */
.bs-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  aspect-ratio: 405 / 529;
  padding: 0 clamp(12px, 0.8vw, 15px) clamp(12px, 0.85vw, 16px);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 6px 6px 6.9px rgba(0, 0, 0, 0.25);
  color: var(--color-white);
  isolation: isolate;
}
.bs-service-card--featured { aspect-ratio: 440 / 633; padding-bottom: clamp(8px, 0.4vw, 7px); }
.bs-service-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.bs-service-card::after {             /* bottom fade for text legibility */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.48) 1%, rgba(0, 0, 0, 0) 42%);
}
.bs-service-card:hover .bs-service-card__img { transform: scale(1.04); }
.bs-service-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.bs-service-card__title {
  font-size: clamp(24px, 2.08vw, 39.9px);
  line-height: 1;
  letter-spacing: -0.075em;
}
.bs-service-card__arrow {
  flex: none;
  width: clamp(32px, 2.6vw, 49.88px);
  height: auto;
  transform: scaleX(-1);              /* Figma: flipped, points up-left */
}
.bs-service-card__desc {
  font-size: clamp(15px, 1.03vw, 19.7px);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   "מתחילים לארוז?" — products
   -------------------------------------------------------------------------- */
.bs-products { padding-top: clamp(56px, 5.8vw, 111px); }
.bs-products__title { margin-bottom: clamp(32px, 5.9vw, 113px); letter-spacing: -0.02em; }
.bs-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-inline: 3px;
}
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  filter: drop-shadow(0 0 2.8px rgba(0, 0, 0, 0.25));
  transition: transform var(--transition);
}
.product-card:hover { transform: translateY(-4px); }
.product-card__img {
  width: 100%;
  aspect-ratio: 473 / 500;
  object-fit: cover;
  border-radius: 22.5px 22.5px 0 0;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: clamp(16px, 1.4vw, 27px) 16px clamp(24px, 2.6vw, 50px);
  background: var(--color-white);
  border-radius: 0 0 22.5px 22.5px;
  text-align: center;
}
.product-card__name {
  font-size: clamp(22px, 1.9vw, 36.5px);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-blue-dark);
}
.product-card__size {
  margin-top: clamp(4px, 0.94vw, 18px);
  font-size: clamp(17px, 1.38vw, 26.6px);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-main);
}
.product-card__price {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.38vw, 26.6px);
  margin-top: 6px;
  direction: ltr;                     /* Figma: current price on the left, old price on the right */
  line-height: 1.5;
  white-space: nowrap;
}
.product-card__now {
  font-size: clamp(20px, 1.73vw, 33.2px);
  font-weight: var(--fw-medium);
  color: var(--color-main);
}
.product-card__was {
  font-size: clamp(16px, 1.38vw, 26.6px);
  color: #B0B0B0;
}
.bs-products__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 3.5vw, 67px);
}
.bs-products__btn { min-width: min(372px, 100%); }

/* --------------------------------------------------------------------------
   "אורזים נכון, מאחסנים חכם"
   -------------------------------------------------------------------------- */
.bs-smart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1023px);
  align-items: center;
  margin-top: clamp(64px, 8.1vw, 156px);
}
.bs-smart__inner { grid-column: 1; grid-row: 1; }
.bs-smart__media { grid-column: 2; grid-row: 1; }
.bs-smart__media img {
  width: 100%;
  aspect-ratio: 1023 / 593;
  object-fit: cover;
  object-position: 50% 35.6%;
  transform: scaleX(-1);              /* Figma: image mirrored, sloth on the left */
}
.bs-smart__content { max-width: 588px; }
.bs-smart__title { max-width: 566px; }
.bs-smart__text { margin-top: clamp(20px, 2.6vw, 50px); }
.bs-smart__btn { min-width: min(382px, 100%); min-height: 42.4px; margin-top: clamp(16px, 1.2vw, 20px); }

/* --------------------------------------------------------------------------
   Lead form (full container width, slightly shorter fields than the home form)
   -------------------------------------------------------------------------- */
.bs-form { padding-block: clamp(64px, 9.8vw, 189px) clamp(64px, 10.2vw, 195px); }
.bs-form__form.lead-form--lg { max-width: none; gap: clamp(15px, 1.22vw, 23.5px); }
.bs-form__form .lead-form__title { margin-bottom: clamp(10px, 1vw, 20px); font-size: clamp(26px, 3vw, 57.7px); }
.bs-form__form .field--lg { min-height: clamp(52px, 3.9vw, 74.8px); }
.bs-form__form .field--lg.field--textarea { height: clamp(140px, 10.5vw, 202px); min-height: 0; }  /* fixed height: rows=4 would otherwise grow it */
.bs-form__form .lead-form__submit {
  width: clamp(150px, 16vw, 307.5px);
  height: clamp(37.6px, 3.06vw, 58.7px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .bs-all__inner { flex-direction: column; align-items: stretch; padding-inline: var(--gutter); }
  .bs-all__intro { max-width: none; }
  .bs-all__cards { justify-content: flex-start; }
  .bs-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-inline: var(--gutter); }
  .bs-smart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frame 339:2155, 400px wide)
   Hero basics live in css/service.css.
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- Hero ---- */
  .bs-hero { padding-bottom: 36px; }
  .bs-hero__media { width: min(109.5vw, 560px); max-width: none; margin: -45px 0 17px; }

  /* ---- "הכל במקום אחד": 214px gradient box, cards row overflowing it (swipe) ---- */
  .bs-all {
    background: linear-gradient(180deg, #0D518D 0%, #1179BA 100%) top / 100% 214px no-repeat;
  }
  .bs-all__inner { gap: 0; padding: 13px 0 0; text-align: center; }
  .bs-all__intro { padding-inline: var(--gutter); }
  .bs-all__title { font-size: 35.39px; line-height: 33.03px; letter-spacing: -0.03em; }
  .bs-all__title br,
  .bs-all__subtitle br { display: none; }
  .bs-all__subtitle {
    margin-top: 8px;
    font-size: 12.24px;
    font-weight: var(--fw-bold);
    line-height: 15.51px;
    color: var(--color-secondary);
  }
  .bs-all__cards {
    gap: 13px;
    margin: 18px 0 0;
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    text-align: right;
  }
  .bs-all__cards::-webkit-scrollbar { display: none; }
  .bs-all__cards > li { flex: 0 0 147.07px; scroll-snap-align: start; }
  .bs-all__cards > li:first-child { flex-basis: 159.66px; }
  .bs-service-card {
    gap: 1px;
    aspect-ratio: 147.07 / 229.87;
    padding: 0 5.6px 3px;
    border-radius: 5.8px;
    box-shadow: 2.17px 2.17px 2.5px rgba(0, 0, 0, 0.25);
  }
  .bs-service-card--featured { aspect-ratio: 159.66 / 230; padding: 0 3.6px 3px; box-shadow: none; }
  .bs-service-card--featured::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 15.42%); }
  .bs-service-card__row { align-items: center; gap: 4px; }
  .bs-service-card__title { font-size: 14.49px; line-height: 14.49px; font-weight: var(--fw-regular); }
  .bs-service-card__arrow { width: 18.11px; }
  .bs-service-card__desc { font-size: 7.15px; line-height: normal; text-align: center; }

  /* ---- "מתחילים לארוז?" — 2×2 product grid ---- */
  .bs-products { padding-top: 27px; }            /* + 8px shadow room under the cards row = 35px */
  .bs-products__title { margin-bottom: 13px; font-size: 35px; line-height: 49.79px; letter-spacing: normal; }
  .bs-products__grid { gap: 3.9px 3.8px; padding-inline: var(--gutter); }
  .product-card { filter: drop-shadow(0 0 1.08px rgba(0, 0, 0, 0.25)); }
  .product-card__img { aspect-ratio: 181.6 / 192.64; border-radius: 8.67px 8.67px 0 0; }
  .product-card__body { padding: 10.5px 8px 24.5px; border-radius: 0 0 8.67px 8.67px; }
  .product-card__name { font-size: 14.08px; line-height: 1.2; }
  .product-card__size { margin-top: 5px; font-size: 10.24px; line-height: 1.5; }
  .product-card__price { flex-direction: row; gap: 10.24px; margin-top: 1px; }
  .product-card__now { font-size: 12.8px; }
  .product-card__was { font-size: 10.24px; }
  .bs-products__more { margin-top: 14px; padding-inline: var(--gutter); }
  .bs-products__btn { min-width: 0; }

  /* ---- "אורזים נכון, מאחסנים חכם": title, text, image, button overlapping it ---- */
  .bs-smart { display: flex; flex-direction: column; align-items: stretch; margin-top: 37px; overflow-x: clip; }
  .bs-smart__inner { display: contents; }
  .bs-smart__content { display: contents; }
  .bs-smart__title,
  .bs-smart__text { align-self: center; padding-inline: var(--gutter); text-align: center; }
  .bs-smart__title { max-width: 400px; font-size: 42px; line-height: 36px; }
  .bs-smart__text { max-width: 364px; margin-top: 18px; font-size: 16px; line-height: 22px; }
  .bs-smart__media { order: 1; margin: 24px -1px 0; }
  .bs-smart__media img { aspect-ratio: 403 / 198; object-position: center; }
  .bs-smart__btn {
    order: 2;
    position: relative;
    z-index: 1;
    width: auto;
    min-width: 0;
    min-height: 40.58px;
    margin: -20px var(--gutter) 0;
  }

  /* ---- Lead form + sloth peeking in from the right edge ---- */
  .bs-form { padding-block: 57px 70px; overflow-x: clip; }
  .bs-form__inner { position: relative; }
  .bs-form__form.lead-form--lg { gap: 0; }
  .bs-form__form .lead-form__title { margin-bottom: 45px; font-size: min(35px, 9.1vw); }
  .bs-form__form .field--lg { min-height: 89px; }
  .bs-form__form .field--lg.field--textarea { height: auto; min-height: 346px; }
  .bs-form__form .lead-form__submit { width: 100%; height: 40.58px; }
  .bs-form__media {
    position: absolute;
    z-index: 1;
    top: 556.6px;
    right: -72.7px;
    width: 129.48px;
    height: 161.85px;
    overflow: hidden;
    pointer-events: none;
    transform: rotate(162.26deg) scaleY(-1);
  }
  .bs-form__media img {
    position: absolute;
    top: -10.41%;
    left: 3.06%;
    width: 158.97%;
    height: 157.97%;
    max-width: none;
    object-fit: fill;
  }
}