/**
 * Pure Haven IT — Media panel frames (hero + section visuals).
 * Polished frames, no developer placeholders, SVG illustration support.
 */

/* Hide developer-facing placeholder notes site-wide */
.ph-media-placeholder-note {
	display: none !important;
	visibility: hidden !important;
}

/* ==========================================================================
   Section media frame shell
   ========================================================================== */
.ph-media-frame {
	position: relative;
	border-radius: var(--ph-radius-xl);
	overflow: hidden;
	border: none !important;
	background: linear-gradient(145deg, #081428 0%, #0D1B3E 50%, #1A2F5C 100%);
	box-shadow:
		0 16px 48px -12px rgba(0, 102, 255, 0.28),
		0 8px 24px rgba(13, 27, 62, 0.12);
}

.ph-media-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(135deg, #0066FF 0%, rgba(0, 180, 166, 0.55) 55%, rgba(255, 255, 255, 0.2) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

.ph-media-frame__shell {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 280px;
	max-height: 480px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #081428 0%, #0D1B3E 100%);
}

.ph-media-frame--about .ph-media-frame__shell {
	aspect-ratio: 3 / 2;
}

.ph-media-frame__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ph-media-frame--illustration .ph-media-frame__img,
.ph-media-frame--contain .ph-media-frame__img {
	object-fit: contain;
	padding: clamp(12px, 2vw, 24px);
}

.ph-media-frame__inner {
	width: 100%;
	height: 100%;
	min-height: 280px;
}

.ph-split__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ph-split__media .ph-media-frame {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

/* Abstract CSS fallback when no asset */
.ph-media-frame--fallback .ph-media-frame__shell {
	background:
		url('../images/about-workforce.svg') center / contain no-repeat,
		linear-gradient(145deg, #081428 0%, #0D1B3E 50%, #1A2F5C 100%);
}

/* Depth hover */
.ph-media-frame--depth {
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.ph-media-frame--depth:hover {
	transform: translateY(-4px);
	box-shadow:
		0 24px 56px -12px rgba(0, 102, 255, 0.35),
		0 12px 32px rgba(13, 27, 62, 0.14);
}

/* ==========================================================================
   Hero media panel — illustration mode for SVG poster
   ========================================================================== */
.ph-hero__media-panel--illustration .ph-hero__media-panel__img {
	object-fit: contain;
	padding: clamp(10px, 2vw, 20px);
	background: linear-gradient(145deg, #081428 0%, #0D1B3E 100%);
}

.ph-hero__media-panel--illustration .ph-hero__media-panel__overlay {
	background: linear-gradient(
		180deg,
		rgba(8, 20, 40, 0.08) 0%,
		rgba(8, 20, 40, 0.02) 50%,
		rgba(8, 20, 40, 0.35) 100%
	);
}

@media (max-width: 1024px) {
	.ph-media-frame__shell {
		max-height: 400px;
	}
}

@media (max-width: 768px) {
	.ph-media-frame__shell {
		min-height: 240px;
		max-height: 320px;
	}
}