/*
 * LCDInfo page layouts. Used by the homepage and other pages built from
 * "lcd-" classes (set in the block editor under Advanced > Additional CSS class).
 * Colors come from the Kadence global palette (Customizer > Colors).
 */

/* Sections: full-width bands stacked without gaps. The .entry-content
   selector outranks Kadence's rule that removes side padding from alignfull blocks. */
.lcd-section,
.entry-content .lcd-section.alignfull {
	padding: clamp(48px, 7vw, 96px) var(--global-content-edge-padding, 1.5rem);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.lcd-section--alt {
	background: var(--global-palette8);
}
.lcd-section--dark {
	background: var(--global-palette3);
	color: var(--global-palette7);
}
.lcd-section--dark h2,
.lcd-section--dark h3 {
	color: var(--global-palette9);
}
.lcd-section--dark,
.lcd-hero--dark {
	/* Kadence colors outline buttons (text and border) from these variables */
	--global-palette-btn-out: #fff;
	--global-palette-btn-out-hover: #fff;
}
.lcd-section--dark .lcd-eyebrow {
	color: #ff7a45;
}
.lcd-cta .wp-block-buttons {
	justify-content: center;
}
.lcd-wrap {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.lcd-section-head {
	max-width: 720px;
	margin-bottom: 40px !important;
	text-align: center;
}
.lcd-section-head p {
	color: var(--global-palette5);
}
.lcd-section--dark .lcd-section-head p {
	color: var(--global-palette6);
}

/* Hero */
.lcd-hero,
.entry-content .lcd-hero.alignfull {
	background: var(--global-palette9);
	padding-top: clamp(32px, 5vw, 72px);
}
.lcd-hero .wp-block-columns {
	gap: clamp(24px, 4vw, 64px);
}
.lcd-hero h1 {
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.1;
	margin: 0 0 20px;
}
.lcd-eyebrow {
	margin-bottom: 12px !important;
	color: var(--global-palette1);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.lcd-eyebrow + .wp-block-heading {
	margin-top: 0 !important;
}
.lcd-lead {
	max-width: 34em;
	color: var(--global-palette5);
	font-size: 1.15rem;
	line-height: 1.6;
}
.lcd-hero .wp-block-buttons {
	margin-top: 28px;
}
.lcd-hero-image img {
	width: 100%;
	height: auto;
}

/* Dark hero: gradient with an orange glow behind the product and a faint pixel grid */
.lcd-hero--dark,
.entry-content .lcd-hero--dark.alignfull {
	position: relative;
	overflow: hidden;
	padding-bottom: clamp(36px, 5vw, 64px);
	color: var(--global-palette6);
	background:
		radial-gradient(ellipse 50% 60% at 76% 40%, rgba(255, 106, 43, 0.17), transparent 70%),
		radial-gradient(ellipse 45% 55% at 5% 100%, rgba(56, 189, 248, 0.08), transparent 70%),
		linear-gradient(180deg, #0d1219 0%, #171d29 100%);
}
.lcd-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 75% 85% at 60% 35%, #000 25%, transparent 80%);
	mask-image: radial-gradient(ellipse 75% 85% at 60% 35%, #000 25%, transparent 80%);
	pointer-events: none;
}
.lcd-hero--dark > * {
	position: relative;
}
.lcd-hero--dark h1 {
	color: #fff;
}
.lcd-hero--dark .lcd-eyebrow {
	color: #ff7a45;
}
.lcd-hero--dark .lcd-lead {
	color: var(--global-palette6);
}
.lcd-hero--dark .is-style-outline .wp-block-button__link:hover,
.lcd-section--dark .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
}
.lcd-hero--dark .lcd-hero-image img {
	filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55));
}
/* The figure floats (not the img) so the live dashboard canvas moves with it */
.lcd-hero--dark .lcd-hero-image {
	animation: lcd-float 7s ease-in-out infinite;
}
@keyframes lcd-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.lcd-hero--dark .lcd-hero-image {
		animation: none;
	}
}

/* Live dashboard canvas (assets/js/live-dash.js) drawn over the image */
.lcd-live-dash {
	position: relative;
}
.lcd-live-dash canvas {
	position: absolute;
	pointer-events: none;
}

