/*
 * AURA Clubs — Club digital experience.
 *
 * One stylesheet serves every layout preset. Presentation values arrive as
 * custom properties on `.aura-club-detail`, so a preset change is a change of
 * data rather than a change of stylesheet, and Elementor can override the same
 * properties per widget instance.
 *
 * Layout uses logical properties throughout so right-to-left locales work
 * without a mirrored stylesheet.
 *
 * Numeric values resolve through a two-step custom property: an `-x` override
 * layer first, then the value the renderer writes inline. The renderer's inline
 * property would otherwise always beat a stylesheet rule on an ancestor, which
 * is exactly what an Elementor style control writes.
 */

.aura-club-detail {
	--aura-club-gap: var(--aura-club-gap-x, 1.5rem);
	--aura-club-surface: var(--aura-clubs-card-background, #fff);
	--aura-club-border: var(--aura-clubs-border, #e2e4e7);
	--aura-club-muted: #61656c;
	--aura-club-accent: var(--aura-clubs-accent, #1c6b52);
	--aura-club-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);

	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: grid;
	gap: var(--aura-club-gap);
	container-type: inline-size;
}

.aura-club-detail[data-surface="flat"] {
	--aura-club-shadow: none;
}

/* --------------------------------------------------------------- Hero --- */

.aura-club-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
	background: #eef0f2;
	block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height, 320px));
}

.aura-club-hero--natural {
	block-size: auto;
	background: none;
	border-radius: 0;
}

/*
 * A banner ratio crops the cover the same way at every width, which is what
 * makes a cover read as a cover rather than as a differently sized strip on
 * each screen. It wins over the fixed heights, including the responsive ones.
 */
.aura-club-hero--ratio {
	block-size: auto;
	aspect-ratio: var(--aura-club-cover-ratio, 2.7 / 1);
	/*
	 * Generous enough that the proportion actually holds at the widths people
	 * browse at, capped so an ultrawide screen does not hand over the whole
	 * viewport to a banner.
	 */
	max-block-size: min(60vh, 40rem);
}

/*
 * A cover that stops at the content column is a picture; one that runs the
 * width of the page is a cover. The scrollbar is measured by the runtime and
 * subtracted, because `100vw` includes it and would push the page sideways.
 */
.aura-club-hero--bleed {
	--aura-club-page: calc(100vw - var(--aura-club-scrollbar, 0px));
	inline-size: var(--aura-club-page);
	max-inline-size: var(--aura-club-page);
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

/* Contained instead, the cover keeps the corners the rest of the page has. */
.aura-club-hero--inset {
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
}

.aura-club-hero--ratio > img,
.aura-club-hero--ratio > video {
	block-size: 100%;
	object-fit: cover;
}

.aura-club-hero > img,
.aura-club-hero > video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Where the picture was framed to sit, chosen in the Club editor. */
	object-position: var(--aura-club-cover-focus, 50% 50%);
	display: block;
}

@media (max-width: 767px) {
	.aura-club-hero > img { object-position: var(--aura-club-cover-focus-mobile, var(--aura-club-cover-focus, 50% 50%)); }
}

.aura-club-hero--natural > img,
.aura-club-hero--natural > video {
	block-size: auto;
	object-fit: contain;
}

.aura-club-hero--empty {
	background: linear-gradient(120deg, #e8ecf1, #f6f8fa);
}

.aura-club-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 14, 22, .1), rgba(9, 14, 22, .85));
	pointer-events: none;
}

/* Administrators can frame the real cover in place; visitors receive none of this markup. */
.aura-club-cover-editor {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	max-inline-size: min(46rem, calc(100% - 2rem));
}

.aura-club-cover-editor button {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 999px;
	background: rgba(10, 24, 17, .86);
	color: #fff;
	padding: .62rem .9rem;
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}

