/*
 * LED Display Solutions landing page + Request a Quote form only
 * (template-led-solutions.php, template-led-solutions-quote.php).
 * Reuses assets/css/pages.css's form/notice styles (both templates are
 * also enqueued there) and components.css's .gs-btn/.gs-section tokens —
 * this file only adds what those two don't already cover. Explicit
 * repeat(N, 1fr) grids throughout (never auto-fit/minmax), same
 * short-last-row-stretch discipline as the Catalog Layout / Category
 * Directory grids.
 *
 * Visual/conversion polish pass (2026-08-04): hero + solution cards now
 * support a real photograph (see template-led-solutions.php); sections
 * reordered (Why Choose Us earlier); "What Affects Your Configuration"
 * guidance section added; How It Works given a connected-timeline
 * treatment. Request-a-Quote form styles (below the "FORM" divider) are
 * unchanged from V1.
 *
 * Contrast/identity polish pass (2026-08-04, same day): fixed a real
 * dark-on-dark contrast bug (.gs-led-hero__title had no explicit color,
 * so the sitewide `h1 { color: var(--gs-color-text) }` base rule in
 * style.css — a plain element selector that still beats inherited color
 * from an ancestor — rendered the H1 in dark navy on the dark hero
 * background; confirmed via computed-style inspection before fixing, not
 * assumed) and the hero's WhatsApp button (it was reusing the light-mode
 * `.gs-btn--outline` class verbatim — dark navy text/border plus a global
 * `width: 100%` meant for stacked form buttons — on a dark background,
 * making it both nearly invisible and oversized). Also added a
 * restrained electric-cyan accent identity (reusing the existing
 * --gs-color-accent token, never a new color) scoped to this page only —
 * global WooCommerce colors are untouched.
 */

/* ---------- Hero ---------- */

.gs-led-hero {
	background: var(--gs-color-secondary);
	color: var(--gs-color-text-on-dark);
	padding-block: var(--gs-space-2xl);
	overflow: hidden;
}

.gs-led-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--gs-space-2xl);
	align-items: center;
}

.gs-led-hero__title {
	font-size: 2.25rem;
	line-height: 1.15;
	margin: 0 0 var(--gs-space-md);
	/* Explicit — without this, the sitewide `h1{color:var(--gs-color-text)}`
	   base rule (style.css) wins over the section's inherited light color,
	   since it's a rule matching the element directly rather than an
	   inherited value. Confirmed via computed-style inspection: this was
	   rendering as dark-on-dark before this fix. */
	color: #fff;
}

.gs-led-hero__subtitle {
	max-width: 52ch;
	margin: 0 0 var(--gs-space-lg);
	color: var(--gs-color-text-on-dark-muted);
	font-size: 1.0625rem;
}

.gs-led-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-md);
	margin-bottom: var(--gs-space-md);
}

/* Secondary (WhatsApp) CTA on the dark hero only — overrides the shared
   .gs-btn--outline class (correctly styled for LIGHT backgrounds
   elsewhere on this page: the component cross-link and final-CTA
   sections) with light text/border and a natural, content-based width
   instead of the global rule's `width: 100%` (meant for stacked form
   buttons), so it reads as a properly sized secondary action next to
   "Get a Quote", not a full-width bar. Scoped to .gs-led-hero so no
   other button on this page or elsewhere in the theme is affected. */
.gs-led-hero__ctas .gs-btn--outline {
	width: auto;
	flex: 0 0 auto;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.04);
}

.gs-led-hero__ctas .gs-btn--outline:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

.gs-led-hero__trust-line {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--gs-color-text-on-dark-muted);
	text-transform: uppercase;
}

.gs-led-hero__media {
	position: relative;
}

/* Restrained electric-cyan identity touch — a soft glow behind the media
   panel, reusing the existing --gs-color-accent token (never a new
   color). Visible behind both a real photo and the placeholder, since it
   sits behind the whole media column via a pseudo-element rather than on
   the image/placeholder itself. */
