/* Kiwanis Skypark — front-end.
 *
 * Type is inherited from the theme throughout and never declared here. That is
 * what kiwanis-weekend-guide does on this site, and it is what keeps a
 * plugin-rendered block from announcing itself as one. Colour is the exception:
 * the navy and amber are lifted from the Kiwanis of Scotts Valley banner and
 * exposed as variables, so retuning is a two-line edit.
 */

.ksp {
	--ksp-navy: #011d34;
	--ksp-amber: #e1850c;
	--ksp-line: #ddd;
	--ksp-quiet: #5b6770;
	--ksp-card: #fff;
	--ksp-radius: 14px;
	--ksp-shadow: 0 5px 18px rgba(0, 0, 0, .07);
	--ksp-shadow-lift: 0 14px 34px rgba(1, 29, 52, .18);

	max-width: 1100px;
	margin: 2rem auto;
	font-family: inherit;
}

/* ---- event ---- */

.ksp-banner {
	border: 1px solid var(--ksp-line);
	border-radius: var(--ksp-radius);
	overflow: hidden;
	box-shadow: var(--ksp-shadow);
	background: var(--ksp-card);
}

.ksp-banner-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- shirt ---- */

.ksp-shirt {
	margin-top: 2.75rem;
	/* A "Merch" menu item lands on #shirt; without this the sticky header on
	   this site would sit on top of the heading it just jumped to. */
	scroll-margin-top: 6rem;
}

.ksp-shirt-head {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	margin: 0 0 1.1rem;
	color: var(--ksp-navy);
}

.ksp-shirt-card {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	background: var(--ksp-card);
	border: 1px solid var(--ksp-line);
	border-radius: var(--ksp-radius);
	overflow: hidden;
	box-shadow: var(--ksp-shadow);
}

@media (max-width: 860px) {
	.ksp-shirt-card {
		grid-template-columns: 1fr;
	}
}

.ksp-shirt-shot {
	/* The mockup carries its own studio backdrop; matching it means no seam
	   shows while the image is still decoding. */
	background: #8b8b8b;
	min-width: 0;
}

.ksp-shot-frame {
	position: relative;
	/* Clips the loupe to the photo rather than letting it spill over the copy
	   beside it. */
	overflow: hidden;
}

.ksp-shirt-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- loupe ---- */

.ksp-loupe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--ksp-loupe-size, 260px);
	height: var(--ksp-loupe-size, 260px);
	border-radius: 50%;
	overflow: hidden;
	/* Never intercepts the pointer — it sits on top of the photo and would
	   otherwise fight the hover that summons it. */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(-9999px, -9999px, 0);
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, .9),
		0 0 0 4px rgba(1, 29, 52, .55),
		0 12px 30px rgba(0, 0, 0, .35);
	transition: opacity .12s ease-out;
	z-index: 2;
}

.ksp-loupe.is-on {
	opacity: 1;
	visibility: visible;
}

.ksp-loupe-stage {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.ksp-loupe-base {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* The print-resolution poster, laid over the magnified mockup at exactly the
   rectangle the print occupies, so the two read as one continuous image. The
   rectangle itself comes from the shortcode as inline percentages. */
.ksp-loupe-hi {
	display: block;
	position: absolute;
	opacity: 0;
	transition: opacity .18s ease-out;
}

.ksp-loupe-hi.is-ready {
	opacity: 1;
}

.ksp-shirt-body {
	padding: 1.6rem 1.5rem 1.75rem;
	border-left: 1px solid var(--ksp-line);
	display: flex;
	flex-direction: column;
	/* Centred rather than pushed to the edges: the shirt photo is much taller
	   than this column's text, and spreading three short lines over that height
	   leaves the button stranded at the bottom of an empty panel. */
	justify-content: center;
	gap: .7rem;
}

@media (max-width: 860px) {
	.ksp-shirt-body {
		justify-content: flex-start;
		border-left: 0;
		border-top: 1px solid var(--ksp-line);
	}
}

.ksp-shirt-name {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--ksp-navy);
}

.ksp-shirt-desc p {
	margin: 0 0 .7rem;
}

.ksp-shirt-desc p:last-child {
	margin-bottom: 0;
}

/* One button per cut. They wrap rather than shrink: a squeezed "V-neck" that
   has to be read twice costs more than a second line does. */
.ksp-btns {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .35rem;
}

/* Real links now, one per Amazon listing, so every inherited link style has to
   be undone and then reapplied deliberately. */
.ksp-btn {
	display: inline-block;
	font-weight: 700;
	padding: .8rem 1.5rem;
	border-radius: 999px;
	background: var(--ksp-navy);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}

.ksp-btn:hover,
.ksp-btn:focus-visible {
	background: var(--ksp-amber);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--ksp-shadow-lift);
}

.ksp-btn:focus-visible {
	outline: 3px solid var(--ksp-navy);
	outline-offset: 3px;
}

.ksp-newtab {
	font-size: .78rem;
	color: var(--ksp-quiet);
}

/* Admin-only reminders for fields that are still blank. */
.ksp-todo {
	margin: 1rem 0 0;
	font-size: .85rem;
	padding: .6rem .75rem;
	border: 1px dashed #bbb;
	border-radius: 8px;
	background: #fbfaf7;
	color: var(--ksp-quiet);
}

@media (prefers-reduced-motion: reduce) {
	.ksp-btn,
	.ksp-loupe,
	.ksp-loupe-hi {
		transition: none;
	}

	.ksp-btn:hover,
	.ksp-btn:focus-visible {
		transform: none;
	}
}