@font-face { font-family: "Jura"; src: url("/assets/fonts/Jura-Regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Jura"; src: url("/assets/fonts/Jura-Light.woff2") format("woff2"); font-weight: 300; }
@font-face { font-family: "Jura"; src: url("/assets/fonts/Jura-Medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Jura"; src: url("/assets/fonts/Jura-SemiBold.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Jura"; src: url("/assets/fonts/Jura-Bold.woff2") format("woff2"); font-weight: 700 bold; }

* { margin: 0; padding: 0 }
html { overflow-y: scroll; scrollbar-width: thin; scroll-behavior: smooth; }
body { opacity: 1;
	font-family: "Jura", sans-serif; font-weight: 300;
	color: #000; background-color: #fff;
	transition: opacity .400s; }
a { text-decoration: none; color: #c33; }
a:hover { cursor: pointer; }
img { max-width: 100%; }
strong { font-weight: bold; }
p { margin-bottom: 0.5rem; }
ol { margin-left: 1rem; }
.fourohfour, .nullptr { padding: 2rem 0; text-align: center; font-family: serif;}
.fourohfour h1, .nullptr h1 { font-size: 5rem; padding: 0; font-family: serif; }

#s-body { }
.s-header { width: 100%; }
.s-main, .s-footer { max-width: 45em; margin: 0 auto;}

#s-title { font-size: 2.4em; font-weight: bold; color: #aaa; }
#s-title img { width: 100%; object-fit: cover; }

#s-main { opacity: 1; transition: opacity 400s; }

.s-home.s-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"lyssna kontakt"
		"spelningar spelningar"
		"nyheter nyheter"
		"bandet bandet"
		"album album";
	justify-items: center;
	align-items: stretch;
	justify-items: stretch;
	gap: 1.5rem;
}

.s-main section .s-more { margin-top: 1rem; text-align: right; font-weight: bold; }
.s-main article p { word-break: break-word; hyphens: auto; }

#s-lyssna { grid-area: lyssna }
#s-kontakt { grid-area: kontakt }
#s-spelningar { grid-area: spelningar }
#s-nyheter { grid-area: nyheter }
#s-bandet { grid-area: bandet }
#s-album { grid-area: album }

.s-home .t-spelningar { width: 100%; max-width: 100%; }
.t-spelningar th { padding: 0.1rem 0.25rem; background-color: #633; color: #eee; font-weight: bold; }
.t-spelningar tr:nth-child(even) { background-color: #ddd; }
.t-spelningar tr td:first-child { white-space: nowrap; }
.t-spelningar td { padding: 0.1rem 0.25rem; }

.a-spelningar, #s-nyheter section, #s-album section {
	display: grid;
	grid-template-columns: auto auto;
	gap: 1.5rem;
}

#s-nyheter article { margin-bottom: 1rem; }
.s-skivslapp h2 { margin-top: 1rem; font-size: 175%; }

.s-footer { text-align: center; }

.pagination { text-align: center; padding-bottom: 2rem; }
.pagination li { display: inline-block; padding: 0; width: 1.2em; text-align: center; }
.pagination li:first-child { padding-right: .5rem; }
.pagination li:last-child { padding-left: .5rem; }
.pagination li.active a { color: #f33; }
.pagination li.disabled a { color: #aaa; }


#s-lyssna p, #s-kontakt p { line-height: 3rem; vertical-align: middle; font-size: 1.5rem; }
#s-lyssna ul, #s-kontakt ul, #s-bandet ul { list-style-type: none; }

.s-senaste-nytt img { width: 100%; max-height: 8rem; object-fit: cover; object-position: 0 50%; mask-image: linear-gradient(white, transparent);}
.s-senaste-nytt article, .s-skivslapp article { margin-bottom: 1rem; }
header { margin-bottom: 1rem; }

@media screen and (min-width: 45.5rem) {
	.s-home h2 { text-align: center; }
	.s-home h2::before, .s-home h2::after { content: '★'; padding: 0.5rem; }
	.s-main > section {
		padding-bottom: 1rem;
	}
	#s-lyssna ul, #s-kontakt ul, #s-bandet ul { text-align: center; }
	#s-lyssna li, #s-kontakt li, #s-bandet li { padding: 0 0.5rem; }
	#s-lyssna p, #s-lyssna li,
	#s-kontakt p, #s-kontakt li { display: inline; }
	#s-bandet li::before, #s-bandet li::after { content: '★'; padding: 0.5rem; }
	#s-lyssna p span, #s-kontakt p span { display: none; }
	#s-lyssna img, #s-kontakt img { width: 3rem; vertical-align: middle; }
	.a-spelningar, #s-album section { grid-template-columns: auto 1fr; }
	.a-spelningar > p { font-size: 1.5rem; font-weight: bold; text-align: right}
}
@media screen and (max-width: 45.6rem) {
	.s-home.s-main > section {
		margin: 0 0.5rem;
		padding: 1rem;
		border: 1px solid #888;
		border-radius: 0.5rem;
	}
	.s-main h2 { text-align: left; }
	.s-home.s-main {
		grid-template-columns: 1fr;
		grid-template-areas:
			"lyssna"
			"kontakt"
			"spelningar"
			"nyheter"
			"bandet"
			"album";
	}
	.s-expand {
		display: none;
		margin-top: 1rem;
	}
	.s-growbtn:checked ~ .s-expand { display: block; }
	#s-lyssna img, #s-kontakt img { width: 2rem; vertical-align: text-bottom; }
	#s-nyheter section, #s-album section { grid-template-columns: auto; }
	.s-senaste-nytt, .s-skivslapp { padding: 0 1rem; }
	.a-spelningar > p { font-size: 1.25rem; font-weight: bold; text-align: left}
}

input { display: none }