Template:UI/global community/styles.css

/* TemplateStyles for {{UI/global_community}}. Section layout + stats
 * typography. Button visuals live in UI/button/styles.css; icon visuals
 * in UI/icon/styles.css.
 *
 * Two-column grid: side column (stats + action buttons) on the left,
 * world map on the right. Stacks single-column on narrow viewports via
 * flex-wrap + 360px flex-basis on each column.
 *
 * Theme tokens via var(--labki-*, literal). Same constraints as the
 * other UI/* templates: var() works in `background`, `color`, and
 * `border` shorthand but is rejected in `border-radius`, padding,
 * margin, etc., so geometric values stay literal.
 */

.wiki-global-community {
	margin: 24px 0;
}

.wiki-global-community > h2 {
	margin: 0 0 16px;
}

/* Two-column flex grid. align-items: flex-start keeps each column
 * sized to its own content — without this, the map column stretches
 * to match the (taller) side column's height when its empty-state
 * fallback fires, producing a huge gray rectangle. With flex-start
 * the empty-state sizes to its own padding (~80px), which reads as a
 * placeholder rather than dead space. When the map renders for real,
 * it sets its own height via the #ask's |height= and the side column
 * sits beside it at its natural height. */
.wiki-global-community-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

.wiki-global-community-side {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wiki-global-community-map {
	flex: 1 1 360px;
	min-width: 0;
	border: 1px solid var(--labki-border, #d8dde3);
	border-radius: 8px;
	overflow: hidden;
}

/* Maps extension renders its container directly inside our wrapper;
 * make sure it fills the wrapper edge-to-edge. The height is set on
 * the #ask itself via |height=, so we don't enforce one here. */
.wiki-global-community-map > div,
.wiki-global-community-map .maps-leaflet,
.wiki-global-community-map .leaflet-container {
	width: 100% !important;
}

.wiki-global-community-map-empty {
	padding: 32px 24px;
	text-align: center;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	background: var(--labki-bg-subtle, #f8f9fa);
}

/* ================================================================
   Stats row — three inline icon+number+label units, no card chrome.
   Laid out as a 3-column grid so the action buttons below can pin
   each button under its corresponding stat. Sticks to exactly
   repeat(3, 1fr) rather than auto-fit so the columns stay aligned
   with the action row at every container width; the side column
   itself is already narrow-stack-friendly via the outer grid's
   flex-basis 360px wrap point.
   ================================================================ */

.wiki-global-community-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
}

.wiki-global-community-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Icon scales via font-size; color comes from currentColor through
 * UI/icon's mask. Set a slightly muted accent here so the icon reads
 * as supporting decoration rather than competing with the big
 * number. */
.wiki-global-community-stat-icon {
	display: inline-flex;
	align-items: center;
	font-size: 1.6em;
	line-height: 1;
	color: var(--labki-accent, #2774AE);
}

.wiki-global-community-stat-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.wiki-global-community-stat-value {
	font-size: 1.8em;
	font-weight: 600;
	line-height: 1;
	color: var(--labki-primary, #003B5C);
}

.wiki-global-community-stat-label {
	font-size: 0.8em;
	color: var(--labki-text-muted, #5a6a7a);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 4px;
}

/* ================================================================
   Action button row — same 3-column grid as the stats above so each
   button pins under its corresponding stat (slot 1: signup/profile,
   slot 2: discussion, slot 3: explore-publications).

   The login-state gating spans (.hero-btn-anon / .hero-btn-user)
   use `display: contents` when active (MediaWiki:Common.css), which
   means their child UI/button becomes a grid item directly. So slot 1
   always has exactly one button (whichever login state is active),
   slot 2 always has discussion, slot 3 always has Explore
   publications — every slot is column-aligned with its stat above.

   We don't force buttons to fill their grid cells (no width: 100%),
   so each button sits at its natural inline width at the left of its
   column — which is what the mockup shows. justify-items: start makes
   that explicit.
   ================================================================ */

.wiki-global-community-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	justify-items: start;
}

/* ================================================================
   Subscribe footer — small text link beneath the action row.
   Demoted from a button because it's a recurring affordance rather
   than a primary conversion; rendered only when subscribe_url= is
   set. Sits under the action grid (not inside it) so it spans the
   full width of the side column and isn't pinned to a stat slot.
   ================================================================ */

.wiki-global-community-subscribe {
	font-size: 0.85rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin: 6px 0 0 0;
}

.wiki-global-community-subscribe a,
.wiki-global-community-subscribe a:visited {
	color: var(--labki-accent, #2774AE);
	text-decoration: none;
	font-weight: 500;
}

.wiki-global-community-subscribe a:hover {
	text-decoration: underline;
}

.wiki-global-community-subscribe-prefix {
	color: var(--labki-text-muted, #5a6a7a);
}