/* Y2K Purple Portfolio — components.css
   Rejillas, tarjetas de post, portadas, categorías, paginación, estados vacíos. */

/* ------------------------------------------------------------ Rejillas */
.grid-posts {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 900px) {
	.grid-posts--home { grid-template-columns: repeat(3, 1fr); }
	.grid-posts--home > .post-card--feature { grid-column: span 2; }
	/* Variación controlada: la tarjeta 4 sube ligeramente para romper la cuadrícula */
	.grid-posts--home > .post-card:nth-child(4) { margin-top: 1.5rem; }
}
.cat-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* -------------------------------------------------------- Tarjeta de post */
.post-card { min-width: 0; }
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: 0 20px 50px -28px rgba(70, 40, 200, .6);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
	transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
/* Borde luminoso animado: conic-gradient con máscara (solo transform/opacity) */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: conic-gradient(from var(--a, 0deg), transparent 0 55%, var(--secondary) 75%, var(--accent) 88%, transparent 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .35s;
}
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card:hover, .card:focus-within {
	border-color: var(--line-strong);
	box-shadow: var(--glow), 0 30px 60px -24px rgba(90, 60, 240, .8);
}
.card:hover::before, .card:focus-within::before { opacity: 1; animation: spin-a 3.2s linear infinite; }
@keyframes spin-a { to { --a: 360deg; } }

