/* Ballina RSL — Sponsor Scotty Board
   Frames the board at a sensible size and gets out of the way. Deliberately no colours or
   typography beyond the fallback link: everything visible inside the frame is the board's
   own, so the club's theme can't fight it and a theme update can't break it. */

.brsl-scotty {
	--brsl-scotty-max: 1100px;
	max-width: var(--brsl-scotty-max);
	margin-block: 1.5em;
}

.brsl-scotty--align-center { margin-inline: auto; }
.brsl-scotty--align-left   { margin-inline: 0 auto; }
.brsl-scotty--align-right  { margin-inline: auto 0; }

.brsl-scotty__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	/* Below roughly this the board's small print stops being readable. The board itself
	   always fits whatever box it's given — it scales proportionally — so this floor is
	   about legibility, not layout. */
	min-height: 300px;
	overflow: hidden;
	border-radius: 14px;
	/* matches the board's own background, so there's no white flash while it loads */
	background: #080d2b;
}

.brsl-scotty__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* aspect-ratio is ~97% supported, but a ratio box that fails collapses to nothing — so keep
   the old padding trick as a fallback rather than risk an invisible board on an old device. */
@supports not (aspect-ratio: 1 / 1) {
	.brsl-scotty__frame { height: 0; padding-top: 56.25%; min-height: 0; }
	.brsl-scotty--portrait .brsl-scotty__frame { padding-top: 177.78%; }
}

/* Explicit overrides. Portrait gets its own default width: 9:16 at 1100px wide would be
   nearly two thousand pixels tall. */
.brsl-scotty--landscape .brsl-scotty__frame { aspect-ratio: 16 / 9; }
.brsl-scotty--portrait  { --brsl-scotty-max: 420px; }
.brsl-scotty--portrait .brsl-scotty__frame { aspect-ratio: 9 / 16; min-height: 480px; }

/* auto: wide frame on desktop, tall frame on phones. A 16:9 frame in a phone-width column
   is only ~200px tall, which is where the board becomes unreadable — a phone is portrait,
   so give it the portrait layout and it fills the screen properly. */
@media (max-width: 700px) {
	.brsl-scotty--auto .brsl-scotty__frame {
		aspect-ratio: 9 / 16;
		min-height: 480px;
	}
	@supports not (aspect-ratio: 1 / 1) {
		.brsl-scotty--auto .brsl-scotty__frame { padding-top: 177.78%; }
	}
}

.brsl-scotty__link {
	margin: 0.6em 0 0;
	text-align: center;
	font-size: 0.95em;
}
.brsl-scotty--align-left  .brsl-scotty__link { text-align: left; }
.brsl-scotty--align-right .brsl-scotty__link { text-align: right; }