/* About page (resources/views/about.blade.php): two cards, logo column with a fixed width and a clear gap to
   the facts, label/value pairs as a definition list, the Google Play link as a real button (the legacy badge
   image was lost). Footer at the bottom of short pages. Colours follow the DB red of the app. */
body.about_page .wrapper { min-height: 100vh; display: flex; flex-direction: column; }
body.about_page .about-page { flex: 1 0 auto; padding: 40px 16px 48px; }
.about-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start;
}
.about-card {
  background: #fff; border: 1px solid #e3e6ea; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06); overflow: hidden; min-width: 0;
}
.about-card__title {
  margin: 0; padding: 16px 24px; font-size: 1.1rem; font-weight: 700; color: #1f2329;
  border-bottom: 1px solid #e3e6ea; border-top: 3px solid #ec0016;
}
.about-card__body { display: flex; gap: 28px; align-items: flex-start; padding: 24px; }
.about-card__logo { flex: 0 0 88px; display: block; line-height: 0; }
.about-card__logo img { width: 88px; height: auto; display: block; }
.about-facts { margin: 0; display: grid; gap: 16px; min-width: 0; flex: 1 1 auto; }
.about-facts dt {
  margin: 0 0 2px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #646973;
}
.about-facts dd { margin: 0; display: flex; flex-direction: column; color: #1f2329; line-height: 1.45; overflow-wrap: anywhere; }
.about-facts dd a { color: #ec0016; }
.about-facts__muted { color: #646973; font-size: .85rem; font-variant-numeric: tabular-nums; }
#app-version { font-weight: 700; font-variant-numeric: tabular-nums; }
.about-card__footer { padding: 0 24px 24px; }
.about-store-link {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 6px;
  background: #ec0016; color: #fff; font-weight: 700; text-decoration: none;
}
.about-store-link:hover, .about-store-link:focus-visible { background: #c50014; color: #fff; text-decoration: none; }
.about-store-link:focus-visible { outline: 3px solid rgba(236, 0, 22, .35); outline-offset: 2px; }
.about-store-link i { font-size: 1.2rem; }
@media (max-width: 480px) {
  .about-card__body { flex-direction: column; gap: 16px; padding: 20px 16px; }
  .about-card__title { padding: 14px 16px; }
  .about-card__footer { padding: 0 16px 20px; }
}