/**
 * Componente comun · card-portafolio.
 * Tarjeta de caso con categoria, entradilla (`resumen` entero), linea de
 * contexto y primera cifra, mas su rejilla.
 *
 * Clases raiz:
 *   .pf-card-portafolio
 *   .pf-card-portafolio__media  __image  __media--vacia  __placeholder
 *   .pf-card-portafolio__body  __categoria  __title  __link
 *   .pf-card-portafolio__resumen
 *   .pf-card-portafolio__meta  __meta-part  __meta-sep
 *   .pf-card-portafolio__resultado  __cifra  __etiqueta
 *   .pf-card-portafolio.is-activable   (la anade script.js si hay JS)
 *   .pf-card-portafolio-grid  __empty
 *
 * La rejilla vive aqui, y no en la plantilla T-11, porque el mismo contenedor
 * lo pintan `templates/archive`, `search`, el shortcode [listar_portafolio] y
 * el respaldo del modulo. La de T-11 es `.pf-filters__grid-list`, de `filters`.
 *
 * DIRECCION «EXPEDIENTE» (issue #115): hover con UNA sola señal, el borde a
 * `--pf-color-border-strong`. Se retiraron `translateY(-2px)`, la sombra md y
 * el bloque `prefers-reduced-motion` que anulaba el desplazamiento, porque ya
 * no hay nada que anular. La categoria va en 13px, peso 500 y `text-muted`, en
 * caja normal y sin `letter-spacing`: las versalitas se reservan a eyebrow,
 * categoria de entrada y titulos de columna del pie. La rejilla se cierra en
 * 3 columnas (decision 1).
 *
 * TOKENS
 * Todos los nombres son los canonicos de style.css y van SIN literal de
 * respaldo (issue #60): un token ausente tiene que romper a la vista, no
 * quedar tapado por un valor inventado.
 *
 * `--pf-portafolio-columns` es la excepcion, y no es un token de paleta: lo
 * inyecta quien pinta la rejilla en el atributo `style` (el atributo `columnas`
 * del shortcode, DEC-012). Por eso se consume dentro de una regla que exige que
 * el atributo exista.
 */

/* Rejilla ----------------------------------------------------------------- */

.pf-card-portafolio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
}

@media (min-width: 700px) {
    .pf-card-portafolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Numero de columnas fijo, cuando quien pinta la rejilla lo impone (por
       ejemplo el atributo `columnas` del shortcode). */
    .pf-card-portafolio-grid[style*="--pf-portafolio-columns"] {
        grid-template-columns: repeat(var(--pf-portafolio-columns), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pf-card-portafolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pf-card-portafolio-grid[style*="--pf-portafolio-columns"] {
        grid-template-columns: repeat(var(--pf-portafolio-columns), minmax(0, 1fr));
    }
}

.pf-card-portafolio-grid__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--pf-space-lg);
    text-align: center;
    color: var(--pf-color-text-muted);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

/* Tarjeta ----------------------------------------------------------------- */

.pf-card-portafolio {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
    transition: border-color var(--pf-transition);
}

.pf-card-portafolio.is-activable {
    cursor: pointer;
}

/* Una sola señal de hover: el borde. Sin desplazamiento ni sombra. */
.pf-card-portafolio:hover,
.pf-card-portafolio:focus-within {
    border-color: var(--pf-color-border-strong);
}

/* El foco se pinta sobre la tarjeta entera, no solo sobre el enlace, con el
   anillo global. */
.pf-card-portafolio:focus-within {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

/*
 * MARCO DE NAVEGADOR (issue #154). La caja lleva ademas `.pf-frame`, la utilidad
 * de `style.css` que dibuja la barra con los tres puntos. El `aspect-ratio` y el
 * `object-fit` se quedan aqui, en la imagen, porque la utilidad es generica y no
 * sabe de tarjetas. `overflow: hidden` no se retira: recorta la captura al radio
 * del marco.
 */
.pf-card-portafolio__media {
    overflow: hidden;
    background: var(--pf-color-bg-alt);
    border-bottom: var(--pf-rule);
}

/*
 * La proporcion la lleva la IMAGEN, no la caja. Con `.pf-frame` la caja suma
 * 1,75 rem de barra arriba, asi que un `aspect-ratio` en la caja se lo repartia
 * entre la barra y la captura y cada tarjeta recortaba un trozo distinto.
 * `object-position: top` deja a la vista la cabecera de la web, que es lo que
 * identifica la captura.
 */
.pf-card-portafolio__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

/* Sin captura: el dibujo de una ventana, centrado y en tinta atenuada, en lugar
   de un rectangulo gris liso. */
.pf-card-portafolio__media--vacia {
    display: grid;
    place-items: center;
    padding: var(--pf-space-md);
    color: var(--pf-color-text-muted);
}

.pf-card-portafolio__placeholder {
    width: 60%;
    max-width: 10rem;
    height: auto;
}

.pf-card-portafolio__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--pf-space-2xs);
    padding: var(--pf-space-md);
}

.pf-card-portafolio__categoria {
    margin: 0;
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-medium);
    color: var(--pf-color-text-muted);
}

.pf-card-portafolio__title {
    margin: 0;
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-snug);
}

.pf-card-portafolio__link {
    color: inherit;
    text-decoration: none;
}

/* Zona de activacion de toda la tarjeta sin duplicar el enlace en el arbol
   de accesibilidad: el destino real sigue siendo el titulo. */
.pf-card-portafolio__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pf-card-portafolio__link:focus-visible {
    outline: none;
}

/* Entradilla: las dos frases del `resumen`, enteras y sin recortar (#140).
   Es lo que cuenta el caso en el listado, asi que va con el color del cuerpo,
   no con el atenuado de la linea de contexto. */
.pf-card-portafolio__resumen {
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text);
}

/* Linea de contexto: «{cliente} · {sector}» o, anonimizado, «{sector} · {tamaño}». */
.pf-card-portafolio__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-3xs);
    margin: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

/* Primera cifra de resultados, solo cuando el caso la tiene. Empujada al pie
   de la tarjeta para que las tarjetas de una fila alineen abajo. */
.pf-card-portafolio__resultado {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-3xs);
    margin: auto 0 0;
    padding-top: var(--pf-space-xs);
}

.pf-card-portafolio__cifra {
    font-size: var(--pf-text-xl);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-heading);
}

.pf-card-portafolio__etiqueta {
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .pf-card-portafolio {
        transition: none;
    }
}