/**
 * Team Grid Module
 * Optional subheader/heading + a 4-column grid of team member cards
 * (photo, name, job title). Clicking a card opens a shared pop-up modal
 * with that person's full biography — see assets/js/modules/nec_team_module.js.
 */

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

.nec-team-module {
	padding: 80px 0;
}

/* ===========================
   # Header block (optional)
   Matches .ism__header (icon_stat_module) for a consistent sub-header/
   heading treatment across modules.
=========================== */

.ntm__header {
	margin-bottom: 48px;
}

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

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

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

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

/* ===========================
   # Grid
=========================== */

.ntm__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
}

/* ===========================
   # Card
=========================== */

.ntm__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
}

.ntm__photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 16px;
	border-radius: var(--radius, 8px);
	overflow: hidden;
	background: var(--nec-light-grey, #f5f5f6);
	/* Promotes this to its own compositing layer. Without it, some browsers
	   re-rasterise the rounded-corner clip mask every frame while the child
	   image scales, which reads as jitter/softness during the transition —
	   .insights-listings-module__card-image doesn't hit this because it has
	   no border-radius to reclip. */
	transform: translateZ(0);
}

.ntm__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	will-change: transform;
	backface-visibility: hidden;
}

.ntm__card:hover .ntm__photo-img,
.ntm__card:focus-visible .ntm__photo-img {
	transform: scale(1.03);
}

.ntm__photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.ntm__name {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nec-grey, #384249);
	transition: var(--transition, all .2s cubic-bezier(.2, .8, .2, 1));
}

.ntm__card:hover .ntm__name,
.ntm__card:focus-visible .ntm__name {
	color: var(--nec-orange, #EB6E00);
}

.ntm__job-title {
	margin-top: 4px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--nec-grey, #384249);
	opacity: 0.75;
}

/* ===========================
   # Biography modal
   Same shell/behaviour as .rh-video-modal (introduction_module.css) —
   dark overlay, centred box, close button above top-right corner.
=========================== */

.rh-team-modal {
	position:        fixed;
	inset:           0;
	z-index:         9999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	visibility:      hidden;
	pointer-events:  none;
	transition:      opacity 0.25s ease, visibility 0.25s ease;
	padding:         24px;
	box-sizing:      border-box;
}

.rh-team-modal.is-open {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

.rh-team-modal__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.85);
	cursor:     pointer;
}

.rh-team-modal__inner {
	position:   relative;
	z-index:    1;
	width:      92%;
	max-width:  640px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--nec-white, #fff);
	border-radius: var(--radius, 8px);
	padding:    40px;
	box-sizing: border-box;
}

.rh-team-modal__close {
	position:        absolute;
	top:             -46px;
	right:           0;
	width:           36px;
	height:          36px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      none;
	border:          none;
	cursor:          pointer;
	color:           #fff;
	padding:         0;
	transition:      opacity 0.2s ease;
}

.rh-team-modal__close:hover,
.rh-team-modal__close:focus-visible {
	opacity: 0.7;
	outline: none;
}

.rh-team-modal__close svg {
	width:  22px;
	height: 22px;
}

.ntm__bio-photo {
	display:       block;
	width:         96px;
	height:        96px;
	object-fit:    cover;
	border-radius: var(--radius, 8px);
	margin-bottom: 20px;
}

.ntm__bio-name {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   1.375rem;
	font-weight: 500;
	line-height: 1.2;
	color:       var(--nec-grey, #384249);
	margin:      0;
}

.ntm__bio-job-title {
	margin:      6px 0 0;
	font-size:   0.9375rem;
	font-weight: 500;
	color:       var(--nec-orange, #EB6E00);
}

.ntm__bio-department {
	margin:      2px 0 0;
	font-size:   0.875rem;
	color:       var(--nec-grey, #384249);
	opacity:     0.75;
}

.ntm__bio-contact {
	margin:    12px 0 0;
	font-size: 0.875rem;
}

.ntm__bio-contact a {
	color:           var(--nec-blue, #1414A0);
	text-decoration: none;
}

.ntm__bio-contact a:hover,
.ntm__bio-contact a:focus-visible {
	text-decoration: underline;
}

.ntm__bio-content {
	margin-top: 20px;
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.ntm__grid {
		gap: 28px 20px;
	}
}

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

@media (max-width: 991px) {
	.nec-team-module {
		padding: 48px 0;
	}

	.ntm__header {
		margin-bottom: 32px;
	}

	.ntm__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}

	.rh-team-modal__inner {
		padding: 32px;
	}
}

/* ===========================
   # Responsive — 599px
=========================== */

@media (max-width: 599px) {
	.nec-team-module {
		padding: 40px 0;
	}

	.ntm__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.rh-team-modal__inner {
		padding: 24px;
	}

	.rh-team-modal__close {
		top:   -40px;
		right: 0;
	}
}