/*
Theme Name: Serenity Concert
Description: Single-page block theme for the "Serenity & Eternity" concert.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: serenity-concert
*/

html { background-color: #0d2456; }

body {
	background:
		radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1px 1px at 68% 9%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1.5px 1.5px at 85% 42%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1px 1px at 30% 64%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1.5px 1.5px at 52% 88%, rgba(255, 255, 255, 0.4), transparent),
		linear-gradient(180deg, #0b1d48 0%, #173f86 45%, #0d2456 100%);
	background-color: #0b1d48;
	background-size: 400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px, 100% 100%;
	min-height: 100vh;
}

/* Header artwork bleeds to the edges and fades into the page. */
.sc-hero-art img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
/* Edge-to-edge on phones. */
@media (max-width: 1099px) {
	.sc-hero-art {
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
		max-width: none !important;
	}
}
@media (min-width: 1100px) {
	.sc-hero-art img {
		-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
		mask-composite: intersect;
	}
}

/* Gold-framed panels, echoing the poster's info box. */
.sc-panel {
	background: rgba(9, 24, 64, 0.78);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Performer tiles: photo + name, one link slot per tile on the image. */
.sc-performers {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (min-width: 700px) {
	.sc-performers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.sc-performer {
	margin: 0 !important;
	background: rgba(9, 24, 64, 0.85);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	overflow: hidden;
}
.sc-performer figure { margin: 0; }
.sc-performer img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.sc-performer a:hover img,
.sc-performer a:focus-visible img { transform: scale(1.04); }
.sc-performer .sc-performer-name {
	margin: 0;
	padding: 0.55em 0.4em 0.65em;
	text-align: center;
}

/* Ticket price list. */
.sc-prices table { border-collapse: collapse; width: 100%; }
.sc-prices td {
	border: 0;
	border-bottom: 1px solid rgba(217, 182, 95, 0.35);
	padding: 0.45em 0;
}
.sc-prices td:last-child { text-align: right; font-weight: 700; color: var(--wp--preset--color--gold); }

.sc-badge {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	padding: 0.2em 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Lazy-loaded Google Map. */
.sc-map iframe {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
	border-radius: 8px;
}