/* The app page, /app/ (docs/app-download.md): the download card at the top
   (layouts/shortcodes/app-download.html) and the posters for practices (app-posters.html).
   Colours and type are the site's: hyde.css's cards and greens, Abril Fatface for the name. */

.app-get {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 1.25rem 0 1.75rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #b9cdbf;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f7f3 0%, #fbfcfb 100%);
  box-shadow: 0 .4rem 1.4rem rgba(36, 75, 53, .09);
}

.app-get__about {
  min-width: 0;
}

.app-get__name {
  margin: 0;
  color: #183425;
  font-family: "Abril Fatface", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.1;
}

.app-get__tagline {
  margin: .3rem 0 1.1rem;
  color: #4f5f56;
  font-size: 1.02rem;
  line-height: 1.35;
}

/* The badges keep a quarter of their height clear around them (Apple's and Google's guidelines):
   they sit 16px apart, and the Google Play PNG brings its own clear space, which its negative
   margin lays over the gap so both badges line up at the same height. */
.app-get__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.app-badge {
  --badge-height: 48px;
  display: block;
  flex: 0 0 auto;
  border-radius: 8px;
  line-height: 0;
}

/* poole.css gives every img a margin, rounded corners and max-width: none of those here, so the
   artwork is drawn as it is and never squeezed. */
.app-badge img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--badge-height);
  margin: 0;
  border-radius: 0;
}

/* The PNG is 646 × 250 px: a 564 × 168 px badge inside 41 px of transparency. */
.app-badge--google-play img {
  height: calc(var(--badge-height) * 250 / 168);
  margin: calc(var(--badge-height) * -41 / 168);
}

.app-badge:focus-visible {
  outline: 3px solid rgba(36, 75, 53, .45);
  outline-offset: 3px;
}

.app-get__soon {
  margin: 0;
  padding: .45rem .8rem;
  border: 1px solid #b9cdbf;
  border-radius: 1.1rem;
  background: #fff;
  color: #163824;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-get__qr {
  flex: 0 0 auto;
  width: 7.4rem;
  margin: 0;
  text-align: center;
}

.app-get__qr img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid #dde7df;
  border-radius: 6px;
  background: #fff;
}

.app-get__qr figcaption {
  margin-top: .4rem;
  color: #4f5f56;
  font-size: .68rem;
  line-height: 1.3;
}

/* On a phone the badges are what matter: a QR code can't scan its own screen. */
@media (max-width: 47.999em) {
  .app-get {
    display: block;
    padding: 1.1rem 1rem 1.2rem;
  }

  .app-badge {
    --badge-height: 44px;
  }

  .app-get__qr {
    display: none;
  }
}

.app-posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.app-posters__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem .9rem .9rem;
  border: 1px solid #b9cdbf;
  border-radius: 8px;
  background: #fbfcfb;
  line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.app-posters__link:hover,
.app-posters__link:focus-visible {
  border-color: #244b35;
  box-shadow: 0 .3rem 1rem rgba(36, 75, 53, .12);
  text-decoration: none;
}

.app-posters__link:focus-visible {
  outline: 3px solid rgba(36, 75, 53, .3);
  outline-offset: 2px;
}

.app-posters__icon {
  margin-bottom: .2rem;
  color: #244b35;
  font-size: 1.35rem;
}

.app-posters__name {
  color: #163824;
  font-weight: 700;
}

.app-posters__meta {
  color: #5f6862;
  font-size: .75rem;
}

.app-posters__soon {
  color: #163824;
  font-size: .85rem;
  font-weight: 700;
}

.app-trademarks {
  color: #6a6a6a;
  font-size: .7rem;
  line-height: 1.4;
}

@media (max-width: 36em) {
  .app-posters {
    grid-template-columns: 1fr;
  }
}