/*
  Bloque "Hero de servei" (spora/servei-hero-empresa) — estilos front + editor.

  ANCHOS Y PADDINGS
  -----------------
  El bloque no pone caja propia: siempre vive dentro de un contenedor de
  Spectra (legacy), que es donde se configuran el ancho máximo y los paddings.
  El hero ocupa el 100% de lo que le dé ese contenedor.

  LIENZO DE DISEÑO
  ----------------
  El diseño se midió sobre el ancho útil de ese contenedor con los valores del
  proyecto: 1440 menos 32px de padding a cada lado -> 1376px. Sobre esos 1376:

      petita esquerra   320 x 320   arriba a la izquierda
      gran destacada    905 x 480   centrada y 160px MÁS ABAJO que las pequeñas
      petita dreta      320 x 320   arriba a la derecha
      escenario         1376 x 640  (160 + 480)

  Todo se expresa en PORCENTAJES de ese lienzo, así que la composición escala
  sola a cualquier ancho sin JS y mantiene las proporciones del diseño.

  La gran va POR ENCIMA de las pequeñas (z-index) y todo el bloque de imágenes
  va por encima del título: al hacer scroll las imágenes suben y tapan el texto
  (ese movimiento lo aplica view.js con transform; aquí solo se coloca).

  CABECERA FIJA
  -------------
  .spora-servei-hero-empresa__head (migas + título + subtítulo) es
  `position: sticky`: se queda clavada arriba mientras las imágenes suben. Cuando la
  imagen grande los pasa, view.js los engancha a su borde inferior para que
  suban con ella y no asomen nunca por debajo.

  Los valores de reserva de las variables (tamaños de fuente, radio…) son
  necesarios porque en el editor esta hoja se encola sola, sin el style.css del
  tema.
*/

.spora-servei-hero-empresa {
	--sheh-stage-w: 1376;   /* ancho del lienzo de diseño          */
	--sheh-stage-h: 640;    /* alto del lienzo de diseño           */
	--sheh-gap: clamp(56px, 8vw, 56px); /* título -> imágenes     */

	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* Sin relleno inferior: el hero acaba justo donde acaba la composición de
	   imágenes. La separación con el bloque siguiente la pone ese bloque, y
	   así no queda scroll muerto al final del hero. */
	padding-bottom: 0;
}

.spora-servei-hero-empresa * {
	box-sizing: border-box;
}

/* --- Título + subtítulo (fijos hasta que acaba el bloque) ---------------- */

.spora-servei-hero-empresa__head {
	position: sticky;
	/* Clavada justo debajo del header del sitio, que es donde ya está: así no
	   se la lleva hacia arriba el primer scroll. view.js mide el header y
	   publica su alto en --sheh-sticky-top. */
	top: var(--sheh-sticky-top, 0px);
	z-index: 1;
	/* El padding superior hace de separación con las migas Y, al estar pegado
	   arriba, de aire entre el borde de la ventana y el título. */
	padding-top: clamp(24px, 3vw, 40px);
	text-align: center;
	/* Clavado arriba hasta que la imagen grande lo pasa: a partir de ahí
	   view.js lo engancha a ella con un transform. */
	will-change: transform;
}

/* Las migas van dentro del bloque fijo, justo encima del título: así se
   quedan clavadas con él y se las lleva la imagen a la vez. */
.spora-servei-hero-empresa__breadcrumbs {
	margin-bottom: 16px;
}

/*
  Geist Light 48 / 90% / -1px. El !important es obligado: el tema fuerza la
  familia display (STK) en TODOS los h1 con !important (ver style.css,
  «Tipografía base del tema»), y aquí el diseño pide Geist.
*/
.spora-servei-hero-empresa__title {
	margin: 0;
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 300;
	font-size: var(--spora-text-heading-lg-size, 48px);
	line-height: 90%;
	letter-spacing: -1px;
	color: var(--spora-color-neutral-black, #001A17);
}

/* STK Bureau Serif Light 32 / 110% / 0. */
.spora-servei-hero-empresa__subtitle {
	max-width: 750px;
	margin: 24px auto 0;
	font-family: 'STK Bureau Serif Light', Georgia, serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 110%;
	letter-spacing: 0;
	color: var(--spora-color-neutral-black-40, rgba(0, 26, 23, 0.4));
}

/* --- Escenario de imágenes ---------------------------------------------- */

.spora-servei-hero-empresa__media {
	position: relative;
	z-index: 2;              /* las imágenes tapan el título al subir */
	margin-top: var(--sheh-gap);
}

.spora-servei-hero-empresa__stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sheh-stage-w) / var(--sheh-stage-h);
}