.gs-led-hero__media::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(circle at 70% 30%, rgba(26, 163, 201, 0.35), transparent 60%);
	z-index: 0;
	pointer-events: none;
}

.gs-led-hero__image,
.gs-led-hero__placeholder {
	position: relative;
	z-index: 1;
}

.gs-led-hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow-lg);
}

/* Professional placeholder panel used until a real installation photo is
   uploaded via the "Hero Image" admin field — a soft gradient + subtle
   grid-line texture + centered icon, never literal "add image here" text
   visible to customers, never a stock/fabricated photo. */
.gs-led-hero__placeholder {
	aspect-ratio: 8 / 5;
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 32px),
		linear-gradient(135deg, var(--gs-color-primary) 0%, var(--gs-color-secondary) 60%, var(--gs-color-accent) 130%);
}

.gs-led-hero__placeholder-icon {
	color: rgba(255, 255, 255, 0.85);
}

.gs-btn--large {
	padding: 0.9rem 2rem;
	font-size: 1rem;
}

/* ---------- Solution cards ---------- */

.gs-led-solution-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gs-space-lg);
	margin-top: var(--gs-space-lg);
}

.gs-led-solution-card {
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gs-led-solution-card:hover {
	box-shadow: var(--gs-shadow-md);
	transform: translateY(-2px);
}

.gs-led-solution-card__media {
	aspect-ratio: 3 / 2;
	background: var(--gs-color-background-subtle);
}

.gs-led-solution-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gs-led-solution-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gs-color-accent);
	background: linear-gradient(135deg, var(--gs-color-background-subtle) 0%, #e7edf5 100%);
}

.gs-led-solution-card__body {
	padding: var(--gs-space-md);
}

.gs-led-solution-card__title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
}

.gs-led-solution-card__text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--gs-color-text-muted);
}

/* "Get a Quote for This" — carries the selected solution's title into the
   Request-a-Quote form as a pre-filled Application/Use value (same
   read-only GET-prefill pattern already used by the Bulk Quote form's
   ?sku= passthrough) — reuses the existing .gs-link-arrow component. */
.gs-led-solution-card__link {
	display: inline-block;
	margin-top: var(--gs-space-sm);
	font-size: 0.8125rem;
}

.gs-led-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-sm);
	list-style: none;
	margin: var(--gs-space-lg) 0 0;
	padding: 0;
}

.gs-led-tag-list--muted li {
	padding: 0.4rem 0.9rem;
	background: var(--gs-color-background-subtle);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

/* ---------- Recent installations / projects (lightweight, no CPT) ---------- */

.gs-led-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gs-space-lg);
	margin-top: var(--gs-space-lg);
}

.gs-led-project-card {
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gs-led-project-card:hover {
	box-shadow: var(--gs-shadow-md);
	transform: translateY(-2px);
}

.gs-led-project-card__media {
	aspect-ratio: 3 / 2;
	background: var(--gs-color-background-subtle);
	/* A restrained accent border only on the photo edge — a small "proof"
	   cue distinguishing real installation photos from the generic
	   solution-card imagery above, without a badge/label that could read
	   as an unverifiable claim. */
	border-bottom: 3px solid var(--gs-color-accent);
}

.gs-led-project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gs-led-project-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gs-color-accent);
	background: linear-gradient(135deg, var(--gs-color-background-subtle) 0%, #e7edf5 100%);
}

.gs-led-project-card__body {
	padding: var(--gs-space-md);
}

.gs-led-project-card__title {
	margin: 0 0 0.3rem;
	font-size: 1rem;
}

.gs-led-project-card__meta {
	margin: 0 0 0.2rem;
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

.gs-led-project-card__size {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gs-color-primary);
}

/* ---------- Why choose us ---------- */

.gs-led-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gs-space-lg);
	margin-top: var(--gs-space-lg);
}

