/* ==============================================================
   FONTS
============================================================== */

@font-face {
	font-family: "Bureau Grot";
	src:
		url("https://berlinkys.com/MyWebfontsKit/webFonts/BureauGrotCondensedBlack/font.woff2") format("woff2"),
		url("https://berlinkys.com/MyWebfontsKit/webFonts/BureauGrotCondensedBlack/font.woff") format("woff");
	
	font-style: normal;
	font-display: swap;
}


/* ==============================================================
   VARIABLES
============================================================== */

:root {
	--orange: #ffb863;
	--black: #000;
	--white: #fff;
	--background: #e7ded4;
	--teal: #005559;

	--font-heading: "Bureau Grot", sans-serif;
	--font-body: "Inter", sans-serif;
}


/* ==============================================================
   HEADING PROTECTION
============================================================== */

.whats-on .whats-on__header h1,
.whats-on .whats-on-month__title,
.whats-on .whats-on-card__title {
	font-family: var(--font-heading, "Bureau", sans-serif);
	
	text-transform: uppercase;
	color: #0f1031;
}

.featured-events .featured-events__header h2,
.featured-events .featured-event-card__title {
	font-family: var(--font-heading, "Bureau", sans-serif);
	
	text-transform: uppercase;
	color: #0f1031;
}

.single-event .single-event__title,
.single-night .single-night__title,
.single-night .single-night__day {
	font-family: var(--font-heading, "Bureau", sans-serif);
	
	text-transform: uppercase;
	color: #0f1031;
}

.whats-on-card__button,
.featured-event-card__button,
.single-event__button,
.single-night__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 40px;
	padding: 0 20px;

	background: var(--orange);
	border: 0;
	border-radius: 5px;

	color: var(--black);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	
	line-height: 1;

	text-decoration: none;
	text-transform: uppercase;
}

.whats-on-card__button:hover,
.whats-on-card__button:focus,
.featured-event-card__button:hover,
.featured-event-card__button:focus,
.single-event__button:hover,
.single-event__button:focus,
.single-night__button:hover,
.single-night__button:focus {
	background: #bf8a4a;
}

.whats-on-card__button img,
.featured-event-card__button img,
.single-event__button img,
.single-night__button img {
	width: 16px;
	height: 16px;
}

/* ==============================================================
   WHAT'S ON
============================================================== */

.whats-on {
	background: var(--background);
	color: #0f1031;
}

.whats-on__inner {
	width: min(1400px, calc(100% - 80px));
	margin: 0 auto;
	padding: 70px 0 90px;
}


/* ==============================================================
   PAGE HEADER
============================================================== */

.whats-on__header {
	margin-bottom: 55px;
}

.whats-on__header h1 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(50px, 6vw, 90px);
	
	line-height: 0.9;
	text-transform: uppercase;
}


/* ==============================================================
   MONTH
============================================================== */

.whats-on-month__title {
	margin: 0 0 30px;

	font-family: var(--font-heading);
	font-size: 42px;
	
	line-height: 1;
	text-transform: uppercase;

	color: #0f1031;
}

.whats-on__divider {
	width: 100%;
	margin: 55px 0;

	border: 0;
	border-top: 1px solid #0f1031;
}


/* Don't leave an HR hanging after the final month */

.whats-on__divider:last-child {
	display: none;
}


/* ==============================================================
   GRID
============================================================== */

.whats-on-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}


/* ==============================================================
   CARD
============================================================== */

.whats-on-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	background: #d2cac1;

	border-radius: 5px;
	overflow: hidden;
}


/* ==============================================================
   IMAGE
============================================================== */

.whats-on-card__media {
	position: relative;

	width: 100%;
	aspect-ratio: 16 / 9;

	overflow: hidden;
	background: #000;

	border-radius: 5px 5px 0 0;

	-webkit-mask-image: -webkit-radial-gradient(
		white,
		black
	);
}

