/*
 * Tribute page (page-template/tribute.php).
 * Sizes follow the XD artboard (1920px wide): 1px in the design = 1/19.2 vw.
 * Every text element sets its own font-size because style.css forces
 * body { font-size: 1.25vw !important }.
 */

.tribute-page {
	--tribute-accent: #BCA02A;
	--tribute-text: #fff;
	--tribute-card-text: #000;
	--tribute-btn-bg: #D3D3D3;
	--tribute-btn-text: #000;

	position: relative;
	color: var(--tribute-text);
	overflow: hidden;
}

/* Fixed background photo; every section scrolls over it (same idea as .inner-page-screen-bg on other pages). */
.tribute-page__bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background-color: #191816;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tribute-page > section {
	position: relative;
	z-index: 1;
}

.tribute-page figure {
	margin: 0;
}

.tribute-lightbox {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

/*
 * Photo boxes (hero slots, closing photo) are maximum boxes:
 * the photo keeps its own proportions, is never cropped and never leaves the box.
 * The img fills the box (so lazy loading sees a non-empty box) and "contain"
 * draws the photo inside it.
 */
.tribute-lightbox img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tribute-heading {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: max(36px, 3.125vw);
	line-height: 1.3;
	color: var(--tribute-accent);
}

.tribute-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Playfair Display', serif;
	font-size: max(22px, 2.083vw);
	line-height: 1.3;
	color: var(--tribute-accent);
}

/* ---------- Hero: 16:9 stage, positions in % of 1920x1080 ---------- */

.tribute-hero__stage {
	position: relative;
	aspect-ratio: 16 / 9;
}

.tribute-hero__text {
	position: absolute;
	top: 38.241%;
	left: 50%;
	z-index: 2;
	width: 37.5%;
	transform: translateX(-50%);
	text-align: center;
}

.tribute-hero__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: max(40px, 5.208vw);
	line-height: 1.2;
	color: var(--tribute-accent);
}

.tribute-hero__subtitle {
	margin: 0.5em 0 0;
	font-family: 'Playfair Display', serif;
	/* Smaller than the XD's 40px so the full subtitle fits on one line. */
	font-size: max(16px, 1.563vw);
	line-height: 1.3;
	color: var(--tribute-text);
}

.tribute-hero__intro {
	margin: 1.4em 0 0;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(13px, 1.146vw);
	line-height: 1.2;
	color: var(--tribute-text);
}

.tribute-hero__photos {
	position: absolute;
	inset: 0;
}

.tribute-hero__photo {
	position: absolute;
}

/*
 * Hero photos fade in one after another, then drift gently, out of sync.
 * The fade runs on the figure and the drift on the link inside it, so the two
 * transforms do not fight.
 */
@keyframes tribute-photo-in {
	from { opacity: 0; transform: translateY(1.5vw); }
	to   { opacity: 1; transform: none; }
}

@keyframes tribute-photo-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-0.42vw); }
}

.tribute-hero__photo {
	animation: tribute-photo-in 1s ease-out both;
}

.tribute-hero__photo .tribute-lightbox {
	animation: tribute-photo-float 7s ease-in-out infinite;
}

.tribute-hero__photo:nth-child(2) { animation-delay: 0.15s; }
.tribute-hero__photo:nth-child(3) { animation-delay: 0.3s; }
.tribute-hero__photo:nth-child(4) { animation-delay: 0.45s; }
.tribute-hero__photo:nth-child(5) { animation-delay: 0.6s; }
.tribute-hero__photo:nth-child(6) { animation-delay: 0.75s; }
.tribute-hero__photo:nth-child(7) { animation-delay: 0.9s; }
.tribute-hero__photo:nth-child(8) { animation-delay: 1.05s; }

