/**
 * Ficha de Informacion: filete lateral + enlaces en pildora.
 *
 * Todo el color y las medidas salen de variables declaradas en la raiz de la ficha. Asi los
 * controles de Elementor escriben una sola declaracion en el wrapper y los estados de hover se
 * resuelven aqui, sin necesidad de un selector por estado ni de !important.
 */
.priego-info-card {
    --pic-accent: rgba(37, 60, 120, .14);
    --pic-accent-hover: #c89628; /* Oro Priego */
    --pic-accent-width: 2px;
    --pic-title: #122236; /* Priego Deep */
    --pic-desc: #475569;
    --pic-pill-text: #253c78; /* Navy Priego */
    --pic-pill-bg: transparent;
    --pic-pill-border: #253c78;
    --pic-pill-text-hover: #ffffff;
    --pic-pill-bg-hover: #253c78;
    --pic-pill-border-hover: #253c78;
    --pic-file-text: #c89628;
    --pic-file-bg: transparent;
    --pic-file-border: #c89628;
    --pic-file-text-hover: #ffffff;
    --pic-file-bg-hover: #c89628;
    --pic-file-border-hover: #c89628;
    --pic-pill-radius: 999px;
    --pic-pill-border-width: 1.5px;
    --pic-ease: cubic-bezier(.4, .05, .25, 1);

    border-left: var(--pic-accent-width) solid var(--pic-accent);
    display: flex;
    flex-direction: column;
    /* Rellena el hueco que le da su contenedor. Si el padre no tiene altura definida (una ficha
       suelta), el 100% se ignora sin efectos secundarios. */
    height: 100%;
    /* El filete necesita sobresalir por arriba y por abajo del texto: sin aire, la linea nace y
       muere pegada al titulo y al ultimo enlace, y se lee como un corte y no como un margen. */
    padding: 1.1rem 0 1.1rem 1.6rem;
    transition: border-color .5s var(--pic-ease);
}

/* La altura de la fila la reparte el contenedor flex de Elementor, pero se queda en el envoltorio
   del widget: sin esto la ficha mide su contenido y los enlaces de cada tarjeta acaban a distinta
   altura. Va en la hoja y no en un control porque alinearlos es lo correcto siempre. */
.elementor-widget-priego-info-card,
.elementor-widget-priego-info-card > .elementor-widget-container {
    height: 100%;
}

/* :focus-within ademas de :hover: navegando con teclado el filete tambien se enciende y se ve
   en que ficha estas antes de leer el enlace enfocado. */
.priego-info-card:hover,
.priego-info-card:focus-within {
    border-left-color: var(--pic-accent-hover);
}

.priego-info-card__title {
    color: var(--pic-title);
    font-family: "Rethink Sans", sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.priego-info-card__desc {
    color: var(--pic-desc);
    font-size: 1rem;
    line-height: 1.7;
    margin: .6rem 0 0;
    text-wrap: pretty;
}

/* La separacion con el texto va en padding y el empuje al pie en margin-top: auto. Si fuera todo
   margin, `auto` valdria 0 cuando no sobra espacio y las pildoras se pegarian al parrafo en las
   fichas que no se estiran. Los margenes van en el elemento que sigue, no en el que precede, para
   que una ficha sin descripcion o sin enlaces no arrastre huecos sobrantes. */
.priego-info-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    margin: auto 0 0;
    padding: 1.15rem 0 0;
}

.priego-info-card__link {
    background-color: var(--pic-pill-bg);
    border: var(--pic-pill-border-width) solid var(--pic-pill-border);
    border-radius: var(--pic-pill-radius);
    color: var(--pic-pill-text);
    display: inline-block;
    font-family: "Rethink Sans", sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .5rem 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .4s var(--pic-ease),
                border-color .4s var(--pic-ease),
                color .4s var(--pic-ease);
}

.priego-info-card__link:hover,
.priego-info-card__link:focus-visible {
    background-color: var(--pic-pill-bg-hover);
    border-color: var(--pic-pill-border-hover);
    color: var(--pic-pill-text-hover);
}

.priego-info-card__link:focus-visible {
    outline: 2px solid var(--pic-accent-hover);
    outline-offset: 3px;
}

/* Descargas: mismo componente, paleta propia, para distinguir un PDF de una pagina de un vistazo */
.priego-info-card__link--file {
    background-color: var(--pic-file-bg);
    border-color: var(--pic-file-border);
    color: var(--pic-file-text);
}

.priego-info-card__link--file:hover,
.priego-info-card__link--file:focus-visible {
    background-color: var(--pic-file-bg-hover);
    border-color: var(--pic-file-border-hover);
    color: var(--pic-file-text-hover);
}