/*
 * PB Band Theme: the few things theme.json cannot say.
 * Colours and fonts come from theme.json (and the chosen style variation) through the --wp--preset--* variables.
 */

/* Header, footer and content sit directly against each other; sections add their own spacing. */
:root :where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- header ---- */
.pbb-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Over a photo header (the "Band page" template): transparent, white text. It stays in view and its dark background
   fades in as the page scrolls (header.js sets --pbb-fade from 0 to 1). It is dark in every style, so white text always reads. */
.pbb-header.is-overlay {
	--pbb-fade: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	border-bottom-color: transparent;
}
.pbb-header.is-overlay .wp-block-site-title a,
.pbb-header.is-overlay .wp-block-navigation__container a,
.pbb-header.is-overlay .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--on-photo);
}
/* the open phone menu is a panel of its own, with the page's colours */
.pbb-header.is-overlay .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--heading);
}
@supports (background: color-mix(in srgb, red calc(1 * 50%), transparent)) {
	.pbb-header.is-overlay {
		background: color-mix(in srgb, var(--wp--preset--color--bar) calc(var(--pbb-fade) * 92%), transparent);
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--line) calc(var(--pbb-fade) * 100%), transparent);
	}
}
/* without color-mix the bar simply turns solid once scrolled */
@supports not (background: color-mix(in srgb, red calc(1 * 50%), transparent)) {
	body.pbb-scrolled .pbb-header.is-overlay {
		background: var(--wp--preset--color--bar);
		border-bottom-color: var(--wp--preset--color--line);
	}
}
body.pbb-scrolled .pbb-header.is-overlay {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
/* below the WordPress admin bar when you are logged in (it is 32px, or 46px on phones, and scrolls away under 600px) */
body.admin-bar .pbb-header.is-overlay {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .pbb-header.is-overlay {
		top: 46px;
	}
}
@media (max-width: 600px) {
	body.admin-bar.pbb-scrolled .pbb-header.is-overlay {
		top: 0;
	}
}

/* In the Site Editor the template has no photo behind the floating header, so it would sit on top of the content.
   There it is shown as an ordinary bar at the top (the page itself is unchanged). */
.editor-styles-wrapper .pbb-header.is-overlay {
	position: relative;
	top: auto;
	background: var(--wp--preset--color--bar);
	border-bottom-color: var(--wp--preset--color--line);
}

/* ---- sections (patterns) ---- */
.pbb-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.pbb-lead {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
}
.pbb-card {
	height: 100%;
}
.wp-block-columns .wp-block-column > .pbb-card {
	box-sizing: border-box;
}
.pbb-hero {
	text-align: left;
}
/* hero text may use the wide width (the 720px text column is too narrow for a big band name) and never breaks a word */
.pbb-hero > .wp-block-cover__inner-container > * {
	max-width: var(--wp--style--global--wide-size, 1120px);
}
.pbb-hero h1 {
	overflow-wrap: normal;
	word-break: normal;
}
/* the big band name gets more room than the other hero text, so a long name stays on one line on a wide screen */
.pbb-hero > .wp-block-cover__inner-container > h1 {
	max-width: min(1500px, 100%);
}
.pbb-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
	margin: 0 0 1rem;
}
.pbb-hero--page h1 {
	font-size: var(--wp--preset--font-size--title);
}
.pbb-hero--page {
	padding-top: 7rem;
	padding-bottom: 3rem;
}
@media (max-width: 781px) {
	.pbb-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Editor only: the page title box WordPress shows above a page whose template has no title block, kept small and quiet. */
.edit-post-visual-editor__post-title-wrapper,
.editor-visual-editor__post-title-wrapper {
	margin-top: 1rem !important;
	margin-bottom: 0.5rem !important;
	max-width: none !important;
}
.edit-post-visual-editor__post-title-wrapper .wp-block-post-title,
.editor-visual-editor__post-title-wrapper .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0.7;
}