.aura-club-cover-editor button:hover,
.aura-club-cover-editor button:focus-visible { background: #0a1811; }

.aura-club-cover-editor__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .45rem;
	padding: .4rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.aura-club-cover-editor__actions[hidden] { display: none; }
.aura-club-cover-editor__actions button { box-shadow: none; }
.aura-club-cover-editor__devices { display: inline-flex; gap: .2rem; padding: .16rem; border-radius: 999px; background: #e8eeeb; }
.aura-club-cover-editor__devices button { border-color: transparent; background: transparent; color: #1d2327; padding: .45rem .65rem; }
.aura-club-cover-editor__devices button.is-active { background: #0a1811; color: #fff; }
.aura-club-cover-editor__save { background: var(--aura-club-accent, #1c6b52) !important; }
.aura-club-cover-editor__hint { max-inline-size: 19rem; color: #1d2327; font-size: .78rem; line-height: 1.25; }
.aura-club-cover-editor__coordinates { min-inline-size: 3.7rem; color: #50575e; font: 700 .76rem/1 monospace; text-align: center; }
.aura-club-cover-editor__axis-fields { display: inline-flex; align-items: center; gap: .35rem; color: #1d2327; font-size: .72rem; font-weight: 700; }
.aura-club-cover-editor__axis-fields label { display: inline-flex; align-items: center; gap: .18rem; }
.aura-club-cover-editor__axis-fields input { inline-size: 3.45rem; min-block-size: 2rem; border: 1px solid #8c8f94; border-radius: 4px; padding: .2rem .3rem; color: #1d2327; font: inherit; background: #fff; }
.aura-club-cover-editor__status { position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-end: 0; padding: .25rem .5rem; border-radius: 5px; background: rgba(255,255,255,.94); color: #1d2327; font-size: .75rem; white-space: nowrap; }
.aura-club-cover-editor__status:empty { display: none; }

.aura-club-hero.is-adjusting-cover {
	cursor: grab;
	touch-action: none;
	outline: 3px solid var(--aura-club-accent, #1c6b52);
	outline-offset: -3px;
}

.aura-club-hero.is-adjusting-cover.is-dragging-cover { cursor: grabbing; }
.aura-club-hero.is-adjusting-cover > img { pointer-events: none; user-select: none; }

/* A desktop administrator can inspect the actual mobile crop without leaving the page. */
.aura-club-hero.is-cover-mobile-preview {
	inline-size: min(390px, 100%) !important;
	max-inline-size: 390px !important;
	block-size: var(--aura-club-hero-height-mobile, 180px) !important;
	min-block-size: 0 !important;
	aspect-ratio: auto !important;
	margin-inline: auto !important;
}

.aura-club-hero.is-cover-mobile-preview > img { object-position: var(--aura-cover-editor-position, 50% 50%) !important; }

@media (max-width: 720px) {
	.aura-club-cover-editor { inset-block-start: .5rem; inset-inline-end: .5rem; max-inline-size: calc(100% - 1rem); }
	.aura-club-cover-editor__actions { flex-wrap: wrap; }
	.aura-club-cover-editor__hint { flex: 1 0 100%; max-inline-size: none; }
	.aura-club-cover-editor__axis-fields { order: 2; }
}

/* ----------------------------------------------------------- Identity --- */

.aura-club-identity {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	padding-inline: clamp(0px, 2cqi, 1.25rem);
}

/*
 * The badge rides up onto the cover as a purely visual offset. A negative
 * margin would either be swallowed by the row's end-alignment or drag the
 * heading up under the cover edge with it; shifting only the badge cannot
 * displace any text.
 */
.aura-club-identity[data-has-badge="1"] .aura-club-identity__badge {
	position: relative;
	/* Clear the row gap first, then ride up onto the cover by the overlap. */
	inset-block-start: calc(var(--aura-club-badge-overlap, 0px) - var(--aura-club-gap));
}

.aura-club-identity__badge {
	flex: 0 0 auto;
	inline-size: var(--aura-club-badge-size-x, var(--aura-club-badge-size, 104px));
	block-size: var(--aura-club-badge-size-x, var(--aura-club-badge-size, 104px));
	border-radius: 50%;
	overflow: hidden;
	background: var(--aura-club-surface);
	box-shadow: 0 0 0 4px var(--aura-club-surface), var(--aura-club-shadow);
}

.aura-club-identity__badge img {
	object-position: var(--aura-club-badge-focus, 50% 50%);
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 100%;
	padding: 7px;
	object-fit: contain;
	display: block;
}

.aura-club-identity__body {
	flex: 1 1 min(320px, 100%);
	min-inline-size: 0;
	display: grid;
	gap: .35rem;
}

.aura-club-identity__title {
	margin: 0;
	font-size: clamp(1.6rem, 3.2cqi, 2.4rem);
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.aura-club-identity__title--plain {
	font-weight: 700;
}

.aura-club-identity__context {
	margin: 0;
	color: var(--aura-club-muted);
}

.aura-club-identity__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}

.aura-club-chip {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: rgba(28, 107, 82, .09);
	color: var(--aura-club-accent);
	font-size: .8125rem;
	line-height: 1.6;
}

.aura-club-chip--type {
	background: rgba(15, 23, 42, .07);
	color: inherit;
}

.aura-club-identity__cta {
	margin: 0;
	flex: 0 0 auto;
}

.aura-club-detail[data-hero-align="center"] .aura-club-identity {
	justify-content: center;
	text-align: center;
}

.aura-club-detail[data-hero-align="center"] .aura-club-identity__meta {
	justify-content: center;
}

.aura-club-detail[data-hero-align="end"] .aura-club-identity {
	justify-content: flex-end;
	text-align: end;
}

.aura-club-button {
	display: inline-block;
	padding: .6rem 1.25rem;
	border-radius: 999px;
	background: var(--aura-club-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	min-block-size: 44px;
	line-height: 1.8;
	overflow-wrap: normal;
	word-break: normal;
}

.aura-club-button:hover,
.aura-club-button:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

.aura-club-button--large {
	padding: .8rem 1.75rem;
}

/* ------------------------------------------------------------- Layout --- */

.aura-club-layout {
	display: grid;
	gap: var(--aura-club-gap);
	align-items: start;
}

.aura-club-layout[data-layout="split"] {
	/*
	 * The wall never grows past the point where the rail stops being a rail.
	 * Every preset but Social asks for a full-width wall, so a Club that
	 * carries that setting into a two-column layout would otherwise squeeze
	 * the column beside it down to a strip of vertical letters.
	 */
	--aura-club-wall-track: min(
		var(--aura-club-wall-width-x, var(--aura-club-wall-width, 68%)),
		calc(100% - var(--aura-club-rail-min, 17rem) - var(--aura-club-gap))
	);
	grid-template-columns: minmax(0, var(--aura-club-wall-track)) minmax(0, 1fr);
}

/* When the rail leads, it takes the narrow track and the wall the wide one. */
.aura-club-detail[data-rail="start"] .aura-club-layout[data-layout="split"] {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--aura-club-wall-track));
}

.aura-club-layout__main {
	min-inline-size: 0;
	display: grid;
	gap: var(--aura-club-gap);
}

.aura-club-layout__aside {
	min-inline-size: 0;
	position: sticky;
	inset-block-start: 1rem;
}

.aura-club-section {
	min-inline-size: 0;
}

.aura-club-section__title {
	margin: 0 0 .75rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.aura-club-content {
	overflow-wrap: anywhere;
}

.aura-club-content > :first-child { margin-block-start: 0; }
.aura-club-content > :last-child { margin-block-end: 0; }

/* -------------------------------------------------------------- Facts --- */

.aura-club-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 1rem;
	margin-block: 1rem 0;
}

.aura-club-facts__row { min-inline-size: 0; }
.aura-club-facts dt { font-weight: 700; }
.aura-club-facts dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Members --- */

.aura-club-section--members .aura-club-members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--aura-club-members-columns-x, var(--aura-club-members-columns, 4)), minmax(0, 1fr));
}

.aura-club-member {
	display: grid;
	justify-items: center;
	gap: .5rem;
	text-align: center;
	min-inline-size: 0;
}

.aura-club-avatar {
	inline-size: 76px;
	block-size: 76px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: rgba(15, 23, 42, .08);
	flex: 0 0 auto;
}

.aura-club-avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aura-club-avatar__fallback {
	font-weight: 700;
	color: var(--aura-club-muted);
}

.aura-club-member__body {
	display: grid;
	gap: .1rem;
	min-inline-size: 0;
}

.aura-club-member__name { font-weight: 600; overflow-wrap: anywhere; }
.aura-club-member__role { color: var(--aura-club-muted); font-size: .875rem; }

.aura-club-members--list .aura-club-members { grid-template-columns: 1fr; }

.aura-club-members--list .aura-club-member {
	grid-template-columns: auto 1fr;
	justify-items: start;
	text-align: start;
	align-items: center;
	gap: .75rem;
}

.aura-club-members--list .aura-club-avatar { inline-size: 48px; block-size: 48px; }

.aura-club-members--horizontal .aura-club-members,
.aura-club-members--avatars .aura-club-members {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.aura-club-members--avatars .aura-club-member { gap: 0; }
.aura-club-members--avatars .aura-club-member__body { display: none; }
.aura-club-members--avatars .aura-club-avatar {
	inline-size: 56px;
	block-size: 56px;
	box-shadow: 0 0 0 2px var(--aura-club-surface);
}

.aura-club-members--horizontal .aura-club-member { inline-size: 8.5rem; }

/* --------------------------------------------------------- Activities --- */

.aura-club-wall {
	display: grid;
	gap: var(--aura-club-gap);
	grid-template-columns: repeat(var(--aura-club-wall-columns-x, var(--aura-club-wall-columns, 1)), minmax(0, 1fr));
}

.aura-club-activity {
	min-inline-size: 0;
	scroll-margin-block-start: 5rem;
}

.aura-club-wall--cards .aura-club-activity {
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
	box-shadow: var(--aura-club-shadow);
	padding: 1rem;
	display: grid;
	gap: .75rem;
}

.aura-club-wall--list .aura-club-activity {
	border-block-end: 1px solid var(--aura-club-border);
	padding-block-end: 1rem;
	display: grid;
	gap: .5rem;
}

.aura-club-wall--list .aura-club-activity:last-child { border-block-end: 0; }

.aura-club-byline {
	display: flex;
	align-items: center;
	gap: .625rem;
}

.aura-club-byline .aura-club-avatar { inline-size: 40px; block-size: 40px; }

.aura-club-byline__text { display: grid; min-inline-size: 0; }
.aura-club-byline__name { font-weight: 600; overflow-wrap: anywhere; }
.aura-club-byline__date { color: var(--aura-club-muted); font-size: .8125rem; }

.aura-club-activity__title { margin: 0; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.aura-club-activity__title [data-aura-activity-title] { color: inherit; text-decoration: none; }
.aura-club-activity__title [data-aura-activity-title]:hover,.aura-club-activity__title [data-aura-activity-title]:focus-visible { color: var(--aura-club-accent); text-decoration: underline; }
.aura-club-activity__date { color: var(--aura-club-muted); font-size: .8125rem; }
.aura-club-activity__content { color: var(--aura-club-text); font-size: 1rem; line-height: 1.48; overflow-wrap: anywhere; }
.aura-club-activity__content > :first-child { margin-block-start: 0; }
.aura-club-activity__content > :last-child { margin-block-end: 0; }
.aura-club-activity__content > p,
.aura-club-activity__content > ul,
.aura-club-activity__content > ol { margin-block: .65em; }
.aura-club-activity__content.is-collapsed {
	position: relative;
}
.aura-club-activity__content.is-expanding { overflow: hidden; transition: max-block-size .2s ease; }
.aura-club-activity__more {
	position: static;
	display: inline;
	min-block-size: 0;
	block-size: auto;
	margin: 0;
	appearance: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	color: var(--aura-club-muted);
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	white-space: nowrap;
	cursor: pointer;
}
.aura-club-activity__more:hover { color: var(--aura-club-accent); text-decoration: underline; }
.aura-club-activity__more:focus-visible { color: var(--aura-club-accent); outline: 0; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.aura-club-activity__content.is-expanding { transition: none; }
}

.aura-club-reactions {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	border-block-start: 1px solid var(--aura-club-border);
	padding-block-start: .625rem;
}

.aura-club-reaction {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-block-size: 44px;
	padding-inline: .75rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.aura-club-reaction:hover { background: rgba(15, 23, 42, .06); }

.aura-club-reaction__icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background: currentColor;
	-webkit-mask: var(--aura-club-icon) center / contain no-repeat;
	mask: var(--aura-club-icon) center / contain no-repeat;
}

.aura-club-reaction--like {
	--aura-club-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 16.1 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.aura-club-reaction--like[aria-pressed="true"] {
	color: #b3245c;
	--aura-club-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 16.1 12 21 12 21z'/%3E%3C/svg%3E");
}

.aura-club-reaction--share {
	/*
	 * Three connected nodes, not an arrow rising out of a tray: the tray glyph
	 * reads as "download" to most people, which is the opposite of what this
	 * control does.
	 */
	--aura-club-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4M8.6 13.5l6.8 4'/%3E%3C/g%3E%3C/svg%3E");
}

.aura-club-reaction--views {
	--aura-club-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	cursor: default;
}

.aura-club-gallery-upload .aura-clubs-image-quality { display: flex; flex-wrap: wrap; gap: .35rem .8rem; inline-size: 100%; margin-block-start: .5rem; font-size: .875rem; }
.aura-club-gallery-upload .aura-clubs-image-quality legend,
.aura-club-gallery-upload .aura-clubs-image-quality .description { flex-basis: 100%; }

.aura-club-reaction__hint { font-size: .8125rem; color: var(--aura-club-muted); }
.aura-club-reaction.is-busy { opacity: .6; pointer-events: none; }

.aura-club-wall__pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 1rem 0 0;
	padding: 0;
}

.aura-club-wall__pagination a,
.aura-club-wall__pagination span {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: .75rem;
	border: 1px solid var(--aura-club-border);
	border-radius: 8px;
	text-decoration: none;
}

/* --------------------------------------------------------- Highlights --- */

.aura-club-highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.aura-club-highlight {
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
	overflow: hidden;
	min-inline-size: 0;
}

.aura-club-highlight__link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.aura-club-highlight__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: rgba(15, 23, 42, .06);
}

.aura-club-highlight__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aura-club-highlight--member .aura-club-highlight__media { aspect-ratio: 1 / 1; }

.aura-club-highlight__body {
	display: grid;
	gap: .2rem;
	padding: .75rem;
}

.aura-club-highlight__title { font-weight: 600; overflow-wrap: anywhere; }
.aura-club-highlight__excerpt,
.aura-club-highlight__meta { color: var(--aura-club-muted); font-size: .8125rem; }

.aura-club-highlights--below,
.aura-club-highlights--above {
	--aura-club-highlight-columns: 4;
}

.aura-club-highlights--below .aura-club-highlights,
.aura-club-highlights--above .aura-club-highlights {
	grid-template-columns: repeat(var(--aura-club-highlight-columns, 4), minmax(0, 1fr));
}

/* ------------------------------------------------------------ Gallery --- */

.aura-club-media-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.aura-club-gallery {
	grid-template-columns: repeat(var(--aura-club-gallery-columns-x, var(--aura-club-gallery-columns, 4)), minmax(0, 1fr));
}

.aura-club-gallery .aura-club-media {
	aspect-ratio: var(--aura-club-gallery-ratio, 1 / 1);
}

.aura-club-media-grid--1 { grid-template-columns: minmax(0, 1fr); }
.aura-club-media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aura-club-media-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aura-club-media-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.aura-club-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: calc(var(--aura-club-radius-x, var(--aura-club-radius, 12px)) * .6);
	background: rgba(15, 23, 42, .06);
	min-inline-size: 0;
}

.aura-club-media img,
.aura-club-media video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aura-club-activity__media .aura-club-media { aspect-ratio: 4 / 3; }

/*
 * On a wall the photo belongs to the post, not inside a frame within it, so it
 * spans the card edge to edge the way a social post does. The card keeps its
 * padding for everything else.
 */
.aura-club-wall--cards .aura-club-activity__media {
	margin-inline: -1rem;
	inline-size: calc(100% + 2rem);
	max-inline-size: none;
	border-radius: 0;
	gap: 2px;
}

.aura-club-wall--cards .aura-club-activity__media .aura-club-media {
	border-radius: 0;
}


.aura-club-media--interactive { cursor: zoom-in; }

.aura-club-media__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background: rgba(9, 14, 22, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 45% no-repeat;
	pointer-events: none;
}

.aura-club-media__video-placeholder { display: block; inline-size: 100%; block-size: 100%; background: linear-gradient(135deg, #1d2733, #0b1016); }

[dir="rtl"] .aura-club-media__play { transform: translate(50%, -50%); }

/* ----------------------------------------------------------- Lightbox --- */

.aura-club-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	border: 0;
	padding: 0;
	margin: 0;
	max-inline-size: none;
	max-block-size: none;
	inline-size: 100vw;
	block-size: 100dvh;
	background: var(--aura-club-lightbox-backdrop, rgba(9, 14, 22, .92));
	color: var(--aura-club-lightbox-color, #fff);
	display: none;
}

.aura-club-lightbox[open] {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.aura-club-lightbox::backdrop { background: transparent; }

.aura-club-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .5rem;
}

.aura-club-lightbox__counter { font-variant-numeric: tabular-nums; font-size: .875rem; }

.aura-club-lightbox__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: 0;
	padding-inline: 3.5rem;
}

.aura-club-lightbox__stage img,
.aura-club-lightbox__stage video,
.aura-club-lightbox__stage iframe {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}
.aura-club-lightbox__stage iframe { inline-size: min(90vw, 1200px); block-size: min(75vh, 675px); border: 0; }

.aura-club-lightbox__caption {
	padding: .5rem 1rem 1rem;
	text-align: center;
	font-size: .875rem;
	min-block-size: 1.5rem;
}

.aura-club-lightbox__control {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .14);
	color: inherit;
	font-size: 1.25rem;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.aura-club-lightbox__control--prev { inset-inline-start: .5rem; }
.aura-club-lightbox__control--next { inset-inline-end: .5rem; }
.aura-club-lightbox__control:hover { background: rgba(255, 255, 255, .26); }
.aura-club-lightbox__control[hidden] { display: none; }

.aura-club-lightbox__close {
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: inherit;
	font-size: 1.25rem;
	cursor: pointer;
}

.aura-club-lightbox__close:hover { background: rgba(255, 255, 255, .26); }

body.aura-club-lightbox-open { overflow: hidden; }

.aura-club-toast {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: rgba(9, 14, 22, .92);
	color: #fff;
	padding: .6rem 1rem;
	border-radius: 999px;
	z-index: 100001;
	font-size: .875rem;
}

[dir="rtl"] .aura-club-toast { transform: translateX(50%); }

/* ------------------------------------------------------------- Identity --- */

.aura-club-identity__description {
	margin: 0;
	color: var(--aura-club-muted);
	font-size: .9375rem;
	line-height: 1.5;
	max-inline-size: 68ch;
}

.aura-club-officers {
	list-style: none;
	margin: .35rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.aura-club-officer {
	display: grid;
	justify-items: center;
	gap: .3rem;
	inline-size: 6rem;
	text-align: center;
}

.aura-club-avatar--officer {
	inline-size: 64px;
	block-size: 64px;
	box-shadow: 0 0 0 2px var(--aura-club-surface);
}

.aura-club-officer__role {
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--aura-club-muted);
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- Nav --- */

.aura-club-nav {
	border-block-end: 1px solid var(--aura-club-border);
	padding-inline: clamp(0px, 2cqi, 1.25rem);
}

.aura-club-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}

.aura-club-nav__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 1rem;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	border-block-end: 2px solid transparent;
	cursor: pointer;
}

.aura-club-nav__link:hover,
.aura-club-nav__link:focus-visible {
	color: var(--aura-club-accent);
	border-block-end-color: var(--aura-club-accent);
}

.aura-club-nav__more { position: relative; }
.aura-club-nav__more > summary { list-style: none; }
.aura-club-nav__more > summary::-webkit-details-marker { display: none; }

.aura-club-nav__overflow {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	list-style: none;
	margin: 0;
	padding: .25rem;
	min-inline-size: 12rem;
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: calc(var(--aura-club-radius-x, var(--aura-club-radius, 12px)) * .6);
	box-shadow: var(--aura-club-shadow);
}

.aura-club-nav__overflow .aura-club-nav__link {
	inline-size: 100%;
	border-block-end: 0;
}

/* Anchored sections must clear a sticky theme header. */
.aura-club-section__title { scroll-margin-block-start: 5rem; }

/* ------------------------------------------------------- Wall header row --- */

.aura-club-activity__header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .625rem;
}

.aura-club-activity__headline { display: grid; gap: .1rem; min-inline-size: 0; }
.aura-club-activity__club-name { display: none; }
.aura-club-activity__title--inline { margin: 0; font-size: 1.05rem; line-height: 1.3; }

.aura-club-reactions--header {
	display: flex;
	align-items: center;
	gap: .25rem;
	border: 0;
	padding: 0;
}

.aura-club-activity-card--reactions-header { position: relative; }
.aura-club-activity-card--reactions-header .aura-club-activity__header { padding-inline-end: 8.5rem; }
.aura-club-activity-card--reactions-header .aura-club-reactions--header { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; }

.aura-club-reactions--header .aura-club-reaction {
	min-block-size: 44px;
	padding-inline: .5rem;
}

.aura-club-reactions--header .aura-club-reaction__hint,
.aura-club-reactions--header .aura-club-reaction__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.aura-club-officers { gap: .75rem; }
	.aura-club-officer { inline-size: 5rem; }

	.aura-club-nav { overflow-x: auto; }
	.aura-club-nav__list { flex-wrap: nowrap; }
	.aura-club-nav__link { white-space: nowrap; padding-inline: .75rem; }

	.aura-club-activity__header { gap: .5rem; }
}

/* ------------------------------------------------------------ Presets --- */

.aura-club-detail--editorial { --aura-club-gap: 2.5rem; }
.aura-club-detail--editorial .aura-club-identity__title { font-size: clamp(2rem, 5cqi, 3.4rem); }
.aura-club-detail--editorial .aura-club-content { font-size: 1.0625rem; line-height: 1.75; }

.aura-club-detail--minimal { --aura-club-gap: 1.25rem; }
.aura-club-detail--minimal .aura-club-hero { border-radius: 0; }

.aura-club-detail--institutional .aura-club-section__title {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .95rem;
}

.aura-club-detail--legacy { --aura-club-gap: 1.25rem; }
.aura-club-detail--legacy .aura-club-identity { padding-inline: 0; }

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 1024px) {
	.aura-club-hero { block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height-tablet, 250px)); }
	.aura-club-hero--natural { block-size: auto; }
	.aura-club-hero--ratio { block-size: auto; }

	/*
	 * The rail stops being a sidebar below this width. It moves above the main
	 * column rather than to the bottom of the page, because a highlight buried
	 * under the whole Club is not a highlight.
	 */
	.aura-club-layout[data-layout="split"] {
		display: flex;
		flex-direction: column;
	}

	.aura-club-layout__aside {
		position: static;
		order: -1;
	}

	.aura-club-section--members .aura-club-members {
		grid-template-columns: repeat(min(var(--aura-club-members-columns, 4), 4), minmax(0, 1fr));
	}

	.aura-club-wall { grid-template-columns: minmax(0, 1fr); }

	.aura-club-highlights--below .aura-club-highlights,
	.aura-club-highlights--above .aura-club-highlights {
		--aura-club-highlight-columns: 2;
	}

	.aura-club-gallery { grid-template-columns: repeat(min(var(--aura-club-gallery-columns, 4), 3), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.aura-club-hero { block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height-mobile, 180px)); }
	.aura-club-hero--natural { block-size: auto; }
	.aura-club-hero--ratio { block-size: auto; }

	.aura-club-identity { align-items: flex-start; }
	.aura-club-identity__badge {
		inline-size: min(var(--aura-club-badge-size, 104px), 88px);
		block-size: min(var(--aura-club-badge-size, 104px), 88px);
	}
	.aura-club-identity__cta { inline-size: 100%; }
	.aura-club-identity__cta .aura-club-button { display: block; text-align: center; }

	.aura-club-section--members .aura-club-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aura-club-members--avatars .aura-club-members,
	.aura-club-members--horizontal .aura-club-members { display: flex; }

	/*
	 * A sidebar rail does not fit a phone. Highlights become a snapping
	 * horizontal row instead of being compressed into an unreadable column.
	 */
	.aura-club-highlights {
		grid-auto-flow: column;
		grid-auto-columns: minmax(min(70%, 220px), 1fr);
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-block-end: .35rem;
		overscroll-behavior-inline: contain;
	}

	.aura-club-highlight { scroll-snap-align: start; }

	.aura-club-gallery,
	.aura-club-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aura-club-media-grid--1 { grid-template-columns: minmax(0, 1fr); }

	.aura-club-lightbox__stage { padding-inline: .5rem; }
	.aura-club-lightbox__control { inline-size: 40px; block-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.aura-club-detail *,
	.aura-club-lightbox * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

.aura-club-detail :is(a, button):focus-visible,
.aura-club-lightbox :is(a, button):focus-visible {
	outline: 2px solid var(--aura-club-accent);
	outline-offset: 2px;
}

.aura-club-lightbox :is(a, button):focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------- Views --- */

/*
 * One view at a time. Every view is in the document, so switching is a class
 * change and the browser keeps the scroll position; `hidden` is stated as a
 * rule as well because themes routinely set a display on bare divs.
 */

.aura-club-view[hidden] { display: none; }

.aura-club-detail--views .aura-club-nav {
	position: sticky;
	inset-block-start: 0;
	z-index: 4;
	background: var(--aura-club-surface);
}

.aura-club-nav__link.is-active {
	color: var(--aura-club-accent);
	border-block-end-color: var(--aura-club-accent);
}

.aura-club-nav__overflow .aura-club-nav__link.is-active {
	border-block-end-color: transparent;
	background: rgba(15, 23, 42, .06);
	border-radius: .35rem;
}

/* ------------------------------------------------------ Member profiles --- */

/*
 * The link is a transparent pass-through: it inherits the card's own grid so
 * the layout is identical whether or not the Club offers profiles.
 */
.aura-club-member__link,
.aura-club-officer__link {
	display: grid;
	grid-template-columns: inherit;
	justify-items: inherit;
	align-items: inherit;
	text-align: inherit;
	gap: inherit;
	min-inline-size: 0;
	color: inherit;
	text-decoration: none;
}

.aura-club-member__link:hover .aura-club-member__name,
.aura-club-member__link:focus-visible .aura-club-member__name {
	color: var(--aura-club-accent);
	text-decoration: underline;
}

.aura-club-member__link:hover .aura-club-avatar,
.aura-club-officer__link:hover .aura-club-avatar,
.aura-club-member__link:focus-visible .aura-club-avatar,
.aura-club-officer__link:focus-visible .aura-club-avatar {
	box-shadow: 0 0 0 2px var(--aura-club-accent);
}

.aura-club-member-profile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.aura-club-member-profile__portrait {
	inline-size: 168px;
	block-size: 168px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: rgba(15, 23, 42, .08);
}

.aura-club-member-profile__portrait img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aura-club-member-profile__portrait .aura-club-avatar__fallback { font-size: 3rem; }

.aura-club-member-profile__body { display: grid; gap: .4rem; }
/* The person is the subject of this view, so their name leads it. */
.aura-club-member-profile__name {
	margin: 0;
	font-size: clamp(1.5rem, 3cqi, 2.125rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}
.aura-club-member-profile__role { font-weight: 600; color: var(--aura-club-accent); margin: 0; }
.aura-club-member-profile__club { color: var(--aura-club-muted); margin: 0; }
.aura-club-member-profile__bio { margin: .5rem 0 0; line-height: 1.7; }

.aura-club-member-profile__back { margin: 0 0 1rem; }
.aura-club-member-profile__back a { color: var(--aura-club-accent); text-decoration: none; font-weight: 600; }
.aura-club-member-profile__back a::before { content: "\2190"; margin-inline-end: .4rem; }

@media (max-width: 600px) {
	.aura-club-member-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.aura-club-member-profile__portrait { inline-size: 120px; block-size: 120px; }
	.aura-club-member-profile__body { justify-items: center; }
}

/* ----------------------------------------------------------------- Intro --- */

/*
 * The card that opens the column beside the wall. It carries what the header
 * used to say about the Club, where there is room to read it.
 */

.aura-club-intro {
	display: grid;
	gap: .6rem;
}

.aura-club-intro__summary {
	margin: 0;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.aura-club-intro__context {
	margin: 0;
	color: var(--aura-club-muted);
	font-size: .9375rem;
}

.aura-club-intro__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.aura-club-intro__more { margin: 0; }

.aura-club-intro__more a {
	color: var(--aura-club-accent);
	font-weight: 600;
	text-decoration: none;
}

.aura-club-intro__more a:hover,
.aura-club-intro__more a:focus-visible { text-decoration: underline; }

/*
 * The column is a stack of cards, so each section in it gets the card
 * treatment the wall posts already have.
 */
.aura-club-detail--views .aura-club-layout__aside > .aura-club-section {
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
	box-shadow: var(--aura-club-shadow);
	padding: 1rem;
}

.aura-club-detail[data-surface="flat"] .aura-club-layout__aside > .aura-club-section {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.aura-club-detail--views .aura-club-layout__aside {
	display: grid;
	gap: var(--aura-club-gap);
	align-content: start;
}

/* ------------------------------------------------- Everyone else, and links --- */

/*
 * The header holds the members the Club chose; this is the way to the rest.
 */
.aura-club-officer__more {
	display: grid;
	justify-items: center;
	gap: .3rem;
	color: inherit;
	text-decoration: none;
}

.aura-club-officer__more-mark {
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--aura-club-accent);
	background: rgba(15, 23, 42, .05);
	box-shadow: 0 0 0 2px var(--aura-club-surface);
}

.aura-club-officer__more-label {
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--aura-club-muted);
}

.aura-club-officer__more:hover .aura-club-officer__more-mark,
.aura-club-officer__more:focus-visible .aura-club-officer__more-mark {
	background: rgba(15, 23, 42, .1);
}

@media (max-width: 640px) {
	.aura-club-officer__more-mark { inline-size: 52px; block-size: 52px; }
	.aura-club-avatar--officer { inline-size: 52px; block-size: 52px; }
}

/*
 * Themes underline every link in the content area. Inside a Club the faces,
 * the tabs and the cards are surfaces, not prose, so the underline is stated
 * away at a specificity a theme's `:where()` rule cannot beat.
 */
.aura-club-detail .aura-club-officer__link,
.aura-club-detail .aura-club-officer__more,
.aura-club-detail .aura-club-member__link,
.aura-club-detail .aura-club-nav__link,
.aura-club-detail .aura-club-highlight__link,
.aura-club-detail .aura-club-media {
	text-decoration: none;
}

/* ------------------------------------------------------------------ Join --- */

/*
 * Asking to join. A plain dialog with a plain form: it is legible with the
 * stylesheet missing and it submits with the runtime missing.
 */

.aura-club-join__wrap { display: contents; }

.aura-club-identity__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 0;
}

.aura-club-button--ghost {
	background: transparent;
	color: var(--aura-club-accent);
	box-shadow: inset 0 0 0 1px currentColor;
}

.aura-club-button--ghost:hover,
.aura-club-button--ghost:focus-visible { color: var(--aura-club-accent); }

.aura-club-join {
	border: 0;
	padding: 0;
	inline-size: min(28rem, calc(100vw - 2rem));
	max-block-size: min(90dvh, 44rem);
	border-radius: var(--aura-club-radius-x, var(--aura-club-radius, 12px));
	background: var(--aura-club-surface);
	color: inherit;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}

.aura-club-join::backdrop { background: rgba(9, 14, 22, .6); }

.aura-club-join__form {
	display: grid;
	gap: .75rem;
	padding: 1.25rem;
}

.aura-club-join__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 1rem;
}

.aura-club-join__title { margin: 0; font-size: 1.25rem; }

.aura-club-join__close {
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--aura-club-muted);
	min-inline-size: 44px;
	min-block-size: 44px;
}

.aura-club-join__intro {
	margin: 0;
	color: var(--aura-club-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

.aura-club-join__field { display: grid; gap: .25rem; margin: 0; }
.aura-club-join__field label { font-weight: 600; font-size: .9375rem; }

.aura-club-join__field input {
	inline-size: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--aura-club-border);
	border-radius: 8px;
	font: inherit;
	min-block-size: 44px;
	box-sizing: border-box;
}

/* Present for robots, gone for people — and for assistive technology. */
.aura-club-join__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.aura-club-join__actions { margin: .25rem 0 0; }
.aura-club-join__actions .aura-club-button { inline-size: 100%; justify-content: center; }

.aura-club-join__status:empty { display: none; }

.aura-club-join__status {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	padding: .6rem .7rem;
	border-radius: 8px;
	background: rgba(15, 23, 42, .05);
}

/* Without the runtime the dialog is still a dialog, just always in the flow. */
.aura-club-join:not([open]) { display: none; }

/* ----------------------------------------------------- The post's photos --- */

/*
 * A post composes its photographs into one block rather than laying them out
 * as a strip of equal thumbnails: one fills it, two split it, three give one
 * the tall half, four make a square. Past four the block still holds four and
 * the last carries the count.
 *
 * The block keeps 1.91:1 — the proportion a social post image is authored to —
 * so every post on the wall reads at the same size whatever it contains.
 *
 * Items past the fourth stay in the document for the viewer and for a reader
 * without this stylesheet; only the presentation holds them back.
 */

.aura-club-media-grid--mosaic {
	display: grid;
	gap: 2px;
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
}

.aura-club-media-grid--mosaic > .aura-club-media {
	aspect-ratio: auto;
	block-size: 100%;
	min-block-size: 0;
	min-inline-size: 0;
	position: relative;
	border-radius: 0;
}

.aura-club-media-grid--mosaic > .aura-club-media:nth-child(n+5) { display: none; }

.aura-club-media-grid--mosaic[data-count="1"] { grid-template-columns: 1fr; }

.aura-club-media-grid--mosaic[data-count="2"] { grid-template-columns: 1fr 1fr; }

.aura-club-media-grid--mosaic[data-count="3"] {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.aura-club-media-grid--mosaic[data-count="3"] > .aura-club-media:first-child {
	grid-row: span 2;
}

.aura-club-media-grid--mosaic[data-count="4"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

/* How many more the post holds, on the last one shown. */
.aura-club-media__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(9, 14, 22, .55);
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.25rem, 4cqi, 2rem);
	pointer-events: none;
}

@media (max-width: 480px) {
	/* Two columns are already narrow on a phone; three tiles would be stamps. */
	.aura-club-media-grid--mosaic[data-count="3"] {
		grid-template-columns: 1fr 1fr;
	}
	.aura-club-media-grid--mosaic[data-count="3"] > .aura-club-media:first-child {
		grid-row: auto;
		grid-column: span 2;
	}
}

/* ----------------------------------------------------------- Shared video --- */

/*
 * A video published elsewhere. What renders is a facade: the post's own poster,
 * a play control and the provider's name. The provider is contacted only once a
 * reader presses play.
 */

.aura-club-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0d1117;
	overflow: hidden;
	border-radius: 0;
}

.aura-club-video__facade {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-decoration: none;
	color: #fff;
}

.aura-club-video__facade img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: .65;
}

.aura-club-video__play {
	position: relative;
	inline-size: 68px;
	block-size: 68px;
	border-radius: 50%;
	background: rgba(9, 14, 22, .72);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.aura-club-video__play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 54%;
	transform: translate(-50%, -50%);
	border-inline-start: 20px solid #fff;
	border-block-start: 12px solid transparent;
	border-block-end: 12px solid transparent;
}

.aura-club-video__facade:hover .aura-club-video__play,
.aura-club-video__facade:focus-visible .aura-club-video__play {
	background: rgba(9, 14, 22, .9);
}

.aura-club-video__label {
	position: absolute;
	inset-block-end: .6rem;
	inset-inline-start: .6rem;
	font-size: .8125rem;
	font-weight: 600;
	padding: .25rem .55rem;
	border-radius: 999px;
	background: rgba(9, 14, 22, .72);
}

.aura-club-video__frame {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* The card gives the video the same edge-to-edge treatment as a photograph. */
.aura-club-wall--cards .aura-club-video {
	margin-inline: -1rem;
	inline-size: calc(100% + 2rem);
	max-inline-size: none;
}

/* ================================================= Public Club V2 ======= */

.aura-club-public {
	--aura-club-surface: var(--aura-pf-color-surface, var(--aura-clubs-card-background, #fff));
	--aura-club-text: var(--aura-pf-color-text, #17211d);
	--aura-club-muted: var(--aura-pf-color-text-muted, #66716c);
	--aura-club-border: var(--aura-pf-color-border, var(--aura-clubs-border, #e5e9e6));
	--aura-club-accent: var(--aura-pf-color-accent, var(--aura-clubs-accent, #26735a));
	--aura-club-radius-v2: var(--aura-pf-radius-lg, 18px);
	--aura-club-shadow: var(--aura-pf-shadow-sm, 0 12px 40px rgba(20, 39, 30, .08));
	inline-size: min(100%, 1180px);
	margin-inline: auto;
	color: var(--aura-club-text);
	gap: 0;
}

.aura-club-public,
.aura-club-public * { box-sizing: border-box; }

.aura-club-public .aura-club-hero {
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
	max-inline-size: none;
	margin: 0;
	/* The configured presentation height must remain effective in the public
	 * profile. Earlier V2 rules imposed a fixed ratio and silently ignored it. */
	block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height, 320px));
	aspect-ratio: auto;
	min-block-size: 0;
	max-block-size: none;
	border-radius: var(--aura-club-radius-v2) var(--aura-club-radius-v2) 0 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--aura-club-accent) 18%, #edf2ef), #f7f9f8);
}

.aura-club-public .aura-club-hero--natural { block-size: auto; }
.aura-club-public .aura-club-hero--ratio {
	block-size: auto;
	aspect-ratio: var(--aura-club-cover-ratio, 2.7 / 1);
	max-block-size: min(60vh, 40rem);
}
.aura-club-public .aura-club-hero__overlay {
	background: linear-gradient(180deg, transparent 45%, rgba(10, 24, 17, .28));
}

.aura-club-public .aura-club-identity {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) minmax(250px, auto);
	align-items: end;
	gap: clamp(1rem, 2.2vw, 2rem);
	inline-size: calc(100% - clamp(2rem, 8vw, 7rem));
	margin: -78px auto 0;
	padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem) 1.4rem;
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: var(--aura-club-radius-v2);
	box-shadow: var(--aura-club-shadow);
}

.aura-club-public .aura-club-identity[data-has-badge="1"] .aura-club-identity__badge,
.aura-club-public .aura-club-identity__badge {
	position: relative;
	inset: auto;
	inline-size: 148px;
	block-size: 148px;
	margin-block-start: -2.9rem;
	border: 5px solid var(--aura-club-surface);
	box-shadow: 0 5px 22px rgba(20, 39, 30, .13);
}

.aura-club-identity__badge--fallback {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--aura-club-accent) 14%, var(--aura-club-surface));
	color: var(--aura-club-accent);
	font-size: 3rem;
	font-weight: 750;
}

.aura-club-public .aura-club-identity__body { align-self: center; gap: .45rem; }
.aura-club-public .aura-club-identity__title { font-size: clamp(1.8rem, 3.2vw, 2.75rem); letter-spacing: -.035em; }
.aura-club-public .aura-club-identity__context { font-size: .95rem; }
.aura-club-public .aura-club-identity__description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-inline-size: none;
	margin: .25rem 0 0;
	color: var(--aura-club-muted);
	line-height: 1.55;
}

.aura-club-identity__side { display: grid; justify-items: end; gap: 1rem; min-inline-size: 0; }
.aura-club-public .aura-club-identity__cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.aura-club-public .aura-club-button { border: 1px solid transparent; cursor: pointer; text-align: center; }
.aura-club-public .aura-club-button--ghost { background: transparent; border-color: var(--aura-club-border); color: var(--aura-club-text); }
.aura-club-public .aura-club-button--ghost:hover,
.aura-club-public .aura-club-button--ghost:focus-visible { color: var(--aura-club-accent); border-color: var(--aura-club-accent); filter: none; }
.aura-club-public .aura-club-button.is-disabled { background: color-mix(in srgb, var(--aura-club-muted) 12%, transparent); color: var(--aura-club-muted); }

.aura-club-identity__metrics { display: flex; justify-content: flex-end; gap: clamp(.8rem, 2vw, 1.6rem); max-inline-size: 100%; }
.aura-club-metric { display: grid; gap: .05rem; min-inline-size: 4.2rem; text-align: end; }
.aura-club-metric strong { font-size: 1.05rem; line-height: 1.2; }
.aura-club-metric span { color: var(--aura-club-muted); font-size: .72rem; }
.aura-club-metric--institution { max-inline-size: 11rem; }

.aura-club-public .aura-club-officers { align-items: start; gap: 1.25rem; margin: .75rem 0 0; }
.aura-club-public .aura-club-officer { inline-size: 152px; }
.aura-club-public .aura-club-officer__link { inline-size: 100%; }
.aura-club-public .aura-club-avatar--officer { inline-size: 152px; block-size: 152px; box-shadow: 0 6px 20px rgba(20, 39, 30, .16); }
.aura-club-public .aura-club-officer__role { max-inline-size: 152px; font-size: .8rem; font-weight: 650; }

.aura-club-public .aura-club-nav {
	position: relative;
	z-index: 1;
	inline-size: calc(100% - clamp(2rem, 8vw, 7rem));
	margin: 0 auto;
	padding-block-start: 1rem;
	border-block-end: 1px solid var(--aura-club-border);
	overflow-x: auto;
	scrollbar-width: thin;
}
.aura-club-public .aura-club-nav__list { justify-content: flex-start; flex-wrap: nowrap; gap: clamp(.3rem, 2vw, 2rem); }
.aura-club-public .aura-club-nav__link { min-block-size: 48px; padding: .8rem .5rem; white-space: nowrap; border-block-end: 3px solid transparent; color: var(--aura-club-muted); }
.aura-club-public .aura-club-nav__link.is-active { border-block-end-color: var(--aura-club-accent); color: var(--aura-club-text); }

.aura-club-public__content { inline-size: min(calc(100% - 2rem), 1000px); margin: 0 auto; padding-block: clamp(2.5rem, 6vw, 5rem); }
.aura-club-public .aura-club-section { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); scroll-margin-block-start: 2rem; }
.aura-club-section__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.aura-club-section__header .aura-club-section__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.025em; }
.aura-club-section__header p { margin: .4rem 0 0; color: var(--aura-club-muted); }
.aura-club-empty { padding: clamp(2rem, 7vw, 4.5rem); border: 1px dashed var(--aura-club-border); border-radius: var(--aura-club-radius-v2); text-align: center; color: var(--aura-club-muted); }

.aura-club-activities { max-inline-size: 820px; margin-inline: auto; }
.aura-club-public .aura-club-wall { grid-template-columns: 1fr; gap: 1.75rem; }
.aura-club-public .aura-club-activity-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	background: var(--aura-club-surface);
	border: 1px solid var(--aura-club-border);
	border-radius: var(--aura-club-radius-v2);
	box-shadow: 0 8px 28px rgba(20, 39, 30, .045);
}
.aura-club-public .aura-club-activity__content { color: var(--aura-club-text); font-size: 1rem; font-weight: 400; line-height: 1.48; }
.aura-club-public .aura-club-activity__media,
.aura-club-public .aura-club-video { border-radius: calc(var(--aura-club-radius-v2) - 5px); overflow: hidden; }
.aura-club-load-more { margin: .5rem 0 0; text-align: center; }

