/* Privateer Promo Popup + banner
 * Desktop layout is a 1:1 card that scales as a unit: every size is a multiple
 * of --u (1% of card width), taken from the InDesign comp (600pt square).
 * Phones / short screens get a stacked layout at the bottom of this file.
 */

@font-face {
	font-family: "PTR DejaVu Sans";
	src: url("../fonts/dejavu-sans-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PTR DejaVu Sans";
	src: url("../fonts/dejavu-sans-oblique.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "PTR Heebo";
	src: url("../fonts/heebo-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

html.ptr-pop-lock,
html.ptr-pop-lock body {
	overflow: hidden !important;
}

#privateer-popup {
	--ptr-navy: #0f2942;
	--ptr-red: #a62629;
	--ptr-red-text: #a81e2e;
	--ptr-grey: #66737d;
	--ptr-rule: #ebe3d6;
	--ptr-overlay: rgba(10, 18, 28, 0.55);
	--ptr-sans: "PTR DejaVu Sans", "DejaVu Sans", Verdana, Geneva, sans-serif;
	--ptr-display: "PTR Heebo", "Heebo", "Arial Black", Impact, sans-serif;

	/* Card is square: as wide as possible up to 720px while fitting the viewport both ways. */
	--ptr-w: min(720px, calc(100vw - 48px), calc(100vh - 48px));
	--u: calc(var(--ptr-w) / 100);

	position: fixed;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#privateer-popup.is-open {
	display: flex;
}
@supports (height: 100dvh) {
	#privateer-popup {
		--ptr-w: min(720px, calc(100vw - 48px), calc(100dvh - 48px));
	}
}
/* Short landscape screens (phones on their side): keep the square layout, trim the gutter. */
@media (max-height: 479px) and (min-width: 600px) {
	#privateer-popup {
		--ptr-w: min(720px, calc(100vw - 24px), calc(100vh - 24px));
		padding: 12px;
	}
	@supports (height: 100dvh) {
		#privateer-popup {
			--ptr-w: min(720px, calc(100vw - 24px), calc(100dvh - 24px));
		}
	}
}

/* Reset whatever the theme does to these elements. */
#privateer-popup *,
#privateer-popup *::before,
#privateer-popup *::after {
	box-sizing: border-box;
}
#privateer-popup p,
#privateer-popup h2,
#privateer-popup hr,
#privateer-popup a,
#privateer-popup button,
#privateer-popup picture,
#privateer-popup img {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
	font-style: normal;
	float: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	opacity: 1;
	transform: none;
}
#privateer-popup p::before,
#privateer-popup p::after,
#privateer-popup h2::before,
#privateer-popup h2::after,
#privateer-popup a::before,
#privateer-popup a::after {
	content: none;
}

/* ---------- Overlay + card ---------- */

#privateer-popup .ptr-pop__overlay {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--ptr-overlay);
	opacity: 0;
	transition: opacity 0.3s ease;
}

#privateer-popup .ptr-pop__card {
	position: relative;
	width: var(--ptr-w);
	height: var(--ptr-w);
	background: #fff;
	border-radius: calc(1.3 * var(--u));
	box-shadow: calc(0.28 * var(--u)) calc(0.28 * var(--u)) calc(1.95 * var(--u)) rgba(0, 0, 0, 0.35), 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	color: var(--ptr-navy);
	text-align: left;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s ease;
	outline: none;
}

#privateer-popup.is-visible .ptr-pop__overlay,
#privateer-popup.is-visible .ptr-pop__card {
	opacity: 1;
}
#privateer-popup.is-visible .ptr-pop__card {
	transform: none;
}

/* ---------- Photo ---------- */

#privateer-popup .ptr-pop__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 41.81%;
	z-index: 0;
}
#privateer-popup .ptr-pop__media picture,
#privateer-popup .ptr-pop__media img {
	display: block;
	width: 100%;
	height: 100%;
}
#privateer-popup .ptr-pop__media img {
	object-fit: cover;
	object-position: 50% 50%;
}

/* ---------- Close ---------- */

