/**
 * Statistics Module
 * ≤3 items: 3-column layout with vertical rotated label.
 * 4 items: 4-column compact layout with horizontal label and inline CTA.
 */

/* ===========================
   # Section shell
=========================== */

.statistics-module {
	padding:    100px 0;
	background: var(--nec-white, #fff);
}

/* ===========================
   # Header block
=========================== */

.stm__header {
	margin-bottom: 56px;
}

.stm__subheader {
	display:       flex;
	align-items:   center;
	gap:           10px;
	margin-bottom: 14px;
}

.stm__subheader-dot {
	display:       inline-block;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--nec-orange, #EB6E00);
	flex-shrink:   0;
}

.stm__subheader-text {
	font-family:    var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:      0.75rem;
	font-weight:    400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--nec-grey, #384249);
}

.stm__heading {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
	color:       var(--nec-grey, #384249);
	margin:      0;
}

/* ===========================
   # Stats row
=========================== */

.stm__stats {
	display:     flex;
	align-items: stretch;
}

/* ===========================
   # Stat card — base
=========================== */

.stm__stat {
	flex:           1;
	display:        flex;
	flex-direction: column;
	border-right:    1px solid rgba(56, 66, 73, 0.2);
}

/* ===========================
   # Horizontal divider
=========================== */

.stm__divider {
	border:     none;
	/*border-top: 1px solid rgba(56, 66, 73, 0.2);*/
	margin:     0;
}

/* ===========================
   # CTA arrow — shared
=========================== */

.stm__cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--nec-orange, #EB6E00);
	flex-shrink:     0;
	text-decoration: none;
}

.stm__cta svg {
	width:      36px;
	height:     36px;
	transition: transform 0.25s ease;
}

.stm__cta:hover svg,
.stm__cta:focus-visible svg {
	transform: translateX(5px);
}

.stm__cta:focus-visible {
	outline: none;
}

/* ===========================
   # THREE-COL layout (≤3 items)
   [Number]  [Vertical Label]
   ──────────────────────────
   [Content]              [→]
=========================== */

.statistics-module--three-col .stm__stat {
  padding: 0px 28px 0px;
  min-height: 380px;
}

.statistics-module--three-col .stm__top {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             24px;
	flex:            1;
	padding-bottom:  36px;
	/* Matches the number's own clamp so every card's top block is the same
	   height regardless of label text length. */
	min-height:      clamp(3.75rem, calc(2.8214rem + 3.8095vw), 6.25rem);
}

.statistics-module--three-col .stm__number {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	/* Fluid between 390px (60px) and 1440px (100px) viewports. */
	font-size:   clamp(3.75rem, calc(2.8214rem + 3.8095vw), 6.25rem);
	font-weight: 400;
	line-height: 1;
	color:       var(--nec-grey, #384249);
}

.statistics-module--three-col .stm__label {
	writing-mode: sideways-lr;
  direction: ltr;
	font-family:    var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:      14px;
	font-weight:    400;
	line-height:    1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--nec-orange, #EB6E00);
	align-self:     flex-start;
	white-space:    normal;
	/* Matches the top block's height — long labels wrap onto a second
	   vertical line instead of overflowing. */
	max-height:     clamp(3.75rem, calc(2.8214rem + 3.8095vw), 6.25rem);
}

.statistics-module--three-col .stm__bottom {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             16px;
	padding-top:     28px;
}

.statistics-module--three-col .stm__content {
	flex:        1;
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   0.9375rem;
	line-height: 1.65;
	color:       var(--nec-grey, #384249);
}

.statistics-module--three-col .stm__content p {
	margin: 0 0 10px;
}

.statistics-module--three-col .stm__content p:last-child {
	margin: 0;
}

/* ===========================
   # FOUR-COL layout (4 items)
   [Number]
   [Label]            [→]
   ──────────────────────
   [Content]
=========================== */

.statistics-module--four-col .stm__stat {
	padding:      36px 32px 28px;
	min-height:   300px;
	border-right: none;
	border-left:  1px solid rgba(56, 66, 73, 0.2);
}

.statistics-module--four-col .stm__stat:first-child {
	border-left:  none;
	padding-left: 0;
}

.statistics-module--four-col .stm__top {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	padding-bottom: 20px;
}

.statistics-module--four-col .stm__number {
font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
  font-size: clamp(3.75rem, calc(2.8214rem + 3.8095vw), 6.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--nec-grey, #384249);
}

.statistics-module--four-col .stm__meta {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.statistics-module--four-col .stm__label {
	font-family:    var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size: 14px;
  font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--nec-orange, #EB6E00);
}

.statistics-module--four-col .stm__content {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   0.875rem;
	line-height: 1.6;
	color:       var(--nec-grey, #384249);
	flex:        1;
	padding-top: 20px;
}

.statistics-module--four-col .stm__content p {
	margin: 0 0 8px;
}

.statistics-module--four-col .stm__content p:last-child {
	margin: 0;
}

/* ===========================
   # Responsive — 1199px
=========================== */

@media (max-width: 1199px) {
	.statistics-module--four-col .stm__stat {
		padding: 28px 20px 24px;
	}

	.statistics-module--four-col .stm__stat:first-child {
		padding-left: 0;
	}


	.statistics-module--three-col .stm__stat {
		padding: 36px 32px 28px;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.statistics-module {
		padding: 60px 0;
	}

	.stm__header {
		margin-bottom: 40px;
	}

	.statistics-module--three-col .stm__stats,
	.statistics-module--four-col .stm__stats {
		flex-wrap: wrap;
	}

	.statistics-module--three-col .stm__stat {
		flex:       0 0 50%;
		min-height: 300px;
		padding:    36px 32px 28px;
	}

	.statistics-module--four-col .stm__stat {
		flex:       0 0 50%;
		min-height: 240px;
		padding:    28px 24px 24px;
	}

	.statistics-module--four-col .stm__stat:first-child {
		padding-left: 0;
	}
}

/* ===========================
   # Responsive — 767px
=========================== */

@media (max-width: 768px) {
	.statistics-module {
		padding: 48px 0;
	}

	.stm__header {
		margin-bottom: 28px;
	}

	.statistics-module--three-col .stm__stat,
	.statistics-module--four-col .stm__stat {
		flex:          0 0 100%;
		min-height:    unset;
		border-right:  none;
		border-left:   none;
		border-bottom: 1px solid rgba(56, 66, 73, 0.2);
		margin-bottom: 24px;
	}

	.statistics-module--three-col .stm__stat:last-child,
	.statistics-module--four-col .stm__stat:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.statistics-module--three-col .stm__stat {
		padding: 28px 0 24px;
		border-left:0px
	}

	.statistics-module--four-col .stm__stat {
		padding: 24px 0 20px;
	}

	/* Drop vertical writing-mode on mobile — label reads horizontally */
	.statistics-module--three-col .stm__label {
		writing-mode: horizontal-tb;
		align-self:   flex-start;
	}
}