/**
 * Elyra Design System
 * Reusable, theme-native component primitives.
 */

:root {
	--elyra-ds-space-section: var(--elyra-space-section);
	--elyra-ds-space-grid: clamp(1rem, 2.5vw, 1.75rem);
	--elyra-ds-space-content: clamp(1.5rem, 4vw, 3rem);
	--elyra-ds-content-width: 42rem;
	--elyra-ds-copy-width: 65ch;
	--elyra-ds-border: var(--elyra-border);
	--elyra-ds-radius: var(--elyra-radius-card);
	--elyra-ds-radius-small: var(--elyra-radius-sm);
	--elyra-ds-transition: 260ms var(--elyra-ease);
}

[data-elyra-component] {
	box-sizing: border-box;
	color: var(--elyra-ink);
	font-family: var(--elyra-sans);
}

[data-elyra-component] *,
[data-elyra-component] *::before,
[data-elyra-component] *::after {
	box-sizing: inherit;
}

.elyra-ds-section {
	background: var(--elyra-stone);
	color: var(--elyra-ink);
	margin: 0;
	padding-block: var(--elyra-ds-space-section);
}

.elyra-ds-section[data-theme="ivory"] {
	background: var(--elyra-ivory);
}

.elyra-ds-section[data-theme="dark"] {
	background: var(--elyra-black);
	color: var(--elyra-stone);
}

.elyra-ds-section :is(h1, h2, h3, h4),
.elyra-ds-title {
	color: var(--elyra-black);
	font-family: var(--elyra-serif);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: var(--elyra-line-height-tight);
	margin: 0;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.elyra-ds-section[data-theme="dark"] :is(h1, h2, h3, h4),
.elyra-ds-section[data-theme="dark"] .elyra-ds-title {
	color: var(--elyra-stone);
}

.elyra-ds-section p {
	font-size: var(--elyra-font-size-body);
	line-height: var(--elyra-line-height-body);
}

.elyra-ds-kicker {
	color: var(--elyra-gold);
	font-size: 0.72rem !important;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.4 !important;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.elyra-ds-copy {
	color: var(--elyra-muted);
	margin: 1.35rem 0 0;
	max-inline-size: var(--elyra-ds-copy-width);
}

[data-theme="dark"] .elyra-ds-copy {
	color: rgba(251, 250, 246, 0.72);
}

/* Section header. */
.elyra-ds-section-header {
	display: grid;
	gap: 0;
	margin-block-end: clamp(2.5rem, 6vw, 5rem);
	max-inline-size: var(--elyra-ds-content-width);
}

.elyra-ds-section-header h2 {
	font-size: var(--elyra-font-size-h2);
	max-inline-size: 18ch;
}

.elyra-ds-section-header h3 {
	font-size: var(--elyra-font-size-h3);
	max-inline-size: 22ch;
}

.elyra-ds-section-header[data-align="center"] {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.elyra-ds-section-header[data-align="center"] :is(h2, h3, p) {
	margin-inline: auto;
}

.elyra-ds-divider {
	background: var(--elyra-gold);
	block-size: 1px;
	display: block;
	inline-size: min(9rem, 38vw);
	margin-block-start: 1.5rem;
	transform-origin: left center;
}

.elyra-ds-section-header[data-align="center"] .elyra-ds-divider {
	transform-origin: center;
}

/* Luxury buttons. */
.elyra-ds-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-block-start: 2rem;
}

.elyra-ds-button {
	align-items: center;
	background: var(--elyra-black);
	border: 1px solid var(--elyra-black);
	border-radius: 999px;
	color: var(--elyra-stone);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--elyra-sans);
	font-size: 0.76rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.12em;
	line-height: 1.2;
	min-block-size: var(--elyra-control-height);
	padding: 0.9rem 1.35rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--elyra-ds-transition), border-color var(--elyra-ds-transition), color var(--elyra-ds-transition), transform var(--elyra-ds-transition);
}

