/**
 * Servicios Grid: maquetación y un borde fino en cada servicio.
 *
 * Los colores, las tipografías, los fondos, el aspecto del enlace y el de las pestañas los pone el
 * tema. Las únicas excepciones son el borde de cada servicio (fino y del color del texto a poca
 * opacidad, para que se vea la caja de cada uno) y los colores A y B del cuadrado de color (y de
 * los iconos), que se eligen en el escritorio o se ponen desde el tema.
 *
 * Todas las reglas van con :where() (especificidad 0): cualquier regla del tema gana, se cargue
 * antes o después que este archivo. La única con especificidad es la que oculta los paneles de
 * las pestañas cerradas.
 *
 * Variables para ajustar desde el tema (en :root, en .servicios-grid o en .servicios-grid--id-{identificador}):
 *   --servicios-grid-columnas             Máximo de servicios por fila. La pone el campo «Servicios por fila» del
 *                                         shortcode; si está vacío, no hay ninguna y el plugin no fija las columnas
 *   --servicios-grid-min                  Ancho mínimo de cada servicio. Si no caben todos por fila, caben menos. La pone el
 *                                         campo «Ancho mínimo de cada servicio» del shortcode; si está vacío, 18rem
 *   --servicios-grid-hueco                Separación entre servicios (1.375rem). Cámbiala con esta variable y no con gap: las columnas se calculan con ella
 *   --servicios-grid-relleno              Relleno interior de cada servicio (2rem 1.875rem)
 *   --servicios-grid-borde                Borde de cada servicio (1px solid, del color del texto al 20%). none: sin borde
 *   --servicios-grid-radio                Radio de las esquinas de cada servicio (0)
 *   --servicios-grid-espacio-titulo       Separación entre el título y el texto (0.625rem)
 *   --servicios-grid-espacio-enlace       Separación mínima entre el texto y el enlace (1.375rem)
 *   --servicios-grid-espacio-marca        Separación entre el cuadrado de color o el icono y el título (1.75rem)
 *   --servicios-grid-color-a / -b         Colores A y B (los del escritorio, si se han elegido)
 *   --servicios-grid-color-tamano         Lado del cuadrado de color (2.875rem)
 *   --servicios-grid-icono-caja           Lado de la caja del icono (3rem)
 *   --servicios-grid-icono-tamano         Tamaño del icono dentro de su caja (100%)
 *   --servicios-grid-pestanas-alineacion  Alineación de las pestañas: center, flex-start o flex-end (center)
 *   --servicios-grid-pestanas-hueco       Separación entre pestañas (0.75rem)
 *   --servicios-grid-espacio-pestanas     Separación entre las pestañas y los servicios (2.75rem)
 */

/*
 * Registradas para que un 0 sin unidad o un valor no válido no rompan el cálculo de las columnas.
 * El valor inicial (el que se usa si el del tema no es válido) no admite rem: 288px = 18rem, 22px = 1.375rem.
 */
@property --_min {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 288px;
}

@property --_hueco {
	syntax: "<length>";
	inherits: false;
	initial-value: 22px;
}

/* Cuadrícula */

:where(.servicios-grid__lista) {
	--_min: var(--servicios-grid-min, 18rem);
	--_hueco: var(--servicios-grid-hueco, 1.375rem);

	display: grid;
	gap: var(--_hueco);

	/*
	 * Hasta --servicios-grid-columnas servicios por fila, con un ancho mínimo. Sin esa variable (el
	 * campo «Servicios por fila» vacío y el tema sin ponerla), esta declaración no vale y no se aplica:
	 * las columnas las decide el CSS del tema (y, sin él, sale uno por fila).
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--_min), (100% - (var(--servicios-grid-columnas) - 1) * var(--_hueco)) / var(--servicios-grid-columnas))), 1fr));
}

/* Servicio */

:where(.servicios-grid__item) {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: var(--servicios-grid-relleno, 2rem 1.875rem);
	border: var(--servicios-grid-borde, 1px solid color-mix(in srgb, currentColor 20%, transparent));
	border-radius: var(--servicios-grid-radio, 0);
	overflow-wrap: break-word;
}

:where(.servicios-grid__titulo, .servicios-grid__texto) {
	margin: 0;
}

:where(.servicios-grid__titulo + .servicios-grid__texto) {
	margin-top: var(--servicios-grid-espacio-titulo, 0.625rem);
}

/* El enlace va siempre al pie del servicio: los de una misma fila quedan alineados. */
:where(.servicios-grid__pie) {
	margin-top: auto;
	padding-top: var(--servicios-grid-espacio-enlace, 1.375rem);
}

:where(.servicios-grid__enlace) {
	display: inline-block;
}

/* Elemento final («¿No lo ves en la lista?»): su contenido, centrado en vertical. */
:where(.servicios-grid__item--extra) {
	justify-content: center;
}

:where(.servicios-grid__item--extra .servicios-grid__pie) {
	margin-top: 0;
}

/* Estilo con cuadrado de color: A en los servicios 1.º, 3.º, 5.º… y B en los 2.º, 4.º, 6.º… */

:where(.servicios-grid__color) {
	flex-shrink: 0;
	width: var(--servicios-grid-color-tamano, 2.875rem);
	height: var(--servicios-grid-color-tamano, 2.875rem);
	margin-bottom: var(--servicios-grid-espacio-marca, 1.75rem);
}

:where(.servicios-grid__color--a) {
	background-color: var(--servicios-grid-color-a, currentColor);
}

:where(.servicios-grid__color--b) {
	background-color: var(--servicios-grid-color-b, color-mix(in srgb, currentColor 50%, transparent));
}

/* Estilo con icono: la caja fija la posición y el tamaño; el icono (SVG o imagen) la llena. */

:where(.servicios-grid__icono) {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--servicios-grid-icono-caja, 3rem);
	height: var(--servicios-grid-icono-caja, 3rem);
	margin-bottom: var(--servicios-grid-espacio-marca, 1.75rem);
}

/* Los iconos de la biblioteca toman el color del texto (currentColor) o el A / B del escritorio. */
:where(.servicios-grid__icono--a) {
	color: var(--servicios-grid-color-a);
}

:where(.servicios-grid__icono--b) {
	color: var(--servicios-grid-color-b);
}

/* Cualquier SVG o imagen de la caja, también los que pone el tema con el filtro servicios_grid_html_icono. */
:where(.servicios-grid__icono) > :where(svg, img) {
	display: block;
	width: var(--servicios-grid-icono-tamano, 100%);
	height: var(--servicios-grid-icono-tamano, 100%);
}

:where(.servicios-grid__icono) > :where(img) {
	object-fit: contain;
}

/* Pestañas */

:where(.servicios-grid__pestanas) {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--servicios-grid-pestanas-alineacion, center);
	gap: var(--servicios-grid-pestanas-hueco, 0.75rem);
	margin-bottom: var(--servicios-grid-espacio-pestanas, 2.75rem);
}

:where(.servicios-grid__pestana) {
	font: inherit;
	cursor: pointer;
}

.servicios-grid__panel[hidden] {
	display: none !important;
}