/*
 * STICKY-BAR.CSS
 * .jm-stickybar: the one space at the top of Discover and a group's Members page (parts/sticky-bar.php; jm-core
 * inc/sticky-bar.php). Neat blocks of equal width: one centred, two side by side, three in a row (data-count, set by
 * the server and by discover.js); stacked on narrow phones. Square corners and the covers' shadow, so they sit with
 * the mixes. The Entry block (--entry) takes the whole first row and holds the shared entry boxes (forms.css
 * .jm-join__options). (Was .jm-tilerow / .jm-tile in awards.css, 21 Oct.)
 */

.jm-stickybar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jm-space-2);
	margin: 0 auto var(--jm-space-3);
}

.jm-stickybar[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.jm-stickybar[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jm-stickybar[hidden],
.jm-stickybar [hidden] { display: none; }

@media (max-width: 400px) {
	.jm-stickybar,
	.jm-stickybar[data-count] { grid-template-columns: minmax(0, 1fr); }
}

.jm-stickybar__block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 var(--jm-space-3);
	padding: var(--jm-space-2) var(--jm-space-3);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-2);
	color: var(--jm-colour-text);
	text-decoration: none;
}

a.jm-stickybar__block:hover { box-shadow: var(--jm-shadow-3); }
.jm-stickybar__title { grid-column: 1; font-size: var(--jm-text-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jm-colour-heading); }
.jm-stickybar__text { grid-column: 1; font-size: var(--jm-text-s); line-height: 1.35; }
.jm-stickybar__cta { grid-column: 2; grid-row: 1 / span 2; font-size: var(--jm-text-s); font-weight: 700; color: var(--jm-colour-action); white-space: nowrap; }

/* The Entry block: the whole first row; the title, then the shared entry boxes (same look as the Welcome page). */
.jm-stickybar__block--entry {
	display: block;
	grid-column: 1 / -1;
	padding: var(--jm-space-3);
	text-align: center;
}

.jm-stickybar__block--entry .jm-join__options {
	margin-top: var(--jm-space-2);
}