.card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.post-card--feature .card__media { aspect-ratio: 16 / 9; }
.card__media img, .cover__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease), filter .5s;
}
.card:hover .card__media img { transform: scale(1.07); filter: saturate(1.15); }
.card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(6, 4, 15, .75)), linear-gradient(120deg, rgba(123, 92, 255, .22), transparent 60%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.card__stamp {
	position: absolute;
	right: .7rem; top: .7rem;
	z-index: 1;
	padding: .15rem .55rem;
	color: #fff;
	font: 400 .72rem var(--font-mono);
	letter-spacing: .1em;
	background: rgba(6, 4, 15, .68);
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.card__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.4rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; z-index: 3; }
.card__title { margin: 0; font-size: clamp(1.05rem, 1.2vw + .7rem, 1.4rem); overflow-wrap: anywhere; }
.post-card--feature .card__title { font-size: clamp(1.3rem, 2vw + .7rem, 2rem); }
.card__link { color: var(--text); text-decoration: none; }
.card__link:hover { color: #fff; text-shadow: none; }
/* Toda la tarjeta es clicable sin romper los chips */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__excerpt { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------- Portada generada en CSS
   Cuando un post no tiene imagen destacada: 5 variantes según el ID del post. */
.cover { background: var(--surface-solid); }
.cover__gen {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .16), transparent 35%),
		linear-gradient(135deg, #1b1050, #3a1fa6 55%, #6a3cff);
}
.cover__gen::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .5;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px),
		radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.4px);
	background-size: 34px 34px, 34px 34px, 6px 6px;
}
.cover__gen i { position: absolute; display: block; }
.cover__gen i:nth-child(1) {
	width: 46%; aspect-ratio: 1;
	left: 12%; top: 18%;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff, #b79bff 35%, #5a3df0 70%, #1b1050);
	box-shadow: 0 0 40px rgba(183, 155, 255, .6);
}
.cover__gen i:nth-child(2) {
	width: 34%; height: 62%;
	right: 10%; bottom: -8%;
	clip-path: polygon(0 100%, 100% 100%, 100% 0);
	background: linear-gradient(180deg, #fff, #8a6cff 45%, #2a1680);
}
.cover__gen i:nth-child(3) {
	width: 22%; height: 8%;
	right: 14%; top: 14%;
	background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
	opacity: .85;
}
.cover__gen--2 { background: radial-gradient(circle at 70% 25%, rgba(255, 106, 213, .35), transparent 40%), linear-gradient(200deg, #2a1680, #6a3cff 60%, #1b1050); }
.cover__gen--2 i:nth-child(1) { left: auto; right: 14%; top: 22%; }
.cover__gen--2 i:nth-child(2) { right: auto; left: 8%; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.cover__gen--3 { background: linear-gradient(160deg, #0d0826, #4a2bd6 70%, #8a6cff); }
.cover__gen--3 i:nth-child(1) { border-radius: 14%; transform: rotate(14deg); }
.cover__gen--4 { background: radial-gradient(circle at 50% 120%, rgba(255, 106, 213, .4), transparent 55%), linear-gradient(120deg, #1b1050, #5a3df0); }
.cover__gen--4 i:nth-child(1) { width: 60%; left: 20%; top: 28%; }
.cover__gen--5 { background: linear-gradient(225deg, #6a3cff, #2a1680 60%, #0d0826); }
.cover__gen--5 i:nth-child(2) { width: 50%; clip-path: polygon(50% 0, 100% 100%, 0 100%); right: 8%; }

/* ---------------------------------------------------- Tarjeta de categoría */
.cat-wrap { min-width: 0; }
.cat { height: 100%; overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.cat::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(18rem 12rem at var(--mx, 80%) var(--my, 0%), rgba(183, 155, 255, .28), transparent 65%);
	opacity: 0;
	transition: opacity .35s;
}
.cat:hover, .cat:focus-within { border-color: var(--secondary); box-shadow: var(--glow), 0 30px 60px -24px rgba(90, 60, 240, .8); }
.cat:hover::after { opacity: 1; }
.cat__body { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.3rem 1.3rem 1.5rem; }
.cat__count { margin: 0; color: var(--secondary); font: 400 .82rem var(--font-mono); letter-spacing: .1em; }
.cat__count b { color: #fff; font-size: 1.6rem; font-weight: 400; text-shadow: var(--glow); }
.cat__name { margin: 0; overflow-wrap: anywhere; }
.cat__link { color: var(--text); text-decoration: none; }
.cat__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cat__link:hover { color: #fff; text-shadow: none; }
.cat__desc { margin: 0; color: var(--muted); font-size: .92rem; }
.cat .chips { position: relative; z-index: 2; }

/* ------------------------------------------------------------ Paginación */
.pagination { margin-top: clamp(2rem, 5vw, 3.5rem); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem; height: 2.6rem;
	padding: 0 .7rem;
	color: var(--text);
	font: 400 .9rem var(--font-mono);
	text-decoration: none;
	background: rgba(123, 92, 255, .1);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}
.pagination a.page-numbers:hover { background: rgba(123, 92, 255, .35); box-shadow: var(--glow); transform: translateY(-2px); text-shadow: none; }
.pagination .current { color: #fff; background: linear-gradient(135deg, var(--primary), #5a3df0); border-color: var(--secondary); box-shadow: var(--glow); }
.pagination .dots { background: none; border-color: transparent; }

/* ---------------------------------------------------------- Estado vacío */
.empty { max-width: 34rem; margin-inline: auto; }
.empty__body { display: grid; justify-items: start; gap: .4rem; padding: 1.75rem; }
.empty__title { margin: 0 0 .2rem; font: 800 1.25rem var(--font-display); }
.empty__body p { color: var(--muted); }
.hint { padding: .8rem 1rem; color: var(--muted); font-size: .9rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }

/* Etiquetas y migas */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; }
.tags__label { margin-right: .3rem; color: var(--muted); font: 400 .78rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tags a {
	padding: .2rem .7rem;
	color: var(--secondary);
	font: 400 .78rem var(--font-mono);
	text-decoration: none;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	transition: background .2s, box-shadow .2s;
}
.tags a:hover { background: rgba(123, 92, 255, .3); box-shadow: var(--glow); text-shadow: none; }
.crumbs { margin: 0 0 1rem; font: 400 .85rem var(--font-mono); letter-spacing: .06em; }

/* Comentarios */
.comments { padding-block: 2rem 4rem; }
.comments__title { font-size: 1.3rem; }
.comment-list { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.comment-list .children { margin: 1rem 0 0 1.25rem; padding: 0; list-style: none; }
.comment-body { padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%;
	padding: .75rem 1rem;
	color: var(--text);
	font: inherit;
	background: rgba(6, 4, 15, .7);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--secondary); box-shadow: var(--glow); }
.comment-form .submit { padding: .85rem 1.4rem; color: #fff; font: 700 .88rem var(--font-body); background: linear-gradient(135deg, var(--primary), #5a3df0); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }