/* ollie_smalls — custom styles layered on top of Spectral's main.css */

/* ---------- Banner / hero ---------- */
#banner {
	background-image: url('../../images/hero-mobile.jpg') !important;
	background-size: cover;
	background-position: center;
}
/* Spectral fades a #2e3842 overlay (#banner:after) in/out via the is-preload class,
   which is only removed on window.load — and that can hang on the video/iframes,
   leaving the hero stuck gray. Our own #hero-intro handles the intro, so disable it. */
#banner:after { display: none !important; }
/* Intro: hero holds on black, then blends into the video (timing set in site.js).
   z-index 2 sits above the video (z1) but below the hero content (.inner, z3),
   so the logo stays visible from page load while only the video fades in. */
#hero-intro {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #000;
	z-index: 2;
	opacity: 1;
	pointer-events: none;
}
#hero-intro.is-hidden { opacity: 0; }
/* main.css kills every transition while body.is-preload (until window.load + 100ms).
   The mobile blend starts after 1s — often before load — so restore it explicitly.
   Duration must match BLEND_MS in site.js. */
body.is-preload #hero-intro { transition: opacity 2000ms ease !important; }

.banner-logo {
	display: block;
	margin: 0 auto 1em auto;
	width: 47.5%;
	max-width: 675px;
	max-height: 78vh;
	height: auto;
}

/* Logo in the fixed top bar (shown after scrolling past the hero).
   Bar keeps its original 3em height; the logo is vertically centered within it
   and sized to fill the bar height (it can't be larger without overhanging). */
#header h1 {
	top: 0;
	height: 100%;
}
/* The logo sits inside the anchor, which spans the full bar height — center it there. */
#header h1 a {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 100%;
}
.header-logo {
	display: block;
	height: 1.3em;
	width: auto;
}

/* Muted, looping background video behind the hero (desktop only). */
#banner .bg-video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
#banner .bg-video::after {
	/* darken the video so the hero text stays readable */
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(20, 24, 28, 0.55);
	z-index: 2;
}
#banner .bg-video video {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;        /* fill the banner, cropping as needed */
	border: 0;
}
#banner .inner {
	position: relative;
	z-index: 3;
}
/* keep Spectral's absolute bottom positioning for .more — only raise its layer */
#banner .more {
	z-index: 3;
	/* main.css centers the 16em box with margin-left -8.5em — 0.5em off; -8em is true center */
	margin-left: -8em;
}

/* On touch / small screens the YouTube background can't autoplay reliably,
   so hide it and fall back to the banner's image background. */
@media screen and (max-width: 980px) {
	/* no video on mobile — the #banner photo (hero-mobile.jpg) shows instead */
	#banner .bg-video { display: none; }
	/* position:fixed + clip-path clipping is unreliable on mobile, so the reveal
	   layer escapes its clip and paints over the hero. Contain it in its section. */
	.image-reveal-bg { position: absolute; height: 100%; }
}
body.is-mobile #banner .bg-video { display: none; }

/* ---------- Shows ---------- */
.shows-tabs { justify-content: center; display: flex; width: 100%; margin-left: 0; }
.shows-list { text-align: center; }
.shows-table {
	display: inline-block;
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}
.show-row {
	padding: 0.85em 1em;
	border-bottom: solid 1px rgba(255, 255, 255, 0.15);
	text-align: center;
}
.show-row:last-child { border-bottom: none; }
.show-date {
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-right: 0.85em;
}
.show-ticket {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.shows-empty { font-style: italic; }

/* ---------- Videos (main player + thumbnail playlist) ---------- */
.video-player { max-width: 820px; margin: 0 auto; }
.video-main {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.25em;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
.video-main iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}
.video-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);   /* definite column widths so the img ratio resolves */
	gap: 1em;
	max-width: 700px;
	margin: 0 auto;
}
.video-thumb {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0;
	padding-top: 56.25%;       /* 16:9 box (% is relative to the column width) */
	box-sizing: content-box;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: 6px;
	overflow: hidden;
	opacity: 0.55;
	-webkit-transition: opacity 0.2s ease, box-shadow 0.2s ease;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
/* hqdefault is 4:3 with black bars — fill the 16:9 box and cover-crop */
.video-thumb img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video-thumb:hover { opacity: 0.85; }
.video-thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px #e8482f; }
/* play indicator */
.video-thumb::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 38px; height: 38px;
	margin: -19px 0 0 -19px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
}
.video-thumb::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	margin: -8px 0 0 -5px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

