/* ==========================================================================
   Oliver Promo Grid — v1.0.2  (forked from LDM Promo Grid 1.0.4)
   Popup Maker card grid: shop banner, 2 × 2 artwork, captions below.
   Tweak the custom properties below rather than the rules.
   ========================================================================== */

.orpg {
	--orpg-accent: #4f86e8;             /* OLIVESongs blue: hover, glow, focus ring */
	--orpg-panel-radius: 24px;
	--orpg-card-radius: 14px;
	--orpg-gap: clamp(10px, 1.8vw, 18px);
	--orpg-cols: 2;                      /* set per-popup by the shortcode */
	--orpg-cols-mobile: 2;
	--orpg-zoom: 1.05;
	--orpg-lift: -4px;
	--orpg-ease: cubic-bezier(.2, .7, .2, 1);
	--orpg-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--orpg-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--orpg-condensed: "Oswald", "Bebas Neue", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(18px, 2.4vw, 26px);
	border-radius: var(--orpg-panel-radius);
	color: #fff;
	font-family: var(--orpg-sans);
	background:
		radial-gradient(110% 70% at 100% 0%, rgba(79, 134, 232, .14), transparent 60%),
		linear-gradient(160deg, rgba(30, 32, 38, .9), rgba(8, 9, 12, .94));
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .07),
		0 40px 100px -30px rgba(0, 0, 0, .85);
	animation: orpg-in .55s var(--orpg-ease) both;
}
/* Two columns of square art + captions are tall: size the panel from the
   screen height too, so 2 × 2 fits a laptop screen without scrolling. */
.orpg--cols-2 { max-width: clamp(460px, calc(122vh - 580px), 820px); }
.orpg--cols-2.orpg--no-head { max-width: clamp(460px, calc(122vh - 480px), 820px); }   /* ~80px shorter without the heading */

.orpg *,
.orpg *::before,
.orpg *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.orpg__head {
	text-align: center;
	margin: 0 48px clamp(12px, 1.6vw, 18px);
}
.orpg__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.orpg__eyebrow::before,
.orpg__eyebrow::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	margin: 0 12px;
	vertical-align: middle;
	background: currentColor;
	opacity: .6;
}
.orpg__title {
	margin: 0;
	font-family: var(--orpg-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

/* ---------- Close button ---------- */
.orpg__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	transition: background .25s, color .25s, transform .4s var(--orpg-ease);
}
.orpg__close svg { width: 16px; height: 16px; display: block; }
.orpg__close:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: rotate(90deg); }
.orpg__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Shop banner ---------- */
.orpg .orpg__shop {
	position: relative;
	display: grid;
	/* logo over text on the left (a lockup), button on the right */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "logo cta" "text cta";
	align-items: center;
	column-gap: clamp(12px, 2.4vw, 24px);
	row-gap: 7px;
	margin: 0 0 var(--orpg-gap);
	padding: 12px 12px 12px clamp(16px, 2.4vw, 22px);
	border-radius: var(--orpg-card-radius);
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important;
	background:
		/* five faint staff lines — a nod to sheet music */
		repeating-linear-gradient(to bottom, rgba(255, 255, 255, .055) 0 1px, transparent 1px 8px)
			center / 100% 33px no-repeat,
		linear-gradient(100deg, rgba(255, 255, 255, .07), rgba(79, 134, 232, .16));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
	transition: box-shadow .4s var(--orpg-ease), transform .4s var(--orpg-ease);
	animation: orpg-card-in .6s var(--orpg-ease) both;
	animation-delay: 80ms;
}
.orpg--shop-bottom .orpg__shop { margin: var(--orpg-gap) 0 0; }
.orpg__shop-logo { grid-area: logo; display: flex; align-items: center; line-height: 1; min-width: 0; }
/* !important + extra specificity: themes and Popup Maker set img { height: auto },
   which let the width/height attributes blow the logo up to full size */
