/**
 * Shared product-template layout based on Cloud Server 2026.
 * Page-specific styles keep control of hero imagery, spacing, colours and product data.
 */

div.hc-wp main[class$="-page"] {
	--cloud-layout-navy: #071832;
	--cloud-layout-text: #22304a;
	--cloud-layout-muted: var(--hc-muted, #071832);
	--cloud-layout-border: #d9e7f5;
	--cloud-layout-surface: #f5f9ff;
	--cloud-layout-primary: #0b398c;
	--cloud-layout-accent: #1791c8;
	color: var(--cloud-layout-text);
}

div.hc-wp main[class$="-page"] > section[class*="-overview"] {
	padding: 80px 0 !important;
	background: var(--cloud-layout-surface) !important;
}

div.hc-wp main[class$="-page"] > section[class*="-overview"] > .site-container[class*="overview"] {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: center !important;
	gap: 48px !important;
}

div.hc-wp main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] {
	padding: 36px !important;
	border: 1px solid var(--cloud-layout-border) !important;
	border-radius: 30px !important;
	background: #fff !important;
	box-shadow: 0 24px 70px rgba(8, 47, 134, 0.12) !important;
}

div.hc-wp main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] p {
	margin: 0 !important;
	color: var(--cloud-layout-muted) !important;
	font-size: 16px !important;
	line-height: 1.75 !important;
}

div.hc-wp main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] p + p {
	margin-top: 18px !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] {
	padding: 80px 0 !important;
	background: var(--cloud-layout-surface) !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-shell"] {
	position: relative !important;
	padding: 0 64px !important;
	margin-bottom: 40px !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"] {
	display: grid !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc((100% - 72px) / 4) !important;
	gap: 24px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	padding: 8px 4px 30px !important;
	scrollbar-width: none;
}

/* Two slider structures exist on pricing sections, and the rule above only fits
 * one of them. It assumes the plan cards are direct children of the slider, so
 * it makes the slider the grid. vKS Kubernetes, vMonitor Log/Metric and
 * Synthetic Monitoring instead nest
 *     .*-plan-slider > button + .*-plan-viewport > .*-plan-track > cards
 * and the grid then laid out [button | viewport | button] as three 25% columns:
 * the viewport collapsed to ~280px and every card inside it to ~53px.
 *
 * Where a track exists the slider goes back to block flow and the track becomes
 * the grid. This is additive on purpose — a browser without :has() simply drops
 * the first rule below and behaves exactly as before, so the flat sliders that
 * the rule above was written for cannot regress.
 */
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"]:has([class*="plan-track"]) {
	display: block !important;
	padding: 8px 58px 30px !important;
	overflow: visible !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-viewport"] {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	scrollbar-width: none;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-track"] {
	display: grid !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc((100% - 72px) / 4) !important;
	gap: 24px !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 8px 4px 30px !important;
}

/* The grid above always cuts the row into quarters, so a page that sells two or
 * three plans got quarter-width cards crammed against the left of a half-empty
 * row — CloudLinux's two licences wrapped their names over four lines at 238px.
 * Fewer than four cards: centre the tracks and let each one grow. */
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-track"] {
	justify-content: safe center !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"]:not(:has(> :nth-child(4))),
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"]:not(:has(> :nth-child(4))),
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-track"]:not(:has(> :nth-child(4))) {
	grid-auto-columns: minmax(260px, 340px) !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class$="plan-card"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-card "],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class$="pricing-card"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card "] {
	position: relative !important;
	display: flex !important;
	min-height: 610px !important;
	border: 1px solid var(--cloud-layout-border) !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 16px 42px rgba(7, 22, 47, 0.08) !important;
	flex-direction: column !important;
	overflow: hidden !important;
	scroll-snap-align: start !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class$="plan-card"]:hover,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-card "]:hover,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class$="pricing-card"]:hover,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card "]:hover {
	transform: translateY(-6px) !important;
	border-color: rgba(11, 57, 140, 0.28) !important;
	box-shadow: 0 26px 62px rgba(11, 57, 140, 0.1) !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-head"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__head"] {
	padding: 24px 22px 18px !important;
	border-bottom: 1px solid var(--cloud-layout-border) !important;
	background: linear-gradient(135deg, rgba(11, 57, 140, 0.06), rgba(23, 145, 200, 0.06)) !important;
}

/* "Metric Start" wraps to two lines while "Metric Pro" fits on one, which left
 * the price and every spec row below it on a different baseline from card to
 * card. Reserving two lines for the plan name lines the whole row up without
 * pinning the head to a magic pixel height. */
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-head"] h3,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="product-head"] h3,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__head"] h3 {
	min-height: 2.4em !important;
}

/* Same reason, one level down: a one-line plan blurb next to a two-line one
 * still knocked the two cards' prices out of alignment. */
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-head"] > p,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="product-head"] > p,
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__head"] > p {
	min-height: 2.9em !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="spec-list"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__specs"] {
	background: #fbfdff !important;
}

div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-action"],
div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-card__btn"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	border-radius: 8px !important;
	background: linear-gradient(135deg, var(--cloud-layout-primary), var(--cloud-layout-accent)) !important;
	color: #fff !important;
	font-family: var(--hc-font-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	line-height: 24px !important;
	text-transform: uppercase !important;
	box-shadow: 0 12px 24px rgba(11, 57, 140, 0.16) !important;
}

@media (max-width: 1024px) {
	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"],
	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-track"] {
		grid-auto-columns: calc((100% - 24px) / 2) !important;
	}
}

@media (max-width: 767px) {
	div.hc-wp main[class$="-page"] > section[class*="-overview"] > .site-container[class*="overview"] {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}

	div.hc-wp main[class$="-page"] > section[class*="-overview"] [class*="rich-text"] {
		padding: 24px !important;
		border-radius: 20px !important;
	}

	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-shell"] {
		padding: 0 !important;
	}

	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"],
	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="pricing-slider"],
	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-track"] {
		grid-auto-columns: minmax(280px, 88%) !important;
	}

	div.hc-wp main[class$="-page"] > section[class*="-pricing"] [class*="plan-slider"]:has([class*="plan-track"]) {
		padding: 8px 6px 30px !important;
	}
}