/* An exhibition's own page (inc/exhibitions.php): place and dates under the title, and, with a suitable picture, a dark
   band holding the picture beside the title. The band is laid out on the theme's own markup: the article is a grid
   whose first row holds the header (title, place, dates) and the picture; the text and footer take the rows below. */

.lbs-exhibition-facts { display: flex; flex-wrap: wrap; gap: 0 var(--lbs-space-5); margin: 0 0 var(--lbs-space-5); font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-lead); }
.lbs-exhibition-facts__place { font-weight: 600; }
.lbs-entry__header .lbs-page-title:has(+ .lbs-exhibition-facts) { margin-bottom: var(--lbs-space-3); }

.lbs-has-exhibition-hero .lbs-main { padding-top: 0; }

.lbs-exhibition-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--lbs-space-7); }
/* The band's ground reaches the screen's edges, as the feature band does; 100vw counts a classic scrollbar too, which
   would scroll the page sideways by its width without this (the theme's guard, layout.css, for its own bands). */
html:has(.lbs-exhibition-hero) { overflow-x: clip; }
.lbs-exhibition-hero::before { content: ''; grid-row: 1; grid-column: 1 / -1; width: 100vw; margin-inline: calc(50% - 50vw); background: var(--lbs-dark); }
.lbs-exhibition-hero > :not(.lbs-entry__header, .lbs-entry__thumbnail) { grid-column: 1 / -1; width: 100%; }
.lbs-exhibition-hero > .entry-content { margin-top: 0; }
/* The picture reaches the screen's edge, by the page's side margin: the space beside the theme's container. On very
   wide screens it stops at about 720px, where the crop would grow too hard, and the band's ground continues beside it. */
.lbs-exhibition-hero { --lbs-exhibition-bleed: min(calc((100vw - min(var(--lbs-wide), 100vw - 2 * var(--lbs-gutter))) / 2), 9.375rem); }
.lbs-exhibition-hero > .lbs-entry__thumbnail { grid-row: 1; grid-column: 1; max-width: none; margin: 0 0 0 calc(-1 * var(--lbs-exhibition-bleed)); }
.lbs-exhibition-hero > .lbs-entry__thumbnail img { display: block; width: 100%; height: 27.5rem; object-fit: cover; }
.lbs-exhibition-hero > .lbs-entry__header { grid-row: 1; grid-column: 2; align-self: center; max-width: none; margin: 0; padding: var(--lbs-space-6) 0 var(--lbs-space-6) var(--lbs-space-7); color: var(--lbs-white); }
.lbs-exhibition-hero .lbs-page-title { margin-bottom: 0; color: inherit; }
.lbs-exhibition-hero .lbs-exhibition-facts { display: block; margin: 0; }
.lbs-exhibition-hero .lbs-exhibition-facts::before { content: ''; display: block; width: var(--lbs-rule-w); height: var(--lbs-rule-h); margin-block: var(--lbs-space-5); background: var(--lbs-red); }
.lbs-exhibition-hero .lbs-exhibition-facts__place,
.lbs-exhibition-hero .lbs-exhibition-facts__dates { display: block; }

@media (max-width: 767.98px) {
	.lbs-exhibition-hero { grid-template-columns: minmax(0, 1fr); }
	.lbs-exhibition-hero::before { grid-row: 1 / span 2; }
	.lbs-exhibition-hero > .lbs-entry__thumbnail { grid-column: 1; margin-inline: calc(-1 * var(--lbs-exhibition-bleed)); }
	.lbs-exhibition-hero > .lbs-entry__thumbnail img { height: 15rem; }
	.lbs-exhibition-hero > .lbs-entry__header { grid-row: 2; grid-column: 1; padding: var(--lbs-space-5) 0 var(--lbs-space-6); }
	.lbs-exhibition-hero { row-gap: 0; }
	.lbs-exhibition-hero > .entry-content { margin-top: var(--lbs-space-5); }
}

/* Printers drop background colours, which would leave white text on white paper. */
@media print {
	.lbs-exhibition-hero { display: block; }
	.lbs-exhibition-hero::before { display: none; }
	.lbs-exhibition-hero > .lbs-entry__header { padding: 0; color: inherit; }
	.lbs-exhibition-hero > .lbs-entry__thumbnail { margin: var(--lbs-space-5) 0; }
	.lbs-exhibition-hero > .lbs-entry__thumbnail img { height: auto; }
}