.elyra-ds-button--light {
	background: var(--elyra-stone);
	border-color: var(--elyra-stone);
	color: var(--elyra-black);
}

.elyra-ds-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--elyra-black);
}

[data-theme="dark"] .elyra-ds-button--ghost {
	color: var(--elyra-stone);
}

.elyra-ds-button:hover {
	background: var(--elyra-gold);
	border-color: var(--elyra-gold);
	color: var(--elyra-black);
	transform: translateY(-0.125rem);
}

.elyra-ds-button:focus-visible,
.elyra-ds-field :is(input, select, textarea):focus-visible,
.elyra-ds-faq summary:focus-visible,
.elyra-ds-product-card a:focus-visible {
	box-shadow: 0 0 0 3px var(--elyra-gold-soft);
	outline: 2px solid var(--elyra-gold);
	outline-offset: 3px;
}

.elyra-ds-button:disabled,
.elyra-ds-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

/* Hero. */
.elyra-ds-hero {
	align-items: end;
	background: var(--elyra-black);
	color: var(--elyra-stone);
	display: grid;
	min-block-size: 82svh;
	overflow: hidden;
	padding-block: calc(var(--elyra-header-height) + 2rem) clamp(3rem, 7vw, 6rem);
	position: relative;
}

.elyra-ds-hero__media,
.elyra-ds-hero__shade {
	inset: 0;
	position: absolute;
}

.elyra-ds-hero__media {
	backface-visibility: hidden;
	overflow: hidden;
	transform: translate3d(var(--elyra-pointer-x, 0), calc(var(--elyra-pointer-y, 0) + var(--elyra-scroll-y, 0px)), 0) scale(var(--elyra-scroll-scale, 1));
	transform-origin: center;
}

.elyra-ds-hero__media img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: var(--elyra-image-position, center);
	opacity: 1;
	transform: scale(1.02);
	transform-origin: center;
}

.elyra-cinematic-ready:not(.elyra-cinematic-started) .elyra-ds-hero__media img {
	opacity: 0;
	transform: scale(1.08);
}

.elyra-cinematic-ready:not(.elyra-reduce-motion) .elyra-ds-hero__media img {
	transition: opacity 1800ms var(--elyra-ease), transform 12s cubic-bezier(0.16, 1, 0.3, 1);
}

.elyra-cinematic-started:not(.elyra-reduce-motion) .elyra-ds-hero__media img {
	opacity: 1;
	transform: scale(1.02);
}

.elyra-ds-hero__shade {
	background: rgba(17, 16, 14, 0.46);
	pointer-events: none;
	z-index: 1;
}

.elyra-ds-hero__content {
	max-inline-size: 54rem;
	opacity: var(--elyra-content-opacity, 1);
	position: relative;
	transform: translate3d(0, var(--elyra-content-y, 0), 0);
	z-index: 2;
}

.elyra-ds-hero h1 {
	color: var(--elyra-stone);
	font-size: var(--elyra-font-size-display);
	max-inline-size: 15ch;
}

.elyra-ds-hero .elyra-ds-copy {
	max-inline-size: 38rem;
}

/* Editorial split and image reveal. */
.elyra-ds-split {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 7vw, 7rem);
	grid-template-columns: minmax(0, 1fr);
}

.elyra-ds-split__copy {
	display: grid;
	min-inline-size: 0;
}

.elyra-ds-split__copy h2 {
	font-size: var(--elyra-font-size-h2);
	max-inline-size: 18ch;
}

.elyra-ds-image {
	background: var(--elyra-ivory);
	border-radius: var(--elyra-ds-radius);
	margin: 0;
	overflow: hidden;
	position: relative;
}

.elyra-ds-image__frame {
	aspect-ratio: var(--elyra-image-ratio, 4 / 3);
	overflow: hidden;
}