/* tracklist and audio */
.wp-block-audio audio {
	width: 100%;
}
.pbb-card .wp-block-audio {
	margin: 0.75rem 0 0;
}
.pbb-stat {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.4rem;
}
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table td {
	padding: 0.7rem 0.4rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* a two-column table with a short last column (a tracklist: title and length) */
.wp-block-table td:last-child:nth-child(2) {
	text-align: right;
	white-space: nowrap;
	width: 6rem;
}
.wp-block-table th {
	padding: 0.7rem 0.4rem;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--accent);
}
.pbb-hero--album .wp-block-image img {
	border-radius: 8px;
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8);
}

/* Separator style "Accent rule": a short gradient bar under a heading (left-aligned; centred after a centred heading). */
.wp-block-separator.is-style-accent-rule {
	width: 64px;
	max-width: 64px;
	height: 3px;
	margin: 0.35rem 0 1.6rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--gradient--accent);
	color: transparent;
}
.has-text-align-center + .wp-block-separator.is-style-accent-rule {
	margin-inline: auto;
}
/* Inside a section (a constrained Group) WordPress puts auto side margins on every child with !important, which centred the bar while the heading stayed left. Line the bar up with the left edge of the text column instead. */
.is-layout-constrained > .wp-block-separator.is-style-accent-rule {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 720px)) / 2)) !important;
	margin-right: auto !important;
}
.is-layout-constrained > .has-text-align-center + .wp-block-separator.is-style-accent-rule {
	margin-left: auto !important;
}

/* Scrolling ticker: one line of phrases, repeated twice in the text so the loop is seamless. Edit the text in the editor. */
.pbb-ticker { overflow: hidden; padding-block: 0.9rem; }
.pbb-ticker .pbb-ticker__track {
	display: inline-block; margin: 0; white-space: nowrap; max-width: none;
	font-size: 0.875rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
	animation: pbb-tick 40s linear infinite;
}
@keyframes pbb-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pbb-ticker .pbb-ticker__track { animation: none; white-space: normal; } }
.editor-styles-wrapper .pbb-ticker .pbb-ticker__track { animation: none; white-space: normal; }

/* Header photo zoom (Cover "Photo size"). The edges show the cover's own background when zoomed out. */
.wp-block-cover { --pbb-zoom: 1; }
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > video.wp-block-cover__video-background { scale: var(--pbb-zoom, 1); }

/* Band member cards: a big faint number at the top of each card (counted automatically, so adding a member needs no extra work). */
.pbb-members { counter-reset: pbb-member; }
.pbb-members > .pbb-card { counter-increment: pbb-member; position: relative; overflow: hidden; }
.pbb-members > .pbb-card::before {
	content: counter(pbb-member, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.5rem;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

/* Navigation: hover and current-page styles, and the menu collapses to the button below 900px (core's own switch is 600px). */
.wp-block-navigation .wp-block-navigation-item__content { transition: color .2s, box-shadow .2s; padding-block: 0.35rem; }
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent);
}
.pbb-header.is-overlay .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.pbb-header.is-overlay .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-photo);
}
@media (min-width: 600px) and (max-width: 899px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.pbb-social { gap: 0.6rem; }
.pbb-header.is-overlay .wp-block-social-links .wp-social-link { color: var(--wp--preset--color--on-photo); }

/* Cover colour tint (set in the Cover's sidebar). Sits under the shade and the text. */
.wp-block-cover.pbb-has-tint::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--pbb-tint);
	opacity: var(--pbb-tint-o, 0.35);
	pointer-events: none;
}

