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

.hwt-posts{
	--hwt-posts-cols:2;
	--hwt-posts-gap:48px;
	--hwt-posts-ratio:7/3;
	--hwt-posts-radius:24px;
	--hwt-posts-pad:28px;
	--hwt-posts-card:#fff;
	--hwt-posts-title:var(--color-contrast-higher,#262626);
	--hwt-posts-text:var(--color-contrast-high,#3d3d3d);
	--hwt-posts-soft:var(--color-contrast-medium,#6b6870);
	--hwt-posts-accent:#fcca73;
	--hwt-posts-pill:rgba(0,0,0,.05);
}
body[data-theme="dark"] .hwt-posts,html[data-theme="dark"] .hwt-posts{
	--hwt-posts-card:rgba(255,255,255,.06);
	--hwt-posts-title:var(--color-contrast-higher,#f5f5f5);
	--hwt-posts-text:var(--color-contrast-high,#d6d4d8);
	--hwt-posts-soft:var(--color-contrast-medium,#a3a1a6);
	--hwt-posts-pill:rgba(255,255,255,.08);
}
@media (max-width:767px){.hwt-posts{--hwt-posts-cols:1;--hwt-posts-gap:28px;--hwt-posts-pad:22px}}

.hwt-posts__grid{display:grid;grid-template-columns:repeat(var(--hwt-posts-cols),minmax(0,1fr));gap:var(--hwt-posts-gap);align-items:start}

/* Tarjeta */
.hwt-post{
	position:relative;display:flex;flex-direction:column;overflow:hidden;
	border-radius:var(--hwt-posts-radius);background:var(--hwt-posts-card);
	transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease;
}
.hwt-post:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25)}
.hwt-post.is-entering{opacity:0;transform:translateY(12px)}
.hwt-post__body{padding:var(--hwt-posts-pad) var(--hwt-posts-pad) calc(var(--hwt-posts-pad) * .7)}
.hwt-post--media-top .hwt-post__body,.hwt-post--no-media .hwt-post__body{padding-bottom:var(--hwt-posts-pad)}
.hwt-post__meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-size:.85rem;line-height:1.4;color:var(--hwt-posts-soft)}
.hwt-posts .hwt-post__title{margin:0 0 8px;font-size:clamp(1.1rem,1.5vw,1.25rem);font-weight:600;line-height:1.25;letter-spacing:normal;text-transform:none;color:var(--hwt-posts-title)}
.hwt-post__title a{color:inherit;text-decoration:none}
/* Toda la tarjeta es clicable sin repetir enlaces (accesible: un solo enlace por tarjeta). */
.hwt-post__title a::after{content:"";position:absolute;inset:0;z-index:1}
.hwt-post__title a:focus-visible{outline:none}
.hwt-post:has(.hwt-post__title a:focus-visible){outline:2px solid var(--hwt-posts-title);outline-offset:4px}
.hwt-post__excerpt{margin:0;font-size:.95rem;line-height:1.55;color:var(--hwt-posts-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hwt-post__media{margin:0;aspect-ratio:var(--hwt-posts-ratio);overflow:hidden}
.hwt-post--media-bottom .hwt-post__media{margin-top:auto}
.hwt-post__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hwt-post:hover .hwt-post__media img{transform:scale(1.04)}

/* Paginación numerada */
.hwt-posts__pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(40px,5vw,64px)}
.hwt-posts__pages .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
	border-radius:12px;background:var(--hwt-posts-pill);color:var(--hwt-posts-title);
	font-size:.95rem;font-weight:500;line-height:1;text-decoration:none;transition:background-color .2s ease,color .2s ease;
}
.hwt-posts__pages a.page-numbers:hover{background:var(--hwt-posts-accent);color:#262626}
.hwt-posts__pages .page-numbers.current{background:var(--hwt-posts-accent);color:#262626;font-weight:600}
.hwt-posts__pages .page-numbers.dots{background:none}
.hwt-posts__pages a:focus-visible{outline:2px solid var(--hwt-posts-title);outline-offset:2px}

/* Cargar más */
.hwt-posts__footer{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.hwt-posts__footer[hidden]{display:none}
.hwt-posts__more{
	display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border:0;border-radius:999px;
	background:var(--hwt-posts-title);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-posts__more:hover{transform:translateY(-2px)}
.hwt-posts__more:focus-visible{outline:2px solid var(--hwt-posts-title);outline-offset:4px}
.hwt-posts__more[aria-busy="true"]{cursor:progress;opacity:.75}
.hwt-posts__more[aria-busy="true"]::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:hwt-posts-spin .7s linear infinite}
.hwt-posts__more.is-error::after{content:"!";font-weight:700}
.hwt-posts.is-loading .hwt-posts__grid{opacity:.6;transition:opacity .2s ease}
@keyframes hwt-posts-spin{to{transform:rotate(360deg)}}

.hwt-posts-empty{color:var(--color-contrast-medium,#6b6870)}

@media (prefers-reduced-motion:reduce){
	.hwt-post,.hwt-post__media img,.hwt-posts__more{transition:none}
	.hwt-post:hover{transform:none}
	.hwt-posts__more[aria-busy="true"]::after{animation-duration:2s}
}