/* Different lengths and negative delays keep the drift out of sync. */
.tribute-hero__photo:nth-child(2) .tribute-lightbox { animation-duration: 8.5s; animation-delay: -2s; }
.tribute-hero__photo:nth-child(3) .tribute-lightbox { animation-duration: 6.5s; animation-delay: -4s; }
.tribute-hero__photo:nth-child(4) .tribute-lightbox { animation-duration: 9s;   animation-delay: -1s; }
.tribute-hero__photo:nth-child(5) .tribute-lightbox { animation-duration: 7.5s; animation-delay: -5s; }
.tribute-hero__photo:nth-child(6) .tribute-lightbox { animation-duration: 8s;   animation-delay: -3s; }
.tribute-hero__photo:nth-child(7) .tribute-lightbox { animation-duration: 6.8s; animation-delay: -6s; }
.tribute-hero__photo:nth-child(8) .tribute-lightbox { animation-duration: 8.8s; animation-delay: -2.5s; }

@media (prefers-reduced-motion: reduce) {
	.tribute-hero__photo,
	.tribute-hero__photo .tribute-lightbox {
		animation: none;
	}
}

.tribute-hero__photo--a { left: 18.073%; top: 24.074%; width: 11.927%; aspect-ratio: 229 / 172; }
.tribute-hero__photo--b { left: 45.885%; top: 16.111%; width: 11.927%; aspect-ratio: 229 / 172; }
.tribute-hero__photo--c { left: 76.510%; top: 25.185%; width: 10.313%; aspect-ratio: 198 / 262; }
.tribute-hero__photo--d { left: 16.823%; top: 59.537%; width: 11.406%; aspect-ratio: 219 / 263; }
.tribute-hero__photo--e { left: 46.979%; top: 75.926%; width: 11.927%; aspect-ratio: 229 / 172; }
.tribute-hero__photo--f { left: 72.604%; top: 65.741%; width: 11.927%; aspect-ratio: 229 / 172; }
.tribute-hero__photo--g { left: 4.167%;  top: 43.519%; width: 9.896%;  aspect-ratio: 190 / 143; }
.tribute-hero__photo--h { left: 88.542%; top: 41.667%; width: 8.333%;  aspect-ratio: 160 / 212; }

/* ---------- Lead: quote, text, video ---------- */

.tribute-lead {
	width: 50.208vw;
	margin: 0 auto;
	padding-top: 6.094vw;
	text-align: center;
}

.tribute-lead__text {
	width: 87%;
	margin: 1.2vw auto 0;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(14px, 1.146vw);
	line-height: 1.2;
}

.tribute-video {
	position: relative;
	margin-top: 1.927vw;
	padding-top: 56.25%;
	background-color: #000;
}

.tribute-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Tributes ---------- */

.tribute-tributes {
	width: 56.146vw;
	margin: 0 auto;
	padding-top: 6.094vw;
	text-align: center;
}

.tribute-tributes__heading {
	margin-bottom: 3.5vw;
}

.tribute-slider {
	text-align: left;
}

/* Without slick (script missing or not yet run) only the first card shows. */
.tribute-slider:not(.slick-initialized) .tribute-card ~ .tribute-card {
	display: none;
}

/* Equal card heights: slick floats the slides; as flex items they stretch to the tallest. */
.tribute-slider .slick-track {
	display: flex;
}

/* Two classes to beat slick.css ".slick-initialized .slick-slide { display: block }". */
.tribute-slider .tribute-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Full text, no scrolling; the slick track below stretches every card to the tallest one. */
	height: auto;
	padding: 6.042vw;
	background: linear-gradient(rgba(255, 255, 255, 0.754), rgba(255, 255, 255, 0.754)), url(../images/tribute-paper.jpg) center / cover no-repeat;
	color: var(--tribute-card-text);
	outline: none;
}

.tribute-card__text {
	/* Takes the spare height so the author and button stay at the bottom of the card. */
	flex: 1 1 auto;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(14px, 1.042vw);
	line-height: 1.35;
}

.tribute-card__footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5vw;
	margin-top: 1.5vw;
}

.tribute-card__author {
	margin: 0 auto 0 0;
	font-family: 'Playfair Display', serif;
	font-size: max(14px, 1.042vw);
	font-style: italic;
}

.tribute-card__more,
.tribute-card__more:hover,
.tribute-card__more:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 1em;
	background-color: var(--tribute-btn-bg);
	font-family: 'Playfair Display', serif;
	font-size: max(13px, 0.781vw);
	line-height: 1.2;
	color: var(--tribute-btn-text);
	white-space: nowrap;
}

.tribute-card__more:hover {
	opacity: 0.8;
}

