/**
 * Estilos para el listado de empleos
 * Diseño moderno basado en cards profesionales
 */

/* Contenedor principal de la grilla - CENTRADO */
.awsm-jobs-listing.awsm-grid-wrapper {
    display: grid;
    gap: 30px;
    margin: 40px auto;
    width: 100%;
    max-width: 1200px; /* Asegura que no se desborde del contenedor estándar */
    padding: 0;
    align-items: stretch;
}

/* Configuración de columnas según el atributo */
.awsm-grid-wrapper.awsm-grid-cols-1 {
    grid-template-columns: 1fr;
}

.awsm-grid-wrapper.awsm-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.awsm-grid-wrapper.awsm-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tarjeta individual de empleo - Diseño profesional */
.awsm-job-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    min-height: 300px;
    position: relative;
}
.hub-jobs-shortcode-container .awsm-job-item {
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
}


.awsm-job-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #999;
}

/* Columna izquierda - Título */
.awsm-grid-left-col {
    /*
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    */
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

.awsm-job-post-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: inherit;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

.awsm-job-item:hover .awsm-job-post-title {
    color: inherit;
    opacity: 0.8;
}

/* Columna derecha - Especificaciones */
.awsm-grid-right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

.awsm-job-specification-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

/* Override: Asegurar que los divs dentro de job-specification-wrapper tengan fondo blanco
   Esta regla es específica para el consumer y sobrescribe cualquier CSS externo */
.hub-jobs-shortcode-container .awsm-job-specification-wrapper > div {
    background-color: #fff !important;
    padding: 0px !important;
}

/* Items de especificación */
.awsm-job-specification-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

/* Marcador de especificación (carácter) */
.awsm-job-specification-marker {
    display: inline-block;
    width: 14px;
    min-width: 14px;
    margin-right: 4px;
    opacity: 0.7;
    line-height: 1.4;
    flex-shrink: 0;
}

.awsm-job-item .awsm-job-specification-wrapper .awsm-job-specification-item i {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: currentColor !important;
    margin-top: 2px !important;
    margin-right: 4px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    line-height: 14px !important;
    opacity: 0.7 !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}

/* Términos (skills, tipos, etc.) - ahora en un solo span */
.awsm-job-specification-terms {
    display: inline;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

/* Botón "More Details" */
.awsm-job-more-container {
    margin-top: auto;
    padding-top: 12px;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

.awsm-job-more {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-weight: 400;
    font-size: 13px;
    transition: all 0.2s ease;
    pointer-events: none; /* Permitir que el click pase al enlace padre */
}

/* Ocultar todas las flechas */
.awsm-job-more span,
.awsm-job-more span::before,
.awsm-job-more span::after,
.awsm-job-more-container .awsm-job-more span::before,
.awsm-job-more-container .awsm-job-more span::after {
    content: none !important;
    display: none !important;
}

.awsm-job-item:hover .awsm-job-more {
    opacity: 0.7;
}

/* Font Awesome icons - handled by Font Awesome library */

/* Mensaje de no resultados */
.awsm-jobs-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 12px;
    margin: 40px auto;
    max-width: 600px;
}

.awsm-jobs-no-results p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Responsive: 2 columnas en tablets */
@media (max-width: 992px) {
    .awsm-grid-wrapper.awsm-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Scoped responsive para 992px */
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .awsm-jobs-listing.awsm-grid-wrapper {
        gap: 24px;
        padding: 0 16px;
    }
}

/* Responsive: 1 columna en móviles */
@media (max-width: 768px) {
    .awsm-grid-wrapper.awsm-grid-cols-2,
    .awsm-grid-wrapper.awsm-grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Scoped responsive para 768px */
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-2,
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .awsm-jobs-listing.awsm-grid-wrapper {
        gap: 20px;
        margin: 24px auto;
    }

    .awsm-job-post-title {
        font-size: 15px;
    }

    .awsm-job-item {
        padding: 18px;
        min-height: auto;
    }
}
/* ==========================================
   PAGINACIÓN
   ========================================== */

/* Contenedor principal del paginador */
.hub-jobs-pagination {
    margin: 40px auto 20px;
    max-width: 1200px;
    padding: 0 20px;
}

/* Wrapper de los controles de paginación */
.hub-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Estilos base para todos los links/botones de paginación */
.hub-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    gap: 6px;
}

.hub-pagination-link:hover {
    background: #f5f5f5;
    border-color: #999;
    color: inherit;
}

/* Botones Anterior/Siguiente */
.hub-pagination-prev,
.hub-pagination-next {
    padding: 0 16px;
}

/* Números de página */
.hub-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hub-pagination-number {
    min-width: 40px;
    font-weight: 600;
}

/* Página actual */
.hub-pagination-current {
    background: #333;
    color: #fff;
    border-color: #333;
    cursor: default;
}

.hub-pagination-current:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Links deshabilitados */
.hub-pagination-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Puntos suspensivos */
.hub-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: inherit;
    font-size: 14px;
    opacity: 0.6;
}