.aura-club-info { grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr); align-items: start; }
.aura-club-info > .aura-club-section__header { grid-column: 1 / -1; }
.aura-club-info__primary,
.aura-club-info__aside { display: grid; align-content: start; gap: clamp(1.5rem, 3vw, 2.5rem); min-inline-size: 0; }
.aura-club-info__about,
.aura-club-info__mission,
.aura-club-info__objectives,
.aura-club-info__topics,
.aura-club-info__links,
.aura-club-info__facts { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--aura-club-border); border-radius: var(--aura-club-radius-v2); background: var(--aura-club-surface); }
.aura-club-info h3 { margin-block: 0 1rem; font-size: 1.25rem; }
.aura-club-info__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.aura-club-info__facts .aura-club-facts__row { padding: 1rem; background: color-mix(in srgb, var(--aura-club-border) 25%, transparent); border-radius: 12px; }
.aura-club-info__facts .aura-club-facts__row--schedule { grid-column: 1 / -1; }
.aura-club-info__facts dt { color: var(--aura-club-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.aura-club-info__facts dd { margin-block-start: .3rem; font-weight: 700; line-height: 1.55; }
.aura-club-info__chips { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.aura-club-info__chips li { padding: .45rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--aura-club-accent) 10%, transparent); color: var(--aura-club-accent); }
.aura-club-info__objectives ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.aura-club-info__objectives li { position: relative; padding-inline-start: 1.6rem; }
.aura-club-info__objectives li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--aura-club-accent); font-weight: 800; }

