/*
 * The Google Play badge in the homepage hero, and the way to get the app in
 * the homepage's app section (includes/promo-ui.php).
 *
 * Google's artwork, unchanged, per STYLING.md › Store badges: height only, no
 * margin of ours. 48px, the signpost size: it sits under the page's own call
 * to action, which stays the primary one. Its own class, like each badge size.
 *
 * The hero is a dark ground (blocksy-child's --theme-palette-color-4 and the
 * video), so the focus ring and the iPhone tile take the dark-ground
 * treatment.
 */

.pp-app-home-badge__link {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.pp-app-home-badge__link img {
  display: block;
  width: auto;
  height: 48px;
}

/* The standard ring is all but invisible on a dark ground: a 2px stroke in
   the ground's prominent tone (STYLING.md › Native surfaces on a dark ground). */
.pp-app-home-badge__link:focus-visible {
  outline: 2px solid var(--theme-palette-color-8);
  outline-offset: 2px;
}

/* The badge and the iPhone tile in a row, `8px` apart, left-aligned with the
   copy; centred on a phone, as the hero's actions are there. */
.pp-app-home-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1024px) {
  .pp-app-home-badge {
    justify-content: center;
  }
}

/* The iPhone tile on the dark ground: the band's tile (below) with the
   dark-ground set in place of its hairline and steel text. The faint light
   fill a secondary control takes on a solid dark ground (STYLING.md › A
   promotion question at the end of a session), no border, and the secondary
   text colour (› Attention surface). */
.pp-app-home-badge__soon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 8px 0;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(var(--pp-steel-1-rgb), 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/*
 * The app section, on a light ground. Up to the tablet breakpoint (1024px,
 * where the homepage stacks every section) the store row alone, centred under
 * the screenshot: a phone or tablet installs from the store, and the QR row
 * does not fit the stacked column. From 1025px, the QR code on
 * the left with its caption and the store row stacked beside it: the caption
 * says what the code is for, and the badge still serves a visitor who would
 * rather follow the link.
 *
 * The badge: the hero's values (48px, the signpost size, under the page's own
 * Start free) with the standard focus ring, since this ground is light.
 * The QR tile: STYLING.md › A QR code, at the page size, 160px.
 */

.pp-app-home-band__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pp-app-home-band__badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.pp-app-home-band__badge img {
  display: block;
  width: auto;
  height: 48px;
}

.pp-app-home-band__badge:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* The iPhone tile: a statement, not a control, so no hover and no pointer.
   It takes the visible part of the Play badge's height (the artwork is 48px
   with an 8px transparent margin top and bottom, so 32px of badge), which
   lines the two up as a pair; the 8px vertical margin stands in for the
   artwork's own. Hairline border, 8px control radius, 0.75rem / 600 in
   --pp-steel-5: our own tile, deliberately not the look of Apple's badge. */
.pp-app-home-band__soon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 8px 0;
  padding: 0 12px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--pp-steel-5);
  white-space: nowrap;
}

.pp-app-home-band__qr,
.pp-app-home-band__caption {
  display: none;
}

.pp-app-home-band__qr {
  box-sizing: border-box;
  width: 160px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 8px;
  background: var(--theme-palette-color-8);
  color: var(--pp-steel-7);
  line-height: 0;
}

.pp-app-home-band__qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.pp-app-home-band__caption {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pp-steel-5);
}

@media (min-width: 1025px) {
  .pp-app-home-band {
    display: grid;
    grid-template-columns: 160px auto;
    grid-template-areas:
      "qr caption"
      "qr stores";
    justify-content: start;
    column-gap: 16px;
    row-gap: 12px;
  }

  .pp-app-home-band__qr {
    display: block;
    grid-area: qr;
  }

  .pp-app-home-band__caption {
    display: block;
    grid-area: caption;
    align-self: end;
  }

  .pp-app-home-band__stores {
    grid-area: stores;
    align-self: start;
    justify-content: start;
  }

  /* A phone or tablet, the QR code removed: the store row alone. */
  .pp-app-home-band--no-qr {
    display: block;
  }
}

/* Nothing is promoted inside the app. */
html.pp-in-app .pp-app-home-badge,
html.pp-in-app .pp-app-home-band {
  display: none;
}