/* Información de la paginación */
.hub-pagination-info {
    display: none !important; /* Simplificación UI: solo números y navegación */
}

/* Responsive: Ajustes para móvil */
@media (max-width: 768px) {
    .hub-jobs-pagination {
        margin: 32px auto 16px;
        padding: 0 16px;
    }
    
    .hub-pagination-wrapper {
        gap: 6px;
    }
    
    .hub-pagination-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
    
    .hub-pagination-prev,
    .hub-pagination-next {
        padding: 0 12px;
    }
    
    /* Ocultar texto "Anterior/Siguiente" en móvil, solo mostrar flechas */
    .hub-pagination-text {
        display: none;
    }
    
    .hub-pagination-number {
        min-width: 36px;
    }
    
    .hub-pagination-info {
        font-size: 12px;
    }
}

/* Responsive: Tablets */
@media (max-width: 992px) and (min-width: 769px) {
    .hub-pagination-link {
        font-size: 13px;
    }
}
/* ==========================================
   FILTROS DE BÚSQUEDA
   ========================================== */

/* Contenedor principal de filtros */
.hub-jobs-filters-wrapper {
    margin: 0 0 40px;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Formulario de filtros */
.hub-jobs-filters-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Fila de filtros */
.hub-filters-row {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 1200px) {
    .hub-filters-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .hub-filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .hub-filters-row {
        grid-template-columns: 1fr;
    }
}

/* Campo de filtro individual */
.hub-filter-field {
    position: relative;
}

/* Inputs y selects base */
.hub-filter-input,
.hub-filter-select-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    transition: all 0.2s ease;
    font-family: inherit;
}

.hub-filter-input:focus,
.hub-filter-select-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Input de búsqueda */
.hub-filter-search .hub-filter-input {
    padding-left: 14px;
}

.hub-filter-search .hub-filter-input::placeholder {
    color: #9ca3af;
}


.hub-filter-select-input:hover {
    border-color: #9ca3af;
}

/* Contenedor de botones de acción */
.hub-filters-actions {
    display: none !important; /* Auto-submit eliminó necesidad de botones */
}

/* Botones de filtros */
.hub-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

/* Botón Submit (Aplicar Filtros) */
.hub-filter-submit {
    background: #3b82f6;
    color: #fff;
    border: 1px solid #3b82f6;
}

