/**
 * app.css — page-specific styles for /app/ (Android/iOS 2-column block).
 * BEM: platform-card__element--modifier
 */

.platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
}

@media (min-width: 768px) {
  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.platform-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
}

.platform-card__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 14px;
}

.platform-card h3 {
  margin-bottom: 10px;
}

.platform-card > p {
  margin-bottom: var(--space-paragraph);
}

.platform-card .data-table-wrap {
  margin-bottom: var(--space-paragraph);
  overflow-x: visible;
}

/* The shared .data-table sets a 420px min-width for readability elsewhere,
   but inside a narrow mobile platform-card that forces the value column to
   overflow/truncate instead of wrapping. Override to a fluid, fixed layout
   so the label column stays compact and the value column wraps its text
   instead of getting cut off. */
.platform-card .data-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.platform-card .data-table th,
.platform-card .data-table td {
  word-break: break-word;
  white-space: normal;
}

.platform-card .data-table th:first-child,
.platform-card .data-table td:first-child {
  width: 42%;
}