/* ───────────────────────────────────────────────────────────────────────
   Homepage app showcase — the feature graphic above the footer's copyright
   line in index.html. Homepage only; no other page loads this.

   The badges underneath are NOT drawn here. app-banner.js mounts the App
   Store badge and the "Coming soon to Android" line into this same footer
   (via <footer data-app-link-slot>), landing between this block and
   .footer-bottom, and ANDROID_PACKAGE in that file stays the one switch for
   the Android launch. All this file does is place the graphic above it and
   centre the row that follows, so the two read as one block.
   ─────────────────────────────────────────────────────────────────────── */

.app-showcase {
  grid-column: 1 / -1;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  text-align: center;
}

.app-showcase-graphic {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  /* The graphic is near-black on a near-black footer, so a hairline edge and
     a soft shadow keep it from reading as a hole punched in the page. The
     footer is charcoal in both themes, so this does not need a dark variant. */
  border: 1px solid rgba(200,168,75,0.28);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

/* app-banner.js leaves its row at the footer's own alignment above 600px,
   which is left. Under the centred graphic it belongs centred too. The
   general sibling selector only matches on the page that has a showcase, so
   every other page keeps the alignment app-banner.js chose for it. */
.app-showcase ~ .itab-applink-footer { text-align: center; }

@media (max-width: 600px) {
  .app-showcase { margin-top: 40px; padding-top: 32px; }
}