/*
 * Styles for the band's blocks.
 *
 * Everything addresses theme.json presets rather than literal colours, so the
 * blocks follow the theme and inherit the inked/press section styles without
 * restating the palette. Fallbacks are supplied for the case where the plugin
 * is active under a theme that does not define these presets.
 */

/* -------------------------------------------------- Shows */

.rb-shows {
	border-top: 5px solid currentcolor;
}

.rb-show {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--rule, #b9b5a4);
	color: inherit;
	display: grid;
	gap: 0.15rem 1.5rem;
	grid-template-columns: auto 1fr;
	padding-block: 1.15rem;
	text-decoration: none;
}

@media (min-width: 760px) {

	.rb-show {
		align-items: center;
		grid-template-columns: 8.5rem 1fr auto;
	}
}

/*
 * Oxblood, not brass. A show date is 16.8px semibold - under the 18.66px that
 * would make it large text - so it needs 4.5:1, and brass on bone stock
 * measures 3.11:1. Oxblood is the palette's other warm accent and measures
 * 7.66:1. On an inked band it lifts to brass-light at 6.66:1.
 */
.rb-show__when {
	color: var(--wp--preset--color--oxblood, #7e2418);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.is-style-inked-band .rb-show__when {
	color: var(--wp--preset--color--brass-light, #c79437);
}

.is-style-press-band .rb-show__when {
	color: var(--wp--preset--color--page, #e7e4d8);
}

.rb-show__venue {
	font-family: var(--wp--preset--font-family--wood, sans-serif);
	font-size: clamp(1.5rem, 3.2vw, 2.15rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transition: color 0.14s ease;
}

a.rb-show:hover .rb-show__venue,
a.rb-show:focus .rb-show__venue {
	color: var(--wp--preset--color--oxblood, #7e2418);
}

.rb-show__tag {
	border: 1px solid currentcolor;
	color: var(--wp--preset--color--oxblood, #7e2418);
	display: inline-block;
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-left: 0.5rem;
	padding: 0.12em 0.5em;
	text-transform: uppercase;
	vertical-align: 0.22em;
}

/* Quiet measures 3.79:1 on bone stock; soft ink is the same muted register at
   8.11:1, and lifts to rule on a dark ground where soft ink would be 1.75:1. */
.rb-show__where {
	color: var(--wp--preset--color--ink-soft, #3d4237);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.9rem;
	grid-column: 1 / -1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-inked-band .rb-show__where,
.is-style-press-band .rb-show__where {
	color: var(--wp--preset--color--rule, #b9b5a4);
}

@media (min-width: 760px) {

	.rb-show__where {
		grid-column: auto;
		text-align: right;
	}
}

/* The separator is decoration between two escaped strings, so it is drawn in
   CSS and hidden from assistive technology rather than injected as content. */
.rb-show__sep::before {
	content: "\00B7";
	padding-inline: 0.5em;
}

.rb-shows__empty {
	border-bottom: 1px solid var(--wp--preset--color--rule, #b9b5a4);
	font-size: 1.05rem;
	padding-block: 1.5rem;
}

/* -------------------------------------------------- Line-up */

/*
 * The block resolves the column count from how many people are in the group and
 * emits it as a class. Capping the grid is what stops a group of one from
 * stretching a single portrait across the page.
 */
.rb-lineup {
	background: var(--wp--preset--color--rule, #b9b5a4);
	border: 1px solid var(--wp--preset--color--rule, #b9b5a4);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, 1fr);
	max-width: 540px;
}

.rb-lineup--cols-1 {
	grid-template-columns: 1fr;
	max-width: 270px;
}

@media (min-width: 620px) {

	.rb-lineup--cols-2 {
		grid-template-columns: repeat(2, 1fr);
		max-width: 540px;
	}

	.rb-lineup--cols-3 {
		grid-template-columns: repeat(3, 1fr);
		max-width: 810px;
	}

	.rb-lineup--cols-4 {
		grid-template-columns: repeat(4, 1fr);
		max-width: 1080px;
	}

	.rb-lineup--cols-5 {
		grid-template-columns: repeat(5, 1fr);
		max-width: none;
	}

	.rb-lineup--cols-6 {
		grid-template-columns: repeat(6, 1fr);
		max-width: none;
	}
}

.rb-player {
	align-content: start;
	background: var(--wp--preset--color--page, #e7e4d8);
	display: grid;
	gap: 0.5rem;
	padding-bottom: 1rem;
	text-align: center;
}

/* The portrait sits on brass and prints as a single ink over it, which is what
   a two-colour press would actually produce from a photograph. */
.rb-player__pic {
	aspect-ratio: 3 / 4;
	background: var(--wp--preset--color--brass, #a9761c);
	display: grid;
	isolation: isolate;
	overflow: hidden;
	place-items: end center;
}

.rb-player__pic img {
	filter: grayscale(1) contrast(1) brightness(1.45);
	height: 100%;
	mix-blend-mode: multiply;
	object-fit: cover;
	object-position: 50% 20%;
	width: 100%;
}

.rb-player__name {
	font-family: var(--wp--preset--font-family--wood, sans-serif);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 0.95;
	padding-inline: 0.5rem;
	text-transform: uppercase;
}

.rb-player__name a {
	color: inherit;
	text-decoration: none;
}

.rb-player__name a:hover,
.rb-player__name a:focus {
	color: var(--wp--preset--color--oxblood, #7e2418);
	text-decoration: underline;
}

/*
 * Soft ink rather than quiet. These labels sit on bone stock at 12px, where
 * quiet measures 3.79:1 and fails AA for small text; soft ink is the same
 * muted register and measures 8.11:1. The card is never on a dark ground, so
 * no inked-band override is needed here.
 */
.rb-player__role,
.rb-player__years,
.rb-player__memoriam {
	color: var(--wp--preset--color--ink-soft, #3d4237);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	padding-inline: 0.5rem;
	text-transform: uppercase;
}

.rb-player__memoriam {
	color: var(--wp--preset--color--oxblood, #7e2418);
}

.rb-player--memoriam .rb-player__pic {
	background: var(--wp--preset--color--quiet, #6e7466);
}

/* -------------------------------------------------- Performance videos */

/*
 * Clips are billed the way the shows are: a rule, the venue in wood type, the
 * date and town in condensed caps underneath. Rules use currentcolor so
 * a bill reads correctly on bone stock and on an inked band without the block
 * having to know which one it landed on.
 */
.rb-videos__bill {
	border-top: 5px solid currentcolor;
	margin-top: var(--wp--preset--spacing--50, 3rem);
	padding-top: 0.9rem;
	text-align: center;
}

.rb-videos__bill:first-child {
	margin-top: 0;
}

.rb-videos__where {
	font-family: var(--wp--preset--font-family--wood, sans-serif);
	font-size: clamp(1.4rem, 2.8vw, 1.95rem);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

/*
 * Oxblood on bone stock, brass-light on ink. Brass is the accent the rest
 * of the bill uses, but it measures 3.11:1 on bone stock at small text,
 * so it would fail AA on the light ground. These two are the warm palette
 * entries that clear 4.5:1 on the ground each one actually lands on: 7.66:1 and
 * 6.66:1 respectively.
 */
.rb-videos__when {
	color: var(--wp--preset--color--oxblood, #7e2418);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0.3rem 0 0;
	text-transform: uppercase;
}

.is-style-inked-band .rb-videos__when {
	color: var(--wp--preset--color--brass-light, #c79437);
}

.is-style-press-band .rb-videos__when {
	color: var(--wp--preset--color--page, #e7e4d8);
}

/* Decoration between two escaped strings: drawn, not injected. */
.rb-videos__sep::before {
	content: "\00B7";
	padding-inline: 0.5em;
}

/*
 * Flex rather than grid, for one reason: a bill with fewer clips than there are
 * columns. A grid row always starts at the left, so a two-clip bill sitting
 * under a three-clip one was pulled hard left with a dead cell beside it. Flex
 * lets the short row centre itself under the full one while every card keeps
 * exactly the same width, which a narrower grid for the short bill would not.
 */
.rb-videos__grid {
	--rb-gap: var(--wp--preset--spacing--30, 1.25rem);

	display: flex;
	flex-wrap: wrap;
	gap: var(--rb-gap);
	justify-content: center;
	list-style: none;
	margin: var(--rb-gap) 0 0;
	padding: 0;
}

.rb-video {
	display: grid;
	flex: 0 1 100%;
	gap: 0.55rem;
	text-align: center;
}

@media (min-width: 700px) {

	.rb-videos--cols-2 .rb-video {
		flex-basis: calc((100% - var(--rb-gap)) / 2);
	}

	.rb-videos--cols-3 .rb-video {
		flex-basis: calc((100% - 2 * var(--rb-gap)) / 3);
	}

	.rb-videos--cols-4 .rb-video {
		flex-basis: calc((100% - 3 * var(--rb-gap)) / 4);
	}
}

/*
 * The poster and the player occupy the same box, so swapping one for the other
 * on click does not move anything below it down the page.
 */
.rb-video__play,
.rb-video__frame {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
}

.rb-video__play {
	background: var(--wp--preset--color--ink, #14170f);
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.rb-video__frame {
	border: 0;
}

.rb-video__thumb {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.16s ease;
	width: 100%;
}

/*
 * A pressed brass block with the play triangle knocked out of it. Square edges,
 * because nothing else on this site is rounded.
 */
.rb-video__cue {
	background: var(--wp--preset--color--brass, #a9761c);
	height: 3rem;
	inset: auto auto 0 0;
	position: absolute;
	transition: background-color 0.16s ease;
	width: 4.25rem;
}

.rb-video__cue::before {
	border-bottom: 0.62rem solid transparent;
	border-left: 1.05rem solid var(--wp--preset--color--ink, #14170f);
	border-top: 0.62rem solid transparent;
	content: "";
	inset: 50% auto auto 50%;
	position: absolute;
	transform: translate(-40%, -50%);
}

.rb-video__play:hover .rb-video__cue,
.rb-video__play:focus-visible .rb-video__cue {
	background: var(--wp--preset--color--oxblood, #7e2418);
}

.rb-video__play:hover .rb-video__cue::before,
.rb-video__play:focus-visible .rb-video__cue::before {
	border-left-color: var(--wp--preset--color--page, #e7e4d8);
}

.rb-video__play:hover .rb-video__thumb {
	opacity: 0.82;
}

.rb-video__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--brass-light, #c79437);
	outline-offset: 3px;
}

.rb-video__song {
	font-family: var(--wp--preset--font-family--wood, sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 0.98;
	margin: 0;
	text-transform: uppercase;
}

.rb-video__by {
	color: var(--wp--preset--color--ink-soft, #3d4237);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

/* Soft ink reads at 1.75:1 on an inked band, so it lifts to rule at 8.81:1. */
.is-style-inked-band .rb-video__by,
.is-style-press-band .rb-video__by {
	color: var(--wp--preset--color--rule, #b9b5a4);
}

/* -------------------------------------------------- Show details */

.rb-details__list {
	border-top: 1px solid var(--wp--preset--color--rule, #b9b5a4);
	display: grid;
	margin: 0;
}

.rb-details__row {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--rule, #b9b5a4);
	display: grid;
	gap: 0.15rem 1.5rem;
	grid-template-columns: 1fr;
	padding-block: 0.85rem;
}

@media (min-width: 560px) {

	.rb-details__row {
		grid-template-columns: 9rem 1fr;
	}
}

/* Soft ink at 8.11:1, for the same reason as the show meta line above. */
.rb-details__row dt {
	color: var(--wp--preset--color--ink-soft, #3d4237);
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.rb-details__row dd {
	font-size: 1.05rem;
	margin: 0;
}

.rb-details__actions {
	margin-top: var(--wp--preset--spacing--30, 1rem);
}

.rb-details__map {
	background: var(--wp--preset--color--brass, #a9761c);
	color: var(--wp--preset--color--ink, #14170f);
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--condensed, sans-serif);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	min-height: 44px;
	padding: 0.75rem 1.35rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.rb-details__map:hover,
.rb-details__map:focus {
	background: var(--wp--preset--color--oxblood, #7e2418);
	color: var(--wp--preset--color--page, #e7e4d8);
}