/**
 * Service card — shared stylesheet for template-parts/service/card.php.
 *
 * Lifted out of blocks/services/style.css the day the card partial started
 * being rendered from a second place: the services block on composed pages, and
 * the archive listing partial on the /poslugy/ archive. That file always
 * expected this move — the card carries its own BEM name precisely so it could
 * be extracted without touching any markup.
 *
 * Not enqueued site-wide. It is registered as the handle "sws-theme-service-card"
 * (see sws_theme_register_shared_block_styles() in functions.php) and declared
 * in the "style" array of both blocks/services/block.json and
 * blocks/archive-listing/block.json, so it loads only on pages that render a card.
 *
 * Design reference: Techivo template, node 5006:5276 (service).
 */

.sws-service-cards,
.sws-service-card {
	/*
	 * Tokens are repeated here rather than inherited from .sws-services: the card
	 * has to stand on its own outside that section. Promoting them to globals
	 * would leak into every other block instead.
	 */
	--svc-main: var(--wp--preset--color--main, #3e66f3);
	--svc-title: var(--wp--preset--color--title, #1c1c25);
	--svc-body: var(--wp--preset--color--body, #797e88);
	--svc-white: var(--wp--preset--color--white, #fff);
	--svc-soft: #eef2fb;
	--svc-display: var(--wp--preset--font-family--geologica, "Geologica", inherit);
}

/* Card grid
--------------------------------------------- */

.sws-service-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Service card
--------------------------------------------- */

.sws-service-card {
	/* Anchor for the stretched link below. */
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 15px;
	background: var(--svc-white);
	box-shadow: 0 10px 31px rgb(169 177 193 / 17%);
	text-align: center;
	/* The accent rule along the bottom edge of the mockup card. */
	border-bottom: 3px solid var(--svc-main);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sws-service-card:hover {
	box-shadow: 0 14px 38px rgb(169 177 193 / 28%);
	transform: translateY(-2px);
}

/*
 * Ratio comes from the mockup's 327x180 image strip; keeping it as a ratio lets
 * the card grow with the container without the strip drifting out of proportion.
 */
.sws-service-card__media {
	aspect-ratio: 327 / 180;
	background: rgb(28 28 37 / 4%);
}

/* Descendant selector: the tag may become <picture><img> after optimisation. */
.sws-service-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Positioned but deliberately without z-index: it paints above the image while
 * staying below the link's hit area, so clicks over the icon still follow the link.
 * The negative margin is half the icon, which puts its centre on the media edge.
 */
.sws-service-card__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 7.5rem; /* 120px */
	height: 7.5rem;
	margin: -3.75rem auto 0;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
}

/* SVG uploads carry no usable intrinsic size, so the wrapper sets it. */
.sws-service-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sws-service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	padding: 1.25rem 1.5rem 2rem;
}

.sws-service-card__title {
	margin: 0 0 0.75rem;
	font-family: var(--svc-display);
	font-size: 1.375rem; /* 22px */
	font-weight: 700;
	line-height: 1.27;
	color: var(--svc-title);
	text-wrap: balance;
}

.sws-service-card__text {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--svc-body);
}

/* Pushed to the bottom so buttons line up across cards of unequal text length. */
.sws-service-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.6875rem; /* 43px */
	margin-top: auto;
	padding: 0.5rem 1.75rem;
	border-radius: 100px;
	background: var(--svc-soft);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--svc-main);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Stretched link: the button is the card's only anchor, and its ::after covers
 * the whole card, so the entire card is clickable without nesting links.
 */
.sws-service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.sws-service-card:hover .sws-service-card__link,
.sws-service-card__link:focus {
	background: var(--svc-main);
	color: var(--svc-white);
}

/* The hit area is the card, so move the focus ring there too. */
.sws-service-card:has(.sws-service-card__link:focus-visible) {
	outline: 2px solid var(--svc-main);
	outline-offset: 3px;
}

/* Tablets: two cards per row.
--------------------------------------------- */
@media (min-width: 600px) {

	.sws-service-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Wide desktop: the three-per-row grid of the design.
--------------------------------------------- */
@media (min-width: 992px) {

	.sws-service-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.875rem; /* 30px */
	}
}