/**
 * CPH Stats Grid Styles
 *
 * Grid layout with dividers for displaying statistics.
 *
 * @package Salient_Child
 * @since   1.0.0
 */

/* ==========================================================================
   GRID CONTAINER
   ========================================================================== */

.cph-stats-grid {
	--columns: 3;
	--divider-color: #000;
	--label-font-size: 28px;
	--value-font-size: 43px;
	--label-color: #000;
	--value-color: #000;
	--cell-padding: 40px;
	--label-value-gap: 10px;

	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	width: 100%;
}

/* ==========================================================================
   GRID ITEM
   ========================================================================== */

.cph-stats-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--cell-padding);
	gap: var(--label-value-gap);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.cph-stats-grid__label {
	font-family: "area-normal", sans-serif;
	font-size: var(--label-font-size);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--label-color);
	line-height: 1.2;
}

.cph-stats-grid__value {
	font-family: "area-normal", sans-serif;
	font-size: var(--value-font-size);
	font-weight: 700;
	letter-spacing: 0.8px;
	color: var(--value-color);
	line-height: 1.1;
}

/* ==========================================================================
   DIVIDERS - FULL STYLE (outer border + internal)
   ========================================================================== */

.cph-stats-grid--dividers-full {
	border: 1px solid var(--divider-color);
}

.cph-stats-grid--dividers-full .cph-stats-grid__item {
	border-right: 1px solid var(--divider-color);
	border-bottom: 1px solid var(--divider-color);
}

/* Remove right border on last item in each row - 3 columns */
.cph-stats-grid--dividers-full .cph-stats-grid__item:nth-child(3n) {
	border-right: none;
}

/* Remove bottom border from last row items */
.cph-stats-grid--dividers-full .cph-stats-grid__item:last-child {
	border-bottom: none;
}

/* 3-column: remove bottom border from last row */
.cph-stats-grid--dividers-full .cph-stats-grid__item:nth-last-child(-n+3):nth-child(3n+1),
.cph-stats-grid--dividers-full .cph-stats-grid__item:nth-last-child(-n+3):nth-child(3n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

/* ==========================================================================
   DIVIDERS - INTERNAL STYLE (no outer border)
   ========================================================================== */

.cph-stats-grid--dividers-internal .cph-stats-grid__item {
	/* Right border creates vertical dividers */
	border-right: 1px solid var(--divider-color);
	/* Bottom border creates horizontal dividers */
	border-bottom: 1px solid var(--divider-color);
}

/* Remove right border on last item in each row - 3 columns */
.cph-stats-grid--dividers-internal .cph-stats-grid__item:nth-child(3n) {
	border-right: none;
}

/* Remove bottom border from last row items */
.cph-stats-grid--dividers-internal .cph-stats-grid__item:last-child {
	border-bottom: none;
}

/* 3-column: remove bottom border from last row */
.cph-stats-grid--dividers-internal .cph-stats-grid__item:nth-last-child(-n+3):nth-child(3n+1),
.cph-stats-grid--dividers-internal .cph-stats-grid__item:nth-last-child(-n+3):nth-child(3n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

/* ==========================================================================
   COLUMN-SPECIFIC DIVIDER RULES (2 and 4 columns)
   ========================================================================== */

/* 2-Column Grid */
.cph-stats-grid[style*="--columns: 2"] .cph-stats-grid__item:nth-child(3n) {
	border-right: 1px solid var(--divider-color);
}

.cph-stats-grid[style*="--columns: 2"] .cph-stats-grid__item:nth-child(2n) {
	border-right: none;
}

.cph-stats-grid--dividers-full[style*="--columns: 2"] .cph-stats-grid__item:nth-last-child(-n+2):nth-child(2n+1),
.cph-stats-grid--dividers-full[style*="--columns: 2"] .cph-stats-grid__item:nth-last-child(-n+2):nth-child(2n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

.cph-stats-grid--dividers-internal[style*="--columns: 2"] .cph-stats-grid__item:nth-last-child(-n+2):nth-child(2n+1),
.cph-stats-grid--dividers-internal[style*="--columns: 2"] .cph-stats-grid__item:nth-last-child(-n+2):nth-child(2n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

/* 4-Column Grid */
.cph-stats-grid[style*="--columns: 4"] .cph-stats-grid__item:nth-child(3n) {
	border-right: 1px solid var(--divider-color);
}

.cph-stats-grid[style*="--columns: 4"] .cph-stats-grid__item:nth-child(4n) {
	border-right: none;
}

.cph-stats-grid--dividers-full[style*="--columns: 4"] .cph-stats-grid__item:nth-last-child(-n+4):nth-child(4n+1),
.cph-stats-grid--dividers-full[style*="--columns: 4"] .cph-stats-grid__item:nth-last-child(-n+4):nth-child(4n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

.cph-stats-grid--dividers-internal[style*="--columns: 4"] .cph-stats-grid__item:nth-last-child(-n+4):nth-child(4n+1),
.cph-stats-grid--dividers-internal[style*="--columns: 4"] .cph-stats-grid__item:nth-last-child(-n+4):nth-child(4n+1) ~ .cph-stats-grid__item {
	border-bottom: none;
}

/* ==========================================================================
   RESPONSIVE - TABLET (max-width: 999px)
   ========================================================================== */

@media only screen and (max-width: 999px) {
	.cph-stats-grid {
		--label-font-size: 22px;
		--value-font-size: 36px;
		--cell-padding: 30px;
	}

	/* Reset to 2-column divider rules */
	.cph-stats-grid--dividers .cph-stats-grid__item {
		border-right: 1px solid var(--divider-color);
		border-bottom: 1px solid var(--divider-color);
	}

	.cph-stats-grid--dividers .cph-stats-grid__item:nth-child(2n) {
		border-right: none;
	}

	.cph-stats-grid--dividers .cph-stats-grid__item:nth-child(3n),
	.cph-stats-grid--dividers .cph-stats-grid__item:nth-child(4n) {
		border-right: 1px solid var(--divider-color);
	}

	.cph-stats-grid--dividers .cph-stats-grid__item:nth-child(2n) {
		border-right: none;
	}

	/* Remove bottom border from last row (up to 2 items) */
	.cph-stats-grid--dividers .cph-stats-grid__item:nth-last-child(-n+2) {
		border-bottom: none;
	}

	/* Handle odd number of items - last item alone */
	.cph-stats-grid--dividers .cph-stats-grid__item:last-child:nth-child(odd) {
		border-right: none;
	}
}

/* ==========================================================================
   RESPONSIVE - MOBILE (max-width: 690px)
   ========================================================================== */

@media only screen and (max-width: 690px) {
	.cph-stats-grid {
		--label-font-size: 18px;
		--value-font-size: 30px;
		--cell-padding: 25px 20px;
	}

	/*
	 * Single column layout - reset ALL desktop rules.
	 * Every item gets bottom border only, last item gets none.
	 * Using !important to override complex desktop specificity chains.
	 */

	/* Reset all items to bottom border only */
	.cph-stats-grid--dividers .cph-stats-grid__item {
		border-right: none !important;
		border-bottom: 1px solid var(--divider-color) !important;
	}

	/* Remove bottom border from last item only */
	.cph-stats-grid--dividers .cph-stats-grid__item:last-child {
		border-bottom: none !important;
	}
}