/**
 * Core Principles Section Styles
 * Three cards in a row for Who We Are page
 */

/* ============================================
   PRINCIPLES SECTION
   ============================================ */

.principles-section {
	position: relative;
	padding: clamp(80px, 12vw, 160px) 0;
	background-color: var(--color-pure-white);
	overflow: hidden;
}

.principles-section__container {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0;
	z-index: 1;
}

/* ============================================
   SECTION HEADER
   ============================================ */

.principles-section .section-header {
	margin: 0;
	margin-bottom: 40px;
}

.principles-section .section-subtitle {
	max-width: 800px;
}

/* ============================================
   PRINCIPLES CARDS
   ============================================ */

.principles-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	align-items: stretch;
}

.principles-card-wrapper {
	padding-top: 8px;
	/* Avoid hover jitter: move the wrapper itself (hover area moves together with the card) */
	transform: translate3d(0, 0, 0);
	transition: transform 0.3s ease-out;
	display: flex;
	flex-direction: column;
	height: 100%;
	will-change: transform;
}

.principles-card-wrapper:hover {
	transform: translate3d(0, -8px, 0);
}

.principles-card {
	position: relative;
	padding: 24px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: box-shadow 0.3s ease-out;
	backface-visibility: hidden; /* Safari: reduce flicker on hover */
	flex: 1;
	height: 100%;
}

.principles-card-wrapper:hover .principles-card,
.principles-card-wrapper:hover .principles-card.principles-card--first,
.principles-card-wrapper:hover .principles-card.principles-card--second,
.principles-card-wrapper:hover .principles-card.principles-card--third {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.principles-card--first {
	background: #BFDFF4;
}

.principles-card--second {
	background: #000;
}

.principles-card--third {
	background: #9DD7F0;
}

.principles-card__icon {
	width: 55px;
	height: 55px;
	margin-bottom: var(--spacing-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
}

.principles-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.principles-card__icon .material-icons {
	font-size: 28px;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Global Presence page specific styles */
.global-presence-page .principles-card__icon {
	background: #fff;
}

/* Who We Are page specific styles */
.who-we-are-page .principles-card__icon {
	background: #fff;
}

/* Manganese Ore page specific styles */
.manganese-ore-page .principles-card__icon {
	background: #fff;
}

/* Iron Ore page specific styles */
.iron-ore-page .principles-card__icon {
	background: #fff;
}

/* Sustainability page specific styles */
.sustainability-page .principles-card__icon {
	background: #fff;
}

.sustainability-page .principles-card__icon .material-icons {
	color: var(--color-night-core);
	font-size: 28px;
}

/* Environmental Impact page specific styles */
.environmental-impact-page .principles-card__icon {
	background: #fff;
}

.environmental-impact-page .principles-card__icon .material-icons {
	color: var(--color-night-core);
	font-size: 28px;
}

.principles-card__title {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1.2;
	font-weight: var(--font-weight-semibold);
	margin: 0 0 var(--spacing-md) 0;
}

.principles-card--first .principles-card__title,
.principles-card--third .principles-card__title {
	color: var(--color-night-core);
}

.principles-card--second .principles-card__title {
	color: var(--color-pure-white);
}

.principles-card__description {
	font-family: var(--font-family-body);
	font-size: clamp(16px, 1.2vw, 16px);
	line-height: 1.6;
	margin: 0;
}

.principles-card__description ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.principles-card__description li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
}

.principles-card__description li:last-child {
	margin-bottom: 0;
}

.principles-card__description li::before {
	content: '•';
	position: absolute;
	left: 0;
	font-weight: 600;
}

.principles-card--first .principles-card__description,
.principles-card--third .principles-card__description {
	color: var(--color-steel-mist);
}

.principles-card--first .principles-card__description li::before,
.principles-card--third .principles-card__description li::before {
	color: var(--color-sky-pulse);
}

.principles-card--second .principles-card__description {
	color: rgba(255, 255, 255, 0.9);
}

.principles-card--second .principles-card__description li::before {
	color: var(--color-sky-pulse);
}

/* ============================================
   METRICS
   ============================================ */

.principles-card__metric {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.principles-card__metric-value {
	font-family: 'DM Sans', sans-serif;
	font-size: 60px;
	font-weight: 400;
	line-height: 1;
	display: block;
}

.principles-card--first .principles-card__metric-value,
.principles-card--third .principles-card__metric-value {
	color: var(--color-night-core);
}

.principles-card--second .principles-card__metric-value {
	color: var(--color-pure-white);
}

.principles-card__metric-label {
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	display: block;
}

.principles-card--first .principles-card__metric-label,
.principles-card--third .principles-card__metric-label {
	color: var(--color-night-core);
}

.principles-card--second .principles-card__metric-label {
	color: var(--color-pure-white);
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */

.principles-section__decor {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.principles-section__decor--grid {
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
}

.principles-section__decor img {
	width: 100%;
	height: auto;
}

/* Ensure cards are above decor */
.principles-cards {
	position: relative;
	z-index: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1280px) {
	.principles-section__container {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		z-index: 1;
		max-width: var(--container-max-width);
	}
}

@media (max-width: 1024px) {
	.principles-section__container {
		position: relative;
		width: 100%;
		max-width: 1300px;
		margin: 0 auto;
		padding: 0;
		z-index: 1;
		max-width: var(--container-max-width);
	}
	
	.principles-card-wrapper {
		padding-top: 8px;
		transition: padding-top 0.3s ease-out;
		display: flex;
		flex-direction: column;
		height: auto;
	}
	
	.principles-cards {
		flex-direction: row;
		gap: 24px;
		display: flex;
	}
	
	.principles-card {
		max-width: 100%;
	}
	
	.principles-section__decor {
		display: none;
	}
}

@media (max-width: 768px) {
	.principles-section {
		padding: clamp(60px, 10vw, 120px) 0;
	}
	
	.principles-section .section-header {
		margin-bottom: clamp(40px, 6vw, 60px);
	}
	
	.principles-cards {
		flex-direction: column;
		gap: 16px;
		display: flex;
	}
	
	.principles-card {
		padding: 24px;
	}
	
	.principles-card__icon {
		width: 55px;
		height: 55px;
		margin-bottom: var(--spacing-lg);
	}
}

@media (max-width: 456px) {
	.principles-cards {
		flex-direction: column;
		gap: 16px;
		display: flex;
	}
}

@media (max-width: 320px) {
	.principles-section {
		padding: clamp(60px, 10vw, 120px) 16px;
	}
	
	.principles-cards {
		flex-direction: column;
		gap: 8px;
		display: flex;
	}
}

/* ============================================
   HOVER EFFECTS - HIGH PRIORITY
   ============================================ */

.principles-section .principles-card-wrapper:hover {
	transform: translate3d(0, -8px, 0) !important;
	z-index: 2;
}

.principles-section .principles-card-wrapper:hover .principles-card,
.principles-section .principles-card-wrapper:hover .principles-card.principles-card--first,
.principles-section .principles-card-wrapper:hover .principles-card.principles-card--second,
.principles-section .principles-card-wrapper:hover .principles-card.principles-card--third,
.principles-section .principles-card-wrapper:hover .principles-card.animate-on-scroll,
.principles-section .principles-card-wrapper:hover .principles-card.animated {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}