/* App install card — store badges everywhere, QR on desktop only.
 *
 * Shared by index.html and tee-time-app.html so there is ONE implementation of
 * the treatment. Colours come entirely from the host page's tokens
 * (--bg-card, --border, --text-primary, --text-muted, --font-*), which is why
 * this file names no hex value: index.html and tee-time-app.html define
 * different card surfaces and both must stay correct.
 *
 * Badge sizing is fixed by Apple's and Google's usage rules, not by taste:
 *  - Neither badge may be redrawn, recoloured or re-proportioned.
 *  - The Apple badge is the white variant, required on a dark background.
 *  - The Google badge PNG has its mandatory clear space baked in (1/4 of badge
 *    height on every side), so it is set taller than the Apple badge to make
 *    the two visible pills the same height: 66 * 168/250 = 44.4px vs 44px.
 *  - 44px pill height also clears the 44px minimum touch target.
 */

.app-install {
  padding: 56px 0;
}

/* Capped and centred: index.html's container is far wider than
   tee-time-app.html's 800px, and left to fill it the copy and the QR drift to
   opposite ends of a 1040px card with dead space between them. */
.app-install-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
}

/* The badges sit in their own full-width row rather than inside the text
   column, so the app icon does not eat into the horizontal budget they need.
   Sharing that budget wrapped them onto two lines at the 752px card width. */
.app-install-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 0;
}

.app-install-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.app-install-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
}

.app-install-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 4px;
}

.app-install-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Clear space is equalised rather than removed. Google's artwork carries its
   mandatory 1/4-height margin inside the PNG; Apple's SVG carries none, so the
   Apple link is padded by the same 11px (1/4 of its 44px height). Both links
   then occupy a 66px box, which is why the two badges stay aligned whether
   they sit side by side or wrap onto separate lines — a bare flex gap left
   Google indented by exactly its baked 10.8px whenever the row wrapped.
   The row's negative margin pulls that shared padding back out so the visible
   badges line up with the text above; 21px of card padding still remains
   outside it, so neither badge's clear space is encroached on. */
.app-install-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: -11px;
}

.app-install-badge-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 8px;
  padding: 11px;
}

.app-install-badge-link--google {
  padding: 0;
}

.app-install-badge-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.app-install-badge-apple {
  display: block;
  height: 44px;
  width: auto;
}

.app-install-badge-google {
  display: block;
  height: 66px;
  width: auto;
}

/* Hidden until app-install.js decides this device cannot install the app.
   Staying display:none on phones also means the QR images are never fetched. */
.app-install-qr {
  display: none;
  flex: 0 0 auto;
  text-align: center;
}

.app-install-qr.is-visible {
  display: block;
}

.app-install-qr-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.app-install-qr-codes {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.app-install-qr-code {
  margin: 0;
}

.app-install-qr-code img {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.app-install-qr-code figcaption {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

@media (max-width: 600px) {
  .app-install {
    padding: 40px 0;
  }
  .app-install-card {
    padding: 24px 20px;
  }
  .app-install-main {
    flex: 1 1 100%;
  }
}