/**
 * Services grid — 6 cards com foto em bleed (home, seção #services).
 *
 * BEM: dr-services-grid__*. Só tokens --dr-*. O bleed da foto (estourando a
 * borda do card) existe só em ≥48rem; no mobile a foto é contida e o card
 * reordena via flex (ícone → título → foto → texto → link).
 */

.dr-services-grid {
	display: grid;
	gap: clamp(var(--dr-space-3), 3vw, var(--dr-space-5)) clamp(var(--dr-space-2), 2vw, var(--dr-space-3));
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.dr-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.dr-services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

.dr-services-grid__card {
	background: var(--dr-color-surface);
	border: var(--dr-border-width-1) solid var(--dr-color-border);
	border-radius: var(--dr-radius-4);
	box-shadow: var(--dr-shadow-1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var(--dr-space-3);
	position: relative;
}

/* --- Ícone ---------------------------------------------------------------- */

.dr-services-grid__icon-badge {
	align-items: center;
	background: var(--dr-color-bg-subtle);
	border-radius: var(--dr-radius-round);
	display: flex;
	height: 3rem;
	justify-content: center;
	margin-block-end: var(--dr-space-2);
	order: 1;
	width: 3rem;
}

.dr-services-grid__icon-badge img {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

/* --- Texto ------------------------------------------------------------------ */

.dr-services-grid__title {
	font-size: var(--dr-font-size-400);
	letter-spacing: var(--dr-letter-spacing-tight);
	line-height: var(--dr-line-height-heading);
	margin: 0 0 var(--dr-space-1);
	order: 2;
}

.dr-services-grid__photo {
	display: block;
	height: auto;
	margin-block: var(--dr-space-1) var(--dr-space-2);
	order: 3;
	width: 100%;
}

.dr-services-grid__text {
	color: var(--dr-color-text-muted);
	font-size: var(--dr-font-size-200);
	line-height: var(--dr-line-height-body);
	margin: 0 0 var(--dr-space-2);
	order: 4;
}

.dr-services-grid__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-space-1);
	margin: auto 0 0;
	order: 5;
}

/* Badge Coming Soon — mesma linguagem do badge dourado do card do hero. */
.dr-services-grid__soon {
	background: var(--dr-color-premium-subtle);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-premium-strong);
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-semibold);
	letter-spacing: var(--dr-letter-spacing-wide);
	padding: calc(var(--dr-space-1) / 2) var(--dr-space-1);
	text-transform: uppercase;
}

.dr-services-grid__link {
	color: var(--dr-color-accent);
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-semibold);
	text-decoration: none;
}

.dr-services-grid__link:hover,
.dr-services-grid__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Bleed da foto (só em ≥48rem) -------------------------------------------
 * O card volta a overflow visible e a foto salta da borda superior/direita.
 * A área de texto reserva espaço à direita para o topo não colidir. */

@media (min-width: 48rem) {
	.dr-services-grid__card {
		display: block;
		overflow: visible;
		padding-block-start: var(--dr-space-4);
	}

	.dr-services-grid__photo {
		filter: drop-shadow(0 1rem 1.25rem color-mix(in srgb, var(--dr-color-ink-900) 22%, transparent));
		margin: 0;
		position: absolute;
		right: calc(-1 * var(--dr-space-2));
		top: calc(-1 * var(--dr-space-4));
		width: min(58%, 14rem);
		z-index: 2;
	}

	/* Ícone e título dividem a linha com a foto — largura limitada. */
	.dr-services-grid__title {
		max-width: 48%;
	}

	.dr-services-grid__text {
		max-width: 36ch;
	}
}