.gs-led-why-grid__card {
	padding: var(--gs-space-lg);
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-lg);
}

.gs-led-why-grid__icon {
	color: var(--gs-color-accent);
	margin-bottom: var(--gs-space-sm);
}

.gs-led-why-grid__card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.gs-led-why-grid__card p {
	margin: 0;
	color: var(--gs-color-text-muted);
	font-size: 0.9375rem;
}

/* ---------- "Not sure what you need" ---------- */

.gs-led-unsure {
	text-align: center;
}

.gs-led-unsure__inner {
	max-width: 60ch;
}

.gs-led-unsure__inner p {
	color: var(--gs-color-text-muted);
	margin-bottom: var(--gs-space-md);
}

.gs-led-checklist {
	list-style: none;
	margin: 0 0 var(--gs-space-lg);
	padding: 0;
	text-align: left;
	display: inline-block;
}

.gs-led-checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	color: var(--gs-color-text);
}

.gs-led-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gs-color-success);
}

.gs-led-checklist li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.55em;
	width: 6px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* ---------- Applications ---------- */

.gs-led-application-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gs-space-md);
	list-style: none;
	margin: var(--gs-space-lg) 0 0;
	padding: 0;
}

.gs-led-application-cards__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	padding: var(--gs-space-md) var(--gs-space-sm);
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gs-color-text);
}

.gs-led-application-cards__item svg {
	color: var(--gs-color-accent);
}

/* ---------- How it works ---------- */

.gs-led-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gs-space-md);
	list-style: none;
	margin: var(--gs-space-xl) 0 0;
	padding: 0;
}

.gs-led-steps::before {
	content: "";
	position: absolute;
	top: 18px;
	left: calc(100% / 12);
	right: calc(100% / 12);
	height: 2px;
	background: var(--gs-color-border);
	z-index: 0;
}

.gs-led-steps__item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.gs-led-steps__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gs-color-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.9375rem;
	box-shadow: 0 0 0 4px var(--gs-color-background);
}

.gs-led-steps__label {
	font-size: 0.8125rem;
	font-weight: 600;
}

.gs-led-steps__aftercare {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: var(--gs-space-xl) auto 0;
	max-width: 60ch;
	text-align: center;
	color: var(--gs-color-text-muted);
	font-size: 0.9375rem;
}

.gs-led-steps__aftercare svg {
	flex: 0 0 auto;
	color: var(--gs-color-accent);
}

/* ---------- Guidance ("What affects your configuration") ---------- */

.gs-led-guidance__intro {
	max-width: 70ch;
	color: var(--gs-color-text-muted);
	margin: 0.5rem 0 var(--gs-space-lg);
}

.gs-led-guidance-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gs-space-md);
}

.gs-led-guidance-grid__card {
	padding: var(--gs-space-md);
	background: var(--gs-color-background);
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
}

.gs-led-guidance-grid__icon {
	color: var(--gs-color-accent);
	margin-bottom: 0.5rem;
}

.gs-led-guidance-grid__card h3 {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
}

.gs-led-guidance-grid__card p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

/* ---------- Component cross-link ---------- */

.gs-led-cross-link__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gs-space-md);
}

.gs-led-cross-link__heading {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0;
}

/* ---------- Final CTA ---------- */

/* Bookends the page with the hero — same dark, accent-touched treatment,
   for a visually stronger close than a plain light strip. Same
   dark-background contrast rules apply as the hero (explicit white
   heading, muted-light paragraph, light-bordered secondary button —
   see the .gs-led-hero__title / .gs-led-hero__ctas comments above for
   why these can't just inherit color from the section). */
.gs-led-final-cta {
	text-align: center;
	background: linear-gradient(135deg, var(--gs-color-secondary) 0%, var(--gs-color-primary) 100%);
	color: var(--gs-color-text-on-dark);
	padding-block: calc(var(--gs-space-2xl) * 1.2);
}

