/**
 * Homepage services — editorial bento system.
 */

body.home .luna-home-services {
	--services-ink: #202b3d;
	--services-green: var(--luna-theme-cta-bg, #d5dfc6);
	--services-green-ink: var(--luna-theme-cta-text, #435422);
	--services-paper: rgba(255, 253, 250, 0.82);
	--services-border: rgba(75, 91, 50, 0.13);
	position: relative;
	padding: clamp(1.75rem, 3.4vw, 3.6rem) clamp(1rem, 3.5vw, 3.5rem);
	overflow: hidden;
	isolation: isolate;
}

body.home .luna-home-services::before,
body.home .luna-home-services::after {
	position: absolute;
	z-index: -1;
	border-radius: 999px;
	content: "";
	pointer-events: none;
}

body.home .luna-home-services::before {
	inset: 4% auto auto -10%;
	width: 30rem;
	aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--services-green) 35%, transparent), transparent 70%);
	filter: blur(18px);
}

body.home .luna-home-services::after {
	inset: auto -7% -18% auto;
	width: 25rem;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--services-green-ink) 12%, transparent);
	box-shadow: 0 0 0 3.5rem color-mix(in srgb, var(--services-green) 8%, transparent), 0 0 0 7rem color-mix(in srgb, var(--services-green) 5%, transparent);
}

body.home .luna-home-services__shell {
	width: min(100%, 1380px);
	margin-inline: auto;
}

body.home .luna-home-services__marker {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-block-end: clamp(1.25rem, 2.4vw, 2rem);
	color: var(--services-green-ink);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

body.home .luna-home-services__marker span {
	display: grid;
	width: 2.5rem;
	aspect-ratio: 1;
	place-items: center;
	border-radius: 0.9rem;
	background: var(--services-green);
}

body.home .luna-home-services__marker i {
	width: min(9vw, 6rem);
	height: 1px;
	background: var(--services-border);
}

body.home .luna-home-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.3vw, 1.2rem);
	direction: rtl;
}

body.home .luna-home-service-card {
	position: relative;
	display: flex;
	min-width: 0;
	height: 14.5rem;
	min-height: 0;
	flex-direction: column;
	padding: clamp(1rem, 1.35vw, 1.2rem);
	overflow: hidden;
	border: 1px solid var(--services-border);
	border-radius: clamp(1.55rem, 2.5vw, 2.25rem);
	background: var(--services-paper);
	box-shadow: 0 1.1rem 3rem rgba(50, 45, 37, 0.07);
	color: var(--services-ink);
	text-decoration: none;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1), border-color 300ms ease, box-shadow 420ms ease;
}

body.home .luna-home-service-card--featured {
	grid-column: span 2;
	background: linear-gradient(135deg, color-mix(in srgb, var(--services-green) 94%, white), color-mix(in srgb, var(--services-green) 66%, white));
}

