/**
 * Pure Haven IT — Site-wide alignment, glass accents, hero layout
 * Brand colours and fonts unchanged.
 */

/* Global page shell */
.ph-site-main {
	overflow-x: hidden;
}

.ph-container {
	width: 100%;
	max-width: var(--ph-container-max);
	margin-inline: auto;
	padding-inline: var(--ph-container-padding);
}

/* Hero two-column layout */
.ph-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--ph-space-2xl);
	align-items: center;
	padding: var(--ph-section-padding) 0;
}

.ph-hero__visual {
	min-height: 320px;
	position: relative;
}

.ph-hero__visual-grid {
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--ph-radius-xl);
	background:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
}

/* Glass panels — subtle premium accent */
.ph-glass-panel {
	position: relative;
	border-radius: var(--ph-radius-xl);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
}

.ph-glass-panel--accent {
	min-height: 280px;
	padding: var(--ph-space-xl);
}

.ph-glass-panel--hero {
	min-height: 320px;
}

.ph-glass-panel__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.45;
	pointer-events: none;
}

.ph-glass-panel__orb--blue {
	width: 140px;
	height: 140px;
	background: var(--ph-color-primary);
	top: 10%;
	left: 15%;
}

.ph-glass-panel__orb--teal {
	width: 120px;
	height: 120px;
	background: var(--ph-color-accent);
	bottom: 15%;
	right: 20%;
}

.ph-glass-panel__content {
	position: relative;
	z-index: 1;
}

.ph-glass-panel__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ph-color-accent);
	margin: 0 0 var(--ph-space-md);
}

.ph-glass-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-glass-panel__list li {
	padding: var(--ph-space-sm) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.ph-band--surface .ph-glass-panel {
	background: rgba(255, 255, 255, 0.65);
	border-color: var(--ph-color-grey-border);
	backdrop-filter: blur(12px);
}

.ph-band--surface .ph-glass-panel__list li {
	color: var(--ph-color-navy);
	border-bottom-color: var(--ph-color-grey-border);
}

.ph-surface-card--glass {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Employers band */
.ph-employers-band__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--ph-space-2xl);
	align-items: center;
}

.ph-employers-band__list {
	margin: 0 0 var(--ph-space-xl);
}

/* Ghost button on dark hero */
.ph-btn--ghost-white {
	background: transparent;
	color: var(--ph-color-white);
	border: 2px solid rgba(255, 255, 255, 0.45);
}

.ph-btn--ghost-white:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--ph-color-white);
	border-color: rgba(255, 255, 255, 0.65);
}

/* Page hero light variants */
.ph-page-hero--light {
	background: var(--ph-color-white);
	border-bottom: 1px solid var(--ph-color-grey-border);
	padding: var(--ph-space-3xl) 0 var(--ph-space-2xl);
}

.ph-page-hero--light .ph-page-hero__title {
	color: var(--ph-color-navy);
}

.ph-page-hero--light .ph-page-hero__subtitle {
	color: var(--ph-color-text-muted);
}

.ph-page-hero--surface {
	background: var(--ph-color-surface);
	border-bottom: 1px solid var(--ph-color-grey-border);
}

/* Inner page section rhythm */
.ph-page-section {
	padding: var(--ph-section-padding) 0;
}

.ph-page-section--surface {
	background: var(--ph-color-surface);
}

/* Align cards in grids */
.ph-card-grid,
.ph-tile-grid,
.ph-showcase-grid {
	align-items: stretch;
}

/* Major section split grids — vertical centering discipline */
.ph-split-grid,
.ph-about__grid,
.ph-employers-band__grid,
.ph-why__grid {
	align-items: center;
}

.ph-section-header {
	max-width: 720px;
}

.ph-section-header--center {
	margin-inline: auto;
	text-align: center;
}

.ph-surface-card,
.ph-card,
.ph-tile {
	height: 100%;
}

/* Service card marker */
.ph-card--service .ph-surface-card__marker,
.ph-card--service .ph-card__icon {
	display: block;
	width: 28px;
	height: 3px;
	background: var(--ph-color-accent);
	border-radius: 2px;
	margin-bottom: var(--ph-space-md);
}

@media (max-width: 1024px) {
	.ph-hero__layout,
	.ph-employers-band__grid {
		grid-template-columns: 1fr;
	}

	.ph-hero__visual {
		min-height: 200px;
		order: -1;
	}
}

@media (max-width: 768px) {
	.ph-hero__actions .ph-btn {
		width: 100%;
		justify-content: center;
	}
}