/* ---------- Single video (Originals) ---------- */
.video-single {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.video-single iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* ---------- Spotify ---------- */
.spotify-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2em;
	flex-wrap: wrap;
}
.spotify { flex: 0 0 auto; margin: 0; }
.spotify iframe { display: block; width: 323px; height: 574px; border: 0; border-radius: 12px; }
.spotify-gif { flex: 0 0 auto; width: 323px; height: 574px; border-radius: 12px; }
@media screen and (max-width: 736px) {
	/* hide the gif on mobile — only show it when it sits beside the playlist */
	.spotify-gif { display: none; }
}

/* ---------- Merch ---------- */
.merch-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;       /* vertically center the products (different heights) */
	gap: 2em;
	margin-bottom: 2.5em;
}
.merch-grid .image { display: block; flex: 0 1 280px; }
/* cap & bag rendered 30% smaller than the t-shirt, vertically centered */
.merch-grid .image.small { align-self: center; }
.merch-grid .image.small img { display: block; width: 63%; margin: 0 auto; }
.merch-grid .image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ---------- Booking / team ---------- */
.team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5em;
	margin-bottom: 2.5em;
}
.team-member { flex: 1 1 340px; max-width: 440px; }
.team-photo { display: inline-block; }
.team-photo img {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
}
.team-member h3 { margin: 0.75em 0 0.5em 0; }
.team-subtitle {
	display: block;
	margin-top: 0.5em;
	font-size: 0.6em;
	font-weight: 400;
	letter-spacing: 0.2em;
	opacity: 0.65;
}
.supporting { margin-top: 1em; }
.supporting h3 { margin-bottom: 0.5em; }
.lyric-quotes {
	list-style: none;
	margin: 1em 0 0 0;
	padding: 0;
	font-style: italic;
}
.lyric-quotes li { margin: 0.3em 0; padding: 0; }
.lyric-source {
	display: block;
	font-style: normal;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	opacity: 0.65;
	white-space: nowrap;
}

/* ---------- About / carousel ---------- */
.carousel {
	position: relative;
	max-width: 760px;
	margin: 0 auto 2em auto;
	border-radius: 12px;
	overflow: hidden;
}
.carousel .slides { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.carousel .slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
	/* hard cut — no fade between slides */
	transition: none;
}
.carousel .slide.is-active { opacity: 1; }
.carousel .slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2em; height: 2em;
	line-height: 2em;
	text-align: center;
	font-size: 1.5em;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	border-bottom: none;
	z-index: 2;
}
.carousel-nav:hover { background: rgba(0, 0, 0, 0.7); border-bottom: none; }
.carousel-nav.prev { left: 0.6em; }
.carousel-nav.next { right: 0.6em; }
.about-text { max-width: 42em; margin: 0 auto; }

/* ---------- Gallery (full-width auto-scrolling band photo strip) ---------- */
.gallery {
	width: 100%;
	overflow: hidden;
}
.gallery-track {
	display: -webkit-flex;
	display: flex;
	width: -moz-max-content;
	width: max-content;
	-webkit-animation: gallery-scroll 55s linear infinite;
	animation: gallery-scroll 55s linear infinite;
}
.gallery-track img {
	flex: 0 0 auto;
	height: 340px;
	width: auto;
	display: block;
}
/* the track holds two identical sets, so shifting by half loops seamlessly */
@-webkit-keyframes gallery-scroll {
	from { -webkit-transform: translateX(0); }
	to { -webkit-transform: translateX(-50%); }
}
@keyframes gallery-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media screen and (max-width: 736px) {
	.gallery-track img { height: 200px; }
	/* hide the "Shows" button on mobile — same behavior as the Originals arrow (.more) */
	#banner .actions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gallery-track { -webkit-animation: none; animation: none; }
}

/* ---------- Booking ---------- */
.booking-text { max-width: 40em; margin: 0 auto; }

/* ---------- Image reveal (fixed image, section is a moving "window") ----------
   Uses a position:fixed layer clipped to the section via clip-path instead of
   background-attachment:fixed, so the reveal effect also works on mobile. */
.image-reveal {
	position: relative;
	height: 60vh;
	min-height: 18em;
	overflow: hidden;
	-webkit-clip-path: inset(0);
	clip-path: inset(0);              /* clips the fixed child to this window */
}
.image-reveal-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;                    /* pinned to the viewport; the section reveals a slice */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ---------- Dark sections ---------- */
/* match the gray (style2) sections to the footer's gray */
.wrapper.style2 { background-color: #1d242a; }

/* ---------- Light sections ---------- */
/* cream instead of pure white for the style5 sections */
.wrapper.style5 { background-color: #FFFDF2; }

/* ---------- Footer ---------- */
#footer .copyright .heart { color: #e8482f; }