.orpg .orpg__shop img.orpg__shop-img {
	display: block;
	height: 28px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0;
}
.orpg__wordmark {
	font-family: var(--orpg-condensed);
	font-size: 26px;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
}
.orpg__wordmark b { font-weight: 600; color: #fff; }
.orpg__wordmark span { font-weight: 300; color: #9a9a9a; }
.orpg__shop-text {
	grid-area: text;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .72);
}
.orpg__shop-cta {
	grid-area: cta;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--orpg-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	box-shadow: 0 8px 22px -10px var(--orpg-accent);
	transition: background .3s, box-shadow .3s;
}
.orpg__shop-cta svg { width: 14px; height: 14px; transition: transform .35s var(--orpg-ease); }
.orpg__shop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* No heading: banner and close button share the top row */
.orpg__top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--orpg-gap);
}
.orpg__top .orpg__shop { flex: 1; min-width: 0; margin: 0; }
.orpg .orpg__close--inline { position: static; flex: none; }
/* No heading and no banner on top: leave room for the corner close button */
.orpg--no-top { padding-top: 64px; }

/* ---------- Grid + cards ---------- */
.orpg__grid {
	display: grid;
	grid-template-columns: repeat(var(--orpg-cols), minmax(0, 1fr));
	gap: var(--orpg-gap);
}

/* A card is one rounded tile: square artwork on top, caption below.
   Grid rows stretch, so captions in the same row share a height. */
.orpg .orpg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--orpg-card-radius);
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari radius clip */
	background: rgba(255, 255, 255, .055);
	color: #fff;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px -14px rgba(0, 0, 0, .8);
	transition: transform .5s var(--orpg-ease), box-shadow .5s var(--orpg-ease), opacity .4s, filter .4s;
	animation: orpg-card-in .6s var(--orpg-ease) both;
	animation-delay: calc(140ms + var(--i, 0) * 60ms);
}
.orpg .orpg__card:is(:link, :visited, :hover, :focus, :active) { color: #fff; }

.orpg__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #111;
}
.orpg__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	transform: scale(1.001);
	transition: transform .9s var(--orpg-ease);
}
/* soft light sweep across the artwork on hover */
.orpg__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
	transform: translateX(-120%);
}

.orpg__caption {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 12px 12px;
	text-align: center;
}
/* accent line that grows from the centre on hover */
.orpg__caption::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--orpg-accent);
	transform: scaleX(0);
	transition: transform .5s var(--orpg-ease);
}
.orpg .orpg__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .86) !important;   /* own colour: the theme's a:visited etc. can't reach it */
	transition: color .3s;
	overflow-wrap: anywhere;
	text-wrap: balance;    /* a line too long for the card splits evenly, no stranded last word */
}

