/* ==========================================================================
   FX-Lighting — layout.css
   Page-level structures: hero, sections, grids, two-column (sidebar + main),
   footer layout, intro/about/expertise/global/CTA blocks for the home page.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO (home) */
.fx-hero {
	position: relative;
	min-height: 100svh;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: var( --fx-header-h );
	overflow: hidden;
	isolation: isolate;
}
.fx-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	background-color: var( --fx-bg );
	transform: scale( 1.02 );
	animation: fx-hero-kenburns 24s var( --ease-in-out ) infinite alternate;
}
.fx-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.fx-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --fx-grad-overlay );
}
/* subtle accent glow at the bottom */
.fx-hero::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 40%;
	z-index: -1;
	background: radial-gradient( ellipse at 50% 100%, var( --fx-accent-glow ) 0%, transparent 70% );
	opacity: 0.6;
	pointer-events: none;
}

@keyframes fx-hero-kenburns {
	from { transform: scale( 1.02 ); }
	to   { transform: scale( 1.12 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.fx-hero__bg { animation: none; }
}

.fx-hero__inner {
	width: 100%;
	max-width: var( --fx-container );
	margin-inline: auto;
	padding-inline: var( --sp-5 );
}
.fx-hero__content {
	max-width: 760px;
}
.fx-hero__title {
	font-size: var( --fx-fs-hero );
	font-weight: var( --fw-bold );
	line-height: var( --fx-lh-tight );
	margin-block: var( --sp-3 ) var( --sp-5 );
	letter-spacing: 0.005em;
	text-wrap: balance;
}
.fx-hero__title span { color: var( --fx-accent ); }
.fx-hero__subtitle {
	font-size: var( --fx-fs-md );
	color: var( --fx-text-dim );
	max-width: 580px;
	margin-bottom: var( --sp-6 );
	line-height: var( --fx-lh-base );
}
.fx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp-3 );
}

/* scroll-down hint */
.fx-hero__scroll {
	position: absolute;
	bottom: var( --sp-5 );
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --sp-2 );
	font-size: var( --fx-fs-xs );
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --fx-text-mute );
	z-index: 1;
}
.fx-hero__scroll-line {
	width: 1px; height: 40px;
	background: linear-gradient( to bottom, var( --fx-accent ), transparent );
	animation: fx-scroll-pulse 2s var( --ease-in-out ) infinite;
}
@keyframes fx-scroll-pulse {
	0%, 100% { opacity: 0.3; transform: scaleY( 0.7 ); }
	50%      { opacity: 1;   transform: scaleY( 1 ); }
}

/* ---------------------------------------------------------------- MINI-HERO (secondary pages) */
.fx-page-hero {
	position: relative;
	padding: calc( var( --fx-header-h ) + var( --sp-8 ) ) 0 var( --sp-8 );
	overflow: hidden;
	isolation: isolate;
	background: var( --fx-bg-2 );
}
.fx-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.32;
	background-size: cover;
	background-position: center;
}
.fx-page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg, rgba( 10,10,11,0.55) 0%, rgba( 10,10,11,0.92) 100% );
}
.fx-page-hero__inner {
	max-width: var( --fx-container );
	margin-inline: auto;
	padding-inline: var( --sp-5 );
}
.fx-page-hero__title {
	font-size: var( --fx-fs-2xl );
	font-weight: var( --fw-bold );
	margin-block: var( --sp-3 ) var( --sp-3 );
}
.fx-page-hero__subtitle {
	font-size: var( --fx-fs-md );
	color: var( --fx-text-dim );
	max-width: 640px;
}
/* breadcrumb */
.fx-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --sp-2 );
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.fx-breadcrumb a { color: var( --fx-text-mute ); }
.fx-breadcrumb a:hover { color: var( --fx-accent ); }
.fx-breadcrumb__sep { opacity: 0.5; }
.fx-breadcrumb__current { color: var( --fx-text-dim ); }

