/* =============================================================
   ypiresia.css — Services: shared card component + listing page
   Figma node 114:42 (homepage cards), 114:181 (listing rows)
   ============================================================= */

/* ── Shared: Service Card Grid (homepage section) ── */

.service-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-3col-gap);
}

/* ── Shared: Service Card ── */

.service-card {
	border-top: 1px solid rgba(122, 39, 35, 0.2);
	padding-top: var(--gap-lg);
	display: flex;
	flex-direction: column;
}

.service-card__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: var(--gap-md);
}

.service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.service-card:hover .service-card__image img {
	transform: scale(1.03);
}

.service-card__index {
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-regular);
	color: var(--color-primary-overlay-30);
	line-height: var(--lh-body);
	display: block;
	margin-bottom: var(--gap-xs);
}

.service-card__title {
	font-family: var(--font-primary);
	font-size: var(--text-h2-sm);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: var(--lh-heading);
	margin-bottom: var(--gap-sm);
}

.service-card__excerpt {
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-regular);
	color: var(--color-text-secondary);
	line-height: var(--lh-body);
	flex: 1;
	margin-bottom: var(--gap-sm);
}

.service-card__link {
	font-family: var(--font-primary);
	font-size: var(--text-small);
	font-weight: var(--weight-regular);
	color: var(--color-primary);
	text-decoration: none;
	transition: opacity 0.2s;
	margin-top: auto;
}

.service-card__link:hover {
	opacity: 0.7;
}

/* ── Listing page: alternating rows ── */

.service-row {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.service-row--white {
	background-color: var(--color-white);
}

.service-row--cream {
	background-color: var(--color-cream);
}

/* container--wide is applied in the PHP template */
.service-row__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-xxl);
	align-items: center;
}

/* Even rows: text left, image right */
.service-row--cream .service-row__image {
	order: 2;
}

.service-row--cream .service-row__content {
	order: 1;
}

.service-row__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

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

.service-row__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.service-row__title {
	font-family: var(--font-primary);
	font-size: var(--text-h2-lg);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: var(--lh-heading);
}

.service-row__excerpt {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	color: var(--color-text-secondary);
	line-height: var(--lh-body);
}

.service-row__link {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	color: var(--color-primary);
	text-decoration: none;
	transition: opacity 0.2s;
	align-self: flex-start;
}

.service-row__link:hover {
	opacity: 0.7;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
	.service-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	/* ── Homepage card grid → horizontal scroll snap slider ── */
	/* Shows 2 full cards + half of the 3rd to hint scrollability */

	.service-card-grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		gap: var(--grid-3col-gap);
	}

	.service-card-grid::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	/* card = (container - 2 visible gaps) / 2.5 */
	.service-card {
		flex: 0 0 calc((100% - (var(--grid-3col-gap) * 2)) / 2.5);
		scroll-snap-align: start;
	}

	/* ── Listing page rows → stack vertically ── */

	.service-row__inner {
		grid-template-columns: 1fr;
		gap: var(--gap-xl);
	}

	/* Reset order on mobile so image always comes first */
	.service-row--cream .service-row__image,
	.service-row--cream .service-row__content {
		order: unset;
	}

	.service-row__title {
		font-size: var(--text-h2-sm);
	}
}