.aura-club-members__leaders,
.aura-club-members__all { display: grid; gap: 1.25rem; }
.aura-club-members__heading h3 { margin: 0; font-size: 1.35rem; }
.aura-club-members__heading p { margin: .3rem 0 0; color: var(--aura-club-muted); }
.aura-club-leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.aura-club-leader-card { overflow: hidden; background: var(--aura-club-surface); border: 1px solid var(--aura-club-border); border-radius: var(--aura-club-radius-v2); box-shadow: 0 8px 28px rgba(20, 39, 30, .05); }
.aura-club-leader-card__media { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--aura-club-accent) 8%, #eef2ef); }
.aura-club-leader-card__media img,
.aura-club-leader-card__media > .aura-club-avatar__fallback { inline-size: 100%; block-size: 100%; object-fit: cover; display: grid; place-items: center; font-size: 3rem; color: var(--aura-club-accent); }
.aura-club-leader-card__body { display: grid; gap: .55rem; padding: 1.25rem; }
.aura-club-leader-card__role { justify-self: start; padding: .28rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--aura-club-accent) 10%, transparent); color: var(--aura-club-accent); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
.aura-club-leader-card h4 { margin: 0; font-size: 1.25rem; }
.aura-club-leader-card p { margin: 0; color: var(--aura-club-muted); }
.aura-club-leader-card__contact { margin-block-start: .3rem; color: var(--aura-club-accent); font-weight: 650; }
.aura-club-public .aura-club-members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.aura-club-member-card { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; padding: .85rem; background: var(--aura-club-surface); border: 1px solid var(--aura-club-border); border-radius: 14px; }
.aura-club-member-card > img,
.aura-club-member-card > .aura-club-avatar__fallback { flex: 0 0 52px; inline-size: 52px; block-size: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--aura-club-accent) 10%, transparent); color: var(--aura-club-accent); }
.aura-club-member-card__body { display: grid; min-inline-size: 0; }
.aura-club-member-card__body strong,
.aura-club-member-card__body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-club-member-card__body span { color: var(--aura-club-muted); font-size: .8rem; }

