/* ==========================================================================
   ATARASHI single event page
   Typography and colours follow the Rawtracks theme (Upcoming Events / Contact Us pages).
   ========================================================================== */

.atarashi-event-single #qodef-page-inner {
	padding: 0;
}

.atr-event {
	--atr-text: #f5f5f5;
	--atr-muted: #cccccc;
	--atr-border: #373737;
	--atr-font-black: "PPMonumentExtended-Black", sans-serif;
	--atr-font-light: "PPMonumentExtended-Light", sans-serif;
	--atr-font-numbers: "Space Grotesk", sans-serif;

	display: block;
	color: var(--atr-muted);
}

/* The theme footer widget area is empty and only adds ~340px of padding below the VIP form */
.atarashi-event-single #qodef-page-footer-top-area:not(:has(.widget)) {
	display: none;
}

/* Hero
   ========================================================================== */

.atr-event-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 550px;
	padding: 180px 0 80px;
	background-color: #000;
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
}

.atr-event-hero:not(.atr-event-hero--has-image) {
	min-height: 0;
	padding: 210px 0 64px;
}

.atr-event-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .9) 100%);
}

.atr-event-hero-inner {
	position: relative;
	z-index: 1;
}

.atr-event-badge {
	display: inline-block;
	margin-bottom: 24px;
	padding: 6px 12px;
	border: 1px solid var(--qode-main-color);
	color: var(--qode-main-color);
	font-family: var(--atr-font-black);
	font-size: 11px;
	letter-spacing: .075em;
	line-height: 15px;
	text-transform: uppercase;
}

.atr-event-title {
	margin: 0;
	color: var(--atr-text);
	font-family: var(--atr-font-black);
	font-size: clamp(38px, 4.2vw, 77px);
	font-weight: 300;
	letter-spacing: -.025em;
	line-height: 1.03;
}

.atr-event-lineup {
	margin: 14px 0 0;
	color: var(--atr-text);
	font-family: var(--atr-font-light);
	font-size: clamp(17px, 1.5vw, 24px);
	line-height: 1.35;
}

.atr-event-lineup + .atr-event-lineup {
	margin-top: 6px;
}

.atr-event-tagline {
	max-width: 640px;
	margin: 28px 0 0;
	color: var(--atr-muted);
	font-size: 17px;
	line-height: 1.6;
}

/* Info bar (mirrors a row of the events list)
   ========================================================================== */

.atr-event-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
	padding: 36px 0;
	border-bottom: 1px solid var(--atr-border);
}

.atr-event-bar:last-child {
	padding-bottom: 120px;
}

.atr-event-date {
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	width: 14%;
	color: var(--atr-text);
	font-family: var(--atr-font-numbers);
	font-weight: 300;
}

.atr-event-date-day {
	width: 58px;
	font-size: 46px;
	letter-spacing: -.025em;
	line-height: 46px;
}

.atr-event-date-month {
	position: relative;
	top: 2px;
	font-size: 15px;
	line-height: 18px;
}

.atr-event-details {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px 32px;
	margin: 0;
}

.atr-event-detail dt {
	margin: 0 0 8px;
	color: var(--qode-main-color);
	font-family: var(--atr-font-black);
	font-size: 11px;
	letter-spacing: .075em;
	line-height: 15px;
	text-transform: uppercase;
}

.atr-event-detail dd {
	margin: 0;
	color: var(--atr-text);
	font-family: var(--atr-font-light);
	font-size: 15px;
	line-height: 22px;
}

.atr-event-detail dd a {
	color: inherit;
}

.atr-event-place {
	display: flex;
	flex-wrap: wrap;
	column-gap: 12px;
}

.atr-event-city {
	color: var(--qode-main-color);
}

.atr-event-country {
	color: var(--atr-muted);
}

/* Actions on their own row, aligned with the details column (date is 14% + 32px gap) */
.atr-event-actions {
	display: flex;
	flex: 0 0 calc(86% - 32px);
	flex-wrap: wrap;
	gap: 16px 48px;
	margin-left: calc(14% + 32px);
}

/* Bigger, bolder version of the theme textual button */
.atr-event-actions .qodef-button.qodef-layout--textual {
	align-items: center;
	column-gap: 12px;
	font-family: var(--atr-font-black);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 20px;
}

