/*
 * c-results — resultados del browse y de la búsqueda.
 *   barra (c-results-nav): cantidad · orden · vista, en controles chicos
 *   grilla de tarjetas (.bResultItemCol, markup del core): celdas iguales,
 *     imagen entera sobre fondo suave, "creador / título en cursiva" en
 *     serif, filete dorado corto, fecha e inventario chicos
 *   filtros (#browse-refine, c-panel): siempre en cajón, con su botón
 *   "Cargar más": píldora centrada sobre un filete
 */
@layer components {
	/* barra */
	.c-results-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs) var(--space-m);
		font-size: var(--step--1);
	}
	.c-results-nav__count { margin-inline-end: auto; font-weight: 600; color: var(--color-strong); }
	.c-sortby, .c-viewselect { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
	.c-sortby__link, .c-viewselect__link {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		min-block-size: 2.25rem;
		padding: 0.3em 0.9em;
		border: 1px solid var(--color-border);
		background: var(--color-surface);
		color: var(--color-strong);
		font: inherit;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
	}
	.c-sortby__link:hover, .c-viewselect__link:hover { border-color: var(--color-strong); }

	/* filtros: cajón */
	#browse-refine { --mode: drawer; }
	.c-panel__toggle { gap: 0.5em; border-color: var(--color-strong); font-weight: 600; }
	#browse-refine[data-mode="drawer"]:modal { inline-size: min(26rem, 100vw - 2rem); padding: var(--space-m) var(--space-l); }
	#browse-refine .c-panel__header { align-items: center; margin-block-end: var(--space-s); padding-block-end: var(--space-s); border-block-end: 1px solid var(--color-rule); }
	#browse-refine .c-panel__header h5 { font-size: var(--step-2); }

	/* grilla de tarjetas */
	/* la grilla es el contenedor de los resultados (result_page.php: c-results__grid, también
	   con style = masonry); las tarjetas son sus hijas */
	#browseResultsContainer > .c-results__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
		gap: var(--space-l) var(--space-m);
	}
	#browseResultsContainer > .c-results__grid > :not(.bResultItemCol) { grid-column: 1 / -1; }
	.bResultItemCol { min-inline-size: 0; }
	.bResultItem {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		block-size: 100%;
		background: var(--color-surface);
		transition: box-shadow var(--duration) var(--easing);
	}
	.bResultItem:hover { box-shadow: 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / 0.3); }
	.bResultItemImg a { display: block; }
	.bResultItemImg img { padding: var(--space-xs); }
	.bResultItemText {
		display: grid;
		align-content: start;
		gap: 0.1rem;
		padding: var(--space-s) var(--space-2xs) var(--space-m);
		font-family: var(--font-body);
		font-size: var(--step--1);
		line-height: 1.45;
		color: var(--color-muted);
	}
	.bResultItemText :is(h5, p) { margin: 0; }
	.bResultItemText h5 { font-family: var(--font-heading); font-size: var(--step-1); font-weight: 400; color: var(--color-strong); line-height: 1.25; }
	.bResultItemText h5:empty { display: none; }
	.bResultItemText .title { display: block; font-family: var(--font-heading); font-size: var(--step-1); font-style: italic; color: var(--color-strong); line-height: 1.25; }
	.bResultItemText p:has(.title) + p {
		margin-block-start: var(--space-2xs);
		padding-block-start: var(--space-2xs);
		background: linear-gradient(var(--color-rule), var(--color-rule)) top left / 3.5rem 1px no-repeat;
	}
	.bResultItemText p:last-child:not(:has(.title)) { font-size: var(--step--2); }
	.bResultItemText a { text-decoration: none; }
	/* toda la tarjeta es el enlace de la imagen */
	.bResultItemImg a::after { content: ""; position: absolute; inset: 0; }

	/* cargar más / fin */
	.c-results__more { display: flex; align-items: center; gap: var(--space-s); margin-block-start: var(--space-xl); }
	.c-results__more::before, .c-results__more::after { content: ""; flex: 1; border-block-start: 1px solid var(--color-rule); }
	.c-results__more .c-button { border-color: var(--color-rule); border-radius: var(--radius-pill); padding-inline: 1.6em; }
	.c-results__more .c-button:hover { border-color: var(--color-accent); background: var(--color-band); }
}

/* facetas (en el cajón de filtros) */
@layer components {
	.c-facets__list { display: grid; margin: 0; padding: 0; list-style: none; }
	.c-facets__item { border-block-end: 1px solid var(--color-border); }
	.c-facets__link {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-s);
		padding-block: var(--space-xs);
		font-family: var(--font-heading);
		font-size: var(--step-1);
		color: var(--color-strong);
		text-decoration: none;
	}
	.c-facets__link::first-letter { text-transform: uppercase; }
	.c-facets__link span { font-family: var(--font-body); font-size: var(--step--2); color: var(--color-muted); }
	.c-facets__link:hover { color: var(--color-accent-text); }
	#browse-refine .c-panel__header h5 { font-family: var(--font-heading); font-size: var(--step-2) !important; text-transform: none !important; }
	#bMorePanel:empty { display: none; }
}