/*
 * c-button — botones (D8: una forma por función).
 *   botones de ACCIÓN (Buscar, Ver todos, Explorar con filtros…): PÍLDORA, texto en
 *     Cinzel como el menú. Son
 *     .c-button--pill (borde dorado) y .c-button--action (sólido oscuro): el mismo
 *     border-radius (--radius-pill); un .c-button suelto también es píldora.
 *   botones de ÍCONO (menú, cerrar, anterior/siguiente…): CÍRCULO (.c-button--icon,
 *     .c-close), border-radius 50%.
 *   Píldoras y círculos se dibujan biselados (hexágono y rombo): ver «Bisel» en
 *     c-alcazar.css.
 *   .c-more-link  "Ver todos": píldora centrada sobre un filete
 */
@layer components {
	:where(.c-button) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-block-size: 32px;
		padding: 0.45em 1.1em;
		border: var(--border-w) solid var(--color-rule);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-strong);
		/* los textos de los botones de acción, en Cinzel como el menú */
		font-family: var(--font-institutional);
		font-size: var(--nav-size);
		font-weight: var(--nav-weight);
		letter-spacing: 0.02em;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
	}
	.c-button:hover { border-color: var(--color-strong); }

	.c-button--pill {
		padding-inline: 1.4em;
		border-color: var(--color-rule);
		border-radius: var(--radius-pill);
	}
	.c-button--pill:hover { border-color: var(--color-accent); background: var(--color-band); }

	.c-button--action, .c-button--solid {
		padding-inline: 1.4em;
		border-radius: var(--radius-pill);
	}
	.c-button--action:hover { border-color: var(--color-accent); }
	.c-button--icon {
		inline-size: 2.75rem;
		min-block-size: 2.75rem;
		padding: 0;
		border-radius: 50%;
	}
	.c-button--action, .c-button--solid {
		border-color: var(--color-strong);
		background: var(--color-strong);
		color: var(--color-strong-fg);
	}
	.c-button--solid:hover { background: color-mix(in oklab, var(--color-strong) 85%, white); }

	/* "ver todos": filete a lo ancho con la píldora en el medio */
	.c-more-link {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		margin-block: var(--space-l) 0;
	}
	.c-more-link::before, .c-more-link::after {
		content: "";
		flex: 1;
		border-block-start: 1px solid var(--color-rule);
	}

	.c-close {
		display: inline-grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--color-strong);
		font-size: 1.25rem;
		cursor: pointer;
	}
	.c-close:hover { background: var(--color-soft); }
}