/**
 * @file
 * Print. The old print.css was Compass boilerplate that had never been edited,
 * so an event printed as a black page with invisible magenta text. This inverts
 * to ink-on-paper and drops everything that is not the event's information.
 */

@page {
  margin: 15mm;
}

:root {
  --surface-0: #fff;
  --surface-1: #fff;
  --surface-2: #fff;
  --surface-well: #fff;
  --text-primary: #000;
  --text-secondary: #333;
  --text-muted: #555;
  --text-accent: #b8006e;
  --border-subtle: #ccc;
  --border-strong: #999;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-accent: none;
}

body {
  background: #fff !important;
  color: #000 !important;
  font-size: 11pt;
}

.site-header,
.utility-bar,
.filter-bar,
.subscribe,
.site-footer,
.skip-link,
.pager,
.share,
.listen-button,
.event-map,
.card-rail,
.highlight-row,
[data-me-print="hide"] {
  display: none !important;
}

a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  color: #555;
  word-break: break-all;
}

.event-hero__media {
  max-block-size: 60mm;
}

.event-detail__grid {
  display: block;
}

.panel {
  break-inside: avoid;
  border: 1px solid #ccc;
  margin-block-start: 6mm;
}

.event-card,
.hub-card {
  break-inside: avoid;
  border: 1px solid #ccc;
  box-shadow: none;
}

/*
 * A hub card on screen is a square photograph with a glass plate lying over its
 * foot. On paper it is neither: the plate's backdrop blur does not print, so
 * the words would sit on whatever the picture happens to be, and a square tile
 * wastes most of a page. Unstacked back into a picture with text under it.
 */
.hub-card {
  aspect-ratio: auto;
}

.hub-card__media {
  position: static;
  block-size: 45mm;
}

.hub-card__body {
  position: static;
  min-block-size: 0;
  padding-block-start: 0;
  background: none;
  /* The mask would bite a hole out of nothing on paper, and the blur does not
     print at all. */
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hub-card__media::before {
  display: none;
}

h1, h2, h3 {
  break-after: avoid;
}