/* Key specs row under the hero */
.lcd-stats {
	margin-top: clamp(36px, 5vw, 64px) !important;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lcd-stats:not(:has(> .wp-block-group__inner-container)),
.lcd-stats > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 767px) {
	.lcd-stats:not(:has(> .wp-block-group__inner-container)),
	.lcd-stats > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.lcd-stats .lcd-stat {
	margin: 0 !important;
}
.lcd-stat-value {
	margin: 0 !important;
	color: #fff;
	font-family: var(--global-heading-font-family);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1.1;
}
.lcd-stat-label {
	margin: 6px 0 0 !important;
	color: var(--global-palette6);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Card grids. With this theme WordPress wraps group contents in
 * .wp-block-group__inner-container, so the grid goes on that wrapper when it
 * exists and on the group itself otherwise.
 */
.lcd-grid:not(:has(> .wp-block-group__inner-container)),
.lcd-grid > .wp-block-group__inner-container {
	display: grid;
	gap: 24px;
}
.lcd-grid > *,
.lcd-grid > .wp-block-group__inner-container > * {
	margin: 0 !important;
}
.lcd-grid--3:not(:has(> .wp-block-group__inner-container)),
.lcd-grid--3 > .wp-block-group__inner-container {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lcd-grid--4:not(:has(> .wp-block-group__inner-container)),
.lcd-grid--4 > .wp-block-group__inner-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lcd-grid--2:not(:has(> .wp-block-group__inner-container)),
.lcd-grid--2 > .wp-block-group__inner-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lcd-grid--1:not(:has(> .wp-block-group__inner-container)),
.lcd-grid--1 > .wp-block-group__inner-container {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
@media (max-width: 767px) {
	.lcd-grid--2:not(:has(> .wp-block-group__inner-container)),
	.lcd-grid--2 > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 1024px) {
	.lcd-grid--3:not(:has(> .wp-block-group__inner-container)),
	.lcd-grid--3 > .wp-block-group__inner-container,
	.lcd-grid--4:not(:has(> .wp-block-group__inner-container)),
	.lcd-grid--4 > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.lcd-grid--3:not(:has(> .wp-block-group__inner-container)),
	.lcd-grid--3 > .wp-block-group__inner-container,
	.lcd-grid--4:not(:has(> .wp-block-group__inner-container)),
	.lcd-grid--4 > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}
}
.lcd-card {
	padding: 28px;
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: 8px;
}
.lcd-section--dark .lcd-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}
.lcd-card h3 {
	margin: 14px 0 8px !important;
	font-size: 1.1rem;
}
.lcd-card p {
	margin: 0 !important;
	color: var(--global-palette5);
}
.lcd-section--dark .lcd-card p {
	color: var(--global-palette6);
}

/* Icons sit in a tinted rounded badge */
.lcd-card .wp-block-kadence-single-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(203, 58, 0, 0.09);
}
.lcd-section--dark .lcd-card .wp-block-kadence-single-icon {
	background: rgba(255, 106, 43, 0.13);
}

/* Cards lift slightly on hover */
.lcd-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lcd-card:not(.lcd-card--plain):hover {
	transform: translateY(-4px);
	border-color: rgba(203, 58, 0, 0.35);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.lcd-section--dark .lcd-card:not(.lcd-card--plain):hover {
	border-color: rgba(255, 106, 43, 0.45);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
	.lcd-card,
	.lcd-card:hover {
		transition: none;
		transform: none !important;
	}
}

/* Cards with an image on top (use cases) */
.lcd-card--media {
	overflow: hidden;
	padding: 0 0 28px;
}
.lcd-card--media .lcd-card-image {
	margin: 0 0 8px !important;
	padding: 32px 28px 16px;
	background: radial-gradient(ellipse 65% 70% at 50% 55%, rgba(255, 106, 43, 0.16), transparent 72%);
}
.lcd-card--media .lcd-card-image img {
	width: 100%;
	height: clamp(150px, 15vw, 200px);
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s ease;
}
.lcd-card--media:hover .lcd-card-image img {
	transform: scale(1.03);
}
.lcd-card--media h3,
.lcd-card--media p,
.lcd-card--media .wp-block-buttons {
	padding-left: 28px;
	padding-right: 28px;
}
.lcd-card .wp-block-buttons {
	margin-top: 22px;
}

/* Big number (performance section) */
.lcd-bignum {
	margin: 0 !important;
	font-family: var(--global-heading-font-family);
	font-size: clamp(5rem, 13vw, 10rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.9;
	background: linear-gradient(100deg, #ff6a2b 10%, #facc15 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.lcd-bignum-unit {
	margin: 6px 0 0 !important;
	color: #fff;
	font-family: var(--global-heading-font-family);
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 700;
}
.lcd-bignum-caption {
	margin: 10px 0 0 !important;
	color: var(--global-palette6);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* "Coming soon" formats */
.lcd-soon {
	margin-top: 44px !important;
	text-align: center;
}
.lcd-soon > p,
.lcd-soon .wp-block-group__inner-container > p {
	color: var(--global-palette5);
}
.lcd-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 14px 0 18px !important;
	padding: 0;
	list-style: none;
}
.lcd-chips li {
	padding: 6px 14px;
	color: var(--global-palette4);
	font-size: 0.9rem;
	font-weight: 600;
	background: var(--global-palette9);
	border: 1px dashed rgba(203, 58, 0, 0.45);
	border-radius: 999px;
}
.lcd-soon .wp-block-buttons {
	justify-content: center;
}

/* Compact card: icon and a short title only (sector lists) */
.lcd-card--compact {
	padding: 20px;
}
.lcd-card--compact h3 {
	margin-bottom: 0 !important;
	font-size: 1rem;
}
.lcd-card--compact .wp-block-kadence-single-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
}

/* Text-only hero: keep the line length readable */
.lcd-hero-text h1,
.lcd-hero-text .lcd-lead {
	max-width: 820px;
}

/* Numbered steps */
.lcd-step-number {
	margin: 0 0 6px !important;
	color: var(--global-palette1);
	font-family: var(--global-heading-font-family);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

/*
 * The site's custom CSS pads every link to /my-account/ (written for the account
 * icon in the header). Undo it for the plain text links in the footer.
 */
.site-footer .menu-item a[href*="my-account"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Footer logo (white wordmark). Scoped to .site-footer on purpose: Kadence's
 * ".woocommerce img, .woocommerce-page img { max-width: 100% }" has the same
 * specificity as a bare ".lcd-footer-logo img" and loads later on shop pages,
 * which stretched the logo on product and category pages.
 */
.site-footer .lcd-footer-logo {
	margin-bottom: 20px !important;
}
.site-footer .lcd-footer-logo img {
	width: 100%;
	max-width: 190px;
	height: auto;
}

/* Lab illustrations on dark sections */
.lcd-lab-image img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

/* Instrument frame shown at its native size. Thermal captures are 320x240 and
   must never be stretched to the column width: upscaling them looks soft next
   to the generated lab figures, which are drawn at 1200 px wide. */
.lcd-lab-thumb img {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 8px;
}

/* The caption follows the list above it: left aligned, not centred under the
   frame, and in the same secondary colour the dark sections use elsewhere.
   Slightly wider than the image so the last line does not orphan a word.

   Paired with .wp-block-image on purpose. Core sets `.wp-block-image figcaption
   { text-align: center }`, which is the same specificity as a bare
   `.lcd-lab-thumb figcaption` and loads after this file, so the plain class
   loses. Two classes win the cascade without resorting to !important. */
.wp-block-image.lcd-lab-thumb figcaption {
	max-width: 380px;
	text-align: left;
}

.lcd-section--dark .lcd-lab-thumb figcaption {
	color: var(--global-palette6);
}

/* Compact variant: icon beside text (trust strip) */
.lcd-card--plain {
	padding: 0;
	background: none;
	border: 0;
}
.lcd-card--plain h3 {
	margin-top: 12px !important;
	font-size: 1rem;
}
.lcd-card--plain .wp-block-kadence-single-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
}

/* Two-column text + checklist (services teaser) */
.lcd-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lcd-checklist li {
	position: relative;
	padding: 12px 0 12px 32px;
	border-bottom: 1px solid var(--global-palette7);
}
.lcd-section--dark .lcd-checklist li {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}
.lcd-checklist li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 4px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--global-palette1);
	border-bottom: 2px solid var(--global-palette1);
	transform: rotate(-45deg);
}

/* Product grid inside sections */
.lcd-section .woocommerce ul.products {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.lcd-section .woocommerce ul.products.grid-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}
.lcd-more {
	margin-top: 32px !important;
	text-align: center;
}