/* ---------------------------------------------------------------- SECTION HEAD */
.fx-section-head {
	max-width: 720px;
	margin-bottom: var( --sp-7 );
}
.fx-section-head--center {
	margin-inline: auto;
	text-align: center;
}
.fx-section-head h2 {
	font-size: var( --fx-fs-2xl );
	font-weight: var( --fw-med );
	margin-block: var( --sp-3 );
	line-height: var( --fx-lh-tight );
}
.fx-section-head p {
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-md );
}

/* ---------------------------------------------------------------- INTRO (home) */
.fx-intro {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var( --sp-8 );
	align-items: center;
}
.fx-intro__body p {
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-md );
	margin-bottom: var( --sp-4 );
}
.fx-intro__stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --sp-4 );
	margin-top: var( --sp-6 );
}
.fx-stat {
	text-align: center;
	padding: var( --sp-4 );
	background: var( --fx-surface );
	border: 1px solid var( --fx-border );
	border-radius: var( --r-md );
}
.fx-stat__num {
	display: block;
	font-family: var( --fx-font-display );
	font-size: clamp( 1.75rem, 1.2rem + 2vw, 2.75rem );
	font-weight: var( --fw-bold );
	color: var( --fx-accent );
	line-height: 1;
}
.fx-stat__label {
	display: block;
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: var( --sp-2 );
}
.fx-intro__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var( --r-lg );
	overflow: hidden;
	border: 1px solid var( --fx-border );
}
.fx-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.fx-intro__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, transparent 60%, var( --fx-accent-glow ) );
	opacity: 0.5;
}

/* ---------------------------------------------------------------- CATEGORY GRID */
.fx-cat-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --sp-4 );
}
.fx-cat-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var( --r-lg );
	overflow: hidden;
	background: var( --fx-surface );
	border: 1px solid var( --fx-border );
	color: var( --fx-text );
	transition: transform var( --t-base ), border-color var( --t-base ), box-shadow var( --t-base );
}
.fx-cat-card img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var( --t-slow ) var( --ease-out );
}
.fx-cat-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 10,10,11,0.15) 0%, rgba( 10,10,11,0.55) 50%, rgba( 10,10,11,0.92) 100% );
	transition: opacity var( --t-base );
}
.fx-cat-card__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var( --sp-5 );
	z-index: 1;
}
.fx-cat-card__icon {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: var( --r-md );
	background: rgba( 77, 168, 255, 0.16 );
	color: var( --fx-accent );
	margin-bottom: var( --sp-4 );
	border: 1px solid var( --fx-border-2 );
}
.fx-cat-card__name {
	font-family: var( --fx-font-display );
	font-size: var( --fx-fs-lg );
	font-weight: var( --fw-med );
	margin-bottom: var( --sp-1 );
}
.fx-cat-card__count {
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fx-cat-card__arrow {
	position: absolute;
	top: var( --sp-4 );
	right: var( --sp-4 );
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border-radius: var( --r-pill );
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --fx-text );
	opacity: 0;
	transform: translateY( -6px );
	transition: all var( --t-base );
}
.fx-cat-card:hover {
	border-color: var( --fx-accent );
	transform: translateY( -4px );
	box-shadow: var( --sh-2 );
}
.fx-cat-card:hover img { transform: scale( 1.08 ); }
.fx-cat-card:hover .fx-cat-card__arrow { opacity: 1; transform: translateY( 0 ); background: var( --fx-accent ); color: var( --fx-bg ); }