.elyra-ds-image img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: var(--elyra-image-position, center);
}

.elyra-ds-image figcaption {
	color: var(--elyra-muted);
	font-size: 0.78rem;
	line-height: 1.5;
	padding: 0.85rem 1rem 1rem;
}

/* CTA banner. */
.elyra-ds-cta {
	background: var(--elyra-black);
	border-radius: var(--elyra-ds-radius);
	color: var(--elyra-stone);
	display: grid;
	gap: var(--elyra-ds-space-content);
	padding: clamp(2rem, 6vw, 5rem);
}

.elyra-ds-cta h2 {
	color: var(--elyra-stone);
	font-size: var(--elyra-font-size-h2);
	max-inline-size: 16ch;
}

.elyra-ds-cta .elyra-ds-actions {
	margin: 0;
}

/* Quote block. */
.elyra-ds-quote {
	border-block: 1px solid var(--elyra-ds-border);
	margin: 0;
	padding-block: clamp(2.5rem, 7vw, 6rem);
}

.elyra-ds-quote blockquote {
	color: var(--elyra-black);
	font-family: var(--elyra-serif);
	font-size: clamp(1.8rem, 4.2vw, 4rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 0;
	max-inline-size: 22ch;
	text-wrap: balance;
}

[data-theme="dark"] .elyra-ds-quote blockquote {
	color: var(--elyra-stone);
}

.elyra-ds-quote cite {
	color: var(--elyra-gold);
	display: block;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin-block-start: 1.5rem;
	text-transform: uppercase;
}

/* Product grid. */
.elyra-ds-product-grid {
	display: grid;
	gap: var(--elyra-ds-space-grid);
	grid-template-columns: minmax(0, 1fr);
}

.elyra-ds-product-card {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--elyra-ds-border);
	border-radius: var(--elyra-ds-radius-small);
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--elyra-card-padding);
	transition: border-color var(--elyra-ds-transition), box-shadow var(--elyra-ds-transition), transform var(--elyra-ds-transition);
}

[data-theme="dark"] .elyra-ds-product-card {
	background: rgba(251, 250, 246, 0.05);
	border-color: var(--elyra-border-light);
}

.elyra-ds-product-card__media {
	aspect-ratio: 1;
	background: var(--elyra-ivory);
	border-radius: calc(var(--elyra-ds-radius-small) - 0.2rem);
	overflow: hidden;
}

.elyra-ds-product-card__media img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	transition: transform 700ms var(--elyra-ease);
}

.elyra-ds-product-card h3 {
	color: var(--elyra-black);
	font-size: var(--elyra-font-size-card);
	line-height: var(--elyra-line-height-heading);
	margin-block-start: 1.15rem;
}

[data-theme="dark"] .elyra-ds-product-card h3,
[data-theme="dark"] .elyra-ds-product-card__meta,
[data-theme="dark"] .elyra-ds-product-card__link {
	color: var(--elyra-stone);
}

.elyra-ds-product-card__meta,
.elyra-ds-product-card__status {
	font-size: 0.76rem !important;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4 !important;
	margin: 0.6rem 0 0;
	text-transform: uppercase;
}

.elyra-ds-product-card__status {
	color: var(--elyra-gold);
}

.elyra-ds-product-card__link {
	color: var(--elyra-black);
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	margin-block-start: 1rem;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 0.25em;
}

/* Feature cards. */
.elyra-ds-feature-grid {
	display: grid;
	gap: var(--elyra-ds-space-grid);
	grid-template-columns: minmax(0, 1fr);
}

.elyra-ds-feature-card {
	background: rgba(255, 255, 255, 0.46);
	border: 1px solid var(--elyra-ds-border);
	border-radius: var(--elyra-ds-radius-small);
	display: flex;
	flex-direction: column;
	min-block-size: 15rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	transition: border-color var(--elyra-ds-transition), box-shadow var(--elyra-ds-transition), transform var(--elyra-ds-transition);
}

