/**
 * Desktop Mode Tribute — the contribute page.
 *
 * Leans on the Next Admin Diary theme's tokens (paper palette, serif/mono
 * stacks) so the wall of contributors reads like more pages of the same
 * diary: index cards taped to paper, not a widget bolted onto a blog.
 */

.dmt {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dmt-lede {
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var( --wp--preset--color--carbon );
}

.dmt-section {
	margin-block-start: 2.5rem;
}

/* Mono kicker above each section heading — same voice as the theme's
   metadata pills. */
.dmt-kicker {
	margin: 0 0 0.25rem;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --wp--preset--color--blue );
}

.dmt-section > h2 {
	margin-block: 0 0.75rem;
}

/* Card grids. Team cards get room to breathe; the community wall packs
   tighter, like photos pinned side by side. */
.dmt-grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.75rem 1.25rem;
}

.dmt-grid--team {
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
}

.dmt-grid--wall {
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 1.5rem 1rem;
}

/* An index card: paper-alt stock, soft drop shadow, a light hand-placed
   tilt that straightens when you look at it closely. */
.dmt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem 1rem 1.25rem;
	background: var( --wp--preset--color--paper-alt );
	border-radius: 3px;
	box-shadow: 0 14px 26px -18px rgba( 51, 43, 24, 0.45 );
	text-align: center;
	transform: rotate( -0.7deg );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dmt-grid .dmt-card:nth-child( even ) {
	transform: rotate( 0.6deg );
}

.dmt-grid .dmt-card:nth-child( 3n ) {
	transform: rotate( -0.3deg );
}

.dmt-grid .dmt-card:hover,
.dmt-card:hover {
	transform: rotate( 0deg ) translateY( -3px );
	box-shadow: 0 20px 32px -18px rgba( 51, 43, 24, 0.55 );
}

/* Team cards are taped down; wall cards are pinned. Same trick the theme
   uses for blockquotes and sticky notes. */
.dmt-card--team::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 52px;
	height: 18px;
	background: rgba( 255, 255, 255, 0.55 );
	border: 1px solid rgba( 51, 43, 24, 0.08 );
	transform: translateX( -50% ) rotate( -3deg );
}

.dmt-card--wall::before {
	content: "📌";
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 17px;
}

/* Role sticker — a little label slapped on the card's top corner, tilted
   the opposite way from the card so it reads as placed by hand. */
.dmt-role {
	position: absolute;
	top: 0.6rem;
	inset-inline-end: 0.6rem;
	background: var( --wp--preset--color--blue );
	color: var( --wp--preset--color--paper );
	font-family: var( --wp--preset--font-family--mono );
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.15rem 0.55rem;
	border-radius: 3px;
	transform: rotate( 3deg );
	box-shadow: 0 6px 12px -8px rgba( 51, 43, 24, 0.6 );
}

.dmt-avatar {
	width: 72px;
	height: 72px;
	border-radius: 999px;
	border: 3px solid var( --wp--preset--color--paper );
	box-shadow: 0 0 0 1px var( --wp--preset--color--border );
	background: var( --wp--preset--color--paper );
}

.dmt-avatar--big {
	width: 88px;
	height: 88px;
}

.dmt-name {
	margin: 0.25rem 0 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.dmt-login {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	color: var( --wp--preset--color--carbon-light );
	background-image: none;
	word-break: break-all;
}

.dmt-login:hover,
.dmt-login:focus-visible {
	color: var( --wp--preset--color--blue );
}

/* Pills: the theme's blue = when, green = what vocabulary, reused as
   blue = pull requests, green = people. */
.dmt-pill {
	display: inline-flex;
	align-items: center;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	white-space: nowrap;
}

.dmt-pill--blue {
	background: var( --wp--preset--color--blue-soft );
	color: var( --wp--preset--color--blue );
}

.dmt-pill--green {
	background: var( --wp--preset--color--green-soft );
	color: var( --wp--preset--color--green );
}

.dmt-pill--paper {
	background: var( --wp--preset--color--paper-alt );
	color: var( --wp--preset--color--carbon-light );
}

.dmt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.25rem 0;
}

.dmt-automattic {
	margin-block-start: 2rem;
	text-align: center;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	color: var( --wp--preset--color--carbon-light );
}

/* Closing invitation: centered, with the theme's button voice. */
.dmt-cta {
	margin-block-start: 3rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.dmt-cta > p {
	max-width: 34em;
	font-style: italic;
}

.dmt-button {
	display: inline-block;
	background: var( --wp--preset--color--blue );
	color: var( --wp--preset--color--paper );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--small );
	padding: 0.6em 1.2em;
	border-radius: 6px;
	background-image: none;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.dmt-button:hover,
.dmt-button:focus-visible {
	background: var( --wp--preset--color--green );
	color: var( --wp--preset--color--paper );
	transform: translateY( -1px );
}

.dmt-updated,
.dmt-empty {
	margin-block-start: 2.5rem;
	text-align: center;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--meta );
	color: var( --wp--preset--color--carbon-light );
}

@media ( prefers-reduced-motion: reduce ) {
	.dmt-card,
	.dmt-button {
		transition: none;
	}

	.dmt-grid .dmt-card:hover,
	.dmt-card:hover {
		transform: none;
	}
}