/* ---------------------------------------------------------------- PRODUCT GRID */
.fx-product-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --sp-4 );
}
.fx-product-card {
	display: flex;
	flex-direction: column;
	background: var( --fx-surface );
	border: 1px solid var( --fx-border );
	border-radius: var( --r-lg );
	overflow: hidden;
	transition: border-color var( --t-base ), transform var( --t-base ), box-shadow var( --t-base );
}
.fx-product-card:hover {
	border-color: var( --fx-border-2 );
	transform: translateY( -4px );
	box-shadow: var( --sh-2 );
}
.fx-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var( --fx-bg-2 );
	overflow: hidden;
}
.fx-product-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var( --t-slow ) var( --ease-out );
}
.fx-product-card:hover .fx-product-card__media img { transform: scale( 1.06 ); }
.fx-product-card__badges {
	position: absolute;
	top: var( --sp-3 );
	left: var( --sp-3 );
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.fx-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var( --sp-3 );
	padding: var( --sp-4 );
	flex: 1;
}
.fx-product-card__cat {
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.fx-product-card__title {
	font-family: var( --fx-font-body );
	font-size: var( --fx-fs-base );
	font-weight: var( --fw-semi );
	line-height: var( --fx-lh-snug );
	color: var( --fx-text );
}
.fx-product-card__title a { color: inherit; }
.fx-product-card__title a:hover { color: var( --fx-accent ); }
.fx-product-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-3 );
	padding-top: var( --sp-3 );
	border-top: 1px solid var( --fx-border );
}
.fx-product-card__price {
	font-family: var( --fx-font-display );
	font-size: var( --fx-fs-md );
	font-weight: var( --fw-med );
	color: var( --fx-accent );
}
.fx-product-card__price--empty { color: var( --fx-text-mute ); font-size: var( --fx-fs-sm ); }

/* ---------------------------------------------------------------- EXPERTISE */
.fx-exp-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --sp-4 );
}
.fx-exp-card {
	padding: var( --sp-5 );
	background: var( --fx-surface );
	border: 1px solid var( --fx-border );
	border-radius: var( --r-md );
	transition: border-color var( --t-base ), transform var( --t-base );
}
.fx-exp-card:hover { border-color: var( --fx-accent ); transform: translateY( -3px ); }
.fx-exp-card__icon {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: var( --r-md );
	background: rgba( 77, 168, 255, 0.12 );
	color: var( --fx-accent );
	margin-bottom: var( --sp-4 );
}
.fx-exp-card h3 {
	font-size: var( --fx-fs-md );
	font-weight: var( --fw-semi );
	margin-bottom: var( --sp-2 );
}
.fx-exp-card p { color: var( --fx-text-dim ); font-size: var( --fx-fs-sm ); }

/* ---------------------------------------------------------------- GLOBAL REACH */
.fx-global {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --sp-8 );
	align-items: center;
}
.fx-global__media {
	aspect-ratio: 4 / 3;
	border-radius: var( --r-lg );
	overflow: hidden;
	border: 1px solid var( --fx-border );
}
.fx-global__media img { width: 100%; height: 100%; object-fit: cover; }
.fx-global__points {
	display: flex;
	flex-direction: column;
	gap: var( --sp-4 );
	margin-top: var( --sp-5 );
}
.fx-global__point {
	display: flex;
	gap: var( --sp-3 );
	align-items: flex-start;
}
.fx-global__point-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border-radius: var( --r-md );
	background: rgba( 77, 168, 255, 0.12 );
	color: var( --fx-accent );
}
.fx-global__point h4 { font-size: var( --fx-fs-sm ); margin-bottom: 2px; }
.fx-global__point p { color: var( --fx-text-dim ); font-size: var( --fx-fs-sm ); }

/* ---------------------------------------------------------------- CTA BLOCK */
.fx-cta {
	position: relative;
	text-align: center;
	padding: var( --sp-9 ) var( --sp-5 );
	border-radius: var( --r-xl );
	background:
		radial-gradient( ellipse at 50% 0%, var( --fx-accent-glow ) 0%, transparent 60% ),
		var( --fx-surface );
	border: 1px solid var( --fx-border );
	overflow: hidden;
}
.fx-cta h2 {
	font-size: var( --fx-fs-2xl );
	font-weight: var( --fw-med );
	margin-bottom: var( --sp-3 );
}
.fx-cta p {
	max-width: 560px;
	margin-inline: auto;
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-md );
	margin-bottom: var( --sp-5 );
}

/* ============================================================
   About-page-only components
   Editorial, content-page feel — distinct from the homepage.
   ============================================================ */