.atr-event-actions .qodef-button.qodef-layout--textual .qodef-m-icon svg {
	width: 13px;
	height: 13px;
	stroke-width: 1.6;
}

.atr-event-past-note {
	color: var(--atr-muted);
	font-family: var(--atr-font-light);
	font-size: 13px;
	line-height: 18px;
}

/* About
   ========================================================================== */

.atr-event-about {
	padding-top: 110px;
	padding-bottom: 40px;
}

.atr-event-about-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

.atr-event-about--has-poster .atr-event-about-inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.atr-event-section-title {
	margin: 0 0 40px;
	color: var(--atr-text);
	font-family: var(--atr-font-black);
	font-size: clamp(36px, 3.8vw, 72px);
	font-weight: 300;
	letter-spacing: -.025em;
	line-height: 1.05;
}

.atr-event-content {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.65;
}

.atr-event-content > *:last-child {
	margin-bottom: 0;
}

.atr-event-content p {
	margin: 0 0 1.2em;
}

/* Sub headings in the description use the same red label style as the info bar */
.atr-event-content h2,
.atr-event-content h3,
.atr-event-content h4,
.atr-event-content h5,
.atr-event-content h6 {
	margin: 48px 0 16px;
	color: var(--qode-main-color);
	font-family: var(--atr-font-black);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .075em;
	line-height: 15px;
	text-transform: uppercase;
}

.atr-event-content ul,
.atr-event-content ol {
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
}

.atr-event-content li {
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--atr-border);
	color: var(--atr-text);
	font-family: var(--atr-font-light);
	font-size: 17px;
	line-height: 1.5;
}

.atr-event-content li:first-child {
	border-top: 1px solid var(--atr-border);
}

.atr-event-content a {
	color: var(--qode-main-color);
}

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

.atr-event-details--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 64px;
	margin-top: 48px;
}

.atr-event-poster {
	position: sticky;
	top: 120px;
}

.atr-event-poster img {
	display: block;
	width: 100%;
	height: auto;
}

/* VIP tables
   ========================================================================== */

.atr-event-vip {
	padding-top: 110px;
	padding-bottom: 130px;
	scroll-margin-top: 60px;
}

.atr-event-vip-header {
	max-width: 65.5%;
	margin-bottom: 64px;
}

.atr-event-vip-intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

/* Responsive
   ========================================================================== */

@media only screen and (max-width: 1024px) {

	.atr-event-date {
		width: auto;
	}

	.atr-event-actions {
		flex-basis: 100%;
		margin-left: 0;
	}

	.atr-event-about {
		padding-top: 80px;
	}

	.atr-event-about-inner,
	.atr-event-about--has-poster .atr-event-about-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.atr-event-poster {
		position: static;
		max-width: 480px;
	}

	.atr-event-vip {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.atr-event-vip-header {
		max-width: 100%;
	}
}

@media only screen and (max-width: 680px) {

	.atr-event-hero {
		min-height: 460px;
		padding: 140px 0 48px;
	}

	.atr-event-hero:not(.atr-event-hero--has-image) {
		min-height: 0;
		padding: 150px 0 40px;
	}

	.atr-event-bar-inner {
		flex-direction: column;
		gap: 24px;
	}

	/* Details as rows: label on the left, value on the right */
	.atr-event-details {
		display: block;
		width: 100%;
	}

	.atr-event-detail {
		display: flex;
		align-items: baseline;
		gap: 16px;
		padding: 12px 0;
		border-bottom: 1px solid var(--atr-border);
	}

	.atr-event-detail:first-child {
		border-top: 1px solid var(--atr-border);
	}

	.atr-event-detail dt {
		flex: 0 0 84px;
		margin: 0;
	}

	.atr-event-detail dd {
		flex: 1;
	}

	.atr-event-details--inline {
		margin-top: 32px;
	}

	.atr-event-actions {
		gap: 24px 40px;
	}

	.atr-event-section-title {
		margin-bottom: 28px;
	}

	.atr-event-vip-header {
		margin-bottom: 40px;
	}

	.atr-event-vip {
		padding-top: 64px;
		padding-bottom: 48px;
	}
}