/* See ./download-app-hero.md for design notes and rationale. */

.download-app-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-6);
  width: 100%;
  max-width: 640px;
}

.download-app-hero__badge {
  display: inline-flex;
  align-self: flex-start;
  background: var(--ll-color-bg-brand-accent);
  color: var(--ll-color-text-inverse);
  padding: var(--ll-space-2) var(--ll-space-4);
  border-radius: var(--ll-radius-s);
  margin: 0;
  font-family: var(--ll-text-tagline-sm-family);
  font-size: var(--ll-text-tagline-sm-size);
  line-height: var(--ll-text-badge-line-height);
  letter-spacing: var(--ll-text-tagline-sm-letter-spacing);
  font-weight: var(--ll-text-tagline-sm-weight);
}

.download-app-hero__heading {
  margin: 0;
  color: var(--ll-color-text-inverse);
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h5-weight);
}

.download-app-hero__description {
  margin: 0;
  color: var(--ll-color-text-inverse);
  opacity: 0.8;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

.download-app-hero__buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ll-space-5);
  margin-top: var(--ll-space-4);
}

.download-app-hero__btn {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: 164px;
  height: 52px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.download-app-hero__btn-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-app-hero__media-img {
  pointer-events: none;
}

.download-app-hero .l-tmlayout__text-section {
  padding-block: var(--ll-space-9) var(--ll-space-5);
}

.download-app-hero .l-tmlayout__media-section {
  display: none;
}

/* MD */
@media (width >= 768px) {
  .download-app-hero .l-tmlayout__text-section {
    padding-block: var(--ll-space-15) 0;
  }

  .download-app-hero__heading {
    font-family: var(--ll-text-h3-family);
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
    font-weight: var(--ll-text-h3-weight);
  }

  .download-app-hero__description {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
    font-weight: var(--ll-text-body-lg-weight);
  }

  .download-app-hero__buttons {
    gap: var(--ll-space-7);
  }

  .download-app-hero__btn {
    flex: 0 0 164px;
    width: 164px;
    max-width: none;
  }
}

/* LG+ */
@media (width >= 1024px) {
  .download-app-hero .l-tmlayout__text-section {
    padding-block: var(--ll-space-17);
  }

  .download-app-hero .l-tmlayout__media-section {
    display: flex;
  }

  .download-app-hero .l-tmlayout__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: contain;
  }

  .download-app-hero__buttons {
    margin-top: calc(var(--ll-space-11) - var(--ll-space-6));
  }
}

/* Small desktop (1024–1439) */
@media (width >= 1024px) and (width < 1440px) {
  .download-app-hero .l-tmlayout__media img {
    object-position: right center;
  }
}

/* XL (>=1440) */
@media (width >= 1440px) {
  .download-app-hero .l-tmlayout__media img {
    object-fit: cover;
  }
}

/* UE */
body[data-ue-mode] .download-app-hero .l-tmlayout__content {
  display: block;
}

body[data-ue-mode] .download-app-hero .l-tmlayout__text-section,
body[data-ue-mode] .download-app-hero .l-tmlayout__media-section {
  display: block;
  width: 100%;
  height: auto;
}

body[data-ue-mode] .download-app-hero .l-tmlayout__media {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

body[data-ue-mode] .download-app-hero .l-tmlayout__media picture {
  display: block;
  width: 100%;
  max-height: 320px;
}

body[data-ue-mode] .download-app-hero .l-tmlayout__media picture img {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
}