/* --- Story (image + text, two columns) --- */
.fx-about-story {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var( --sp-8 );
	align-items: center;
}
.fx-about-story__media {
	aspect-ratio: 4 / 5;
	border-radius: var( --r-lg );
	overflow: hidden;
	border: 1px solid var( --fx-border );
}
.fx-about-story__media img { width: 100%; height: 100%; object-fit: cover; }
.fx-about-story__body h2 {
	font-size: var( --fx-fs-2xl );
	font-weight: var( --fw-med );
	margin-block: var( --sp-3 ) var( --sp-5 );
	line-height: var( --fx-lh-tight );
}
.fx-about-story__body p {
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-md );
	margin-bottom: var( --sp-4 );
}

/* --- By the numbers (single horizontal strip) --- */
.fx-about-numbers {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --sp-4 );
	text-align: center;
}
.fx-about-numbers__item {
	padding: var( --sp-4 );
	border-right: 1px solid var( --fx-border );
}
.fx-about-numbers__item:last-child { border-right: none; }
.fx-about-numbers__num {
	display: block;
	font-family: var( --fx-font-display );
	font-size: clamp( 1.75rem, 1.2rem + 2vw, 2.75rem );
	font-weight: var( --fw-bold );
	color: var( --fx-accent );
	line-height: 1;
}
.fx-about-numbers__label {
	display: block;
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: var( --sp-2 );
}

/* --- Values (editorial 2-col list) --- */
.fx-about-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --sp-7 ) var( --sp-8 );
	margin-top: var( --sp-6 );
}
.fx-about-values__item {
	position: relative;
	padding-left: var( --sp-5 );
	border-left: 2px solid var( --fx-border-2 );
}
.fx-about-values__item::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: var( --r-pill );
	background: var( --fx-accent );
}
.fx-about-values__item h3 {
	font-size: var( --fx-fs-md );
	font-weight: var( --fw-semi );
	margin-bottom: var( --sp-2 );
}
.fx-about-values__item p {
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-sm );
}

/* ---------------------------------------------------------------- TWO-COLUMN (sidebar + main) */
.fx-layout {
	display: grid;
	grid-template-columns: var( --fx-sidebar-w ) 1fr;
	gap: var( --sp-7 );
	align-items: start;
	padding-block: var( --sp-8 );
}
.fx-layout__sidebar {
	position: sticky;
	top: calc( var( --fx-header-h ) + var( --sp-4 ) );
}
.fx-layout__main { min-width: 0; }

/* page content typography (About / Contact text) */
.fx-page-content { max-width: var( --fx-content ); }
.fx-page-content h2 {
	font-size: var( --fx-fs-xl );
	margin-block: var( --sp-6 ) var( --sp-3 );
}
.fx-page-content h3 { margin-block: var( --sp-5 ) var( --sp-2 ); }
.fx-page-content p { color: var( --fx-text-dim ); margin-bottom: var( --sp-4 ); }
.fx-page-content img { border-radius: var( --r-md ); margin-block: var( --sp-4 ); }
.fx-page-content ul,
.fx-page-content ol {
	margin: var( --sp-3 ) 0 var( --sp-4 ) var( --sp-5 );
	color: var( --fx-text-dim );
}
.fx-page-content li { margin-bottom: var( --sp-2 ); }
.fx-page-content ul li { list-style: disc; }
.fx-page-content ol li { list-style: decimal; }
.fx-page-content strong { color: var( --fx-text ); }

/* contact blocks */
.fx-contact-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --sp-4 );
	margin-top: var( --sp-5 );
}
.fx-contact-card {
	padding: var( --sp-5 );
	background: var( --fx-surface );
	border: 1px solid var( --fx-border );
	border-radius: var( --r-md );
}
.fx-contact-card h4 {
	font-family: var( --fx-font-display );
	font-size: var( --fx-fs-xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --fx-text-mute );
	margin-bottom: var( --sp-3 );
}
.fx-contact-card__row {
	display: flex;
	gap: var( --sp-3 );
	align-items: flex-start;
	margin-bottom: var( --sp-3 );
	color: var( --fx-text-dim );
	font-size: var( --fx-fs-sm );
}
.fx-contact-card__row svg { color: var( --fx-accent ); flex-shrink: 0; margin-top: 2px; }
.fx-contact-card__row a { color: var( --fx-text-dim ); }
.fx-contact-card__row a:hover { color: var( --fx-accent ); }