#privateer-popup .ptr-pop__close {
	position: absolute;
	z-index: 3;
	top: calc(2.72 * var(--u));
	right: calc(2.72 * var(--u));
	width: calc(8 * var(--u));
	height: calc(8 * var(--u));
	min-width: 32px;
	min-height: 32px;
	cursor: pointer;
	color: #000;
	border-radius: 2px;
	-webkit-appearance: none;
	appearance: none;
}
#privateer-popup .ptr-pop__close span,
#privateer-popup .ptr-pop__close::before,
#privateer-popup .ptr-pop__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(8.82 * var(--u));
	height: max(1.5px, calc(0.26 * var(--u)));
	background: currentColor;
	border-radius: 0;
}
#privateer-popup .ptr-pop__close span {
	display: none;
}
#privateer-popup .ptr-pop__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
#privateer-popup .ptr-pop__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
#privateer-popup .ptr-pop__close:hover {
	color: var(--ptr-red);
}
#privateer-popup .ptr-pop__close:focus {
	outline: none;
}
#privateer-popup .ptr-pop__close:focus-visible {
	outline: 2px solid var(--ptr-navy);
	outline-offset: 2px;
}

/* ---------- Text column ---------- */

#privateer-popup .ptr-pop__body {
	position: absolute;
	z-index: 1;
	top: 0;
	left: calc(6.72 * var(--u));
	width: calc(58.88 * var(--u));
	font-family: var(--ptr-sans);
	font-weight: 700;
	color: var(--ptr-navy);
}
#privateer-popup .ptr-pop__body p,
#privateer-popup .ptr-pop__body h2 {
	font-family: var(--ptr-sans);
	font-weight: 700;
	color: var(--ptr-navy);
	white-space: nowrap;
	text-align: left;
}

#privateer-popup .ptr-pop__eyebrow {
	margin-top: calc(4.753 * var(--u));
	font-size: calc(2.0793 * var(--u));
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ptr-red);
}
#privateer-popup .ptr-pop__body .ptr-pop__eyebrow {
	color: var(--ptr-red);
}

#privateer-popup .ptr-pop__title {
	margin-top: calc(2.525 * var(--u));
	font-size: calc(6.2382 * var(--u));
	line-height: 0.9708;
	text-transform: uppercase;
}

#privateer-popup .ptr-pop__body .ptr-pop__sub {
	margin-top: calc(2.554 * var(--u));
	font-size: calc(2.8592 * var(--u));
	line-height: 1.2;
	font-weight: 400;
	font-style: italic;
	color: var(--ptr-grey);
}

#privateer-popup .ptr-pop__body .ptr-pop__barrel {
	margin-top: calc(2.329 * var(--u));
	font-size: calc(2.8592 * var(--u));
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ptr-red);
}

#privateer-popup .ptr-pop__rule {
	display: block;
	width: 100%;
	height: max(1px, calc(0.24 * var(--u)));
	margin-top: calc(0.954 * var(--u));
	background: var(--ptr-rule);
}

#privateer-popup .ptr-pop__age {
	margin-top: calc(0.699 * var(--u));
	font-size: calc(4.4187 * var(--u));
	line-height: 1.2;
	text-transform: uppercase;
}

#privateer-popup .ptr-pop__specs {
	margin-top: calc(0.369 * var(--u));
	font-size: calc(2.8592 * var(--u));
	line-height: 1.6788;
	text-transform: uppercase;
}

/* ---------- CTA ---------- */

#privateer-popup .ptr-pop__cta {
	position: absolute;
	z-index: 1;
	top: calc(61.31 * var(--u));
	left: calc(13.43 * var(--u));
	width: calc(40 * var(--u));
	text-align: center;
}

#privateer-popup .ptr-pop__avail {
	font-family: var(--ptr-display);
	font-weight: 900;
	font-size: calc(4.9385 * var(--u));
	line-height: calc(5.96 * var(--u));
	text-transform: uppercase;
	text-align: center;
	color: var(--ptr-red-text);
}

#privateer-popup .ptr-pop__btn {
	display: block;
	width: calc(31.18 * var(--u));
	height: calc(8.19 * var(--u));
	margin: calc(3.45 * var(--u)) auto 0;
	font-family: var(--ptr-display);
	font-weight: 900;
	font-size: calc(4.9385 * var(--u));
	line-height: calc(7.94 * var(--u));
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: var(--ptr-red);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#privateer-popup .ptr-pop__btn:hover,
#privateer-popup .ptr-pop__btn:focus {
	color: #fff;
	background: #861d20;
	text-decoration: none;
}
#privateer-popup .ptr-pop__btn:focus {
	outline: none;
}
#privateer-popup .ptr-pop__btn:focus-visible {
	outline: 2px solid var(--ptr-navy);
	outline-offset: 3px;
}

/* ---------- Phones (portrait): stacked layout ---------- */

