/* Styles for download-banner.hbs — the yellow "get the app" banner.
   Ported from the legacy `components/custom/DownloadBanner.vue`; the 1000
   breakpoint and every size below are the legacy values, as measured on the
   live site.

   The two halves swap at 1000px: store buttons below it, the SMS form at and
   above it. Only ever one of them is on screen. */

.download-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background-color: var(--identity);
}

/* Shrink-to-fit, not full width: the legacy column hugs its longest line (the
   description, around 525px) instead of stretching, which is what keeps the two
   Android buttons from growing to half the container between 620px and the
   1000px breakpoint. */
.download-banner-content {
  width: fit-content;
  text-align: center;
}

.download-banner-title {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
}

.download-banner-description {
  margin-top: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.download-banner-stores {
  margin: 24px 0;
}

.download-banner-platform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 400;
}

/* Drawn in `currentColor`, so it takes the slate of the label it sits beside. */
.download-banner-platform-icon {
  flex: none;
}

.download-banner-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* A lone button takes the whole row rather than half of it — the iPhone side
   only ever offers the web app. */
.download-banner-buttons > a:only-child {
  grid-column: 1 / -1;
}

.download-banner-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: var(--gray-900);
  color: var(--gray-0);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}

.download-banner-store-icon {
  flex: none;
}

/* Hidden here and shown at the wide breakpoint. It cannot work without
   JavaScript, so a visitor who has none keeps the store buttons at every width
   rather than being handed a form that would do nothing. */
.download-banner-form {
  display: none;
}

/* The 660px cap is the legacy's shrink-wrapping wrapper div expressed in CSS:
   there the image sat in a bare flex-item <div>, so its box never grew past the
   600px intrinsic source plus these 60px of padding, and the picture was never
   drawn upscaled. Ours is a direct flex child, so it needs the cap stated. */
.download-banner-art {
  width: 100%;
  max-width: 660px;
  padding: 0 30px;
}

@media (min-width: 1000px) {
  .download-banner {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    height: 280px;
    /* Asymmetric: the artwork bleeds toward the left edge while the copy keeps
       its distance from the right. The legacy values. */
    padding: 20px 80px 20px 20px;
    border-radius: 24px;
  }

  .download-banner-content {
    width: 440px;
    text-align: start;
  }

  .download-banner-title {
    font-size: 29px;
    line-height: 47px;
  }

  .download-banner-description {
    font-size: 16px;
    line-height: 26px;
  }

  .download-banner-stores {
    display: none;
  }

  .js .download-banner-form {
    display: flex;
    align-items: start;
    gap: 8px;
    margin-top: 40px;
  }

  /* Column, so the status line can sit under the field without widening it. */
  .download-banner-field {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  /* The placeholder carries the label visually; this keeps it for screen
     readers without the legacy's missing-label problem. */
  .download-banner-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .download-banner-input {
    padding: 8px 12px;
    border: 1px solid var(--black);
    border-radius: 8px;
    background-color: transparent;
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    /* Digits read left-to-right even on an RTL page, but the field itself stays
       aligned to the side the rest of the form is on. */
    direction: ltr;
    text-align: right;
  }

  .download-banner-input::placeholder {
    color: var(--gray-700);
  }

  .download-banner-input:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 1px;
  }

  .download-banner-message {
    padding-top: 4px;
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 300;
    text-align: start;
  }

  /* The live region stays in the DOM even when silent — a screen reader has to
     be watching it before the message arrives, or the announcement is missed —
     so it gives its padding back instead, and the field keeps the height it has
     upstream. */
  .download-banner-message:empty {
    padding-top: 0;
  }

  .download-banner-form[data-state='error'] .download-banner-message {
    color: var(--danger);
  }

  .download-banner-submit {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--gray-900);
    color: var(--gray-0);
    font-size: 16px;
    font-weight: 400;
    transition: opacity 0.3s ease;
  }

  .download-banner-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .download-banner-art {
    width: 340px;
    padding: 0;
  }
}