/* ==========================================================================
   LOS Homepage — front-end styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette
   Sampled from the Overworld theme so these sections sit flush with the rest
   of the site rather than introducing their own background colour:
     #1B0F23  page background  (.edgtf-content / body)
     #150F1A  footer top
   -------------------------------------------------------------------------- */
:root {
	--los-hm-bg:     #1b0f23;
	--los-hm-bg-alt: #150f1a;
}

/* --------------------------------------------------------------------------
   Hero wrapper & logo overlay
   -------------------------------------------------------------------------- */
.los-hm-hero-wrapper {
	position: relative;
}

.los-hm-logo-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;             /* above the scrim, below the arrows and dots */
	pointer-events: none;
	text-align: center;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.los-hm-logo-overlay img {
	display: block;
	margin: 0 auto;
	max-width: min(240px, 62vw);
	height: auto;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .6));
}

/* With no slides configured the hero itself isn't rendered, so give the
   wrapper some height for the centred logo to sit in. */
.los-hm-hero-wrapper:not(:has(.los-hm-hero)) {
	min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Hero slideshow
   -------------------------------------------------------------------------- */
.los-hm-hero {
	position: relative;
	height: var(--los-hm-hero-h, 85vh);
	min-height: 420px;
	overflow: hidden;
	background: var(--los-hm-bg);
}

.los-hm-hero-slides {
	position: absolute;
	inset: 0;
}

.los-hm-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .9s ease-in-out;
	will-change: opacity;
}

.los-hm-hero-slide.is-active {
	opacity: 1;
}

.los-hm-hero-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Vignette so the logo overlay stays legible on bright images, and the hero
   blends into the dark page body below it. */
.los-hm-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(27, 15, 35, .55) 0%,
		rgba(27, 15, 35, .12) 32%,
		rgba(27, 15, 35, .28) 68%,
		var(--los-hm-bg) 100%
	);
}

/* Arrows */
.los-hm-hero-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(13, 13, 13, .4);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.los-hm-hero-btn:hover {
	background: rgba(13, 13, 13, .78);
	border-color: rgba(255, 255, 255, .6);
}

.los-hm-hero-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.los-hm-hero-prev { left: 24px; }
.los-hm-hero-next { right: 24px; }

/* Dots */
.los-hm-hero-dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	gap: 10px;
}

.los-hm-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .75);
	background: transparent;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.los-hm-hero-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

.los-hm-hero-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media ( max-width: 900px ) {
	.los-hm-hero {
		height: 60vh;
		min-height: 340px;
	}

	.los-hm-hero-btn {
		width: 38px;
		height: 38px;
	}

	.los-hm-hero-prev { left: 10px; }
	.los-hm-hero-next { right: 10px; }
}

