/* Listado de productos (archive-producto.php + archivos de categoría y
   colección). The listing runs nearly edge to edge in the design, so it
   uses its own tighter gutter instead of --gutter. */

.archivo {
	--gutter-archivo: clamp(8px, 0.6vw, 12px);
	--edge-archivo: max(var(--gutter-archivo), var(--edge-bleed));
}

/* --- Cabecera ------------------------------------------------------------ */

.archivo__hero {
	display: grid;
	grid-template-columns: 47fr 53fr;
	align-items: start;
	margin-bottom: clamp(48px, 6.5vw, 96px);
}

.archivo__title {
	padding: clamp(20px, 2.2vw, 32px) var(--gutter) 0 var(--edge);
}

.archivo__hero-media {
	aspect-ratio: 764 / 243;
	overflow: hidden;
	margin-top: 4px;
}

.archivo__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Filtros ------------------------------------------------------------- */

.archivo__filters {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 var(--edge-archivo);
	border-bottom: 1px solid var(--c-dark);
}

.archivo__filter-list {
	display: flex;
	gap: clamp(20px, 2.2vw, 32px);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* abajo, lo justo para que la base de las letras quede a 15px de la
	   línea, como en PRODUCTOS.png (a 1440; en em para que escale) */
	padding: 12px 16px 0.5em;
	font-weight: 300;
	font-size: clamp(13px, 0.96vw, 19px);
	letter-spacing: -0.02em;
	white-space: nowrap;
	/* the last visible tab fades out under the arrow, as in the design */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}

.archivo__filter-list::-webkit-scrollbar { display: none; }

/* Se puede tirar de la barra con el ratón (archive.js). */
.archivo__filter-list { cursor: grab; }

.archivo__filter-list.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-behavior: auto;
}

/* La rayita de cada pestaña y el subrayado de la activa son el mismo trazo,
   pintado de fondo para poder hacerlo crecer: al señalar una pestaña la
   rayita se alarga hasta subrayar la palabra, como en el resto de la web.
   Medidas de Figma: la fina arranca 0,11em bajo la línea base, mide
   0,07em (un pelo: el "_" de la Suisse Light) y casi toca la letra; la de la activa, 0,145em. La
   caja de una línea baja 0,556em bajo la base, que es de donde salen las
   restas. */
.archivo__filter-list a {
	padding-left: 0.55em;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.376em);
	background-size: 0.5em 0.07em;
	transition: background-size 0.35s ease;
}

.archivo__filter-list a:hover { background-size: 100% 0.07em; }

/* La activa va en negrita y con la raya gruesa bajo toda la palabra. */
.archivo__filter-list a.is-active {
	font-weight: 700;
	background-position: 0 calc(100% - 0.266em);
	background-size: 100% 0.145em;
}

@media (prefers-reduced-motion: reduce) {
	.archivo__filter-list a { transition: none; }
}


.archivo__filter-next {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	font-size: clamp(22px, 1.528vw, 29.3px);
	line-height: 1;
}

.archivo__filter-next.is-hidden { visibility: hidden; }

/* --- Grid ---------------------------------------------------------------- */

.archivo__grid {
	/* El hueco entre fotos y el de la línea de los filtros a las fotos son
	   el mismo, como en Figma. */
	--hueco: 10px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--hueco);
	padding: var(--hueco) var(--edge-archivo) 0;
}

.archivo__grid .product-card {
	padding: 16px;
	background: linear-gradient(180deg, #d9d9d9 0%, #d3d3d3 100%);
}

.archivo__grid .product-card__name { font-size: clamp(16px, 1.3vw, 26px); }

.archivo__grid .product-card__designer {
	/* 9,8px a 1440 y pegado al nombre, como en el PNG del diseño */
	font-size: clamp(9px, 0.68vw, 13px);
	line-height: 1;
	color: var(--c-dark);
}

/* Módulo de relleno: foto a sangre, titular y texto arriba en blanco y el
   botón abajo. Medidas de PRODUCTOS.png a 1440: 28px de margen, titular de
   48px, texto de 18px. Ocupa el alto de la fila, no tiene proporción propia.
   Cuántas columnas cubre lo pone archive.js en --relleno. */
.archivo__relleno {
	position: relative;
	grid-column: span var(--relleno, 1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: clamp(16px, 1.94vw, 37px);
	overflow: hidden;
	background: var(--c-grey-warm);
	color: var(--c-white);
}

/* El atributo hidden lo quita archive.js; con display: flex no bastaría. */
.archivo__relleno[hidden] { display: none; }

.archivo__relleno-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Un velo por arriba para que el blanco se lea sobre cualquier foto. */
.archivo__relleno::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(27, 27, 26, 0.35) 0%, rgba(27, 27, 26, 0) 45%);
	pointer-events: none;
}