/* Cover style "Scroll arrow": a marker at the bottom centre to show there is more below. Shape, size, colour and bounce are set in the Cover's sidebar. */
.wp-block-cover.is-style-scroll-cue::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 2.5rem;
	width: var(--pbb-cue-size, 28px);
	height: var(--pbb-cue-size, 28px);
	margin-left: calc(var(--pbb-cue-size, 28px) / -2);
	background: var(--pbb-cue-color, var(--wp--preset--color--on-photo, #fff));
	-webkit-mask: var(--pbb-cue-shape) center / contain no-repeat;
	mask: var(--pbb-cue-shape) center / contain no-repeat;
	--pbb-cue-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l8 8 8-8'/%3E%3C/svg%3E");
	opacity: 0.9;
	animation: pbb-cue 1.8s ease-in-out infinite;
	pointer-events: none;
}
.wp-block-cover.pbb-cue-double::after { --pbb-cue-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5l8 7 8-7M4 13l8 7 8-7'/%3E%3C/svg%3E"); }
.wp-block-cover.pbb-cue-arrow::after { --pbb-cue-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v17M5 13l7 7 7-7'/%3E%3C/svg%3E"); }
.wp-block-cover.pbb-cue-circle::after { --pbb-cue-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Cpath d='M7.5 10.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); }
@keyframes pbb-cue { 50% { transform: translateY(0.5rem); opacity: 0.45; } }
.wp-block-cover.pbb-cue-still::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .wp-block-cover.is-style-scroll-cue::after { animation: none; } }
.editor-styles-wrapper .wp-block-cover.is-style-scroll-cue::after { animation: none; }
/* A full-height cover is measured against the visible screen (phone address bars make plain 100vh taller than it), so the arrow is not pushed below the fold. */
.wp-block-cover.is-style-scroll-cue[style*="min-height:100vh"] { min-height: 100svh !important; }

/* List style "Timeline": dated entries on a vertical line with a dot each. Write the date in bold, then a line break, then the text. */
.wp-block-list.is-style-timeline { position: relative; margin: 0; padding: 0 0 0 36px; list-style: none; }
.wp-block-list.is-style-timeline li { position: relative; margin: 0; padding: 0 0 1.9rem; list-style: none; }
.wp-block-list.is-style-timeline li:last-child { padding-bottom: 0; }
.wp-block-list.is-style-timeline li::before {
	content: ""; position: absolute; box-sizing: border-box; left: -36px; top: 0.4rem; width: 18px; height: 18px; border-radius: 50%;
	background: var(--wp--preset--color--base); border: 3px solid var(--wp--preset--color--accent); z-index: 1;
}
.wp-block-list.is-style-timeline li::after {
	content: ""; position: absolute; box-sizing: border-box; left: -28px; top: 1.5rem; bottom: -0.4rem; width: 2px;
	background: linear-gradient(to bottom, var(--wp--preset--color--accent), color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent));
}
.wp-block-list.is-style-timeline li:last-child::after { display: none; }
.wp-block-list.is-style-timeline li strong {
	display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; line-height: 1.2; font-weight: 800; color: var(--wp--preset--color--heading);
}

/* ---- About page sections ---- */
/* List style "Chips": short items as rounded pills. */
.wp-block-list.is-style-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.wp-block-list.is-style-chips li {
	margin: 0; padding: 0.45rem 1rem; list-style: none; font-size: 0.9rem;
	border: 1px solid var(--wp--preset--color--line); border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--heading);
}
/* A panel with an accent bar down its left edge (latest album, highlights). */
.pbb-accent-panel {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
}
.pbb-accent-panel .pbb-cover-art img { border-radius: 6px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8); width: 100%; }
.pbb-callout h3 { margin-top: 0; }
/* Large italic quotes with a small caps attribution. */
.wp-block-quote.pbb-bigquote { margin: 0; padding: 0; border: 0; }
.wp-block-quote.pbb-bigquote p { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.5; color: var(--wp--preset--color--heading); }
.wp-block-quote.pbb-bigquote cite {
	display: block; margin-top: 1.2rem; font-style: normal; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--accent);
}
/* A pull quote inside a profile. */
.wp-block-quote.pbb-pullquote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border: 0; border-left: 3px solid var(--wp--preset--color--accent); }
.wp-block-quote.pbb-pullquote p { font-family: var(--wp--preset--font-family--serif); font-style: italic; }
/* Gear panel: a titled list with accent bullets. */
.pbb-gear { border: 1px solid var(--wp--preset--color--line); border-radius: 8px; }
.pbb-gear .pbb-eyebrow { margin-bottom: 0.5rem; }
.wp-block-list.pbb-gear-list { margin: 0; padding: 0; list-style: none; }
.wp-block-list.pbb-gear-list li { position: relative; margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.95rem; list-style: none; }
.wp-block-list.pbb-gear-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--wp--preset--color--accent); border-radius: 1px; }
.pbb-bio-photo img { width: 100%; border-radius: 8px; }
/* The member's initial, large and faint over the lower-left corner of the photo. It uses the serif (as the plugin's does),
   upright rather than italic (an italic J overhangs), and the line box is tall enough for letters that drop below the line.
   The picture clips anything that would still reach past its edge. */