.spora-servei-hero-empresa__img {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--spora-radius-card, 8px);
	will-change: transform, opacity;
}

.spora-servei-hero-empresa__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pequeñas: 320x320 (23.2558% de 1376), pegadas arriba y a cada lado. */
.spora-servei-hero-empresa__img--left,
.spora-servei-hero-empresa__img--right {
	top: 0;
	width: 23.2558%;
	aspect-ratio: 1 / 1;
	z-index: 1;
}

.spora-servei-hero-empresa__img--left  { left: 0; }
.spora-servei-hero-empresa__img--right { right: 0; }

/* Gran: 905x480 centrada (left = (1376-905)/2 = 235.5 -> 17.1148%) y 160px
   más abajo (160/640 = 25% del alto del lienzo). Por encima de las pequeñas. */
.spora-servei-hero-empresa__img--big {
	top: 25%;
	left: 17.1148%;
	width: 65.7703%;
	aspect-ratio: 905 / 480;
	z-index: 2;
}

/* --- Hero simple (sin imágenes) -----------------------------------------
   Con «Mostrar imágenes» apagado (lo normal desde 09/2026) no hay nada que
   tape el título: se queda como un título centrado en flujo, sin sticky, con
   aire arriba y abajo. */

.spora-servei-hero-empresa--simple {
	padding-block: clamp(75px, 14vw, 200px);
}

.spora-servei-hero-empresa--simple .spora-servei-hero-empresa__head {
	position: static;
	padding-top: 0;
	will-change: auto;
}

/* --- Responsive ---------------------------------------------------------
   Hasta 767px la composición superpuesta deja las imágenes demasiado
   pequeñas: se apilan (gran arriba a ancho completo, las dos pequeñas debajo).
   El movimiento al scroll se mantiene: view.js solo aplica transform/opacity,
   que funcionan igual con las imágenes en flujo. */

@media (max-width: 921px) {
	.spora-servei-hero-empresa__title {
		font-size: var(--spora-text-heading-md-size, 32px);
		line-height: 110%;
	}

	.spora-servei-hero-empresa__subtitle {
		font-size: 18px;
		margin-top: 22px;
	}
}

@media (max-width: 767px) {
	.spora-servei-hero-empresa__stage {
		aspect-ratio: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	.spora-servei-hero-empresa__img {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}

	.spora-servei-hero-empresa__img--big {
		order: 1;
		width: 100%;
	}

	.spora-servei-hero-empresa__img--left  { order: 2; width: calc(50% - 8px); }
	.spora-servei-hero-empresa__img--right { order: 3; width: calc(50% - 8px); }
}

/* Sin animación para quien la ha desactivado en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.spora-servei-hero-empresa__img,
	.spora-servei-hero-empresa__head {
		/* stylelint-disable-next-line declaration-no-important */
		transform: none !important;
		opacity: 1 !important;
	}
}

/* --- Editor -------------------------------------------------------------
   En el editor no hay scroll de página que valga: el bloque se ve quieto, en
   su posición de partida, y el título fijo se desactiva para que no baile
   dentro del lienzo del editor. */

.editor-styles-wrapper .spora-servei-hero-empresa__head {
	position: static;
}

/* El botón que abre la biblioteca ocupa todo el hueco de la imagen. */
.spora-servei-hero-empresa-editor__slot {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.spora-servei-hero-empresa-editor__slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spora-servei-hero-empresa-editor__placeholder {
	border-radius: var(--spora-radius-card, 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px dashed rgba(0, 26, 23, 0.3);
	background: rgba(0, 26, 23, 0.04);
	font-size: 12px;
	text-align: center;
	color: rgba(0, 26, 23, 0.6);
}