/* ================================================================
   BrainyBlast reusable "tab menu + expanding panel" + "specials grid"
   Used on subject pages (Chemistry, Biology, and future subjects).

   Naming: all custom classes are prefixed "bb-" so they can never
   collide with the site's main theme classes (checked against
   main.css directly -- no existing bb- prefixed classes existed).

   Known main.css interactions this file accounts for:
   - `button { all: unset; ... }` (global reset) is overridden by
     .bb-tab-btn's own explicit properties (class beats element).
   - `.wrapper.styleN button` / `.wrapper.styleN .button` rules add
     an inset box-shadow border and their own hover/active background
     colors, and are MORE specific than a plain .bb-tab-btn class.
     Those are neutralized below with !important so the tab menu
     looks identical no matter which .wrapper.styleN section (style1,
     style2, style3, etc.) it's placed inside.
   - `.purplesubjectinfo` normally has `width:90%; float:left;` (sized
     for the old 3-column card layout). Both are overridden below so
     it stretches the full width of a tab panel instead.
   ================================================================ */

/* ---- Specials grid (game cards, e.g. Octet Builder) ----
   Horizontal layout: thumbnail on the left, title + description on the right.
   auto-fit stretches a lone card across the full width; with 2+ games the cards
   share the row (two per row on desktop, one per row on phones). */
.bb-specials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
	gap: 1rem;
	margin-top: 2rem;
}
.bb-special-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	column-gap: 1.25rem;
	align-items: start;
	text-align: left;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bb-special-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.bb-special-card img {
	grid-row: 1 / span 2; /* image spans both the title and description rows */
	width: 96px;
	height: 96px;
	object-fit: cover; /* keeps non-square thumbnails from looking squished */
	border-radius: 8px;
	margin: 0;
}
.bb-special-card h3 {
	grid-column: 2;
	margin: 0 0 0.4rem 0;
	font-size: 1.05rem;
}
.bb-special-card p {
	grid-column: 2;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.85;
}
/* Slightly smaller thumbnail on phones so the text keeps enough room */
@media (max-width: 480px) {
	.bb-special-card {
		grid-template-columns: 72px 1fr;
		column-gap: 1rem;
	}
	.bb-special-card img {
		width: 72px;
		height: 72px;
	}
}
.bb-specials-comingsoon {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
}

/* ---- Horizontal tab menu ---- */
.bb-tab-menu {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}
.bb-tab-btn {
	flex: 1 1 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1rem;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	color: inherit;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	box-sizing: border-box;
	height: 60px; /* fixed height so <a> and <button> tabs always match, regardless of tag defaults */
	box-shadow: none !important; /* cancels the inset border from .wrapper.styleN button rules */
}
/* .scrolly / .wrapper.styleN rules in main.css can be more specific than a bare
   .bb-tab-btn class on the Specials <a> tab; these win it back. */
.bb-tab-menu a.bb-tab-btn {
	padding: 0.9rem 1rem !important;
	line-height: 1.3 !important;
	text-decoration: none;
}
.bb-tab-btn:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	transform: translateY(-2px);
}
.bb-tab-btn.is-active {
	background: #6c3fb5 !important; /* adjust hex to match your site's purple accent */
	color: #fff !important;
}
.bb-tab-btn img {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}
.bb-tab-btn span {
	font-weight: 600;
}

/* ---- Shared expanding panel area below the menu row ---- */
.bb-tab-panel-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}
.bb-tab-panel-wrapper.is-active {
	grid-template-rows: 1fr;
	margin-top: 1rem;
}
.bb-tab-panel-inner {
	overflow: hidden;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Force .purplesubjectinfo to stretch full width inside a tab panel instead of
   using its original width:90%; float:left; (sized for the old 3-column cards). */
.bb-tab-panel-wrapper .purplesubjectinfo {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
	padding: 1.25rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
}
.bb-tab-panel-wrapper .purplesubjectinfo h3 {
	margin-top: 0;
}

.bb-bioman-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}
.bb-bioman-links .button {
	margin: 0 !important;
}