/**
 * Archivo de Casos de éxito (/casos-de-exito/). Solo esta plantilla la
 * carga —ver inc/enqueue.php— así que las clases no llevan prefijo por
 * page para no chocar con nada, pero tampoco se reusan en otro lado a
 * propósito. Mismo criterio y misma estructura que blog.css.
 */

.casos-listado {
    padding-block: var(--space-64);
}

.casos-header {
    margin-bottom: var(--space-32);
}

.casos-header .eyebrow {
    display: block;
    margin-bottom: var(--space-8);
    font-size: var(--text-label-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.casos-header h1 {
    margin: 0 0 var(--space-12);
    font-size: var(--text-display-h1);
}

.casos-header p {
    margin: 0;
    max-width: 60ch;
    color: var(--color-gray-01);
}

.casos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32) var(--space-24);
}

@media (max-width: 1024px) {
    .casos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .casos-grid {
        grid-template-columns: 1fr;
    }
}

.caso-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.caso-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
    transform: translateY(-2px);
}

.caso-card-media {
    display: block;
    position: relative;
    aspect-ratio: 7 / 3;
    background: var(--color-bg-muted);
    overflow: hidden;
}

/* position:absolute y no width/height:100% en flujo normal: con el `img`
   en flujo, el navegador termina dimensionando la caja según el tamaño
   propio de la imagen (sus atributos width/height) en vez de respetar el
   aspect-ratio de acá arriba — pasa siempre que la miniatura no viene ya
   recortada 7:3 exacto, que es justo el caso de los casos de éxito: sus
   fotos no tienen generado el tamaño `andexport-blog-tarjeta` (importadas
   antes de que existiera, quedaron en su recorte cuadrado de 300×300) y sin
   esto la tarjeta se veía cuadrada en vez de la franja ancha del blog. */
.caso-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caso-card-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-gray-02);
}

.caso-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-24);
}

.caso-card-cliente {
    margin: 0 0 var(--space-8);
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

.caso-card-titulo {
    margin: 0 0 var(--space-12);
    font-size: var(--text-title-h5);
    line-height: 1.3;
}

.caso-card-titulo a {
    color: var(--color-ink);
    text-decoration: none;
}

.caso-card-titulo a:hover,
.caso-card-titulo a:focus-visible {
    color: var(--color-brand-red);
}

.caso-card-extracto {
    margin: 0 0 var(--space-16);
    font-size: var(--text-body);
    color: var(--color-gray-01);
    line-height: 1.6;
}

.caso-card-extracto p {
    margin: 0;
}

.caso-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: auto;
    font-size: var(--text-label-sm);
    font-weight: 700;
    color: var(--color-brand-red);
    text-decoration: none;
}

.caso-card-link svg {
    transition: transform 0.2s ease;
}

.caso-card:hover .caso-card-link svg {
    transform: translateX(3px);
}

.casos-vacio {
    color: var(--color-muted);
}

/* Paginación: lista de números + prev/next, mismo criterio de foco visible
   que el resto del sitio (outline en :focus-visible, no solo color). */
.casos-paginacion {
    margin-top: var(--space-48);
    display: flex;
    justify-content: center;
}

.casos-paginacion ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.casos-paginacion a,
.casos-paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--space-12);
    border-radius: var(--radius-standard);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
}

.casos-paginacion a {
    background: var(--color-bg-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.casos-paginacion a:hover,
.casos-paginacion a:focus-visible {
    background: var(--color-brand-red);
    color: var(--color-white);
}

.casos-paginacion .current {
    background: var(--color-brand-red);
    color: var(--color-white);
}