/* ==========================================================================
   Hoolistic Web Toolkit · Proyectos del portfolio (diseño del widget Projects de Osty)
   Hereda las fuentes del tema. Colores de Osty (siguen el modo oscuro).
   ========================================================================== */

.hwt-pg{
	--hwt-pg-cols:3;
	--hwt-pg-gap-x:clamp(20px,4.5vw,66px);
	--hwt-pg-gap-y:clamp(40px,5vw,72px);
	--hwt-pg-ratio:1/1;
	--hwt-pg-radius:24px;
	--hwt-pg-title:var(--color-contrast-higher,#262626);
	--hwt-pg-cat:var(--color-contrast-medium,#595959);
	--hwt-pg-filter-bg:rgba(0,0,0,.05);
	--hwt-pg-active:var(--color-contrast-higher,#262626);
}
body[data-theme="dark"] .hwt-pg,html[data-theme="dark"] .hwt-pg{
	--hwt-pg-title:var(--color-contrast-higher,#f5f5f5);
	--hwt-pg-cat:var(--color-contrast-medium,#a3a1a6);
	--hwt-pg-filter-bg:rgba(255,255,255,.07);
	--hwt-pg-active:var(--color-contrast-higher,#f5f5f5);
}
@media (max-width:1024px){.hwt-pg{--hwt-pg-cols:2}}
@media (max-width:767px){.hwt-pg{--hwt-pg-cols:1}}

/* Filtro en pastilla, con marcador que se desliza */
.hwt-pg__filter{
	position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
	width:max-content;max-width:100%;margin:0 auto clamp(36px,5vw,64px);padding:4px;
	border-radius:16px;background:var(--hwt-pg-filter-bg);
}
.hwt-pg__filter button{
	position:relative;z-index:1;padding:10px 26px;border:0;border-radius:12px;background:none;
	font:inherit;font-size:1rem;line-height:1.4;color:var(--hwt-pg-title);cursor:pointer;
	transition:color .3s ease;
}
.hwt-pg__filter button.is-active{color:var(--color-bg,#fff)}
.hwt-pg__filter button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.hwt-pg__marker{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);border-radius:12px;background:var(--hwt-pg-active);transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
.hwt-pg__filter:not(.is-ready) .hwt-pg__marker{display:none}
.hwt-pg__filter:not(.is-ready) button.is-active{background:var(--hwt-pg-active)}

/* Cuadrícula */
.hwt-pg__grid{display:grid;grid-template-columns:repeat(var(--hwt-pg-cols),minmax(0,1fr));gap:var(--hwt-pg-gap-y) var(--hwt-pg-gap-x);margin:0;padding:0;list-style:none}
.hwt-pg__item{margin:0;transition:opacity .35s ease,transform .35s ease}
.hwt-pg__item.is-hidden{display:none}
.hwt-pg__item.is-entering{opacity:0;transform:translateY(12px)}
.hwt-pg__link{display:block;color:inherit;text-decoration:none}
.hwt-pg__media{display:block;aspect-ratio:var(--hwt-pg-ratio);border-radius:var(--hwt-pg-radius);overflow:hidden;background:var(--hwt-pg-filter-bg)}
.hwt-pg__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hwt-pg__link:hover .hwt-pg__media img,.hwt-pg__link:focus-visible .hwt-pg__media img{transform:scale(1.05)}
.hwt-pg__link:focus-visible{outline:2px solid var(--hwt-pg-title);outline-offset:6px;border-radius:var(--hwt-pg-radius)}
.hwt-pg__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:20px}
.hwt-pg .hwt-pg__title{margin:0;font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:normal;color:var(--hwt-pg-title)}
.hwt-pg .hwt-pg__cat{flex:none;font-size:1rem;line-height:1.4;color:var(--hwt-pg-cat);text-align:right}

/* Cargar más */
.hwt-pg__footer{display:flex;justify-content:center;margin-top:clamp(40px,5vw,72px)}
.hwt-pg__footer[hidden]{display:none}
.hwt-pg__more{
	position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
	padding:14px 30px;border:0;border-radius:999px;background:var(--hwt-pg-active);color:var(--color-bg,#fff);
	font:inherit;font-size:1rem;font-weight:600;line-height:1.3;cursor:pointer;transition:transform .2s ease,opacity .2s ease;
}
.hwt-pg__more:hover{transform:translateY(-2px)}
.hwt-pg__more:focus-visible{outline:2px solid var(--hwt-pg-active);outline-offset:4px}
.hwt-pg__more[aria-busy="true"]{cursor:progress;opacity:.75}
.hwt-pg__more[aria-busy="true"]::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:hwt-pg-spin .7s linear infinite}
.hwt-pg__more.is-error::after{content:"!";font-weight:700}
.hwt-pg.is-loading .hwt-pg__grid{opacity:.6;transition:opacity .2s ease}
@keyframes hwt-pg-spin{to{transform:rotate(360deg)}}

.hwt-pg-empty{color:var(--color-contrast-medium,#6b6870)}
.hwt-pg-empty--editor{padding:16px;border:1px dashed #b5b3b0;font-size:.9rem}

@media (max-width:767px){
	.hwt-pg__filter{width:auto;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
	.hwt-pg__filter::-webkit-scrollbar{display:none}
	.hwt-pg__filter button{flex:none;padding:9px 18px}
	.hwt-pg__meta{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
	.hwt-pg__item,.hwt-pg__media img,.hwt-pg__marker,.hwt-pg__more{transition:none}
	.hwt-pg__more[aria-busy="true"]::after{animation-duration:2s}
}