/* ---------- Two-link cards: buttons in the caption area ---------- */
.orpg__actions {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
}
.orpg .orpg__btn {
	flex: 1 1 140px;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff !important;
	border: 0;
	transition: background .3s, box-shadow .3s;
}
.orpg .orpg__btn:is(:link, :visited, :hover, :focus, :active) { color: #fff !important; text-decoration: none; }
.orpg__btn:focus-visible,
.orpg .orpg__card:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
a.orpg__media { cursor: pointer; }

/* ---------- Hover (real pointers only — no sticky hover on phones) ---------- */
@media (hover: hover) and (pointer: fine) {
	.orpg .orpg__card:hover {
		transform: translateY(var(--orpg-lift));
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, .16),
			0 22px 44px -16px color-mix(in srgb, var(--orpg-accent) 60%, transparent),
			0 12px 30px -12px rgba(0, 0, 0, .9);
	}
	.orpg__card:hover .orpg__media img { transform: scale(var(--orpg-zoom)); }
	.orpg__card:hover .orpg__media::after { transform: translateX(120%); transition: transform 1.1s var(--orpg-ease); }
	.orpg__card:hover .orpg__caption::before { transform: scaleX(1); }
	.orpg .orpg__card:hover .orpg__label { color: #fff !important; }
	.orpg .orpg__btn:hover { background: var(--orpg-accent); box-shadow: none; }

	/* quiet the other cards so the hovered one leads */
	.orpg__grid:hover .orpg__card:not(:hover) { opacity: .62; filter: saturate(.75); }

	.orpg .orpg__shop:hover {
		transform: translateY(-2px);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 16px 34px -18px var(--orpg-accent);
	}
	.orpg__shop:hover .orpg__shop-cta { background: color-mix(in srgb, var(--orpg-accent) 85%, #fff); }
	.orpg__shop:hover .orpg__shop-cta svg { transform: translateX(3px); }
}

/* ---------- Entrance (re-runs every time Popup Maker shows the popup) ---------- */
@keyframes orpg-in {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}
@keyframes orpg-card-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
	.orpg { --orpg-panel-radius: 18px; --orpg-card-radius: 10px; padding: 16px 12px 12px; }
	/* on the grid, not .orpg — the inline --orpg-cols on .orpg would win there */
	.orpg__grid { grid-template-columns: repeat(var(--orpg-cols-mobile), minmax(0, 1fr)); }
	.orpg__head { margin: 4px 44px 14px; }
	.orpg__eyebrow { font-size: 10px; letter-spacing: .24em; }
	.orpg__eyebrow::before,
	.orpg__eyebrow::after { display: none; }
	.orpg__close { top: 10px; right: 10px; width: 34px; height: 34px; }

	/* banner: logo + CTA on one row, text underneath */
	/* banner: logo + button on one row, text across the full width below */
	.orpg .orpg__shop { grid-template-areas: "logo cta" "text text"; padding: 11px 11px 12px 14px; row-gap: 8px; }
	.orpg .orpg__shop img.orpg__shop-img { height: 24px !important; }
	.orpg__wordmark { font-size: 22px; }
	.orpg__shop-text { font-size: 10px; letter-spacing: .16em; }
	.orpg__shop-cta { padding: 8px 12px; font-size: 10px; letter-spacing: .12em; }
	.orpg__top { gap: 8px; }
	.orpg__top .orpg__close--inline { align-self: flex-start; }
	.orpg--no-top { padding-top: 54px; }

	.orpg__caption { padding: 10px 8px 11px; }
	.orpg .orpg__label { font-size: 10px; letter-spacing: .1em; line-height: 1.45; }
	.orpg__actions { gap: 6px; padding: 8px; }
	.orpg .orpg__btn { flex-basis: 100%; padding: 7px 8px; font-size: 10px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
	.orpg,
	.orpg__card,
	.orpg__shop,
	.orpg__media img,
	.orpg__media::after { animation: none !important; transition: none !important; }
	.orpg .orpg__card:hover,
	.orpg .orpg__shop:hover { transform: none; }
	.orpg__card:hover .orpg__media img { transform: none; }
}

/* ==========================================================================
   Popup Maker overrides — only for popups that contain an .orpg.
   ========================================================================== */
.pum-overlay:has(.orpg) {
	background-color: rgba(6, 8, 12, .55) !important;
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
}
.pum-container:has(.orpg) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	/* never wider than the screen, whatever size is set in Popup Maker */
	max-width: calc(100vw - 24px) !important;
	min-width: 0 !important;
}
/* Click-outside-to-close: Popup Maker only closes when the click lands on the
   overlay itself. The container is usually wider than our panel (its width comes
   from the popup's Size setting) and is now invisible, so clicks beside the panel
   hit the container instead. Let those clicks fall through to the overlay. */
.pum-container:has(.orpg),
.pum-container:has(.orpg) .pum-content { pointer-events: none; }
.pum-container:has(.orpg) .orpg { pointer-events: auto; }
.pum-container:has(.orpg) > .pum-close { display: none !important; }
.pum-container:has(.orpg) .pum-content { outline: 0; }
.pum-container:has(.orpg) .pum-content > p:empty { display: none; }

/* ---------- Page-lock shift fix (any Popup Maker popup) ----------
   Popup Maker pads every child of <body> by a hard-coded 15px when it hides the
   scrollbar; on phones (0px scrollbars) the page jumps left and leaves a strip.
   Pad by the real scrollbar width instead (measured by the plugin's inline JS). */
html.pum-open.pum-open-overlay.pum-open-scrollable body > :not([aria-modal="true"]) {
	padding-right: var(--orpg-sbw, 0px) !important;
}