/* ---------------------------------------------------------------- FOOTER */
.fx-footer {
	border-top: 1px solid var( --fx-border );
	background: var( --fx-bg-2 );
	padding-block: var( --sp-8 ) var( --sp-5 );
}
.fx-footer__top {
	display: grid;
	grid-template-columns: 1.6fr repeat( 3, 1fr );
	gap: var( --sp-6 );
	margin-bottom: var( --sp-7 );
}
.fx-footer__brand .fx-logo { margin-bottom: var( --sp-4 ); }
.fx-footer__about { color: var( --fx-text-mute ); font-size: var( --fx-fs-sm ); max-width: 320px; }
.fx-footer__col h4 {
	font-family: var( --fx-font-display );
	font-size: var( --fx-fs-xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --fx-text );
	margin-bottom: var( --sp-4 );
}
.fx-footer__col ul { display: flex; flex-direction: column; gap: var( --sp-2 ); }
.fx-footer__col a {
	color: var( --fx-text-mute );
	font-size: var( --fx-fs-sm );
}
.fx-footer__col a:hover { color: var( --fx-accent ); }
.fx-footer__social {
	display: flex;
	gap: var( --sp-2 );
	margin-top: var( --sp-4 );
}
.fx-footer__social a {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: var( --r-md );
	background: var( --fx-surface );
	color: var( --fx-text-dim );
	border: 1px solid var( --fx-border );
	transition: all var( --t-fast );
}
.fx-footer__social a:hover {
	background: var( --fx-accent );
	color: var( --fx-bg );
	border-color: var( --fx-accent );
}
.fx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --sp-3 );
	padding-top: var( --sp-5 );
	border-top: 1px solid var( --fx-border );
	font-size: var( --fx-fs-xs );
	color: var( --fx-text-mute );
}
.fx-footer__bottom a { color: var( --fx-text-mute ); }
.fx-footer__bottom a:hover { color: var( --fx-accent ); }

/* Contacts column — structured groups */
.fx-footer__col--contacts { max-width: 280px; }
.fx-footer__contact-group { margin-bottom: var( --sp-4 ); }
.fx-footer__contact-group:last-child { margin-bottom: 0; }
.fx-footer__contact-label {
	display: block;
	font-family: var( --fx-font-display );
	font-size: var( --fx-fs-xs );
	font-weight: var( --fw-semi );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --fx-accent );
	margin-bottom: var( --sp-2 );
}
.fx-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: var( --sp-2 );
	color: var( --fx-text-mute );
	font-size: var( --fx-fs-sm );
	line-height: var( --fx-lh-base );
	margin-bottom: var( --sp-2 );
	transition: color var( --t-fast );
}
.fx-footer__contact-row:last-child { margin-bottom: 0; }
.fx-footer__contact-row svg { color: var( --fx-accent ); flex-shrink: 0; margin-top: 3px; }
.fx-footer__contact-row:hover { color: var( --fx-accent ); }
.fx-footer__contact-row:hover svg { color: var( --fx-accent-2 ); }

/* === FX Page Fixer: full-width layout for Woo pages (added by plugin) === */
.fx-layout--single,
.fx-layout.fx-layout--single {
	display: block;
	grid-template-columns: none;
}
.fx-layout--single > .fx-layout__main { width: 100%; }
.woocommerce .fx-page-content,
.fx-page-content .woocommerce,
.fx-page-content .woocommerce-message,
.fx-page-content .ywraq-wrapper { max-width: none !important; }
.woocommerce-cart .fx-page-content,
.woocommerce-checkout .fx-page-content,
.yith-request-a-quote-page .fx-page-content { max-width: none !important; }
/* === END FX Page Fixer === */