.aura-club-gallery-upload { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.aura-club-gallery-upload input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.aura-club-public .aura-club-gallery--editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 180px; gap: .85rem; }
.aura-club-public .aura-club-gallery--editorial .aura-club-media { aspect-ratio: auto; min-block-size: 0; border-radius: 14px; }
.aura-club-public .aura-club-gallery--editorial .aura-club-media:nth-child(6n + 1),
.aura-club-public .aura-club-gallery--editorial .aura-club-media:nth-child(6n + 5) { grid-row: span 2; }
.aura-club-public .aura-club-gallery--editorial .aura-club-media:nth-child(6n + 4) { grid-column: span 2; }

.aura-club-public :where(a, button, input, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--aura-club-accent) 55%, #fff); outline-offset: 3px; }

@container (max-width: 900px) {
	.aura-club-public .aura-club-hero { block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height-tablet, 250px)); }
	.aura-club-public .aura-club-hero--natural,
	.aura-club-public .aura-club-hero--ratio { block-size: auto; }
	.aura-club-public .aura-club-identity { grid-template-columns: 112px minmax(0, 1fr); margin-block-start: -58px; }
	.aura-club-public .aura-club-identity__badge { inline-size: 112px; block-size: 112px; }
	.aura-club-identity__side { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; justify-items: start; inline-size: 100%; }
	.aura-club-identity__metrics { justify-self: end; }
	.aura-club-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aura-club-public .aura-club-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aura-club-info { grid-template-columns: 1fr; }
	.aura-club-info__about { grid-row: auto; }
	.aura-club-public .aura-club-gallery--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 560px) {
	.aura-club-public .aura-club-hero { block-size: var(--aura-club-hero-height-x, var(--aura-club-hero-height-mobile, 180px)); min-block-size: 0; aspect-ratio: auto; border-radius: 12px 12px 0 0; }
	.aura-club-public .aura-club-hero--natural { block-size: auto; }
	.aura-club-public .aura-club-hero--ratio { block-size: auto; aspect-ratio: var(--aura-club-cover-ratio, 2.7 / 1); max-block-size: min(60vh, 40rem); }
	.aura-club-public .aura-club-identity { grid-template-columns: 1fr; inline-size: calc(100% - 1rem); margin-block-start: -38px; padding: 1rem; text-align: start; }
	.aura-club-public .aura-club-identity__badge { inline-size: 88px; block-size: 88px; margin-block-start: -3.2rem; border-width: 4px; }
	.aura-club-public .aura-club-identity__body { inline-size: 100%; }
	.aura-club-public .aura-club-identity__title { font-size: 1.65rem; }
	.aura-club-public .aura-club-identity__description { -webkit-line-clamp: 3; max-inline-size: none; }
	.aura-club-identity__side { display: grid; grid-template-columns: 1fr; gap: .9rem; }
	.aura-club-public .aura-club-identity__cta,
	.aura-club-public .aura-club-identity__cta > *,
	.aura-club-public .aura-club-identity__cta .aura-club-button { inline-size: 100%; }
	.aura-club-identity__metrics { justify-self: stretch; justify-content: space-between; inline-size: 100%; padding-block-start: .85rem; border-block-start: 1px solid var(--aura-club-border); }
	.aura-club-metric { text-align: start; min-inline-size: 0; }
	.aura-club-metric--institution { display: none; }
	.aura-club-public .aura-club-officers { overflow-x: auto; flex-wrap: nowrap; }
	.aura-club-public .aura-club-nav { inline-size: calc(100% - 1rem); overflow-x: visible; }
	.aura-club-public .aura-club-nav__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; inline-size: 100%; }
	.aura-club-public .aura-club-nav__link { justify-content: center; min-inline-size: 0; padding-inline: .15rem; font-size: .78rem; }
	.aura-club-public__content { inline-size: calc(100% - 1rem); padding-block: 2.25rem; }
	.aura-club-section__header { align-items: stretch; flex-direction: column; }
	.aura-club-leaders { grid-template-columns: 1fr; }
	.aura-club-public .aura-club-members { grid-template-columns: 1fr; }
	.aura-club-info__facts { grid-template-columns: 1fr; }
	.aura-club-public .aura-club-gallery--editorial { grid-auto-rows: 140px; }
	.aura-club-public .aura-club-gallery--editorial .aura-club-media:nth-child(n) { grid-column: auto; }
	.aura-club-gallery-upload { justify-content: stretch; }
	.aura-club-gallery-upload .aura-club-button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.aura-club-public *, .aura-club-lightbox * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
 * Public social profile — activity-first composition.
 * ----------------------------------------------------------------------- */