.pbb-bio-photo { position: relative; overflow: hidden; border-radius: 8px; }
.pbb-bio-photo[data-initial]::after {
	content: attr(data-initial); position: absolute; left: 0.14em; bottom: 0.06em; z-index: 1; pointer-events: none;
	font-family: var(--wp--preset--font-family--serif); font-style: normal; font-weight: 800; font-size: clamp(4.5rem, 11vw, 8rem); line-height: 1.25;
	color: var(--wp--preset--color--accent); opacity: 0.55; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Big call to action: a soft accent glow at the top (over any photo behind it), a very large heading with one emphasised phrase.
   It is a Cover, so a photo can be added and faded with the Cover's overlay strength; the glow stays on top. */
.pbb-cta-big { text-align: center; border-top: 1px solid var(--wp--preset--color--line); }
.pbb-cta-big::after, .wp-block-cover.pbb-cta-big::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--wp--preset--color--accent-2) 35%, transparent), transparent 65%);
}
.wp-block-cover.pbb-cta-big::after { content: none; }
.wp-block-cover.pbb-cta-big::before { z-index: 2; }
.wp-block-cover.pbb-cta-big > .wp-block-cover__inner-container { position: relative; z-index: 3; }
.wp-block-group.pbb-cta-big::after { z-index: 0; }
.pbb-cta-big h2 { font-size: clamp(2.5rem, 7vw, 5.75rem); line-height: 1.05; max-width: 900px; margin-inline: auto; }
.pbb-cta-big h2 em { color: var(--wp--preset--color--accent); }
.pbb-cta-big p.has-lead-font-size { max-width: 560px; margin: 0 auto 2.4rem; }

/* Group style "Watermark image": the group's colour is laid back over its background image at the chosen strength. */
.wp-block-group.is-style-watermark { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.wp-block-group.is-style-watermark::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-color: var(--wp--preset--color--base-alt); background-color: inherit; opacity: var(--pbb-wm, 0.85);
}
.wp-block-group.is-style-watermark > * { position: relative; z-index: 1; }
.wp-block-group.pbb-cta-big { position: relative; }
.wp-block-group.pbb-cta-big > * { position: relative; z-index: 1; }

/* Social icons drawn from the band's links (PB Band Pages): same colour as the core icons, and a tidy list if the plugin's own stylesheet has not loaded yet. */
.pbb-social--auto { color: var(--wp--preset--color--heading); }
.pbb-social--auto .pbbp-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pbb-social--auto .pbbp-social--right { justify-content: flex-end; }
.pbb-social--auto .pbbp-social--center { justify-content: center; }
.pbb-header.is-overlay .pbb-social--auto { color: var(--wp--preset--color--on-photo); }

/* Alternative section designs (0.13.0) */

/* Hero, left: text sits bottom-left of the photo, in the wide column, with a readable line length. */
.pbb-hero--left { padding-bottom: 5rem; }
.pbb-hero--left > .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--wide-size, 1120px); margin-inline: auto; }
.pbb-hero--left .wp-block-cover__inner-container > p.has-lead-font-size { max-width: 40rem; margin-left: 0 !important; margin-right: auto !important; }

/* Hero, split: text panel on one side, photo filling the other. Stacks on a phone with the photo first. */
.pbb-hero--split { min-height: 90vh; }
.pbb-hero--split .wp-block-media-text__content { padding: 7rem 8% 4rem; }
.pbb-hero--split .wp-block-media-text__media { min-height: 22rem; height: 100%; }
.pbb-hero--split .wp-block-media-text__media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
.pbb-hero--split h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 600px) {
	.pbb-hero--split .wp-block-media-text__content { padding: 3rem 1.25rem; }
	.pbb-hero--split .wp-block-media-text__media { order: -1; }
}

