/* =================================================================
   single-service.css — page-services.php (Template Name: Services, Figma
   29-Services-Hospitals-Desktop node 4508:18136, archivo BdUd1g6K6cuVm4036Z5p6p).
   Se apoya en single-news.css (.post-page/.post__col/.post-content.modern-content), mismo
   criterio de reuso que single-department.css/single-project.css.

   Hero SIEMPRE con imagen de fondo (`service_image`) — copia de .department-hero/.department-team
   (single-department.css) renombrada a .service-hero/.service-team, con 2 diferencias explícitas
   pedidas por el usuario (2026-07-30): `padding-block:48px` parejo arriba/abajo (Department reserva
   100px abajo para sus 3 cards fijas) y `justify-content:center` (Department ancla el bloque al
   borde inferior) — acá TODO el contenido (título/desc/cards) se centra vertical en el hero, con o
   sin `service_team` (dia_service(), inc/helpers.php: decide únicamente si se agregan las cards, no
   la alineación).
   ================================================================= */

@layer views {

	/* ---- Hero con equipo: idéntico a .department-hero, ver ese archivo para el detalle de cada
	   regla (scrim/grano/ancho). Único agregado real: .service-hero__desc (Department no tenía
	   subtítulo, Services sí vía service_description). ---- */
	.service-hero {
		position: relative;
		overflow: hidden;
		min-height: 458px;
		display: flex;
		flex-direction: column;
		justify-content: center; /* elementos centrados verticalmente, con o sin equipo */
		padding-block: 48px; /* pedido explícito del usuario 2026-07-30 */
	}
	.service-hero__bg {
		position: absolute; inset: 0;
	}
	.service-hero__bg img {
		width: 100%; height: 100%;
		object-fit: cover;
	}
	.service-hero__scrim {
		position: absolute; inset: 0;
		background: linear-gradient(180deg,
			rgba(0, 0, 0, .6) 0%,
			rgba(0, 0, 0, .4) 35%,
			rgba(0, 0, 0, .05) 65%,
			rgba(0, 0, 0, .02) 100%);
		/* SIN mask/backdrop-filter propios (mismo criterio que .department-hero__scrim,
		   single-department.css): el degradado vive completo, el glass (blur+grano) es una capa
		   aparte confinada a la parte de ABAJO de la foto (pedido explícito 2026-07-30). */
	}
	.service-hero__scrim::before {
		content: '';
		position: absolute; inset: 0;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%);
		mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%);
	}
	.service-hero__scrim::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='300' height='300' fill='black' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-repeat: repeat;
		background-size: 330px 330px;
		/* Mismo fix que .department-hero__scrim::after (single-department.css) — confinado, igual
		   que el blur de ::before, a la parte de ABAJO de la foto (pedido explícito 2026-07-30). */
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%);
		mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 65%);
	}
	.service-hero__inner {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 60rem; /* 960px, mismo motivo que .department-hero__inner */
		margin-inline: auto;
		padding-inline: var(--space-m);
		text-align: center;
		box-sizing: border-box;
	}
	.service-hero__eyebrow {
		margin: 0 0 4px;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}
	.service-hero__title {
		margin: 0 0 32px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
		line-height: 1.25;
		letter-spacing: -1px;
		color: var(--dia-color-text-inverse, #fff);
	}
	/* Sin esto, el margin-bottom del último hijo (título sin equipo) queda "atrapado" dentro de
	   .service-hero__inner (el item que realmente centra .service-hero, flex) como espacio
	   invisible al final — la caja completa queda centrada matemáticamente pero el TEXTO visible se
	   corre hacia arriba (confirmado con getBoundingClientRect() en newdia.nett.mx/hospitals-and-
	   clinics/: 177px arriba/177px abajo de .service-hero__inner, pero el título visible terminaba
	   32px antes de esa mitad). */
	.service-hero__inner > *:last-child {
		margin-bottom: 0;
	}

	/* ---- Tarjetas de equipo: idénticas a .department-team/__card (ver single-department.css para
	   el porqué de cada detalle: blur por card, no en el contenedor; grano SVG; box-shadow inset en
	   vez de border). ---- */
	.service-team {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
	}
	.service-team__card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 278px;
		min-height: 204px; /* mismo motivo que .department-team__card (single-department.css) */
		padding: 24px 16px 16px;
		border-radius: 12px;
		overflow: hidden;
		background: rgba(255, 255, 255, .04);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		box-shadow:
			inset 0 1px 1px rgba(255, 255, 255, .55),
			inset 1px 0 1px rgba(255, 255, 255, .3),
			inset 0 -1px 1px rgba(0, 0, 0, .2);
	}
	.service-team__card::before {
		content: '';
		position: absolute; inset: 0;
		z-index: -1;
		pointer-events: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' fill='black' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: 330px 330px;
	}
	.service-team__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64px; height: 64px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .5);
		overflow: hidden;
		background: rgba(255, 255, 255, .12);
	}
	.service-team__avatar--fallback {
		border: none;
	}
	.service-team__avatar img {
		width: 100%; height: 100%;
		object-fit: cover;
	}
	.service-team__name {
		margin: 16px 0 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
		color: var(--dia-color-text-inverse, #fff);
	}
	.service-team__position {
		margin: 4px 0 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		color: var(--dia-color-text-inverse, #fff);
		opacity: .88;
	}

	@media (48rem <= width < 64rem) {
		.service-hero__inner {
			width: 100%;
			max-width: none;
			box-sizing: border-box;
			padding-inline: clamp(1rem, 4vw, 3rem);
		}
		.service-team { flex-wrap: nowrap; gap: clamp(.75rem, 2vw, 1.5rem); }
		.service-team__card { width: calc((100% - clamp(.75rem, 2vw, 1.5rem) - clamp(.75rem, 2vw, 1.5rem)) / 3); max-width: 278px; }
	}
	@media (width < 48rem) {
		.service-team { flex-direction: column; align-items: center; width: 100%; flex-wrap: nowrap; }
		.service-team__card { width: 278px; max-width: 100%; }
	}

	/* ---- Contenido (the_content()): 100px arriba Y abajo, simétrico — pedido explícito del
	   usuario 2026-07-30, distinto del padding-top compartido de .post-page (single-news.css,
	   ~30-48px fijo y SIN padding-bottom propio) que usan News/Project/Department/Stories. Clamp
	   (no 100px clavado) para que no se sienta desproporcionado en mobile: ~48px en el extremo
	   angosto, 100px desde ~1360px de viewport en adelante. */
	.service-page {
		padding-block: clamp(3rem, 2rem + 5vw, 6.25rem);
	}
}