/**
 * Design system — Cozi Wanner
 */

.cw-container {
	width: 100%;
	max-width: var(--cw-container-max);
	margin-inline: auto;
	padding-inline: var(--cw-container-padding);
}

.cw-section {
	padding-block: var(--cw-space-md);
}

.cw-section--alt {
	background: var(--cw-color-bg-alt);
}

.cw-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--cw-font-body);
	font-size: var(--cw-font-size-kicker);
	font-weight: 500;
	letter-spacing: var(--cw-tracking-kicker);
	text-transform: uppercase;
	color: var(--cw-color-accent);
}

.cw-kicker::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
}

.cw-heading {
	margin: 0;
	font-family: var(--cw-font-heading);
	font-weight: var(--cw-font-heading-weight, 500);
	font-size: var(--cw-font-size-2xl);
	letter-spacing: 0.01em;
	line-height: var(--cw-leading-heading);
	color: var(--cw-color-primary);
	text-transform: none;
}

.cw-heading--section {
	font-size: var(--cw-font-size-section, clamp(1.65rem, 2.8vw, 2.35rem));
	text-transform: none;
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: var(--cw-color-ink);
	text-wrap: balance;
}

.cw-section-intro {
	max-width: min(38rem, 100%);
	padding-left: 18px;
	border-left: 3px solid var(--cw-color-blush);
}

.wp-block-cozi-wanner-home-hero .cw-heading.cw-home-hero__title {
	color: var(--cw-color-white);
	text-shadow:
		0 2px 24px rgb(0 0 0 / 55%),
		0 1px 2px rgb(0 0 0 / 40%);
}

.cw-section-intro__rule {
	display: block;
	width: 48px;
	height: 1px;
	margin-top: 14px;
	background: var(--cw-color-blush);
	transform-origin: left;
}

.cw-heading--on-dark {
	color: var(--cw-color-text-on-dark);
}

.cw-heading__emphasis {
	font-style: italic;
	color: var(--cw-color-accent);
}

.cw-btn,
.cw-btn span {
	color: var(--cw-color-white);
}

.cw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--cw-color-espresso-deep);
	border-radius: var(--cw-radius);
	background: var(--cw-color-espresso-deep);
	color: var(--cw-color-white);
	font-family: var(--cw-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--cw-transition),
		color var(--cw-transition),
		border-color var(--cw-transition),
		transform var(--cw-transition),
		box-shadow var(--cw-transition);
}

.cw-btn:hover,
.cw-btn:focus-visible {
	background: var(--cw-color-accent);
	border-color: var(--cw-color-accent);
	color: var(--cw-color-espresso-deep);
	transform: translateY(-1px);
	box-shadow: var(--cw-shadow-sm);
}

.cw-btn--outline,
.cw-btn--outline span {
	color: var(--cw-color-espresso-deep);
}

.cw-btn--outline {
	background: transparent;
	border-color: var(--cw-color-espresso-deep);
}

.cw-btn--outline:hover,
.cw-btn--outline:focus-visible {
	background: var(--cw-color-blush-soft);
	border-color: var(--cw-color-accent);
	color: var(--cw-color-primary);
}

.cw-btn--on-dark {
	background: var(--cw-color-ivory);
	border-color: var(--cw-color-ivory);
	color: var(--cw-color-primary);
}

.cw-btn--on-dark:hover,
.cw-btn--on-dark:focus-visible {
	background: var(--cw-color-blush-soft);
	border-color: var(--cw-color-blush-soft);
	color: var(--cw-color-espresso-deep);
}

.cw-card {
	background: var(--cw-color-bg-white);
	border: 1px solid var(--cw-color-line);
	box-shadow: var(--cw-shadow-sm);
	transition:
		transform var(--cw-transition),
		box-shadow var(--cw-transition),
		border-color var(--cw-transition);
}

.cw-card:hover {
	transform: translateY(-3px);
	border-color: var(--cw-color-blush-line);
	box-shadow: var(--cw-shadow-md);
}

.cw-media {
	position: relative;
	overflow: hidden;
	background: var(--cw-color-linen-deep);
}

.cw-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}