.aura-club-public {
	inline-size: 100%;
	max-inline-size: none;
	grid-template-columns: minmax(0, 1fr);
	background: #fff;
}

.aura-club-public .aura-club-hero {
	--aura-club-page: calc(100vw - var(--aura-club-scrollbar, 0px));
	--aura-club-cover-width: var(--aura-club-page);
	position: relative;
	inset-inline-start: calc((100% - var(--aura-club-cover-width)) / 2);
	transform: none;
	inline-size: var(--aura-club-cover-width);
	max-inline-size: var(--aura-club-page);
	margin-inline: 0;
	min-block-size: 0;
	max-block-size: none;
	border-radius: 0;
}

.aura-club-public .aura-club-hero__badge {
	position: absolute;
	z-index: 2;
	inset-block-start: clamp(1rem, 3vw, 2.5rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	display: grid;
	place-items: center;
	inline-size: clamp(88px, 10vw, 132px);
	block-size: clamp(88px, 10vw, 132px);
	overflow: hidden;
	border: 5px solid rgba(255, 255, 255, .92);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 28px rgba(10, 24, 17, .2);
}
.aura-club-public .aura-club-hero__badge img { box-sizing: border-box; inline-size: 100%; block-size: 100%; object-fit: contain; }
.aura-club-public .aura-club-hero__badge--fallback { color: var(--aura-club-accent); font-size: 2rem; font-weight: 800; }

.aura-club-public .aura-club-identity,
.aura-club-public .aura-club-nav,
.aura-club-public__content,
.aura-club-participation-banner {
	position: relative;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: min(calc(100vw - clamp(2rem, 9vw, 9rem)), 1320px);
	max-inline-size: none;
}

.aura-club-public .aura-club-identity {
	/*
	 * The right-hand track carries three metrics, one of which is an
	 * institution name rather than a number. At 310-380px those names were
	 * being broken mid-word and the two numeric metrics were pushed hard
	 * against the edge. A wider track fits an ordinary institution name on one
	 * or two whole words per line, and the reading column still keeps well over
	 * half the card.
	 */
	/* Reserve only the room the action and metrics actually need, so the
	 * Club summary can use the otherwise empty middle of the identity card. */
	grid-template-columns: minmax(0, 1fr) minmax(288px, 360px);
	column-gap: clamp(.85rem, 1.35vw, 1.25rem);
	align-items: center;
	margin-block-start: -82px;
	padding: 1.6rem 2rem;
}

.aura-club-public .aura-club-identity__badge {
	inline-size: 156px;
	block-size: 156px;
	margin-block-start: 0;
}
.aura-club-public .aura-club-identity__title { font-size: clamp(1.8rem, 2.7vw, 2.3rem); }

.aura-club-identity__title-row { display: flex; align-items: center; gap: .55rem; min-inline-size: 0; }
.aura-club-identity__verified {
	flex: 0 0 1.1rem;
	display: grid;
	place-items: center;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	border-radius: 50%;
	background: #16a05d;
}
.aura-club-identity__verified::before { content: "✓"; color: #fff; font-size: .7rem; font-weight: 900; line-height: 1; }

.aura-club-public .aura-club-identity__context { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .1rem 0; }
.aura-club-identity__location,
.aura-club-identity__type { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.aura-club-identity__location::before { content: "⌖"; color: var(--aura-club-muted); font-size: .95rem; }
.aura-club-identity__type { padding: .22rem .6rem; border-radius: 999px; background: #edf8f2; color: #247451; }
.aura-club-identity__type::before { content: "♡"; font-size: .8rem; }

.aura-club-identity__side { align-self: center; }
.aura-club-public .aura-club-identity__cta .aura-club-button { padding-inline: 1.35rem; }
/*
 * Nudge the whole strip inward. The metrics used to sit flush against the card
 * edge, which read as the group drifting right while the institution name
 * squeezed. This moves the set a little to the left without taking anything
 * from the Club name and description beside it.
 */
.aura-club-identity__metrics { gap: 0; margin-inline-end: .6rem; }
.aura-club-metric {
	position: relative;
	grid-template-columns: auto auto;
	grid-template-areas: "icon value" "label label";
	column-gap: .35rem;
	min-inline-size: 6.5rem;
	padding-inline: 1rem;
	text-align: center;
}
.aura-club-metric + .aura-club-metric { border-inline-start: 1px solid var(--aura-club-border); }
.aura-club-metric::before { grid-area: icon; align-self: center; color: var(--aura-club-muted); font-size: 1rem; }
.aura-club-metric--members::before { content: "♙"; }
.aura-club-metric--activities::before { content: "◷"; }
.aura-club-metric--institution::before { content: "⌂"; }
.aura-club-metric strong { grid-area: value; text-align: start; }
.aura-club-metric span { grid-area: label; }

/*
 * The institution is a name, not a figure.
 *
 * It needs several times the width of a three-digit count and must wrap between
 * words rather than inside them: "Institución Educativa Emblemática" broken as
 * "Institu-" reads as a defect. `word-break: normal` with `overflow-wrap` only
 * as a last resort keeps ordinary names whole, and the slightly smaller, tighter
 * type buys a line without shrinking the label below the other two.
 */
.aura-club-metric--institution {
	flex: 1 1 auto;
	min-inline-size: 9rem;
	max-inline-size: 16rem;
}
.aura-club-metric--institution strong {
	font-size: .95rem;
	line-height: 1.25;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.aura-club-public .aura-club-nav { padding-block-start: .75rem; }
.aura-club-public .aura-club-nav__list { gap: clamp(.3rem, 3vw, 3rem); }
.aura-club-public .aura-club-nav__link { min-block-size: 56px; font-weight: 650; }

.aura-club-public__content { max-inline-size: 1320px; padding-block: 2rem 3.5rem; }
.aura-club-view[hidden] { display: none !important; }
.aura-club-public .aura-club-section { gap: 1.6rem; }
.aura-club-public .aura-club-section__title { font-size: 1.25rem; letter-spacing: -.015em; }

/* Activity wall with stable context on the left. */
.aura-club-public .aura-club-activities { max-inline-size: none; }
.aura-club-section__header--social { margin-inline-start: 330px; }
/*
 * Two columns: the context on the left, travelling with the reader, and the
 * feed on the right.
 *
 * The context is one sticky wrapper rather than two sticky blocks. A sticky
 * element can only move within its own containing block, so two blocks in two
 * grid rows each get an area exactly their own height and neither can stick to
 * anything. One wrapper sits in a row as tall as the feed beside it, which is
 * the room stickiness needs — and the categories stay under "About this club"
 * instead of drifting off on their own.
 */
.aura-club-activities-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 2rem; align-items: start; }
.aura-club-activity-context { position: sticky; inset-block-start: 1rem; display: grid; gap: 1.25rem; min-inline-size: 0; }
.aura-club-activity-sidebar { display: grid; gap: 1.25rem; min-inline-size: 0; }
.aura-club-activity-feed { min-inline-size: 0; }
.aura-club-sidebar-card { padding: 1.35rem; border: 1px solid var(--aura-club-border); border-radius: 16px; background: #fff; }
.aura-club-sidebar-card h3 { margin: 0 0 1rem; font-size: 1rem; }
.aura-club-sidebar-card > p { margin: 0; color: var(--aura-club-muted); font-size: .88rem; line-height: 1.7; }
.aura-club-sidebar-featured { margin-block-start: 1.2rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--aura-club-border); }
.aura-club-sidebar-featured h3 { margin-block-end: .85rem; }
.aura-club-sidebar-featured__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem .45rem; margin: 0; padding: 0; list-style: none; }
.aura-club-sidebar-featured__grid li { min-inline-size: 0; text-align: center; }
.aura-club-sidebar-featured__grid a,
.aura-club-sidebar-featured__grid li > div { display: grid; justify-items: center; gap: .25rem; color: inherit; text-decoration: none; }
.aura-club-sidebar-featured__avatar { display: grid; place-items: center; inline-size: 72px; block-size: 72px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #edf2ef; box-shadow: 0 4px 14px rgba(20, 39, 30, .13); }
.aura-club-sidebar-featured__avatar img,
.aura-club-sidebar-featured__avatar .aura-club-avatar__fallback { display: grid; place-items: center; inline-size: 100%; block-size: 100%; object-fit: cover; color: var(--aura-club-accent); }
.aura-club-sidebar-featured__grid strong { overflow: hidden; max-inline-size: 100%; font-size: .68rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.aura-club-sidebar-featured__grid li span:last-child:not(.aura-club-sidebar-featured__avatar) { color: var(--aura-club-muted); font-size: .6rem; line-height: 1.25; }
.aura-club-sidebar-featured__grid a:focus-visible { border-radius: 8px; outline: 3px solid var(--aura-club-accent); outline-offset: 3px; }
.aura-club-sidebar-facts { display: grid; gap: 1rem; margin: 1.3rem 0 0; }
.aura-club-sidebar-fact { position: relative; padding-inline-start: 2rem; }
.aura-club-sidebar-fact::before { position: absolute; inset: .05rem auto auto 0; color: var(--aura-club-muted); }
.aura-club-sidebar-fact--institution::before { content: "⌂"; }
.aura-club-sidebar-fact--location::before { content: "⌖"; }
.aura-club-sidebar-fact--category::before { content: "◇"; }
.aura-club-sidebar-fact--since::before { content: "◷"; }
.aura-club-sidebar-fact dt { color: var(--aura-club-muted); font-size: .72rem; }
.aura-club-sidebar-fact dd { margin: .12rem 0 0; font-size: .82rem; font-weight: 700; }
.aura-club-sidebar-chips,
.aura-club-sidebar-links { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.aura-club-sidebar-chips a { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: #edf8f2; color: #247451; font-size: .72rem; text-decoration: none; }
.aura-club-sidebar-chips a:hover,
.aura-club-sidebar-chips a:focus-visible,
.aura-club-sidebar-chips a[aria-current="true"] { background: var(--aura-club-accent); color: #fff; }
.aura-club-sidebar-chips a:focus-visible { outline: 3px solid color-mix(in srgb, var(--aura-club-accent) 35%, transparent); outline-offset: 2px; }
.aura-club-sidebar-links a { display: inline-flex; align-items: center; gap: .35rem; color: var(--aura-club-accent); font-size: .8rem; font-weight: 650; }
.aura-club-sidebar-links a > span { inline-size: 1.8rem; block-size: 1.8rem; border: 1px solid var(--aura-club-border); border-radius: 50%; }
.aura-club-sidebar-links + p { margin-block-start: 1rem; }
.aura-club-activity-feed { min-inline-size: 0; }
.aura-club-public .aura-club-wall { gap: 1.2rem; }
.aura-club-public .aura-club-activity-card { gap: .85rem; padding: 1rem; border-radius: 16px; box-shadow: 0 6px 22px rgba(20, 39, 30, .045); }
.aura-club-activity__header { align-items: center; }
.aura-club-activity__category { display: inline-flex; justify-self: start; margin-block-start: .2rem; padding: .18rem .5rem; border-radius: 999px; background: #edf8f2; color: #247451; font-size: .68rem; }
.aura-club-activity__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.aura-club-activity__story-media { display: grid; gap: .55rem; min-inline-size: 0; }
.aura-club-activity__story-media--video { grid-template-columns: minmax(0, 2fr) minmax(180px, .8fr); }
.aura-club-activity__story-media--video .aura-club-video { block-size: 100%; min-block-size: 330px; }
.aura-club-activity__story-media--video .aura-club-video__facade { block-size: 100%; }
.aura-club-activity__media--side { display: grid; grid-template-columns: 1fr !important; grid-template-rows: repeat(2, minmax(0, 1fr)); block-size: 100%; }
.aura-club-activity__media--side .aura-club-media { min-block-size: 0; aspect-ratio: auto; }
/* One action, so it sits at the end rather than leaving a gap where the
   comment count used to be. */
.aura-club-load-more .aura-club-button { display: block; inline-size: 100%; }

/* Member directory. */
.aura-club-members__heading h3::before { content: "☆"; margin-inline-end: .5rem; color: #16a05d; }
.aura-club-leader-card { position: relative; display: grid; grid-template-rows: 270px auto; min-block-size: 420px; text-align: center; }
.aura-club-leader-card__media { position: relative; min-block-size: 270px; aspect-ratio: auto; overflow: hidden; }
.aura-club-leader-card__profile,
.aura-club-member-card__profile { display: block; inline-size: 100%; block-size: 100%; color: inherit; }
.aura-club-leader-card__profile:focus-visible,
.aura-club-member-card__profile:focus-visible { outline: 3px solid var(--aura-club-accent); outline-offset: -3px; }
.aura-club-leader-card__role { position: absolute; z-index: 1; inset: .9rem auto auto .9rem; background: #159154; color: #fff; }
.aura-club-leader-card:nth-child(3n + 2) .aura-club-leader-card__role { background: #8357db; }
.aura-club-leader-card:nth-child(3n) .aura-club-leader-card__role { background: #e49b12; }
.aura-club-leader-card__body { justify-items: center; min-block-size: 132px; }
.aura-club-leader-card__contact,
.aura-club-member-card__contact { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--aura-club-border); border-radius: 50%; color: var(--aura-club-accent); }
.aura-club-leader-card__contact > span:first-child::before,
.aura-club-member-card__contact > span:first-child::before { content: "✉"; }
.aura-club-members__bar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.aura-club-members-toolbar { display: flex; align-items: center; gap: .65rem; }
.aura-club-members-toolbar input,
.aura-club-members-toolbar select { min-block-size: 42px; border: 1px solid var(--aura-club-border); border-radius: 10px; background: #fff; color: var(--aura-club-text); }
.aura-club-members-toolbar input { min-inline-size: 220px; padding-inline: .8rem; }
.aura-club-public .aura-club-members { gap: 1rem; }
.aura-club-member-card { display: grid; gap: 0; padding: 0; overflow: hidden; text-align: center; }
.aura-club-member-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #edf2ef; }
.aura-club-member-card__media img,
.aura-club-member-card__media .aura-club-avatar__fallback { inline-size: 100%; block-size: 100%; border-radius: 0; object-fit: cover; display: grid; place-items: center; }
.aura-club-leader-card__profile img,
.aura-club-leader-card__profile .aura-club-avatar__fallback { inline-size: 100%; block-size: 100%; object-fit: cover; }
.aura-club-member-card__body { justify-items: center; gap: .5rem; padding: .8rem; }
.aura-club-member-card__role { max-inline-size: 100%; padding: .22rem .55rem; border-radius: 999px; background: #edf8f2; color: #247451 !important; font-size: .68rem !important; }

/* Reusable closing participation strip. */
.aura-club-participation-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; margin: 0 auto 3.5rem; padding: 1.35rem 2rem; border: 1px solid var(--aura-club-border); border-radius: 16px; background: linear-gradient(90deg, #fbfdfc, #fff); }
.aura-club-participation-banner__icon { display: grid; place-items: center; inline-size: 4.2rem; block-size: 4.2rem; border-radius: 50%; background: #e4f7eb; color: #159154; }
.aura-club-participation-banner__icon::before { content: "♙♙♙"; font-size: 1.05rem; font-weight: 800; }
/*
 * A member profile is about a person, so it opens with one: a real portrait at
 * a portrait proportion, with their name and what they do beside it. The story
 * goes underneath, where it has the full measure to be read in.
 */
.aura-club-member-profile {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}
.aura-club-member-profile__portrait {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	background: #edf2ef;
}
.aura-club-member-profile__portrait img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* The fallback keeps the same rectangle: a circle here would say "avatar". */
.aura-club-member-profile__portrait .aura-club-avatar__fallback {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0;
	color: var(--aura-club-accent);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
}
.aura-club-member-profile__body { display: grid; gap: .5rem; align-content: start; min-inline-size: 0; }
.aura-club-member-profile__name { margin: 0; }
.aura-club-member-profile__role { margin: 0; color: var(--aura-club-accent); font-weight: 700; }
.aura-club-member-profile__club { margin: 0; color: var(--aura-club-muted); font-size: .9rem; }
.aura-club-member-profile__summary { margin: .35rem 0 0; max-inline-size: 60ch; font-size: 1.02rem; line-height: 1.7; }
.aura-club-member-profile__contact,
.aura-club-member-profile__share { margin: .6rem 0 0; }

/*
 * A comfortable measure for a real biography: roughly 65-72 characters a line,
 * which is where continuous prose stops being tiring to read. Paragraphs are
 * separated by space rather than indentation, as everything else on the page is.
 */
.aura-club-member-profile__story { max-inline-size: 68ch; margin-block-start: clamp(1.5rem, 4vw, 2.5rem); }
.aura-club-member-profile__story h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.aura-club-member-profile__story p { margin: 0 0 .9rem; line-height: 1.75; }
.aura-club-member-profile__story p:last-child { margin-block-end: 0; }

.aura-club-participation-banner h2 { margin: 0; font-size: 1.25rem; }
.aura-club-participation-banner p { margin: .35rem 0 0; color: var(--aura-club-muted); }

@media (max-width: 1024px) {
	.aura-club-public .aura-club-identity { grid-template-columns: minmax(0, 1fr); }
	.aura-club-identity__side { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
	.aura-club-section__header--social { margin-inline-start: 0; }
	/*
	 * One column, and source order decides. "About this club" and the featured
	 * members come first, the feed follows, and the secondary context closes.
	 * The old rule sent the whole sidebar past the feed with `order: 2`, which
	 * is how a visitor with a hundred activities could scroll for a minute and
	 * still not know what the Club was.
	 */
	.aura-club-activities-layout { grid-template-columns: minmax(0, 1fr); }
	/*
	 * The wrapper steps out of the way and its two halves become grid items of
	 * the layout, so the feed can be placed between them. One copy of each in
	 * the document, and the order a phone reads is the order it shows.
	 */
	.aura-club-activity-context { display: contents; }
	.aura-club-activity-sidebar--primary { grid-column: 1; grid-row: 1; position: static; }
	.aura-club-activity-feed { grid-column: 1; grid-row: 2; }
	.aura-club-activity-sidebar--secondary { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Compact enough not to become the barrier it replaces. */
	.aura-club-activity-sidebar--primary .aura-club-sidebar-card { padding: 1.1rem; }
	.aura-club-activity-sidebar--primary .aura-club-sidebar-card > p { font-size: .85rem; line-height: 1.6; }
}

@media (max-width: 700px) {
	.aura-club-public .aura-club-identity,
	.aura-club-public .aura-club-nav,
	.aura-club-public__content,
	.aura-club-participation-banner { inline-size: calc(100% - 1rem); }
	/*
	 * Keep the action above the metrics. The tablet rule immediately before
	 * this one uses two tracks; on a phone its auto track can collapse the
	 * action to min-content width and inherited wrapping then stacks letters.
	 */
	.aura-club-identity__side { grid-template-columns: minmax(0, 1fr); inline-size: 100%; }
	.aura-club-public .aura-club-identity__cta { justify-content: stretch; inline-size: 100%; }
	.aura-club-public .aura-club-identity__cta > *,
	.aura-club-public .aura-club-identity__cta .aura-club-button { min-inline-size: 0; inline-size: 100%; }
	.aura-club-identity__metrics { justify-self: stretch; inline-size: 100%; }
	.aura-club-public .aura-club-nav__list { grid-template-columns: repeat(5, minmax(5.5rem, 1fr)); overflow-x: auto; }
	.aura-club-activity-sidebar--secondary { grid-template-columns: minmax(0, 1fr); }
	.aura-club-activity-sidebar--primary .aura-club-sidebar-featured__grid { gap: .6rem .35rem; }
.aura-club-activity-sidebar--primary .aura-club-sidebar-featured__avatar { inline-size: 60px; block-size: 60px; }
	.aura-club-activity__story-media--video { grid-template-columns: 1fr; }
	.aura-club-activity__story-media--video .aura-club-video { min-block-size: 220px; }
	.aura-club-activity__media--side { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: 150px; }
	.aura-club-member-profile { grid-template-columns: minmax(0, 1fr); }
	.aura-club-member-profile__portrait { inline-size: min(100%, 260px); margin-inline: auto; }
	.aura-club-member-profile__body { text-align: start; }
	.aura-club-members__bar { align-items: stretch; flex-direction: column; }
	.aura-club-members-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
	.aura-club-members-toolbar input { grid-column: 1 / -1; min-inline-size: 0; inline-size: 100%; }
	.aura-club-participation-banner { grid-template-columns: auto 1fr; padding: 1rem; }
	.aura-club-participation-banner__action { grid-column: 1 / -1; }
	.aura-club-participation-banner__action .aura-club-button { inline-size: 100%; }

	/*
	 * Keep the section chooser in view after the cover and identity card have
	 * passed. This deliberately comes after the Public V2 positioning rules:
	 * those rules centre the navigation but used to reset `sticky` to
	 * `relative`, making every destination appear to return to the Club header.
	 */
	.aura-club-public.aura-club-detail--views .aura-club-identity,
	.aura-club-public.aura-club-detail--views .aura-club-nav {
		inset-inline-start: auto;
		transform: none;
		inline-size: calc(100% - 1rem);
		margin-inline: auto;
	}

	.aura-club-public.aura-club-detail--views .aura-club-identity {
		border-block-end: 0;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	.aura-club-public.aura-club-detail--views .aura-club-nav {
		position: sticky;
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
		z-index: 40;
		margin-block-start: -1px;
		padding-block-start: .35rem;
		border: 1px solid var(--aura-club-border);
		border-block-start: 0;
		border-end-start-radius: var(--aura-club-radius-v2, 18px);
		border-end-end-radius: var(--aura-club-radius-v2, 18px);
		background: var(--aura-club-surface);
		box-shadow: 0 12px 40px rgba(20, 39, 30, .08);
	}
}

/*
 * Activity cards use the established phone breakpoint. This block stays after
 * the Public V2 composition so those later desktop rules cannot accidentally
 * restore a third header column or stretched tag chips on small screens.
 */
@media (max-width: 767px) {
	.aura-club-activity-card--reactions-header .aura-club-activity__header { padding-inline-end: 0; }
	.aura-club-activity__header { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .05rem .5rem; }
	.aura-club-activity__header > .aura-club-avatar { grid-column: 1; grid-row: 1 / span 2; inline-size: 40px; block-size: 40px; }
	.aura-club-activity__headline { display: contents; }
	.aura-club-activity__club-name { display: block; grid-column: 2; grid-row: 1; min-inline-size: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
	.aura-club-activity__title { inline-size: 100%; font-size: 1rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
	.aura-club-activity__header .aura-club-activity__title--inline { grid-column: 1 / -1; grid-row: 4; margin-block-start: .25rem; }
	.aura-club-activity__date { grid-column: 2; grid-row: 2; line-height: 1.3; }
	.aura-club-activity__tags { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: .3rem; inline-size: 100%; margin-block-start: .25rem; }
	.aura-club-activity__category { flex: 0 0 auto; inline-size: auto; margin: 0; padding: .15rem .45rem; font-size: .68rem; line-height: 1.35; }
	.aura-club-activity-card--reactions-header .aura-club-reactions--header { position: static; inset: auto; }
	.aura-club-reactions { inline-size: 100%; flex-wrap: nowrap; justify-content: space-between; border-block-start: 1px solid var(--aura-club-border); padding-block-start: .625rem; }
	.aura-club-reactions .aura-club-reaction { min-block-size: 44px; padding-inline: .65rem; }
	.aura-club-reactions .aura-club-reaction--share { margin-inline-start: 0; }
	.aura-club-reactions .aura-club-reaction__hint,
	.aura-club-reactions .aura-club-reaction__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	/* A single cover remains complete; multi-item posts keep their mosaic. */
	.aura-club-activity__media.aura-club-media-grid--mosaic[data-count="1"] {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: none;
		aspect-ratio: auto;
		block-size: auto;
	}
	.aura-club-activity__media.aura-club-media-grid--mosaic[data-count="1"] .aura-club-media {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: auto;
		block-size: auto;
	}
	.aura-club-activity__media.aura-club-media-grid--mosaic[data-count="1"] .aura-club-media img {
		block-size: auto;
		object-fit: contain;
		object-position: 50% 50% !important;
	}
}

/* Public portraits use the two dimensions configured in Design. */
.aura-club-sidebar-featured__items { display: grid; gap: .6rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.aura-club-sidebar-featured__items li { padding: .55rem .7rem; border: 1px solid var(--aura-club-border); border-radius: 8px; overflow-wrap: anywhere; }
.aura-club-sidebar-featured__items a { color: var(--aura-club-accent); text-decoration: none; }
.aura-club-sidebar-featured__items a:hover { text-decoration: underline; }
.aura-club-public .aura-club-leaders {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--aura-club-featured-photo-width, 320px)), 1fr));
}
.aura-club-public .aura-club-leader-card {
	inline-size: min(100%, var(--aura-club-featured-photo-width, 320px));
	grid-template-rows: var(--aura-club-featured-photo-height, 240px) auto;
	min-block-size: 0;
}
.aura-club-public .aura-club-leader-card__media {
	min-block-size: 0;
	block-size: var(--aura-club-featured-photo-height, 240px);
}
.aura-club-public .aura-club-member-card__media {
	inline-size: min(100%, var(--aura-club-member-photo-width, 220px));
	block-size: var(--aura-club-member-photo-height, 165px);
	margin-inline: auto;
	aspect-ratio: auto;
}
@container (max-width: 900px) {
	.aura-club-public .aura-club-leaders { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--aura-club-featured-photo-width-tablet, 260px)), 1fr)); }
	.aura-club-public .aura-club-leader-card { inline-size: min(100%, var(--aura-club-featured-photo-width-tablet, 260px)); grid-template-rows: var(--aura-club-featured-photo-height-tablet, 200px) auto; }
	.aura-club-public .aura-club-leader-card__media { block-size: var(--aura-club-featured-photo-height-tablet, 200px); }
	.aura-club-public .aura-club-member-card__media { inline-size: min(100%, var(--aura-club-member-photo-width-tablet, 200px)); block-size: var(--aura-club-member-photo-height-tablet, 150px); }
}
@container (max-width: 560px) {
	.aura-club-public .aura-club-leaders { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--aura-club-featured-photo-width-mobile, 240px)), 1fr)); }
	.aura-club-public .aura-club-leader-card { inline-size: min(100%, var(--aura-club-featured-photo-width-mobile, 240px)); grid-template-rows: var(--aura-club-featured-photo-height-mobile, 180px) auto; }
	.aura-club-public .aura-club-leader-card__media { block-size: var(--aura-club-featured-photo-height-mobile, 180px); }
	.aura-club-public .aura-club-member-card__media { inline-size: min(100%, var(--aura-club-member-photo-width-mobile, 240px)); block-size: var(--aura-club-member-photo-height-mobile, 180px); }
}