.tribute-tributes .slick-dots {
	display: flex !important;
	justify-content: center;
	gap: 0.729vw;
	margin: 3.5vw 0 0;
	padding: 0;
	list-style: none;
}

.tribute-tributes .slick-dots li {
	margin: 0;
	padding: 0;
}

.tribute-tributes .slick-dots button {
	display: block;
	width: max(8px, 0.417vw);
	height: max(8px, 0.417vw);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--tribute-text);
	font-size: 0;
	cursor: pointer;
}

.tribute-tributes .slick-dots .slick-active button {
	background-color: var(--tribute-accent);
}

/* ---------- Content blocks (ACF repeater), news list layout ---------- */

.tribute-entries {
	box-sizing: content-box;
	max-width: 1480px;
	margin: 0 auto;
	padding: 6.094vw 20px 0;
}

/* Same panel as the text tiles of the block editor content below. */
.tribute-entry {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	padding: 30px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.tribute-entry + .tribute-entry {
	margin-top: 40px;
}

/* Video and tweet blocks stack: text first, media under it across the block. */
.tribute-entry--video,
.tribute-entry--tweet {
	display: block;
}

.tribute-entry--video .tribute-entry__media,
.tribute-entry--tweet .tribute-entry__media {
	margin-top: 20px;
}

.tribute-entry--tweet .tribute-entry__media {
	display: flex;
	justify-content: center;
}

.tribute-entry--image .tribute-entry__media {
	flex: 0 0 40%;
	max-width: 40%;
}

.tribute-entry__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* 16:9 box for the oEmbed iframe, same idea as .tribute-video. */
.tribute-entry__embed {
	position: relative;
	padding-top: 56.25%;
	background-color: #000;
}

.tribute-entry__embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The tweet keeps the width its widget script gives it, centred in the media column. */
.tribute-entry__media .twitter-tweet {
	margin: 0 auto !important;
}

.tribute-entry__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tribute-entry__title {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: max(22px, 1.667vw);
	line-height: 1.3;
	color: var(--tribute-accent);
}

.tribute-entry__date {
	margin: 0.6em 0 0;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(13px, 0.938vw);
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.7);
}

/* Editor content: paragraphs, lists and links come from the WYSIWYG field. */
.tribute-entry__text {
	margin: 0.8em 0 0;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(14px, 1.042vw);
	line-height: 1.5;
	color: var(--tribute-text);
}

.tribute-entry__text > :first-child {
	margin-top: 0;
}

.tribute-entry__text > :last-child {
	margin-bottom: 0;
}

.tribute-entry__text p,
.tribute-entry__text ul,
.tribute-entry__text ol {
	margin: 0 0 0.8em;
	font-size: inherit;
	line-height: inherit;
}

.tribute-entry__text ul,
.tribute-entry__text ol {
	padding-left: 1.3em;
	list-style: revert;
}

.tribute-entry__text h1,
.tribute-entry__text h2,
.tribute-entry__text h3,
.tribute-entry__text h4,
.tribute-entry__text blockquote {
	margin: 0 0 0.5em;
	font-family: 'Playfair Display', serif;
	line-height: 1.3;
	color: var(--tribute-accent);
}

.tribute-entry__text blockquote {
	padding: 0;
	border: 0;
	font-size: max(16px, 1.25vw);
}

.tribute-entry__text a {
	color: var(--tribute-accent);
	text-decoration: underline;
}

.tribute-entry__text img {
	max-width: 100%;
	height: auto;
}

.tribute-entry__more,
.tribute-entry__more:hover,
.tribute-entry__more:focus {
	display: inline-block;
	margin-top: 0.8em;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(14px, 1.042vw);
	line-height: 1.2;
	color: var(--tribute-accent);
	text-decoration: underline;
}

/* ---------- Page content (block editor) ---------- */

.tribute-content {
	/* 1280px of content plus the 20px side padding (bootstrap sets border-box globally). */
	box-sizing: content-box;
	max-width: 1480px;
	margin: 0 auto;
	padding: 6.094vw 20px 0;
	font-family: 'Avenir Book', sans-serif;
	font-size: max(16px, 1.042vw);
	line-height: 1.5;
	color: var(--tribute-text);
}