@media (max-width: 599px) {
	#privateer-popup {
		padding: 16px;
	}

	#privateer-popup .ptr-pop__card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 40%;
		grid-template-areas:
			"body body"
			"cta  media";
		align-items: center;
		width: min(420px, 100%);
		height: auto;
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 26px 22px 20px;
		border-radius: 8px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	}

	#privateer-popup .ptr-pop__close {
		top: 8px;
		right: 8px;
		width: 40px;
		height: 40px;
	}
	#privateer-popup .ptr-pop__close::before,
	#privateer-popup .ptr-pop__close::after {
		width: 26px;
		height: 1.5px;
	}

	#privateer-popup .ptr-pop__body,
	#privateer-popup .ptr-pop__cta,
	#privateer-popup .ptr-pop__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
	}

	#privateer-popup .ptr-pop__body {
		grid-area: body;
	}
	#privateer-popup .ptr-pop__body p,
	#privateer-popup .ptr-pop__body h2 {
		white-space: normal;
	}

	#privateer-popup .ptr-pop__eyebrow {
		margin-top: 0;
		padding-right: 36px;
		font-size: clamp(9.5px, 2.9vw, 11.5px);
	}
	#privateer-popup .ptr-pop__title {
		margin-top: 10px;
		font-size: clamp(22px, 8vw, 32px);
		line-height: 0.98;
	}
	#privateer-popup .ptr-pop__body .ptr-pop__sub {
		margin-top: 10px;
		font-size: clamp(12px, 3.8vw, 15px);
		line-height: 1.3;
	}
	#privateer-popup .ptr-pop__body .ptr-pop__barrel {
		margin-top: 10px;
		font-size: clamp(12px, 3.8vw, 15px);
	}
	#privateer-popup .ptr-pop__rule {
		height: 2px;
		margin-top: 6px;
	}
	#privateer-popup .ptr-pop__age {
		margin-top: 8px;
		font-size: clamp(17px, 5.8vw, 23px);
	}
	#privateer-popup .ptr-pop__specs {
		margin-top: 4px;
		font-size: clamp(10.5px, 3.45vw, 14px);
		line-height: 1.65;
	}
	#privateer-popup .ptr-pop__specs > span {
		white-space: nowrap;
	}

	#privateer-popup .ptr-pop__cta {
		grid-area: cta;
		padding-top: 4px;
	}
	#privateer-popup .ptr-pop__avail {
		font-size: clamp(22px, 7vw, 28px);
		line-height: 1.18;
	}
	#privateer-popup .ptr-pop__btn {
		width: 100%;
		max-width: 180px;
		height: auto;
		margin-top: 14px;
		padding: 10px 12px 9px;
		font-size: clamp(20px, 6.2vw, 26px);
		line-height: 1.1;
	}

	#privateer-popup .ptr-pop__media {
		grid-area: media;
		align-self: stretch;
		height: clamp(170px, 34vh, 250px);
		margin: 8px -22px -20px 0;
	}
	#privateer-popup .ptr-pop__media img {
		object-position: 58% 40%;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 100%);
	}
}

/* ---------- "Now Available" banner under the homepage hero ---------- */

#privateer-banner {
	--ptr-banner-bg: #a62629;
	--ptr-banner-bg-hover: #861d20;
	--ptr-banner-color: #fff;
	position: relative;
	z-index: 1;
	display: block;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ptr-banner-bg);
}
#privateer-banner[hidden] {
	display: none;
}
#privateer-banner .ptr-banner__text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	/* 38px type in a ~98px bar, matching the comp next to the theme's 35px h2 */
	padding: 0.71em 16px 0.66em;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: "PTR Heebo", "Heebo", "Arial Black", Impact, sans-serif;
	font-size: clamp(22px, 2.7vw, 38px);
	/* ...but on narrow phones shrink so "“The Rum Ambassador’s Cask” -" still fits on one line */
	font-size: max(min(22px, calc((100vw - 32px) / 15.2)), min(2.7vw, 38px));
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	color: var(--ptr-banner-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.15s ease;
}
#privateer-banner .ptr-banner__part {
	display: inline-block;
	max-width: 100%;
}
#privateer-banner a.ptr-banner__text:hover,
#privateer-banner a.ptr-banner__text:focus {
	color: var(--ptr-banner-color);
	background: var(--ptr-banner-bg-hover);
	text-decoration: none;
	outline: none;
}
#privateer-banner a.ptr-banner__text:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	#privateer-banner .ptr-banner__text,
	#privateer-popup .ptr-pop__overlay,
	#privateer-popup .ptr-pop__card {
		transition: none;
	}
	#privateer-popup .ptr-pop__card {
		transform: none;
	}
}