/* ============================================================
   hero.css
   Desktop 1440px: bg-image(1240×478) + gradient overlay + content
                   + service-menu card (268×360) + features + pagination
   Mobile  370px:  white card (340×425) with blurred bg image + text
   ============================================================ */

/* ── Section ────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top:    calc(20 / var(--vw-base) * 100vw);
  padding-bottom: calc(20 / var(--vw-base) * 100vw);
  background-color: var(--color-bg);
  overflow: hidden;
}

/* ── Inner container (1240px) ───────────────────────────────── */
.hero__inner {
  position: relative;
  margin-left:  var(--content-padding-x);
  margin-right: var(--content-padding-x);
}

/* ── Background image wrapper ───────────────────────────────── */
.hero__bg-wrap {
  position: relative;
  width: 100%;
  height: calc(478 / var(--vw-base) * 100vw);
  border-radius: calc(20 / var(--vw-base) * 100vw);
  overflow: hidden;
}

/* ── Slide (stacked layers inside bg-wrap, fade transition) ──── */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.hero__slide.-active {
  z-index: 1;
  opacity: 1;
  pointer-events: all;
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay — dark-left to transparent at ~57% (707px of 1240px wide frame) */
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(14, 13, 13, 0.85)  0%,
    rgba(14, 13, 13, 0.85) 20%,
    rgba(14, 13, 13, 0.80) 30%,
    rgba(15, 14, 14, 0.70) 44%,
    rgba(15, 14, 14, 0.40) 54%,
    rgba(15, 14, 14, 0)    57%
  );
  pointer-events: none;
}

/* ── Text content (inside bg image, left side) ──────────────── */
.hero__content {
  position: absolute;
  top:  calc(64 / var(--vw-base) * 100vw);
  left: calc(70 / var(--vw-base) * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(30 / var(--vw-base) * 100vw);
  width: calc(588 / var(--vw-base) * 100vw);
}

.hero__title {
  font-size:   calc(45 / var(--vw-base) * 100vw);
  font-weight: 600;
  line-height: 1.22;
  color: var(--color-white);
}

.hero__description {
  font-size:   calc(16 / var(--vw-base) * 100vw);
  font-weight: 400;
  line-height: 1.56;
  color: var(--color-white);
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width:  calc(240 / var(--vw-base) * 100vw);
  height: calc(50  / var(--vw-base) * 100vw);
  border-radius:   calc(10 / var(--vw-base) * 100vw);
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 500;
  line-height: 1.43;
  color: var(--color-white);
  background-color: var(--color-red);
  transition: opacity 0.2s;
}
.hero__cta:hover { opacity: 0.9; }

/* ── Shelf overlay (bg-colored shape, bottom-right of bg image) ── */
.hero__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width:  calc(715 / var(--vw-base) * 100vw);
  height: calc(77  / var(--vw-base) * 100vw);
  fill: var(--color-bg);
}

/* ── Features grid (3 pills, overlaps bottom of hero bg image) ── */
.hero__features {
  position: absolute;
  bottom: 0;
  left:  calc(560 / var(--vw-base) * 100vw);
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: calc(10 / var(--vw-base) * 100vw);
}

.hero__feature-item {
  display: flex;
  align-items: center;
  gap: calc(10 / var(--vw-base) * 100vw);
  flex: 1;
  padding: calc(14 / var(--vw-base) * 100vw) calc(10 / var(--vw-base) * 100vw);
  border-radius: calc(10 / var(--vw-base) * 100vw);
  background-color: var(--color-white);
}

.hero__feature-icon, .hero__feature-item svg {
  flex-shrink: 0;
  width:  calc(14 / var(--vw-base) * 100vw);
  height: calc(14 / var(--vw-base) * 100vw);
  fill: var(--color-red);
}

.hero__feature-text {
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 400;
  line-height: 1.14;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── Pagination (vertical dots, right side inside bg-wrap) ──── */
.hero__pagination {
  position: absolute;
  right: calc(20 / var(--vw-base) * 100vw);
  top: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / var(--vw-base) * 100vw);
  transform: translateY(-50%);
}

.hero__pagination-dot {
  width:  calc(10 / var(--vw-base) * 100vw);
  height: calc(10 / var(--vw-base) * 100vw);
  padding: 0;
  border: none;
  border-radius: calc(20 / var(--vw-base) * 100vw);
  background-color: rgba(234, 51, 35, 0.20);
  cursor: pointer;
  transition: height 0.3s, background-color 0.3s;
}
.hero__pagination-dot.-active {
  height: calc(60 / var(--vw-base) * 100vw);
  background-color: var(--color-red);
}

/* ── Scroll-to-top logo button (bottom-right of bg image) ────── */
.hero__scroll-btn {
  position: absolute;
  bottom: calc(30 / var(--vw-base) * 100vw);
  right:  calc(20 / var(--vw-base) * 100vw);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(50 / var(--vw-base) * 100vw);
  height: calc(50 / var(--vw-base) * 100vw);
  border-radius: 50%;
  background-color: var(--color-red);
  transition: opacity 0.2s;
}
.hero__scroll-btn:hover { opacity: 0.85; }
.hero__scroll-btn svg {
  width:  calc(20 / var(--vw-base) * 100vw);
  height: calc(20 / var(--vw-base) * 100vw);
  fill: var(--color-white);
}

/* Hide mobile-only elements on desktop */
.hero__features-mobile { display: none; }

/* ============================================================
   MOBILE  (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  .hero {
    padding-top:    calc(20 / var(--vw-base) * 100vw);
    padding-bottom: calc(20 / var(--vw-base) * 100vw);
  }

  /* Hide desktop-only elements */
  .hero__service-menu,
  .hero__pagination,
  .hero__scroll-btn,
  .hero__overlay,
  .hero__features {
    display: none;
  }

  /* Mobile hero card */
  .hero__bg-wrap {
    height: calc(425 / var(--vw-base) * 100vw);
    border-radius: calc(10 / var(--vw-base) * 100vw);
  }

  /* Simple dark overlay on mobile */
  .hero__gradient {
    background: rgba(15, 14, 14, 0.40);
  }

  /* Content sits inside card, absolutely positioned */
  .hero__content {
    top:   calc(30 / var(--vw-base) * 100vw);
    left:  calc(15 / var(--vw-base) * 100vw);
    right: calc(15 / var(--vw-base) * 100vw);
    width: auto;
    gap:   calc(20 / var(--vw-base) * 100vw);
  }

  .hero__title {
    font-size:   calc(26 / var(--vw-base) * 100vw);
    line-height: 1.15;
  }

  .hero__description {
    font-size:   calc(14 / var(--vw-base) * 100vw);
    line-height: 1.43;
  }

  /* Show mobile feature badges inside the card */
  .hero__features-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 / var(--vw-base) * 100vw);
  }

  .hero__feature-badge {
    display: flex;
    align-items: center;
    min-width: calc(148 / var(--vw-base) * 100vw);
    padding: calc(9 / var(--vw-base) * 100vw) calc(5 / var(--vw-base) * 100vw);
    border-radius: calc(5 / var(--vw-base) * 100vw);
    background-color: var(--color-white);
  }

  .hero__feature-badge-text {
    font-size:   calc(10 / var(--vw-base) * 100vw);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
  }

  /* CTA button — full width inside card */
  .hero__cta {
    width: 100%;
    height: calc(45 / var(--vw-base) * 100vw);
    border-radius: calc(10 / var(--vw-base) * 100vw);
    font-size: calc(14 / var(--vw-base) * 100vw);
    align-self: stretch;
  }
}