/*
 * ── The tip jar, as its own stylesheet ───────────────────────────────────────
 *
 * These rules lived in public.css, which is enqueued on event pages. The block
 * itself renders on Monster profile pages, from MPR_Monster_Page -- and those
 * pages load monster-page.css and monster-profiles.css, neither of which has a
 * single .mpr-tips rule in it.
 *
 * So on the page where somebody actually tips a performer, the block was
 * completely unstyled: the QR drew at the SVG's natural size and the two labels
 * sat inline beside it, running into the code. Reported from a phone, and the
 * screenshot is unambiguous.
 *
 * The lesson is the one this codebase keeps relearning: markup and the CSS that
 * makes it work have to travel together. So the component enqueues this itself,
 * on whatever page it renders, and it cannot come apart again.
 *
 * A QR code is read by a camera pointed at a phone screen from a few feet away
 * in a dark room, so it is given real size and a white card under it. A code
 * inverted to suit a dark page, or shrunk to fit a layout, is a code that does
 * not scan -- and nobody tells you, they just give up.
 */

/*
 * No hairline above it either -- it sits in the same run of full-width
 * sections as Music, Gallery and the rest, so it takes the same 48px padding
 * they use instead of the smaller margin-plus-border it needed when the line
 * was doing part of the separating.
 */
.mpr-tips {
	padding: 48px 0;
}

.mpr-tips-title { margin: 0 0 6px; padding-bottom: 0; }
.mpr-tips-intro { margin: 0 0 20px; padding-bottom: 0; max-width: 52ch; }

/*
 * Grid, not flex-wrap. Two codes sit side by side where there is room and drop
 * to one column where there is not, and each keeps a fixed 160px track so a
 * code is never squeezed below scanning size to make a row fit.
 */
/*
 * Flex, not grid.
 *
 * `repeat( auto-fit, minmax( 160px, max-content ) )` measured on the live page
 * as `160px 0px 0px 0px 0px`: five tracks declared, four of them collapsed to
 * nothing. auto-fit with a max-content maximum has no width to fit against, so
 * it invents tracks and then starves them. Two tip jars in a row is a row of
 * two things -- flex does that without being asked.
 */
.mpr-tips-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

.mpr-tip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 200px;
}

.mpr-tip .mpr-qr {
	display: block;
	/* Fixed, because the SVG has no intrinsic size worth trusting: unstyled it
	   drew at roughly twice this and pushed the label off the side. */
	width: 132px;
	height: 132px;
	/* The quiet zone is drawn into the SVG, so the white ends where the code's
	   own margin ends and no extra padding is needed here. */
	background: #ffffff;
}

.mpr-tip-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	/* 44px of target: this is tapped on a phone, one-handed, in the dark. */
	min-height: 44px;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

/* The provider's mark, where one has been supplied. Capped by height rather
   than width so Venmo's wide wordmark and Cash App's square mark sit on the
   same optical line. */
.mpr-tip-logo {
	display: block;
	height: 22px;
	width: auto;
	max-width: 140px;
}

.mpr-tip-where {
	font-weight: 700;
	line-height: 1.2;
}

.mpr-tip-handle {
	font-size: var( --mpr-t-small, .88rem );
	opacity: .75;
	line-height: 1.3;
	/* break-all put "Brook-Lockhart" across two lines mid-word. A handle breaks
	   at its own punctuation or not at all. */
	overflow-wrap: anywhere;
}

@media ( max-width: 420px ) {
	.mpr-tips-grid { flex-direction: column; }
	.mpr-tip { max-width: none; }
}

/*
 * ── The button under the code ───────────────────────────────────────────────
 *
 * A QR code is the right answer for somebody four feet away in a dark room and
 * a useless one for somebody reading this on the phone they would scan it with
 * -- which is most people, because a profile page is read on a phone.
 *
 * So both. The handle link above it is real and always was, but small grey type
 * does not read as a control, and a thing that does not look pressable does not
 * get pressed.
 */
.mpr-tip-go {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0;
	padding: 11px 14px;
	min-height: 44px;
	background: var( --mpr-accent, #ED2124 );
	color: #FFFFFF;
	border-radius: 0;
	font-family: var( --mpr-font-body, sans-serif );
	font-size: var( --mpr-t-small, .88rem );
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.mpr-tip-go:hover,
.mpr-tip-go:focus-visible {
	background: #FFFFFF;
	color: #000000;
}

/*
 * On a phone the code is the part that cannot be used, so it steps back and the
 * button leads. It is not hidden: somebody reading on a phone may well be
 * showing the screen to the person beside them.
 */
@media ( max-width: 640px ) {
	.mpr-tip .mpr-qr {
		width: 104px;
		height: 104px;
	}
}