.whats-on-card__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* ==============================================================
   DATE
============================================================== */

.whats-on-card__date {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 10%;
	min-width: 74px;
	height: auto;

	padding: 12px 8px;

	background: #ffb863;
	color: #0f1031;

	text-align: center;

	font-family: var(--font-heading);

	border-radius: 5px 0 0 0;
}

.whats-on-card__weekday {
	display: block;

	font-family: inherit;
	font-size: clamp(24px, 2.2vw, 34px);
	
	line-height: 0.9;
	text-transform: uppercase;
}

.whats-on-card__date-small {
	display: block;
	margin-top: 4px;

	font-family: inherit;
	font-size: 14px;
	
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}


/* ==============================================================
   BODY
============================================================== */

.whats-on-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 22px 20px 20px;
}

.whats-on-card__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
}

.whats-on-card__title {
	width: 95%;
	margin: 0;

	font-family: var(--font-heading);
	font-size: 24px;
	
	line-height: 1;
	text-transform: uppercase;

	color: #0f1031;
}

.whats-on-card__time {
	flex: 0 0 auto;

	margin: 0;

	font-family: var(--font-body);
	font-size: 14px;
	
	line-height: 1.2;

	color: #0f1031;
	white-space: nowrap;
}

.whats-on-card__description {
	margin: 18px 0 0;

	font-family: var(--font-body);
	font-size: 15px;
	
	line-height: 1.45;

	color: #0f1031;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;
}


/* ==============================================================
   MORE LINK
============================================================== */

.whats-on-card__more {
	align-self: auto;
	margin: 0;

	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;

	color: #0f1031;

	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.whats-on-card__more span {
	display: inline-block;
	margin-left: 5px;

	transition: transform 180ms ease;
}

.whats-on-card__more:hover span,
.whats-on-card__more:focus-visible span {
	transform: translateX(5px);
}

.whats-on-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	margin-top: auto;
	padding-top: 24px;
}

.whats-on-card__button {
	flex: 0 0 auto;
}


/* ==============================================================
   TABLET
============================================================== */

@media (max-width: 1000px) {

	.whats-on__inner {
		width: min(100% - 50px, 1100px);
	}

	.whats-on-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.whats-on-card__date {
		width: 14%;
	}

}


/* ==============================================================
   PHONE
============================================================== */

@media (max-width: 650px) {

	.whats-on__inner {
		width: calc(100% - 30px);
		padding-top: 45px;
		padding-bottom: 60px;
	}

	.whats-on__header {
		margin-bottom: 40px;
	}

	.whats-on-month__title {
		margin-bottom: 22px;
		font-size: 34px;
	}

	.whats-on-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.whats-on__divider {
		margin: 40px 0;
	}

	.whats-on-card__date {
		width: 18%;
		min-width: 70px;
	}

	.whats-on-card__weekday {
		font-size: 28px;
	}

	.whats-on-card__body {
		padding: 20px 18px;
	}

	.whats-on-card__title {
		font-size: 22px;
	}

}

/* ==============================================================
   SINGLE EVENT
============================================================== */

.single-event {
	background: var(--background);
	color: #0f1031;
}

.single-event__hero {
	width: 100%;
	aspect-ratio: 16 / 7;
	overflow: hidden;
}

.single-event__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-event__inner {
	width: min(1200px, calc(100% - 80px));
	margin: 0 auto;
	padding: 55px 0 90px;
}


/* HEADER */

.single-event__header {
	padding-bottom: 40px;
	border-bottom: 1px solid #0f1031;
}

.single-event__date {
	margin: 0 0 12px;

	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1;

	text-transform: uppercase;

	color: #0f1031;
}

.single-event__title {
	max-width: 950px;
	margin: 0;

	font-family: var(--font-heading);
	font-size: clamp(48px, 6vw, 82px);
	
	line-height: 0.9;

	text-transform: uppercase;

	color: #0f1031;
}