[data-theme="dark"] .elyra-ds-feature-card {
	background: rgba(251, 250, 246, 0.05);
	border-color: var(--elyra-border-light);
}

.elyra-ds-feature-card__label {
	color: var(--elyra-gold);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.elyra-ds-feature-card h3 {
	font-size: var(--elyra-font-size-card);
	margin-block-start: auto;
}

.elyra-ds-feature-card p:last-child {
	color: var(--elyra-muted);
	font-size: 1rem;
	margin: 0.9rem 0 0;
}

[data-theme="dark"] .elyra-ds-feature-card p:last-child {
	color: rgba(251, 250, 246, 0.68);
}

/* Timeline. */
.elyra-ds-timeline {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.elyra-ds-timeline__item {
	border-block-start: 1px solid var(--elyra-ds-border);
	padding-block: 2rem 2.5rem;
}

[data-theme="dark"] .elyra-ds-timeline__item {
	border-color: var(--elyra-border-light);
}

.elyra-ds-timeline__marker {
	align-items: center;
	border: 1px solid rgba(157, 131, 81, 0.68);
	border-radius: 50%;
	color: var(--elyra-gold);
	display: inline-flex;
	font-size: 0.7rem;
	font-weight: 800;
	inline-size: 3.25rem;
	justify-content: center;
	letter-spacing: 0.08em;
	min-block-size: 3.25rem;
}

.elyra-ds-timeline h3 {
	font-size: var(--elyra-font-size-card);
	margin-block-start: 1.25rem;
}

.elyra-ds-timeline p {
	color: var(--elyra-muted);
	font-size: 1rem;
	margin: 0.8rem 0 0;
	max-inline-size: 28rem;
}

[data-theme="dark"] .elyra-ds-timeline p {
	color: rgba(251, 250, 246, 0.68);
}

/* FAQ accordion. */
.elyra-ds-faq {
	border-block-start: 1px solid var(--elyra-ds-border);
}

.elyra-ds-faq details {
	border-block-end: 1px solid var(--elyra-ds-border);
}

.elyra-ds-faq summary {
	align-items: center;
	color: var(--elyra-black);
	cursor: pointer;
	display: flex;
	font-family: var(--elyra-serif);
	font-size: var(--elyra-font-size-card);
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
	padding-block: 1.35rem;
}

[data-theme="dark"] .elyra-ds-faq summary {
	color: var(--elyra-stone);
}

.elyra-ds-faq summary::-webkit-details-marker {
	display: none;
}

.elyra-ds-faq summary::after {
	color: var(--elyra-gold);
	content: "+";
	font-family: var(--elyra-sans);
	font-size: 1.25rem;
	font-weight: 400;
}

.elyra-ds-faq details[open] summary::after {
	content: "−";
}

.elyra-ds-faq__answer {
	color: var(--elyra-muted);
	max-inline-size: var(--elyra-ds-copy-width);
	padding-block: 0 1.5rem;
}

[data-theme="dark"] .elyra-ds-faq__answer {
	color: rgba(251, 250, 246, 0.68);
}

.elyra-ds-faq__answer > :first-child {
	margin-block-start: 0;
}

.elyra-ds-faq__answer > :last-child {
	margin-block-end: 0;
}

/* Newsletter. */
.elyra-ds-newsletter {
	background: var(--elyra-stone);
	border: 1px solid var(--elyra-ds-border);
	border-radius: var(--elyra-ds-radius);
	display: grid;
	gap: var(--elyra-ds-space-content);
	padding: clamp(1.5rem, 5vw, 4rem);
}

.elyra-ds-newsletter__copy h2 {
	font-size: var(--elyra-font-size-h2);
	max-inline-size: 16ch;
}

.elyra-ds-newsletter__form {
	display: grid;
	gap: 0.75rem;
}

.elyra-ds-newsletter__form label,
.elyra-ds-field > label,
.elyra-ds-field__legend {
	color: var(--elyra-black);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.elyra-ds-newsletter__row {
	display: grid;
	gap: 0.75rem;
}

.elyra-ds-newsletter input {
	background: #fff;
	border: 1px solid var(--elyra-ds-border);
	border-radius: 999px;
	color: var(--elyra-black);
	font: inherit;
	inline-size: 100%;
	min-block-size: var(--elyra-control-height);
	padding: 0.85rem 1.1rem;
}

/* Forms. */
.elyra-ds-form {
	display: grid;
	gap: 1.25rem;
}

.elyra-ds-form-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

.elyra-ds-field {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	min-inline-size: 0;
}

.elyra-ds-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	background: rgba(255, 255, 255, 0.68);
	border: 1px solid var(--elyra-ds-border);
	border-radius: var(--elyra-ds-radius-small);
	color: var(--elyra-ink);
	font: inherit;
	inline-size: 100%;
	min-block-size: var(--elyra-control-height);
	padding: 0.85rem 1rem;
	transition: border-color var(--elyra-ds-transition), box-shadow var(--elyra-ds-transition);
}

.elyra-ds-field textarea {
	min-block-size: 9rem;
	resize: vertical;
}

.elyra-ds-field--choice label {
	align-items: flex-start;
	display: flex;
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.65rem;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

.elyra-ds-field--choice input {
	accent-color: var(--elyra-gold);
	block-size: 1.1rem;
	flex: 0 0 auto;
	inline-size: 1.1rem;
	margin-block-start: 0.15rem;
}

.elyra-ds-field__help,
.elyra-ds-field__error {
	font-size: 0.78rem;
	line-height: 1.5;
	margin: 0;
}

.elyra-ds-field__help {
	color: var(--elyra-muted);
}

.elyra-ds-field__error {
	color: #8a342c;
}

.elyra-ds-field.is-invalid :is(input, select, textarea) {
	border-color: #8a342c;
	box-shadow: 0 0 0 2px rgba(138, 52, 44, 0.14);
}

@media (hover: hover) and (pointer: fine) {
	.elyra-ds-product-card:hover,
	.elyra-ds-feature-card:hover {
		border-color: rgba(157, 131, 81, 0.58);
		box-shadow: var(--elyra-shadow);
		transform: translate3d(0, -0.25rem, 0);
	}

	.elyra-ds-product-card:hover img {
		transform: scale(1.035);
	}
}

@media (min-width: 42rem) {
	.elyra-ds-product-grid,
	.elyra-ds-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elyra-ds-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elyra-ds-field--wide {
		grid-column: 1 / -1;
	}

	.elyra-ds-newsletter__row {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (min-width: 56.25rem) {
	.elyra-ds-hero {
		min-block-size: 92vh;
	}

	.elyra-ds-split {
		grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.85fr);
	}

	.elyra-ds-split[data-image-side="right"] {
		grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 1.05fr);
	}

	.elyra-ds-split[data-image-side="right"] .elyra-ds-split__media {
		order: 2;
	}

	.elyra-ds-split[data-image-side="right"] .elyra-ds-split__copy {
		order: 1;
	}

	.elyra-ds-cta {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.elyra-ds-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elyra-ds-feature-grid,
	.elyra-ds-timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.elyra-ds-timeline__item {
		border-block-end: 1px solid var(--elyra-ds-border);
		border-inline-start: 1px solid var(--elyra-ds-border);
		padding: 2rem clamp(1.5rem, 3vw, 2.5rem);
	}

	.elyra-ds-timeline__item:first-child {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	[data-theme="dark"] .elyra-ds-timeline__item {
		border-color: var(--elyra-border-light);
	}

	.elyra-ds-newsletter {
		align-items: center;
		grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-elyra-component] *,
	[data-elyra-component] *::before,
	[data-elyra-component] *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}