.hub-filter-submit:hover {
    background: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.hub-filter-submit:active {
    transform: translateY(0);
}

/* Botón Reset (Limpiar Filtros) */
.hub-filter-reset {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.hub-filter-reset:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

/* Responsive: Tablets (2 columnas de filtros) */
@media (max-width: 992px) {
    .hub-filters-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .hub-jobs-filters-wrapper {
        padding: 0 16px;
        margin-bottom: 32px;
    }
    
    .hub-jobs-filters-form {
        padding: 20px;
    }
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hub-jobs-filters-wrapper {
        margin-bottom: 24px;
    }
    
    .hub-jobs-filters-form {
        padding: 16px;
    }
    
    .hub-filters-row {
        gap: 10px;
    }
    
    .hub-filter-input,
    .hub-filter-select-input {
        height: 42px;
        font-size: 14px;
    }
    
    .hub-filters-actions {
        flex-direction: column;
    }
    
    .hub-filter-button {
        width: 100%;
        height: 42px;
    }
}

/* Estados de carga y disabled */
.hub-filter-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hub-filter-input:disabled,
.hub-filter-select-input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

.hub-jobs-shortcode-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box !important;
    overflow: hidden;
}

/* CORREGIDO: Selector universal reemplazado por selectores específicos
   para evitar alterar box-sizing de elementos inesperados */
.hub-jobs-shortcode-container form,
.hub-jobs-shortcode-container div,
.hub-jobs-shortcode-container input,
.hub-jobs-shortcode-container select,
.hub-jobs-shortcode-container button {
    box-sizing: border-box !important;
}

.hub-jobs-shortcode-container .awsm-jobs-listing {
    margin: 40px auto !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.hub-jobs-shortcode-container .awsm-grid-wrapper {
    display: grid !important;
}

/* Configuración dinámica de columnas según clase */
.hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-1 {
    grid-template-columns: 1fr !important;
}

.hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.hub-jobs-shortcode-container .awsm-job-item {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.hub-jobs-shortcode-container .awsm-grid-left-col,
.hub-jobs-shortcode-container .awsm-grid-right-col {
    min-width: 0 !important;
}

.hub-jobs-shortcode-container .awsm-job-post-title,
.hub-jobs-shortcode-container .awsm-job-specification-terms {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* evitar que textos larguísimos rompan altura */
.hub-jobs-shortcode-container .awsm-job-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Recortar la lista de skills a 3 líneas: empleos con muchos skills
   quedaban con la card mucho más alta que los que tienen pocos.
   Mismo recurso que el título de arriba, acá acotado solo al item de
   skills (job_type/category/location suelen ser cortos y no lo necesitan). */
.awsm-job-specification-skills-needed .awsm-job-specification-terms {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* boton reset */
.hub-filter-search {
    position: relative;
}

.hub-filter-search .hub-filter-input {
    padding-right: 44px;
}

.hub-filter-search .hub-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #6b7280;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hub-filter-search .hub-search-clear:hover {
    background: #374151;
}

/* Fix select arrow: remove duplicated native/theme arrow and use only one custom arrow */
.hub-jobs-shortcode-container .hub-filter-select {
    position: relative;
}

.hub-jobs-shortcode-container select.hub-filter-select-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    background-color: #fff !important;
    padding-right: 20px !important;
    cursor: pointer;
}

.hub-jobs-shortcode-container select.hub-filter-select-input::-ms-expand {
    display: none !important;
}

.hub-jobs-shortcode-container .hub-filter-select::before,
.hub-jobs-shortcode-container .hub-filter-select::after {
    content: none !important;
    display: none !important;
}

.hub-jobs-shortcode-container .hub-filter-select .hub-filter-select-input {
    background-image: none !important;
}

.hub-jobs-shortcode-container .hub-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important;
}

.hub-filter-input {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    color: inherit;
}

/* Hover igual que select */
.hub-filter-input:hover {
    border-color: #9ca3af;
}

/* Focus prolijo */
.hub-filter-input:focus {
    outline: none;
    border-color: #9ca3af;
    box-shadow: none;
}

#hub-filter-search,
.hub-filter-select-input {
    height: 44px !important;
    padding: 0 12px;
    font-size: 14px;
    box-sizing: border-box;
}

.hub-filter-input {
    line-height: normal;
}

.hub-filter-select-input {
    padding-right: 1px;
}

.awsm-job-item h2.awsm-job-post-title {
    margin: 0 0 15px;
    font-size: 18px;
    text-align: left;
}

.awsm-job-item {
    text-decoration: none !important;
}

.awsm-job-item:hover,
.awsm-job-item:focus,
.awsm-job-item:active {
    text-decoration: none !important;
}


.awsm-job-specification-icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    margin-right: 4px;
    flex-shrink: 0;
    opacity: 0.7;
    vertical-align: middle;
}

/* ==========================================
   SCROLL INFINITO
   ========================================== */

/* Cuando el JS activa el scroll infinito, el paginador clásico queda oculto
   (sigue en el DOM como fallback si el JS no corre) */
.hub-jobs-infinite-active .hub-jobs-pagination {
    display: none;
}

.hub-jobs-scroll-sentinel {
    height: 1px;
}

.hub-jobs-scroll-hidden {
    display: none;
}

.hub-jobs-scroll-end {
    text-align: center;
    padding: 24px 20px;
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.hub-jobs-scroll-error {
    margin-top: 24px;
}

/* Skeleton: mismo layout que una card real, sin contenido */
.hub-job-skeleton {
    background: #f3f4f6;
    border-color: #eee;
    pointer-events: none;
    overflow: hidden;
    position: relative;
}

.hub-job-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: hub-job-skeleton-shimmer 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hub-job-skeleton::after {
        animation: none;
    }
}

@keyframes hub-job-skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================
   MOBILE OVERRIDE: Forzar 1 columna en mobile
   ========================================== */
@media (max-width: 768px) {
    /* Override: Todas las variantes de grid deben ser 1 columna en mobile */
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-1,
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-2,
    .hub-jobs-shortcode-container .awsm-grid-wrapper.awsm-grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}