/* Call to action, bar: one slim band, words left and button right. */
.pbb-cta-bar { border-block: 1px solid var(--wp--preset--color--line); }
.pbb-cta-bar h2 { font-size: var(--wp--preset--font-size--title); line-height: 1.1; margin: 0 0 0.5rem; }
.pbb-cta-bar p:last-child { margin-bottom: 0; }
@media (max-width: 781px) { .pbb-cta-bar .wp-block-buttons { justify-content: flex-start; } }

/* Call to action, panel: a rounded block in the accent colour; text and button use "Text on accent". */
.pbb-cta-panel h2 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; margin: 0 0 0.75rem; }
.pbb-cta-panel p.has-lead-font-size { margin: 0 auto 2rem; }
.pbb-cta-panel .wp-block-button__link:hover { opacity: 0.88; }

/* Members, portrait row and compact list. */
.pbb-members--portrait .pbb-member > * { margin-block-start: 0; }
.pbb-members--portrait .pbb-member h3 { margin: 1rem 0 0.25rem; }
.pbb-members--portrait .pbb-member .pbb-eyebrow { margin-bottom: 0.5rem; }
.pbb-members--list { margin-inline: 0; }
.pbb-member-row:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.pbb-member-row h3 { margin: 0 0 0.2rem; }
.pbb-member-row p { margin: 0; }
.pbb-member-row .pbb-eyebrow { margin: 0; }

/* Intro, centred statement: the big serif line is the heading. */
.pbb-statement { line-height: 1.25; margin: 0.5rem 0 0; }

/* Media & Text overlay styles: a tint laid over the photo. Pick under Styles; "Default" has no overlay.
   Colours: page colour (base-alt), sepia, black, accent. Strengths: soft, medium, strong. */
.wp-block-media-text[class*="is-style-overlay-"] .wp-block-media-text__media { position: relative; }
.wp-block-media-text[class*="is-style-overlay-"] .wp-block-media-text__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--pbb-tint, var(--wp--preset--color--base-alt)); opacity: var(--pbb-tint-a, 0.25);
}
/* strength */
.wp-block-media-text.is-style-overlay-medium, .wp-block-media-text.is-style-overlay-sepia-medium,
.wp-block-media-text.is-style-overlay-black-medium, .wp-block-media-text.is-style-overlay-accent-medium { --pbb-tint-a: 0.45; }
.wp-block-media-text.is-style-overlay-strong, .wp-block-media-text.is-style-overlay-sepia-strong,
.wp-block-media-text.is-style-overlay-black-strong, .wp-block-media-text.is-style-overlay-accent-strong { --pbb-tint-a: 0.65; }
/* colour */
.wp-block-media-text.is-style-overlay-black-soft, .wp-block-media-text.is-style-overlay-black-medium, .wp-block-media-text.is-style-overlay-black-strong { --pbb-tint: #000; }
.wp-block-media-text.is-style-overlay-accent-soft, .wp-block-media-text.is-style-overlay-accent-medium, .wp-block-media-text.is-style-overlay-accent-strong { --pbb-tint: var(--wp--preset--color--accent); }
/* sepia: the photo itself is turned brown-toned, then a warm brown is laid over it */
.wp-block-media-text.is-style-overlay-sepia-soft, .wp-block-media-text.is-style-overlay-sepia-medium, .wp-block-media-text.is-style-overlay-sepia-strong { --pbb-tint: #6b4423; --pbb-tint-a: 0.15; }
.wp-block-media-text.is-style-overlay-sepia-medium { --pbb-tint-a: 0.25; }
.wp-block-media-text.is-style-overlay-sepia-strong { --pbb-tint-a: 0.35; }
.wp-block-media-text.is-style-overlay-sepia-soft .wp-block-media-text__media :is(img, video) { filter: sepia(0.6); }
.wp-block-media-text.is-style-overlay-sepia-medium .wp-block-media-text__media :is(img, video) { filter: sepia(0.8); }
.wp-block-media-text.is-style-overlay-sepia-strong .wp-block-media-text__media :is(img, video) { filter: sepia(1); }

/* Showreel: a wide YouTube/Vimeo video under a left-aligned heading. The embed keeps its 16:9 shape; the corners match the cards. */
.pbb-showreel__video iframe { border-radius: 8px; }