.gs-led-final-cta__inner h2 {
	margin: 0 0 var(--gs-space-sm);
	font-size: 2rem;
	color: #fff;
}

.gs-led-final-cta__inner p {
	max-width: 55ch;
	margin: 0 auto var(--gs-space-lg);
	color: var(--gs-color-text-on-dark-muted);
}

.gs-led-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gs-space-md);
}

.gs-led-final-cta__actions .gs-btn--outline {
	width: auto;
	flex: 0 0 auto;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.04);
}

.gs-led-final-cta__actions .gs-btn--outline:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* ---------- Mobile sticky "Get a Quote" CTA ---------- */

.gs-led-sticky-cta {
	display: none;
}

/* =========================================================================
   Tablet (<= 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
	.gs-led-hero__grid {
		grid-template-columns: 1fr;
	}

	.gs-led-hero__media {
		order: -1;
	}

	.gs-led-hero__image,
	.gs-led-hero__placeholder {
		aspect-ratio: 16 / 9;
	}

	.gs-led-solution-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-application-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.gs-led-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.gs-led-steps::before {
		display: none;
	}

	.gs-led-guidance-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.gs-led-why-grid {
		grid-template-columns: 1fr;
	}

	.gs-led-projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   Phone (<= 767px)
   ========================================================================= */

@media (max-width: 767px) {
	.gs-led-hero {
		padding-block: var(--gs-space-xl);
	}

	.gs-led-hero__title {
		font-size: 1.625rem;
	}

	.gs-led-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	/* Stacked full-width on mobile (matches the final-CTA stacking pattern
	   below) — the desktop-only content-width sizing lives outside this
	   media query. */
	.gs-led-hero__ctas .gs-btn--outline {
		width: 100%;
	}

	.gs-led-solution-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-application-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-guidance-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gs-led-cross-link__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.gs-led-final-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.gs-led-final-cta__actions .gs-btn--outline {
		width: 100%;
	}

	/* Sticky mobile "Get a Quote" bar — LED Solutions/service pages only,
	   never shown on the normal WooCommerce component-shopping experience. */
	.gs-led-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 0.6rem var(--gs-space-md);
		background: var(--gs-color-background);
		border-top: 1px solid var(--gs-color-border);
		box-shadow: var(--gs-shadow-lg);
	}

	.gs-led-sticky-cta .gs-btn {
		width: 100%;
	}

	/* Reserve space so the sticky bar never overlaps the footer or the
	   quote form's own submit button. */
	.gs-led-solutions-page,
	.gs-led-quote-page {
		padding-bottom: 72px;
	}
}

@media (max-width: 430px) {
	.gs-led-solution-cards,
	.gs-led-application-cards,
	.gs-led-steps,
	.gs-led-guidance-grid,
	.gs-led-projects-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   FORM — Request a Quote page only (template-led-solutions-quote.php).
   Unchanged from Version 1.
   ========================================================================= */

.gs-led-form-section {
	margin-bottom: var(--gs-space-2xl);
}

.gs-led-form-section__title {
	font-size: 1.125rem;
	margin-bottom: var(--gs-space-md);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--gs-color-border);
}

.gs-led-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-md);
}

.gs-led-radio-group label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.gs-led-dimension-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: var(--gs-space-md);
	align-items: end;
}

.gs-led-unsure-toggle {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: var(--gs-space-md);
	background: var(--gs-color-background-subtle);
	border-radius: var(--gs-radius-md);
	margin-bottom: var(--gs-space-lg);
}

.gs-led-unsure-toggle input {
	width: auto;
	min-height: auto;
	margin-top: 0.2rem;
}

.gs-led-unsure-toggle label {
	font-weight: 500;
	margin-bottom: 0;
}

/* Progressive disclosure: fields hidden when "recommend for me" is checked. */
.gs-led-specs-fields[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.gs-led-dimension-row {
		grid-template-columns: 1fr;
	}
}