.archivo__relleno-texto,
.archivo__relleno-button {
	position: relative;
	z-index: 2;
}

.archivo__relleno-titulo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(24px, 3.33vw, 64px);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 0.4em;
}

.archivo__relleno-copy {
	max-width: 20em;
	font-size: clamp(14px, 1.25vw, 24px);
	line-height: 1.2;
}

/* Botón claro: el oscuro de siempre, invertido. */
.archivo__relleno-button {
	background: var(--c-white);
	color: var(--c-dark);
	font-size: clamp(15px, 1.389vw, 26.7px);
}

.archivo__relleno-button:hover { background: var(--c-cream); }

.archivo__empty {
	padding: 64px var(--edge);
	font-weight: 300;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.archivo__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.archivo__hero {
		grid-template-columns: 1fr;
		margin-bottom: 32px;
	}

	.archivo__title { padding-bottom: 20px; }
}

@media (max-width: 640px) {
	.archivo__grid { grid-template-columns: repeat(2, 1fr); --hueco: 6px; }
}

/* --- Variante proyectos --------------------------------------------------
   Same header and filters; the title carries the project count and a short
   intro, and the grid is an 11-tile mosaic on 10 columns. */

.archivo--proyectos .archivo__hero {
	grid-template-columns: 1fr 1fr;
	margin-bottom: clamp(32px, 5vw, 72px);
}

.archivo--proyectos .archivo__hero-text {
	padding: clamp(20px, 2.2vw, 32px) var(--gutter) 0 var(--edge);
}

.archivo--proyectos .archivo__title { padding: 0; }

.archivo__count {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: clamp(13px, 1.2vw, 17px);
	letter-spacing: 0;
	margin-left: 0.4em;
	vertical-align: 0.5em;
}

.archivo__intro { margin-top: clamp(16px, 2vw, 28px); }

.archivo--proyectos .archivo__hero-media { aspect-ratio: 758 / 245; }

.archivo__mosaic {
	grid-template-columns: repeat(10, 1fr);
	/* 416px de fila y 8px de hueco a 1440, medido en el PNG */
	grid-auto-rows: clamp(180px, 28.9vw, 416px);
	--hueco: 8px;
}

.archivo__mosaic .archivo__item { grid-column: span 2; }

/* The 11-tile pattern: 4+6 / 6+4(tall) / 2+4 / 2×5, repeated each page */
.archivo__mosaic .archivo__item:nth-child(11n + 1) { grid-column: span 4; }
.archivo__mosaic .archivo__item:nth-child(11n + 2) { grid-column: span 6; }
.archivo__mosaic .archivo__item:nth-child(11n + 3) { grid-column: span 6; }
.archivo__mosaic .archivo__item:nth-child(11n + 4) { grid-column: span 4; grid-row: span 2; }
.archivo__mosaic .archivo__item:nth-child(11n + 6) { grid-column: span 4; }

@media (max-width: 900px) {
	/* Entre la entradilla y la foto de la cabecera, aire de sobra: pegadas
	   parecían un solo bloque. */
	.archivo--proyectos .archivo__hero {
		grid-template-columns: 1fr;
		row-gap: clamp(28px, 8vw, 44px);
	}

	/* La fila no puede quedar más baja que el alto mínimo de la tarjeta: se
	   salía de su hueco y se comía el pie de la de arriba. */
	.archivo__mosaic {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: max(220px, 44vw);
		--hueco: 6px;
	}

	/* El mosaico se deshace en dos columnas iguales: con los anchos del
	   patrón, la primera pieza se quedaba sola en su fila y dejaba un hueco. */
	.archivo__mosaic .archivo__item,
	.archivo__mosaic .archivo__item:nth-child(n) {
		grid-column: span 1;
		grid-row: span 1;
	}
}