/*
 * Categories Section — homepage [log_categories]: draggable 3D canvas drum.
 * @package log-core
 */

/* Reference's body is pure white (var(--white)), so its plain, unclassed
   #categoriesSection reads white by inheritance. This site's body uses
   --paper (#f5f9ff) sitewide by design, so #categories needs its own
   explicit white background to match the reference section, without
   changing the sitewide body tone. */
#categories {
	background: var(--white);
}

/* Global .wrap utility for all homepage sections */
.wrap {
	max-width: var(--max-width, 1340px);
	margin: 0 auto;
	padding: 0 40px;
}

.head-row {
	display: flex;
	justify-content: space-between;
	/* !important removed — it was beating log-responsive.css's mobile
	   "align-items: flex-start" override (both !important, this file
	   loads later), right-aligning Categories/Health Library headings
	   on mobile instead of left-aligning them like every other section. */
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

/* ── Category drum canvas ── */
.cat-canvas-wrap {
	position: relative;
	width: 100%;
	height: 520px;
	cursor: grab;
	user-select: none;
	margin-top: 8px;
}

.cat-canvas-wrap:active { cursor: grabbing; }

.cat-canvas-wrap canvas { display: block; width: 100%; height: 100%; }

.cat-drum-hint {
	text-align: center;
	margin-top: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-400);
}

@media (max-width: 768px) {
	.wrap { padding: 0 20px; }
	.cat-canvas-wrap { height: 380px; }
}

@media (max-width: 480px) {
	.cat-canvas-wrap { height: 300px; }
}

@media (max-width: 540px) {
	.dark-pill-btn { font-size: 10px; padding: 7px 15px; }
}