/**
 * HTG Stat Block — styles
 *
 * Used both on the front-end and inside the block editor.
 */

.htg-stat-block {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: var(--sp-xl);
	padding-inline: var(--container-pad-x);
}

.htg-stat-block--spacing-compact {
	padding-block: var(--sp-md);
}

.htg-stat-block--spacing-roomy {
	padding-block: var(--sp-2xl);
}

/* Background variants */
.htg-stat-block--dark-grey {
	background: var(--c-footer-bg);
	color: var(--c-white);
}

.htg-stat-block--navy {
	background: var(--c-navy);
	color: var(--c-white);
}

.htg-stat-block--light-grey {
	background: var(--c-cream-lo);
	color: var(--c-ink);
}

.htg-stat-block--white {
	background: var(--c-white);
	color: var(--c-ink);
}

/* Inner constrained container */
.htg-stat-block__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Grid */
.htg-stat-block__grid {
	display: grid;
	gap: var(--sp-lg);
}

.htg-stat-block__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htg-stat-block__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htg-stat-block__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.htg-stat-block__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Alignment */
.htg-stat-block--align-center .htg-stat-block__grid {
	text-align: center;
}

.htg-stat-block--align-center .htg-stat-block__item {
	align-items: center;
}

/* Single stat item */
.htg-stat-block__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-xs);
	min-width: 0;
}

/* Linked stat (whole tile is an <a>) */
a.htg-stat-block__item--linked {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

a.htg-stat-block__item--linked:hover,
a.htg-stat-block__item--linked:focus-visible {
	color: var(--c-red);
}

/* Value (big text) */
.htg-stat-block__value {
	font-family: var(--ff-serif);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}

.htg-stat-block--value-large .htg-stat-block__value {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.htg-stat-block--value-medium .htg-stat-block__value {
	font-size: clamp(2rem, 3.5vw, 3rem);
}

/* Label (small mono caption) */
.htg-stat-block__label {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Caption below the grid */
.htg-stat-block__caption {
	margin-top: var(--sp-md);
	font-size: var(--fs-sm);
	opacity: 0.7;
	text-align: inherit;
}

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

@media (max-width: 900px) {
	.htg-stat-block__grid--4,
	.htg-stat-block__grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.htg-stat-block__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.htg-stat-block__grid--2,
	.htg-stat-block__grid--3,
	.htg-stat-block__grid--4,
	.htg-stat-block__grid--5 {
		grid-template-columns: 1fr;
	}
	.htg-stat-block {
		padding-block: var(--sp-lg);
	}
	.htg-stat-block--spacing-compact {
		padding-block: var(--sp-md);
	}
	.htg-stat-block--spacing-roomy {
		padding-block: var(--sp-xl);
	}
}

/* --- Editor-specific tweaks ---------------------------------------- */

/* The editor wraps blocks in extra divs; alignfull doesn't behave the
   same in canvas as front-end, so we soften the bleed-out margins. */
.editor-styles-wrapper .htg-stat-block {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}