/**
 * Content parts: text roles, icon, card, list row and empty state. The one owner of each.
 * .is-hover, .is-pressed and .is-focus exist only so the sample page can show a state
 * without a pointer. Page-local .card and .empty-state classes move here as each screen is
 * restyled (phases 3 to 5).
 */

/* ---- Text roles ---- */

.ui-text-display {
  margin: 0;
  font-size: var(--type-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.ui-text-page-title {
  margin: 0;
  font-size: var(--type-page-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-page-title-line-height);
}

.ui-text-section-title {
  margin: 0;
  font-size: var(--type-section-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
}

.ui-text-body {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

.ui-text-secondary {
  margin: 0;
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.ui-text-caption {
  margin: 0;
  color: var(--text-caption);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* ---- Icon ---- */

.ui-icon {
  flex: none;
  width: var(--icon-base);
  height: var(--icon-base);
}

.ui-icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* ---- Card ---- */

.ui-card {
  display: block;
  /* Anything inside a card hovers one step above the card's own fill. */
  --surface-hover: var(--surface-card-hover);
  --surface-pressed: var(--surface-card-pressed);

  padding: var(--spacing-base);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
}

/* A quiet full-width band. Used rarely. */
.ui-band {
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
}

/* On a band, or over a map or photo, the fill step is lost, so a card uses the raised surface. */
.ui-card--raised,
.ui-band .ui-card {
  background: var(--surface-raised);
}

/* A photo card has no container: the photo with the card corner, its text beneath on the page. */
.ui-card--photo {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.ui-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--spacing-12);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  object-fit: cover;
}

.ui-card__title {
  margin: 0;
  font-size: var(--type-card-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
}

.ui-card--tappable {
  transition: background-color var(--transition-fast);
}

.ui-card--tappable:hover,
.ui-card--tappable.is-hover {
  background: var(--surface-card-hover);
}

.ui-card--tappable:active,
.ui-card--tappable.is-pressed {
  background: var(--surface-card-pressed);
}

.ui-card--photo.ui-card--tappable:hover,
.ui-card--photo.ui-card--tappable.is-hover,
.ui-card--photo.ui-card--tappable:active,
.ui-card--photo.ui-card--tappable.is-pressed {
  background: transparent;
}

.ui-card--photo.ui-card--tappable:hover .ui-card__title,
.ui-card--photo.ui-card--tappable.is-hover .ui-card__title {
  text-decoration: underline;
}

.ui-card--tappable:focus-visible,
.ui-card--tappable.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
}

/* ---- List row ---- */

/* No frame and no fill: rows sit open on the page. */
.ui-list {
  display: block;
}

.ui-row {
  position: relative;
  display: flex;
  gap: var(--spacing-12);
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-height);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

/* A hairline inset to the text, between rows only. */
.ui-row + .ui-row::before {
  position: absolute;
  top: 0;
  right: var(--spacing-base);
  left: var(--spacing-base);
  height: 1px;
  background: var(--border-ui);
  content: "";
}

.ui-row__meta {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.ui-row .ui-icon {
  color: var(--text-caption);
}

a.ui-row:hover,
.ui-row.is-hover {
  background: var(--surface-hover);
}

a.ui-row:active,
.ui-row.is-pressed {
  background: var(--surface-pressed);
}

a.ui-row:focus-visible,
.ui-row.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: calc(0px - var(--focus-ring-width));
}

.ui-row[aria-current="true"] {
  background: var(--surface-hover);
  font-weight: var(--font-weight-medium);
}

.ui-row[aria-disabled="true"] {
  color: var(--text-caption);
  cursor: not-allowed;
}

/* ---- Empty state ---- */

.ui-empty {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-base);
  color: var(--text-supporting);
  text-align: center;
}

/* With colours forced or contrast raised, a fill step can vanish, so the edge comes back. */
@media (prefers-contrast: high), (forced-colors: active) {
  .ui-card:not(.ui-card--photo) {
    border: 1px solid currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-card--tappable,
  .ui-row {
    transition: none;
  }
}