.single-event__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;

	margin-top: 30px;
}

.single-event__time {
	margin: 0;

	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 1;

	text-transform: uppercase;
}


/* CONTENT */

.single-event__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 70px;

	padding-top: 50px;
}

.single-event__content {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
}

.single-event__content > :first-child {
	margin-top: 0;
}


/* ITINERARY */

.single-event__itinerary h2 {
	margin: 0 0 25px;

	font-family: var(--font-heading);
	font-size: 36px;
	
	line-height: 1;

	text-transform: uppercase;
}

.single-event__itinerary-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 20px;

	padding: 14px 0;

	border-top: 1px solid #0f1031;
}

.single-event__itinerary-item:last-child {
	border-bottom: 1px solid #0f1031;
}

.single-event__itinerary-time,
.single-event__itinerary-description {
	margin: 0;
}

.single-event__itinerary-time {
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}

.single-event__itinerary-description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.35;
}


/* VIDEO */

.single-event__video {
	margin-top: 65px;
}

.single-event__video .wp-video,
.single-event__video video {
	width: 100% !important;
	max-width: none !important;
}


/* PHONE */

@media (max-width: 700px) {

	.single-event__hero {
		aspect-ratio: 16 / 9;
	}

	.single-event__inner {
		width: calc(100% - 30px);
		padding: 35px 0 60px;
	}

	.single-event__date {
		font-size: 20px;
	}

	.single-event__title {
		font-size: clamp(42px, 13vw, 62px);
	}

	.single-event__meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}

	.single-event__layout {
		grid-template-columns: 1fr;
		gap: 45px;

		padding-top: 35px;
	}

	.single-event__content {
		font-size: 17px;
	}

	.single-event__itinerary h2 {
		font-size: 30px;
	}

}

/* ==============================================================
   SINGLE WEEKLY NIGHT
============================================================== */

.single-night {
	background: var(--background);
	color: #0f1031;
}

.single-night__hero {
	width: 100%;
	aspect-ratio: 16 / 7;
	overflow: hidden;
}

.single-night__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-night__inner {
	width: min(1200px, calc(100% - 80px));
	margin: 0 auto;
	padding: 55px 0 90px;
}


/* HEADER */

.single-night__header {
	padding-bottom: 40px;
	border-bottom: 1px solid #0f1031;
}

.single-night__day {
	margin: 0 0 12px;

	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1;

	text-transform: uppercase;
	color: #0f1031;
}

.single-night__title {
	max-width: 950px;
	margin: 0;

	font-family: var(--font-heading);
	font-size: clamp(48px, 6vw, 82px);
	
	line-height: 0.9;

	text-transform: uppercase;
	color: #0f1031;
}

.single-night__time {
	margin: 28px 0 0;

	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 1;

	text-transform: uppercase;
	color: #0f1031;
}


/* CONTENT */

.single-night__content {
	max-width: 760px;
	margin-top: 45px;

	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
}

.single-night__content > :first-child {
	margin-top: 0;
}

.single-night__content > :last-child {
	margin-bottom: 0;
}


/* BUTTON */

.single-night__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 35px;
}


/* VIDEO */

.single-night__video {
	margin-top: 65px;
}

.single-night__video .wp-video,
.single-night__video video {
	width: 100% !important;
	max-width: none !important;
}


/* ==============================================================
   PHONE
============================================================== */

@media (max-width: 700px) {

	.single-night__hero {
		aspect-ratio: 16 / 9;
	}

	.single-night__inner {
		width: calc(100% - 30px);
		padding: 35px 0 60px;
	}

	.single-night__day {
		font-size: 20px;
	}

	.single-night__title {
		font-size: clamp(42px, 13vw, 62px);
	}

	.single-night__time {
		margin-top: 22px;
		font-size: 22px;
	}

	.single-night__content {
		margin-top: 35px;
		font-size: 17px;
	}

	.single-night__button {
		margin-top: 28px;
	}

}

