/* Information pages: /register and /travel. */

/* The site's "this matters" block: navy, so it is what the eye lands on first.
   /register and /travel use it as .callout; abstracts.css gives .abstract-notice
   the same declarations, because the JS owns that class name. The palette has no alert colour and adding one
   moves tokens.css across seven pages, so urgency is carried by weight and
   position instead. */
.callout {
  max-width: var(--max-width-prose);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
}
.callout__lead {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-snug);
}
.callout__note {
  margin: var(--space-3) 0 0;
  max-width: none;
  color: var(--color-on-dark-muted);
}
.callout__note strong { color: var(--color-on-dark); }
/* A link that keeps the global accent here would be unreadable on navy, and its
   hover has to be redefined with it. */
.callout a { color: var(--color-on-dark); }
.callout a:hover { color: var(--color-on-dark-muted); }

/* One block instead of four loose pieces: the photo, the address, the two
   links and the rate that is still to come. The photo is landscape and runs the
   card's full width, so the facts sit under it rather than beside it. */
.hotel-card {
  max-width: var(--max-width-prose);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.hotel-card__photo { width: 100%; margin-bottom: var(--space-5); border-radius: var(--radius-md); }
.hotel-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.hotel-card__address { margin: var(--space-2) 0 0; color: var(--color-muted); }
.hotel-card__links {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.hotel-card__links li { margin: 0; }
.hotel-card__links a { display: inline-block; padding: var(--space-2) 0; }
/* What the client still owes, in the muted italic this site already uses for a
   block that is not full yet (.sponsor-tier__empty, .speaker-grid__more). */
.hotel-card__rate {
  margin: var(--space-4) 0 0;
  max-width: none;
  font-style: italic;
  color: var(--color-muted);
}

.info-table-wrap { max-width: var(--max-width-prose); overflow-x: auto; }
/* separate + zero spacing, because border-collapse: collapse drops the radius. */
.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.info-table th,
.info-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.info-table thead th {
  font-family: var(--font-display);
  color: var(--color-primary);
  background-color: var(--color-surface-sunken);
}
.info-table td { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.info-table thead th:first-child { border-top-left-radius: calc(var(--radius-md) - 1px); }
.info-table thead th:last-child { border-top-right-radius: calc(var(--radius-md) - 1px); }
.info-table tbody tr:last-child > * { border-bottom: 0; }
.info-table__note { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-muted); }