/*

	Mod pages: one per mod, all sharing this layout

*/


/*

	Mod header

*/
.backLink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 2rem;
	color: var(--color-text-muted);
	text-decoration: none;
}

.backLink img {
	width: 1.1rem;
	height: 1.1rem;
	object-fit: contain;
}

.backLink:hover {
	color: var(--color-text-bright);
}

/* Same columns as About below, so the icon sits just above the Details box */
.modHeader {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 0 2rem;
	align-items: end;
}

.modTitle {
	position: relative;
}

/* As tall as the title beside it, up to 15rem, but never taller: it counts as no size of its own (contain), so the
   title alone sets the header's height, and the icon stretches to fill it. Reaches down into About's top padding,
   leaving the same 1.25rem gap above Details as below the nav bar */
.modIcon {
	align-self: stretch;
	justify-self: center;
	contain: size;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 15rem;
	aspect-ratio: 1;
	margin: 1.25rem 0 -1.25rem;
	object-fit: contain;
	border-radius: var(--radius-card);
}

@media (max-width: 800px) {
	.modHeader {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.modIcon {
		align-self: center;
		contain: none;
		width: 5rem;
		margin-bottom: 0;
	}
}

/* The game's icon, large and faint behind the title, like the home page's section marks */
.pageMark {
	--mark-size: 14rem;
	--margin: calc((100vw - min(100vw, var(--content-width))) / 2 + 1.25rem);
	position: absolute;
	left: max(-1.5rem, calc(var(--mark-size) / 2 - var(--margin)));
	top: 7.0625rem; /* a little below the title's top-left corner, under the back link */
	z-index: -1;
	width: var(--mark-size);
	height: var(--mark-size);
	transform: translate(-50%, -50%);
	color: var(--color-imprint);
	pointer-events: none;
}

.modHeader h1 {
	margin: 1rem 0 0;
	font-size: 2.75rem;
	text-align: left;
	word-spacing: normal;
	color: var(--color-text-bright);
}

.modTagline {
	margin: 0.25rem 0 0;
	font-size: 1.2rem;
	color: var(--color-text-muted);
}

.modHeader .modLinks {
	margin-top: 1rem;
}


/*

	About and details, then the tabs. Both share the text styles.

*/
.modAbout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 800px) {
	.modAbout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.modAbout > div > :first-child {
	margin-top: 0;
}

:is(.modAbout, .tabPanel) p {
	margin: 1rem 0;
	line-height: 1.6;
}

:is(.modAbout, .tabPanel) h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.15rem;
	color: var(--color-text-bright);
}

:is(.modAbout, .tabPanel) ul,
:is(.modAbout, .tabPanel) ol {
	margin: 0;
	padding-left: 1.2rem;
	line-height: 1.8;
}

:is(.modAbout, .tabPanel) li::marker {
	color: var(--color-accent);
}

.featureList {
	columns: 2;
}

/* Two lists side by side, like Melee Enhancement's skills for each character: each as wide as it needs, the
   second just past the first, rather than half way across; one above the other when there isn't room */
.sideBySide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), max-content));
	gap: 0 6rem;
}

@media (max-width: 560px) {
	.featureList {
		columns: 1;
	}
}

kbd {
	padding: 0.05rem 0.4rem;
	font-family: inherit;
	font-size: 0.9em;
	color: var(--color-text-bright);
	background-color: var(--color-border);
	border: 1px solid var(--color-border-strong);
	border-radius: 4px;
}

code {
	padding: 0.2rem 0.4rem;
	font-size: 0.9em;
	color: var(--color-text-bright);
	background-color: var(--color-border);
	border-radius: 4px;
}

/* Name/value pairs, used for options and rules */
.infoList {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0.6rem 1.25rem;
	margin: 0;
	line-height: 1.5;
}

.infoList dt {
	font-weight: bold;
	color: var(--color-text-bright);
}

.infoList dd {
	margin: 0;
}

/* A mod's options: each one's name, with its description underneath, and a bullet point for each of its modes
   when it has several */
.optionList {
	margin: 0;
	line-height: 1.6;
}

.optionList dt {
	font-weight: bold;
	color: var(--color-text-bright);
}

.optionList dt:not(:first-child) {
	margin-top: 1rem;
}

/* Set in a little from the option's name */
.optionList dd {
	margin: 0.2rem 0 0 1rem;
}