@media ( max-width: 640px ) {
	.los-hm-hero {
		height: 52vh;
		min-height: 280px;
	}

	.los-hm-hero-btn { display: none; }
	.los-hm-hero-dots { bottom: 16px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.los-hm-hero-slide {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Shared section styles
   -------------------------------------------------------------------------- */
.los-hm-page-content {
	background: var(--los-hm-bg);
}

.los-hm-section {
	padding: 80px 0;
}

/* Odd sections stay transparent so the theme's own page background shows
   through — if the site background is ever changed in theme options these
   follow it automatically. */
.los-hm-section:nth-child(odd)  { background: transparent; }
.los-hm-section:nth-child(even) { background: var(--los-hm-bg-alt); }

.los-hm-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 40px;
}

.los-hm-section-title {
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #ffffff;
	line-height: 1.2;
}

.los-hm-section-subtitle {
	text-align: center;
	color: #9c8fa8;
	margin: 0 0 44px;
	font-size: .95rem;
	letter-spacing: .02em;
}

.los-hm-section-title + .los-hm-section-subtitle {
	margin-top: 8px;
}

.los-hm-section-title + :not(.los-hm-section-subtitle),
.los-hm-section-subtitle + * {
	margin-top: 44px;
}

.los-hm-section-title + .los-hm-accordion,
.los-hm-section-title + .los-hm-video-wrapper,
.los-hm-section-title + .los-hm-carousel-outer {
	margin-top: 44px;
}

.los-hm-empty {
	text-align: center;
	color: #5c4f68;
	font-style: italic;
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Video section
   -------------------------------------------------------------------------- */
.los-hm-video-section .los-hm-video-wrapper {
	margin-top: 44px;
}

.los-hm-video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}

/* The Overworld theme's FluidVids script wraps every iframe on the page in its
   own <div class="fluidvids"> with position:relative and height:0. That makes
   it the containing block for our absolutely-positioned iframe, so height:100%
   resolves against 0 and the video collapses to a black box. Neutralise the
   injected wrapper so the iframe sizes against .los-hm-video-wrapper instead. */
.los-hm-video-wrapper .fluidvids {
	position: static;
	height: 100%;
	padding: 0 !important;
}

.los-hm-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* --------------------------------------------------------------------------
   Twitch live stream
   -------------------------------------------------------------------------- */
.los-hm-twitch-section .los-hm-twitch-embed {
	margin-top: 44px;
}

.los-hm-twitch-embed {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.los-hm-twitch-player {
	position: relative;
	flex: 1;
	min-width: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}

/* Chat has no intrinsic ratio, so it stretches to whatever height the player
   settles at rather than dictating one of its own. */
.los-hm-twitch-chat {
	position: relative;
	width: 340px;
	flex: 0 0 340px;
	overflow: hidden;
	border-radius: 6px;
	background: #18181b;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}

/* Same FluidVids problem as the video section: the theme wraps every iframe on
   the page in position:relative; height:0, which collapses both embeds. Neutralise
   the injected wrapper so the iframes size against their own containers. */
.los-hm-twitch-player .fluidvids,
.los-hm-twitch-chat .fluidvids {
	position: static;
	height: 100%;
	padding: 0 !important;
}

.los-hm-twitch-player iframe,
.los-hm-twitch-chat iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.los-hm-twitch-note {
	text-align: center;
	color: #9c8fa8;
	font-size: .85rem;
	margin: 18px 0 0;
}

.los-hm-twitch-note a {
	color: #b07ef0;
	text-decoration: none;
}

.los-hm-twitch-note a:hover {
	text-decoration: underline;
}

/* Chat beside the player needs real width to be usable. Below that it stacks,
   and the player keeps its own aspect ratio while chat takes a fixed height. */
@media (max-width: 1000px) {
	.los-hm-twitch-embed.has-chat {
		flex-direction: column;
	}
	.los-hm-twitch-embed.has-chat .los-hm-twitch-chat {
		width: 100%;
		flex: 0 0 auto;
		height: 380px;
	}
}

/* --------------------------------------------------------------------------
   Upcoming Games accordion
   -------------------------------------------------------------------------- */
.los-hm-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.los-hm-accordion-item {
	border: 1px solid #2a1c3a;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color .2s;
}

.los-hm-accordion-item:not(.los-hm-collapsed) {
	border-color: #413066;
}

.los-hm-accordion-header {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 20px;
	background: #221630;
	border: none;
	cursor: pointer;
	text-align: left;
	color: #e6dfec;
	transition: background .18s;
	font-family: inherit;
	font-size: 1rem;
}

.los-hm-accordion-header:hover {
	background: #281a38;
}

.los-hm-acc-logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 4px;
	flex-shrink: 0;
}

.los-hm-acc-name {
	flex: 1;
	font-weight: 600;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #fff;
}

.los-hm-acc-badge {
	font-size: .72rem;
	color: #a494b8;
	background: #2e1e40;
	padding: 3px 8px;
	border-radius: 3px;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.los-hm-acc-count {
	font-size: .75rem;
	color: #5f4c78;
	flex-shrink: 0;
}

.los-hm-acc-arrow {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	position: relative;
	transition: transform .25s ease;
}

.los-hm-acc-arrow::before,
.los-hm-acc-arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	background: #4e3d66;
	height: 2px;
	width: 7px;
	border-radius: 1px;
	transition: background .18s;
}

.los-hm-acc-arrow::before {
	right: 4px;
	transform: translateY(-50%) rotate(-45deg);
}

.los-hm-acc-arrow::after {
	left: 4px;
	transform: translateY(-50%) rotate(45deg);
}

.los-hm-accordion-header:hover .los-hm-acc-arrow::before,
.los-hm-accordion-header:hover .los-hm-acc-arrow::after {
	background: #b0a2c2;
}

.los-hm-accordion-item.los-hm-collapsed .los-hm-acc-arrow {
	transform: rotate(180deg);
}

/* Body */
.los-hm-accordion-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .28s ease;
	background: #140c1b;
}

.los-hm-accordion-item.los-hm-collapsed .los-hm-accordion-body {
	grid-template-rows: 0fr;
}

.los-hm-accordion-body-inner {
	overflow: hidden;
	padding: 0 20px;
}

.los-hm-accordion-item:not(.los-hm-collapsed) .los-hm-accordion-body-inner {
	padding: 18px 20px 22px;
}

/* Bracket group */
.los-hm-bracket-group + .los-hm-bracket-group {
	margin-top: 18px;
}

.los-hm-bracket-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	/* Lifted from #4e3d66 — this label always renders now and carries a logo,
	   so it reads as a sub-heading and needs usable contrast on the card. */
	color: #a494b8;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #2a1c3a;
}

.los-hm-bracket-logo {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 3px;
}

.los-hm-bracket-name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Upcoming series cards

   Mirrors the tournament page's series display: round heading with a count,
   then a row per series with each team's logo and name on the outside and the
   result in the middle. These are all TBC by definition, so the centre column
   always reads TBC / Date TBD rather than carrying a score.
   -------------------------------------------------------------------------- */
.los-hm-round-group {
	border: 1px solid #2a1a42;
	border-radius: 6px;
	overflow: hidden;
}

.los-hm-round-group + .los-hm-round-group {
	margin-top: 10px;
}

.los-hm-round-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	background: #130b22;
	border-bottom: 1px solid #2a1a42;
}

