/* -------------------------------------------------------- */
/* 🔹 Hero Section                                          */
/* -------------------------------------------------------- */
/* App landing page hero — title, subtitle, App Store badge */

.hero {
  min-height: calc(100dvh - 64px);
  display: flex;
  align-items: center;
  flex-shrink: 0; /* never shrink below content — avoids centered overflow being clipped in the stacked layout */
  padding-block: 32px;
  background-color: var(--color-hero-bg);
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--website-section-spacing);
}

.hero__content {
  flex: 1;
  max-width: 520px;
}

.hero__title {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-on-hero);
  text-wrap: balance;
  max-width: 16em;   /* keeps the headline to >=2 balanced lines at all widths */
  margin-bottom: var(--space-xl);
}

.hero__subtitle {
  font-size: var(--text-body-large);
  line-height: var(--text-body-large-height);
  color: var(--color-on-hero-variant);
  margin-bottom: var(--space-xxxl);
  max-width: 420px;
  text-wrap: balance;
}

.hero__app-store {
  display: inline-block;
}

.hero__app-store img {
  height: 56px;
  width: auto;
}

.hero__mockup {
  min-width: 0;
  flex-shrink: 0;
}

.hero__mockup img {
  max-height: min(700px, 72dvh);
  width: auto;
}


/* -------------------------------------------------------- */
/* 🔹 Tablet                                                */
/* -------------------------------------------------------- */

@media (max-width: 999px) {
  .hero__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .hero__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__subtitle {
    max-width: 520px;
  }

  .hero__mockup img {
    max-height: 480px;
  }
}


/* -------------------------------------------------------- */
/* 🔹 Mobile                                                */
/* -------------------------------------------------------- */

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-block: 24px;
  }

  .hero__inner {
    gap: var(--space-xxxl);
  }

  .hero__title {
    font-size: 32px;
  }

  .hero__app-store img {
    height: 48px;
  }

  .hero__mockup img {
    max-height: min(400px, 50dvh);
  }
}


/* -------------------------------------------------------- */
/* 🔹 Desktop                                               */
/* -------------------------------------------------------- */

@media (min-width: 1000px) {
  .hero__content {
    max-width: 640px;
  }

  .hero__title {
    font-size: clamp(58px, 4.5vw, 72px);
  }

  .hero__subtitle {
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.6;
    max-width: 520px;
  }
}