@media (max-width: 560px) {
	.infoList {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.infoList dd {
		margin-bottom: 0.6rem;
	}
}

.modNote {
	padding: 0.75rem 1rem;
	color: var(--color-text-muted);
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-surface);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.modDetails {
	padding: 1.25rem;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}

.modDetails h2 {
	font-size: 1.3rem;
}

.modDetails dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem 1rem;
	margin: 1rem 0 0;
}

.modDetails dt {
	color: var(--color-text-muted);
}

.modDetails dd {
	margin: 0;
	color: var(--color-text-bright);
}


/*

	Screenshot

*/
.screenshot {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-border);
}


/*

	Tabs: Options, Commands, Examples, Changelog and so on. The tab bar only shows once tabs.js has
	set them up (.tabsReady); before that, each panel shows under its own heading.

*/
.tabList {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border-strong);
}

.modTabs:not(.tabsReady) .tabList,
.tabsReady .tabHeading {
	display: none;
}

.modTabs:not(.tabsReady) .tabPanel + .tabPanel {
	margin-top: 2.5rem;
}

.modTabs .tabHeading {
	margin-bottom: 1rem;
}

.tabList [role="tab"] {
	margin-bottom: -1px;
	padding: 0.6rem 1.1rem;
	font: inherit;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--color-text-muted);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	cursor: pointer;
}

.tabList [role="tab"]:hover {
	color: var(--color-text-bright);
	background-color: var(--color-surface);
}

.tabList [role="tab"][aria-selected="true"] {
	color: var(--color-text-bright);
	border-bottom-color: var(--color-accent);
}

.tabList [role="tab"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.tabsReady .tabPanel > :nth-child(2) {
	margin-top: 0;
}


/*

	Gallery: a row of 16:9 slides (screenshots, and a video first if there is one), each 80% of the width, so the
	edges of the ones either side show. It snaps a slide to the middle; gallery.js marks that one current, and
	scrolls a neighbour there when it, or the chevron over it, is clicked

*/
.gallery {
	position: relative;
}

.galleryTrack {
	display: flex;
	gap: 1rem;
	padding-inline: 10%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	border-radius: var(--radius-card);
	/* Quick clicks on the edges would otherwise select the images, like text */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* While gallery.js eases a slide into the middle, which it'd otherwise snap back from after every step */
.galleryTrack.gallerySliding {
	scroll-snap-type: none;
}

/* With gallery.js, the chevrons, clicking the edges and the arrow keys stand in for the scrollbar */
.galleryReady .galleryTrack {
	scrollbar-width: none;
}

.galleryReady .galleryTrack::-webkit-scrollbar {
	display: none;
}

/* Centred over the neighbours' edges, either side (the track's 10% padding, less half the gap) */
.galleryArrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(2rem, 4.5vw, 3rem);
	aspect-ratio: 1;
	padding: 0;
	color: var(--color-text-bright);
	background-color: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: -50% -50%;
	transition: opacity 0.25s ease, visibility 0.25s, background-color 0.15s ease, scale 0.15s ease;
}

.galleryPrevious {
	left: calc(5% - 0.5rem);
}

.galleryNext {
	left: calc(95% + 0.5rem);
}

.galleryArrow.shown {
	opacity: 1;
	visibility: visible;
}

.galleryArrow:hover {
	background-color: var(--color-accent);
	scale: 1.08;
}

.galleryArrow:focus-visible {
	outline: 2px solid var(--color-accent-light);
	outline-offset: 2px;
}

.galleryArrow svg {
	width: 55%;
	height: 55%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.galleryPrevious svg {
	scale: -1 1;
}

.galleryTrack:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.gallerySlide {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	scroll-snap-align: center;
	transition: opacity 0.3s ease;
}

.gallerySlide img,
.gallerySlide iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
}

/* The neighbours: dimmed, and covered, so a click scrolls to them rather than starting their video */
.galleryReady .gallerySlide:not(.current) {
	opacity: 0.45;
	cursor: pointer;
}

.galleryReady .gallerySlide:not(.current)::after {
	content: "";
	position: absolute;
	inset: 0;
}

.galleryReady .gallerySlide:not(.current):hover {
	opacity: 0.7;
}


/*

	Before/after examples

*/
.exampleGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem 1rem;
}

.exampleGrid figure {
	margin: 0;
}

.exampleGrid figcaption {
	margin-bottom: 0.5rem;
	font-size: 1.3rem; /* as the mod names on the cards */
	font-weight: bold;
	color: var(--color-text-bright);
}

.exampleGrid img-comparison-slider {
	display: block;
	width: 100%;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.exampleGrid img {
	display: block;
	width: 100%;
}