.los-hm-round-label {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #a080c8;
}

.los-hm-round-count {
	font-size: .68rem;
	color: #3d2a56;
	font-weight: 600;
}

.los-hm-series {
	display: flex;
	align-items: stretch;
	background: #14102a;
	min-height: 68px;
}

.los-hm-series + .los-hm-series {
	border-top: 1px solid #1e1430;
}

.los-hm-series-team {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	min-width: 0;
}

.los-hm-series-left  { flex-direction: row; }
.los-hm-series-right { flex-direction: row-reverse; }

.los-hm-series-logo,
.los-hm-series-logo-ph {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: 1px solid #2a1a42;
	border-radius: 6px;
	overflow: hidden;
}

.los-hm-series-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #150d24;
}

.los-hm-series-logo img { width: 100%; height: 100%; object-fit: contain; }

.los-hm-series-logo-ph {
	background: repeating-conic-gradient(#1e1230 0% 25%, #0f0a18 0% 50%) 0 0 / 10px 10px;
}

.los-hm-series-name {
	font-size: .95rem;
	font-weight: 800;
	color: #e0d0f8;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.los-hm-series-centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 140px;
	flex-shrink: 0;
	padding: 10px 12px;
	border-left: 1px solid #2a1a42;
	border-right: 1px solid #2a1a42;
	background: rgba(10, 7, 20, .5);
}

.los-hm-series-caption {
	font-size: .56rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: #3d2a56;
}

.los-hm-series-tbc {
	font-size: 1.15rem;
	font-weight: 800;
	color: #4a6080;
	letter-spacing: .18em;
}

.los-hm-series-date {
	font-size: .68rem;
	color: #6b5480;
}

.los-hm-view-tournament {
	margin-top: 14px;
	text-align: right;
}

.los-hm-view-link {
	font-size: .82rem;
	color: #7d63b0;
	text-decoration: none;
	transition: color .18s;
	letter-spacing: .03em;
}

.los-hm-view-link:hover {
	color: #b39ae0;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Tournament logos carousel
   -------------------------------------------------------------------------- */
.los-hm-carousel-outer {
	display: flex;
	align-items: center;
	gap: 12px;
}

.los-hm-carousel-track-wrap {
	flex: 1;
	overflow: hidden;
}

.los-hm-carousel-track {
	display: flex;
	gap: 20px;
	transition: transform .38s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.los-hm-logo-card {
	flex: 0 0 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 24px 16px 18px;
	background: #221630;
	border: 1px solid #2a1c3a;
	border-radius: 10px;
	transition: border-color .2s, transform .2s, box-shadow .2s;
	color: #9c8fa8;
}

.los-hm-logo-card:hover {
	border-color: #413066;
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
	color: #bbaecb;
}

.los-hm-logo-img-wrap {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.los-hm-logo-img-wrap img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.los-hm-logo-name {
	font-size: .72rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .07em;
	line-height: 1.3;
}

/* Carousel nav buttons */
.los-hm-carousel-btn {
	flex-shrink: 0;
	background: #221630;
	border: 1px solid #2a1c3a;
	color: #4e3d66;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s, color .18s, border-color .18s;
	padding: 0;
}

.los-hm-carousel-btn:hover {
	background: #281a38;
	border-color: #413066;
	color: #b0a2c2;
}

.los-hm-carousel-btn:disabled {
	opacity: .3;
	cursor: default;
}

/* Dot indicators */
.los-hm-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
}

.los-hm-carousel-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #413066;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.los-hm-carousel-dot.active {
	background: #7d63b0;
	transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.los-hm-section {
		padding: 56px 0;
	}
	.los-hm-container {
		padding: 0 24px;
	}
	.los-hm-logo-card {
		flex: 0 0 150px;
	}
}

@media ( max-width: 640px ) {
	.los-hm-section {
		padding: 44px 0;
	}
	.los-hm-container {
		padding: 0 16px;
	}
	.los-hm-section-title {
		font-size: 1.35rem;
	}
	.los-hm-logo-overlay img {
		max-width: 160px;
	}
	.los-hm-logo-card {
		flex: 0 0 130px;
		padding: 18px 10px 14px;
	}
	.los-hm-logo-img-wrap {
		width: 72px;
		height: 72px;
	}
	/* Two team names plus a centre column will not fit, so stack the series:
	   each team on its own row with the centre column between them. */
	.los-hm-series {
		flex-direction: column;
	}
	.los-hm-series-right {
		flex-direction: row;
	}
	.los-hm-series-centre {
		width: 100%;
		flex-direction: row;
		gap: 10px;
		padding: 7px 16px;
		border-left: none;
		border-right: none;
		border-top: 1px solid #2a1a42;
		border-bottom: 1px solid #2a1a42;
	}
	.los-hm-series-name {
		font-size: .85rem;
	}
	.los-hm-acc-count {
		display: none;
	}
}