/* =====================================================================
GSS Post Card — tarjeta de post con el formato del Centro de Recursos
Marker / namespace: .gss-pcard
Destino: assets/css/components/gss-pcard.css (tema hijo Impreza-child)
Restila los ítems que Impreza ya emite (.w-grid-item / .w-post-elm) para
que el LISTADO DEL BLOG y los RESULTADOS DE BÚSQUEDA se vean igual que
las tarjetas de gss-rc (.gss-rc-card). No sustituye markup: solo estilo.
DOS CONTEXTOS, UN SOLO MARKER
-----------------------------
· Blog → el marker va como `el_class="gss-pcard"` en el [us_grid] de la
página /blog/, así que aterriza en el propio .w-grid.
· Búsqueda → el listado lo monta Theme Options y NO admite extraclass, así
que el marker se añade al desde el loader (is_search()).
Por eso cada regla lleva las dos raíces vía :is().
Tokens copiados de gss-rc.css para que el resultado sea idéntico.
===================================================================== */
.w-grid.gss-pcard,
body.gss-pcard .w-grid.us_post_list {
--pc-neon: #5078ff;
--pc-ink: #041438;
--pc-muted: #5b6478;
--pc-line: #e7ebf3;
--pc-radius: 16px;
--pc-shadow-hover: 0 16px 44px rgba(4, 20, 56, 0.14);
--pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* --pc-more: la inyecta PHP con el texto "Leer más" ya traducido.
No la pongas aquí: si se define un valor por defecto, el idioma
equivocado ganaría cuando PHP no llegue a escribirla. */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
contain: layout paint;
}
/* ---------------------------------------------------------------------
NEUTRALIZADORES — restos del montaje anterior
Si el grid conserva `home-blog-3-cols-bgan` / `home-blog-full-bgan`,
sus reglas de Impreza-child/style.css (sombra desplazada -15px 15px,
márgenes negativos) pisarían la tarjeta. Lo recomendado es quitar esa
extraclass, pero esto lo deja bien igualmente.
--------------------------------------------------------------------- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) {
padding-left: 0;
padding-right: 0;
margin-left: 0 !important;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item .post_image,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item .post_image img {
margin: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item h2.post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item .w-hwrapper,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item .post_content {
margin-left: 0;
}
/* ---------------------------------------------------------------------
LA TARJETA
--------------------------------------------------------------------- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--pc-line);
border-radius: var(--pc-radius);
overflow: hidden;
transition: transform 0.25s var(--pc-ease), box-shadow 0.25s var(--pc-ease);
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover {
transform: translateY(-4px);
box-shadow: var(--pc-shadow-hover);
}
/* ---- Imagen 16:9 (evita CLS: la altura queda fijada antes de cargar) ---- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_image {
position: relative;
display: block;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
/* sin height: chocaría con aspect-ratio y la relación se perdería */
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_image > a {
display: block;
width: 100%;
height: 100%;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0;
}
/* ---- Badge de categoría flotando sobre la imagen ----
.w-grid-item-h es el contexto de posicionamiento y la imagen es el primer
hijo, así que top/left aterrizan sobre ella sin depender del orden exacto
del resto de elementos del Grid Layout. */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_taxonomy {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
margin: 0;
padding: 3px 14px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.7;
background: #fff;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(4, 20, 56, 0.12);
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_taxonomy,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_taxonomy a {
color: var(--pc-neon);
text-decoration: none;
border: 0;
background-image: none;
}
/* Si el Grid Layout imprime varias categorías, deja solo la primera:
el badge del Centro de Recursos muestra una sola. */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_taxonomy a:not(:first-child) {
display: none;
}
/* ---- Cuerpo ---- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content {
padding-left: 20px;
padding-right: 20px;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title {
margin: 20px 0 10px;
font-size: 1.08rem !important;
font-weight: 600;
line-height: 1.4 !important;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title a {
color: var(--pc-ink);
text-decoration: none;
transition: color 0.2s var(--pc-ease);
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover .post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover .post_title a {
color: var(--pc-neon);
}
/* Extracto: 3 líneas y a igualar altura, para que la flecha quede abajo.
Impreza envuelve el extracto en un , así que la tipografía y el recorte
se aplican TAMBIÉN al
— sin esto, cualquier regla del tema que ataque
`p` gana al contenedor. Ver el neutralizador del final del archivo. */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content {
flex: 1 1 auto;
margin: 0;
overflow: hidden;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content p {
color: var(--pc-muted);
font-size: 0.94rem;
line-height: 1.55;
font-weight: 400;
}
/* El recorte a 3 líneas va en el elemento que contiene el texto: en el
si
existe, y en el contenedor si el extracto viene suelto.
Van en DOS reglas separadas a propósito: una lista de selectores con coma no
es "forgiving", así que si el navegador no soporta :has() se caería la regla
entera y perderíamos también el recorte del
, que es el caso habitual. */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content:not(:has(p)) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content p {
margin: 0;
}
/* ---- "Leer más →" ----
El TEXTO lo inyecta PHP en la variable --pc-more (ver components-loader.php),
traducido con WPML String Translation. Así el Grid Layout NO lleva el texto
dentro y no hay que duplicarlo en 5 idiomas.
El fallback "" del var() es deliberado: si por lo que sea la variable no
llegara, la tarjeta se queda solo con la flecha en vez de perder el bloque
entero (content inválido no pinta nada). */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h::after {
content: var(--pc-more, "") " \2192"; /* → */
display: block;
margin: 16px 20px 20px;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.2;
color: var(--pc-neon);
transition: transform 0.2s var(--pc-ease);
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover::after {
transform: translateX(4px);
}
/* Variante con texto (elemento Custom Link en el layout) */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_custom_link {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 16px 20px 20px;
font-weight: 600;
font-size: 0.92rem;
color: var(--pc-neon);
text-decoration: none;
}
/* Si existe el Custom Link, la flecha en ::after sobra */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:has(.post_custom_link)::after {
content: none;
}
/* ---------------------------------------------------------------------
ELEMENTOS QUE LA TARJETA DEL CENTRO DE RECURSOS NO MUESTRA
La tarjeta de gss-rc es: imagen + badge + título + extracto + flecha.
Fecha y autor se ocultan para que el formato coincida.
¿Los quieres visibles? Borra este bloque.
--------------------------------------------------------------------- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_date,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_author,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post-author-meta {
display: none !important;
}
/* En regla aparte: si :has() no está soportado, esta se cae sola y las de
arriba siguen aplicando (una lista con coma se invalidaría completa). */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-hwrapper:has(.post_date) {
display: none !important;
}
/* ---------------------------------------------------------------------
ACCESIBILIDAD / MOVIMIENTO REDUCIDO
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h::after,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title a {
transition: none;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover {
transform: none;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:hover::after {
transform: none;
}
}
/* Foco visible sobre la tarjeta cuando se navega con teclado */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h:focus-within {
box-shadow: var(--pc-shadow-hover);
outline: 2px solid var(--pc-neon);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------
NEUTRALIZADOR — carrusel "Más artículos" del template de post individual
---------------------------------------------------------------------
En single post, Impreza-child/style.css trae un bloque heredado del diseño
antiguo que ataca `.single-post .owl-carousel .w-grid-item-h` y pisa la
tarjeta. Lo relevante:
.single-post .owl-carousel .w-grid-item-h p {
font-size: 18px !important; line-height: 22px; font-weight: 700; }
.single-post .owl-carousel .owl-stage .owl-item article img {
height: 150px; box-shadow: -15px 15px 0 0 #00ffd7; }
El `p` a 18px en negrita hacía que el EXTRACTO saliera más grande que el
título. Y ojo: ese `!important` gana a mi font-size aunque mi selector tenga
más especificidad, porque !important manda sobre la especificidad. De ahí
que aquí sí haga falta `!important` — acotado al namespace del componente,
como hace gss-article con sus botones.
El título del layout 112262 es un
, así que la regla hermana para `h2`
no aplica hoy; el margin-left va igualmente como defensa por si algún día se
cambia la etiqueta del elemento en el Grid Layout.
--------------------------------------------------------------------- */
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content p {
font-size: 0.94rem !important;
line-height: 1.55 !important;
font-weight: 400 !important;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title {
margin-left: 0 !important;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item .post_image img {
height: 100% !important;
width: 100% !important;
}
/* ---------------------------------------------------------------------
RESPONSIVE — Impreza ya controla el nº de columnas (cols_3 / cols_4).
Aquí solo se ajusta el aire interior en pantallas pequeñas.
--------------------------------------------------------------------- */
@media (max-width: 600px) {
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_content {
padding-left: 16px;
padding-right: 16px;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_title {
margin-top: 16px;
}
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .w-grid-item-h::after,
:is(.w-grid.gss-pcard, body.gss-pcard .w-grid.us_post_list) .post_custom_link {
margin: 14px 16px 16px;
}
}