/*
 * Masonry: every top-level block is a tile. tribute.js positions the tiles
 * row by row into the shortest column; without it they simply stack.
 */
.tribute-masonry {
	--masonry-columns: 3;
	--masonry-gap: 20px;
	position: relative;
}

.tribute-content .tribute-masonry > * {
	box-sizing: border-box;
	margin: 0 0 var(--masonry-gap);
}

.tribute-content .tribute-masonry > :last-child {
	margin-bottom: 0;
}

.tribute-content .tribute-masonry.is-laid-out > * {
	position: absolute;
	margin: 0;
}

/* Text tiles sit on a semi-transparent blurred panel; media tiles stay bare. */
.tribute-masonry > :where(:not(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-cover)) {
	padding: 30px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* Tiles whose own padding rules would override the panel padding. */
.tribute-content .tribute-masonry > blockquote {
	padding: 30px;
}

/* Fade-in on first appearance; tribute.js adds these classes, so without it tiles are simply visible. */
.tribute-reveal {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

.tribute-reveal.is-revealed {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tribute-reveal {
		opacity: 1;
		transition: none;
	}
}

/* A list tile keeps room for its bullets inside the panel padding. */
.tribute-content .tribute-masonry > ul,
.tribute-content .tribute-masonry > ol {
	padding-left: calc(30px + 1.3em);
}

.tribute-masonry > * > :first-child {
	margin-top: 0;
}

.tribute-masonry > * > :last-child {
	margin-bottom: 0;
}

.tribute-content p,
.tribute-content ul,
.tribute-content ol,
.tribute-content figure,
.tribute-content blockquote {
	margin: 0 0 1.3em;
}

.tribute-content ul,
.tribute-content ol {
	padding-left: 1.3em;
}

.tribute-content h1,
.tribute-content h2,
.tribute-content h3,
.tribute-content h4,
.tribute-content h5,
.tribute-content h6 {
	margin: 1.5em 0 0.6em;
	font-family: 'Playfair Display', serif;
	font-weight: normal;
	line-height: 1.3;
	color: var(--tribute-accent);
}

.tribute-content h1,
.tribute-content h2 { font-size: max(36px, 3.125vw); }
.tribute-content h3 { font-size: max(26px, 2.083vw); }
.tribute-content h4 { font-size: max(20px, 1.458vw); }
.tribute-content h5,
.tribute-content h6 { font-size: max(17px, 1.146vw); }

/* Block buttons look like the page's "Read More" button (theme link styles override WordPress defaults). */
.tribute-content .wp-block-button__link,
.tribute-content .wp-block-button__link:hover,
.tribute-content .wp-block-button__link:focus {
	background-color: var(--tribute-btn-bg);
	color: var(--tribute-btn-text);
	font-family: 'Playfair Display', serif;
}

.tribute-content .wp-block-button__link:hover {
	opacity: 0.8;
}

/* style.css forces "text-decoration: none !important" on every link. Buttons keep their own look. */
.tribute-content a:not(.wp-block-button__link) {
	color: var(--tribute-accent);
	text-decoration: underline !important;
}

.tribute-content a:not(.wp-block-button__link):hover {
	color: var(--tribute-text);
}

.tribute-content blockquote {
	padding-left: 1em;
	border-left: 3px solid var(--tribute-accent);
	font-family: 'Playfair Display', serif;
	font-size: max(20px, 1.563vw);
	line-height: 1.4;
	color: var(--tribute-accent);
}

.tribute-content img {
	max-width: 100%;
	height: auto;
}

.tribute-content figcaption {
	margin-top: 0.5em;
	font-size: 0.8em;
	text-align: center;
	opacity: 0.8;
}

/* ---------- Closing: photo | quote ---------- */

.tribute-closing {
	display: flex;
	align-items: flex-start;
	gap: 4.74vw;
	padding: 6.094vw 0 6.25vw 19.427vw;
}

.tribute-closing__photo {
	flex: 0 0 24.427vw;
	aspect-ratio: 469 / 506;
}

.tribute-closing__quote {
	width: 30vw;
	padding-top: 6.25vw;
}

/* ---------- Photo lightbox (dialog appended to <body> by tribute.js) ---------- */

.tribute-lightbox-dialog {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba(0, 0, 0, 0.92);
}

/* bootstrap.css sets "dialog { display: block }", which would show the closed dialog. */
.tribute-lightbox-dialog:not([open]) {
	display: none;
}

.tribute-lightbox-dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tribute-lightbox-dialog::backdrop {
	background: transparent;
}

.tribute-lightbox-dialog__img {
	display: block;
	max-width: calc(100vw - 160px);
	max-height: calc(100vh - 80px);
	width: auto;
	height: auto;
}

.tribute-lightbox-dialog__btn {
	position: absolute;
	padding: 0 16px;
	border: 0;
	background: none;
	font-family: Arial, sans-serif;
	font-size: 56px;
	line-height: 1;
	color: #fff;
	opacity: 0.8;
	cursor: pointer;
}

.tribute-lightbox-dialog__btn:hover,
.tribute-lightbox-dialog__btn:focus-visible {
	opacity: 1;
}

.tribute-lightbox-dialog__close {
	top: 12px;
	right: 12px;
	font-size: 44px;
}

.tribute-lightbox-dialog__prev,
.tribute-lightbox-dialog__next {
	top: 50%;
	transform: translateY(-50%);
}

.tribute-lightbox-dialog__prev {
	left: 12px;
}

.tribute-lightbox-dialog__next {
	right: 12px;
}

.tribute-lightbox-dialog.is-single .tribute-lightbox-dialog__prev,
.tribute-lightbox-dialog.is-single .tribute-lightbox-dialog__next {
	display: none;
}

/* ---------- Tablet and mobile ---------- */

/* Hero switches earlier than the rest: below 992px the scattered photos
   would overlap the text, whose font sizes stop shrinking at their floors. */
@media (max-width: 991px) {
	.tribute-masonry {
		--masonry-columns: 2;
	}

	.tribute-hero__stage {
		display: flex;
		flex-direction: column;
		gap: 32px;
		aspect-ratio: auto;
		padding: 120px 16px 48px;
	}

	.tribute-hero__text {
		position: static;
		width: auto;
		transform: none;
	}

	.tribute-hero__photos {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.tribute-hero__photo {
		position: static;
		width: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.tribute-lead,
	.tribute-tributes {
		width: auto;
		padding: 48px 16px 0;
	}

	.tribute-lead__text {
		width: auto;
		margin-top: 16px;
	}

	.tribute-video {
		margin-top: 24px;
	}

	.tribute-tributes__heading {
		margin-bottom: 24px;
	}

	.tribute-slider .tribute-card {
		padding: 24px 20px;
	}

	.tribute-card__footer {
		gap: 12px;
		margin: 16px 0 0;
	}

	.tribute-tributes .slick-dots {
		gap: 14px;
		margin-top: 24px;
	}

	.tribute-entries {
		padding-top: 48px;
	}

	.tribute-entry {
		flex-direction: column;
		gap: 16px;
		padding: 20px;
	}

	.tribute-entry--image .tribute-entry__media {
		flex: none;
		max-width: 100%;
		width: 100%;
	}

	.tribute-entry + .tribute-entry {
		margin-top: 32px;
	}

	.tribute-content {
		padding-top: 48px;
	}

	.tribute-masonry {
		--masonry-columns: 1;
	}

	.tribute-masonry > :where(:not(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-cover)) {
		padding: 20px;
	}

	.tribute-content .tribute-masonry > blockquote {
		padding: 20px;
	}

	.tribute-content .tribute-masonry > ul,
	.tribute-content .tribute-masonry > ol {
		padding-left: calc(20px + 1.3em);
	}

	.tribute-closing {
		flex-direction: column;
		gap: 24px;
		padding: 48px 16px;
	}

	.tribute-closing__photo {
		flex: none;
		width: 100%;
	}

	.tribute-closing__quote {
		width: auto;
		padding-top: 0;
	}

	.tribute-lightbox-dialog__img {
		max-width: calc(100vw - 32px);
		max-height: calc(100vh - 160px);
	}

	.tribute-lightbox-dialog__prev,
	.tribute-lightbox-dialog__next {
		top: auto;
		bottom: 24px;
		transform: none;
	}
}