/* ==============================================================
   FEATURED EVENTS
============================================================== */

.featured-events {
	padding: 55px 0;
	background: var(--background);
	color: #0f1031;
}

.featured-events__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;

	width: min(1600px, calc(100% - 80px));
	margin: 0 auto 24px;
}

.featured-events__header h2 {
	margin: 0;

	font-family: var(--font-heading);
	font-size: 42px;
	
	line-height: 1;

	text-transform: uppercase;
}

.featured-events__controls {
	display: flex;
	gap: 8px;
}

.featured-events__arrow {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;
	border: 0;
	border-radius: 5px;

	background: #ffb863;
	color: #0f1031;

	font-size: 22px;
	line-height: 1;

	cursor: pointer;
}


/* TRACK */

.featured-events__viewport {
	width: min(1600px, calc(100% - 80px));
	margin: 0 auto;

	overflow: hidden;
}

.featured-events__track {
	display: flex;
	gap: 30px;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	scrollbar-width: none;
}

.featured-events__track::-webkit-scrollbar {
	display: none;
}


/* ==============================================================
   FEATURED EVENT CARD
============================================================== */

.featured-event-card {
	flex: 0 0 calc((100% - 90px) / 4);

	display: flex;
	flex-direction: column;

	min-width: 0;

	background: #d2cac1;

	border-radius: 5px;
	overflow: hidden;

	scroll-snap-align: start;
}


/* IMAGE */

.featured-event-card__image-link {
	display: block;
}

.featured-event-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;

	overflow: hidden;

	border-radius: 5px 5px 0 0;

	-webkit-mask-image: -webkit-radial-gradient(
		white,
		black
	);
}

.featured-event-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.01);
}


/* BODY */

.featured-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 20px 20px 18px;
}


/* DATE / TIME */

.featured-event-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;

	margin-bottom: 12px;

	font-family: var(--font-heading);
	font-size: 18px;
	line-height: 1;

	color: #0f1031;
}

.featured-event-card__date,
.featured-event-card__time {
	white-space: nowrap;
}


/* TITLE */

.featured-event-card__title {
	margin: 0 0 12px;

	font-family: var(--font-heading);
	font-size: 24px;
	
	line-height: 1;

	text-transform: uppercase;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.featured-event-card__title a {
	color: #0f1031;
	text-decoration: none;
}


/* DESCRIPTION */

.featured-event-card__description {
	display: -webkit-box;

	margin: 0 0 18px;

	overflow: hidden;

	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;

	color: #0f1031;
	text-decoration: none;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}


/* BUTTON */

.featured-event-card__button {
	width: 100%;

	margin-top: auto;

	padding: 11px 16px;

	text-align: center;
}


/* ==============================================================
   THREE CARDS
============================================================== */

@media (max-width: 1599px) {

	.featured-event-card {
		flex-basis: calc((100% - 60px) / 3);
	}

}


/* ==============================================================
   TWO CARDS
============================================================== */

@media (max-width: 999px) {

	.featured-events__header,
	.featured-events__viewport {
		width: calc(100% - 50px);
	}

	.featured-event-card {
		flex-basis: calc((100% - 30px) / 2);
	}

}


/* ==============================================================
   ONE CARD
============================================================== */

@media (max-width: 699px) {

	.featured-events {
		padding: 50px 0;
	}

	.featured-events__header,
	.featured-events__viewport {
		width: calc(100% - 30px);
	}

	.featured-events__header h2 {
		font-size: 34px;
	}

	.featured-events__track {
		gap: 20px;
	}

	.featured-event-card {
		flex-basis: 100%;
	}

	.featured-event-card__body {
		padding: 24px 20px 20px;
	}

	.featured-event-card__meta {
		font-size: 20px;
	}

	.featured-event-card__title {
		font-size: 28px;
	}

	.featured-event-card__description {
		font-size: 17px;
	}

}