body.home .luna-home-service-card--featured:nth-child(4) {
	background: linear-gradient(145deg, var(--services-ink), #354153);
	color: #fff;
}

body.home .luna-home-service-card::before {
	position: absolute;
	inset: auto -12% -42% auto;
	width: 12rem;
	aspect-ratio: 1;
	border: 1px solid currentColor;
	border-radius: 50%;
	content: "";
	opacity: 0.07;
	transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

body.home .luna-home-service-card__number {
	position: absolute;
	top: 0.7rem;
	left: 1.25rem;
	color: currentColor;
	font-family: Inter, sans-serif;
	font-size: clamp(3.5rem, 5.8vw, 6.7rem);
	font-weight: 800;
	line-height: 1;
	opacity: 0.055;
	pointer-events: none;
}

body.home .luna-home-service-card__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

body.home .luna-home-service-card__icon {
	display: grid;
	width: clamp(3rem, 3.4vw, 3.4rem);
	aspect-ratio: 1;
	flex: 0 0 auto;
	place-items: center;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 1.25rem;
	background: color-mix(in srgb, white 70%, transparent);
	color: var(--services-green-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
	transition: transform 450ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

body.home .luna-home-service-card:nth-child(4) .luna-home-service-card__icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--services-green);
}

body.home .luna-home-service-card__icon svg {
	width: 1.65rem;
	height: 1.65rem;
}

body.home .luna-home-service-card__line {
	width: min(6rem, 30%);
	height: 1px;
	background: color-mix(in srgb, currentColor 16%, transparent);
}

body.home .luna-home-service-card__content {
	width: min(100%, 31rem);
	margin-block: auto 0.65rem;
	padding-block-start: 0.75rem;
}

body.home .luna-home-service-card__title {
	margin: 0 0 0.55rem;
	color: inherit;
	font-size: clamp(1.2rem, 1.65vw, 1.65rem) !important;
	font-weight: 850;
	line-height: 1.35;
}

body.home .luna-home-service-card__description {
	max-width: 37ch;
	margin: 0;
	color: color-mix(in srgb, currentColor 66%, transparent);
	font-size: clamp(0.82rem, 0.95vw, 0.94rem) !important;
	line-height: 1.7;
}

body.home .luna-home-service-card__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-start: 0.65rem;
	border-top: 1px solid color-mix(in srgb, currentColor 11%, transparent);
	color: inherit;
	font-size: 0.78rem;
	font-weight: 800;
}

body.home .luna-home-service-card__action i {
	display: grid;
	width: 2.25rem;
	aspect-ratio: 1;
	place-items: center;
	border-radius: 50%;
	background: var(--services-green-ink);
	color: #fff;
	font-size: 1rem;
	font-style: normal;
	transition: transform 300ms ease;
}

body.home .luna-home-service-card:nth-child(4) .luna-home-service-card__action i {
	background: var(--services-green);
	color: var(--services-green-ink);
}

body.home .luna-home-service-card:hover,
body.home .luna-home-service-card:focus-visible {
	transform: translateY(-0.45rem);
	border-color: color-mix(in srgb, var(--services-green-ink) 30%, transparent);
	box-shadow: 0 1.8rem 4rem rgba(50, 45, 37, 0.13);
}

body.home .luna-home-service-card:hover::before,
body.home .luna-home-service-card:focus-visible::before {
	transform: scale(1.16) translate(-5%, -5%);
}

body.home .luna-home-service-card:hover .luna-home-service-card__icon,
body.home .luna-home-service-card:focus-visible .luna-home-service-card__icon {
	transform: rotate(-7deg) scale(1.06);
}

body.home .luna-home-service-card:hover .luna-home-service-card__action i,
body.home .luna-home-service-card:focus-visible .luna-home-service-card__action i {
	transform: translateX(-0.25rem);
}

body.home .luna-home-service-card:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--services-green-ink) 45%, transparent);
	outline-offset: 4px;
}

body.home .luna-home-services__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: clamp(1.2rem, 2.2vw, 1.8rem);
	color: color-mix(in srgb, var(--services-ink) 62%, transparent);
	font-size: 0.76rem;
}

body.home .luna-home-services__footer i {
	min-width: 2rem;
	height: 1px;
	flex: 1;
	background: var(--services-border);
}

body.home .luna-home-services__footer b {
	color: var(--services-green-ink);
}

@media (max-width: 1180px) {
	body.home .luna-home-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.home .luna-home-service-card--featured {
		grid-column: span 2;
	}

	body.home .luna-home-service-card--featured:nth-child(4) {
		grid-column: span 1;
	}
}

@media (max-width: 820px) {
	body.home .luna-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .luna-home-service-card--featured,
	body.home .luna-home-service-card--featured:nth-child(4) {
		grid-column: span 1;
	}

	body.home .luna-home-service-card {
		height: auto;
		min-height: 14rem;
	}
}

@media (max-width: 560px) {
	body.home .luna-home-services {
		padding-inline: 0.85rem;
	}

	body.home .luna-home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	body.home .luna-home-service-card--featured,
	body.home .luna-home-service-card--featured:nth-child(4) {
		grid-column: span 1;
	}

	body.home .luna-home-service-card {
		height: auto;
		min-height: 10rem;
		padding: 0.85rem;
		border-radius: 1.25rem;
	}

	body.home .luna-home-service-card__number {
		font-size: 2.4rem;
	}

	body.home .luna-home-service-card__icon {
		width: 2.3rem;
	}

	body.home .luna-home-service-card__title {
		font-size: 0.95rem !important;
		margin-bottom: 0.3rem;
	}

	body.home .luna-home-service-card__description {
		font-size: 0.72rem !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body.home .luna-home-service-card__action {
		font-size: 0.68rem;
	}

	body.home .luna-home-service-card__content {
		padding-block-start: 0.5rem;
	}

	body.home .luna-home-services__footer span {
		max-width: 23ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .luna-home-service-card,
	body.home .luna-home-service-card::before,
	body.home .luna-home-service-card__icon,
	body.home .luna-home-service-card__action i {
		transition: none !important;
	}
}

.service-icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: block;
}
