/**
 * grid_items_module.css
 *
 * Styles for template-parts/modules/grid_items_module.php
 * Equal-width stat/info boxes in a bordered grid row.
 * Columns auto-fit so any number of items fills the full width equally.
 */

/* ---------------------------------------------------------------
   Section
--------------------------------------------------------------- */
.grid-items-module {
	background-color: var(--white);
	/*padding: 80px 60px;*/
}

/* ---------------------------------------------------------------
   Optional header
--------------------------------------------------------------- */
.grid-items-module__header {
	margin-bottom: 48px;
}

.grid-items-module__subheader {
	display: inline-block;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--black);
	margin-bottom: 20px;
	min-width: 260px;
}

.grid-items-module__subheader-text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--black);
}

.grid-items-module__heading {
	font-size: clamp(28px, 3.5vw, 56px);
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--black);
	margin: 0;
	line-height: 1.05;
}

/* ---------------------------------------------------------------
   Grid — equal-width columns, fills available width
--------------------------------------------------------------- */
.grid-items-module__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
}

/* ---------------------------------------------------------------
   Individual item
--------------------------------------------------------------- */
.grid-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 21px 24px 24px;
	border-right: 1px solid var(--black);
}

.grid-item:last-child {
	border-right: none;
}

/* Small uppercase label */
.grid-item__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0em;
	text-transform: uppercase;
	color: var(--black);
	line-height: 1.4;
}

/* Large bold value */
.grid-item__value {
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	color: var(--black);
	line-height: 1.1;
	letter-spacing: -0em;
}

/* ---------------------------------------------------------------
   Responsive — 992px: 3-col top row, 1/3 + 2/3 bottom row
--------------------------------------------------------------- */
@media (max-width: 992px) {

	.grid-items-module__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 5th item spans 2 columns → 2/3 width */
	.grid-item:nth-child(5) {
		grid-column: span 2;
	}

	/* No right border on last item of each 3-col row */
	.grid-item:nth-child(3n) {
		border-right: none;
	}

	/* Top border on second row items */
	.grid-item:nth-child(n+4) {
		border-top: 1px solid var(--black);
	}

  .grid-item {
    padding: 12px 20px 12px;
  }

	.grid-item {
		gap: 1px;
	}
}

/* ---------------------------------------------------------------
   Responsive — 700px: 2-column wrap
--------------------------------------------------------------- */
@media (max-width: 700px) {

	.grid-items-module__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Add top border to items that wrap to a new row (items 3+) */
	.grid-item:nth-child(n+3) {
		border-top: 1px solid var(--black);
	}

	/* Restore right border on even items in 2-col layout */
	.grid-item:nth-child(even) {
		border-right: none;
	}

	.grid-item:nth-child(odd) {
		border-right: 1px solid var(--black);
	}

  .grid-item {
    padding: 12px 20px 12px;
  }
}

/* ---------------------------------------------------------------
   Responsive — 480px: single column
--------------------------------------------------------------- */
@media (max-width: 480px) {

}