/* 
 * Resources Page Styles (Revinova.com Method)
 * Uses Tailwind for most layout, but custom classes for specific components.
 */

/* Hero Banner */
.resources-banner {
    background-size: cover;
    background-position: center;
}

/* Tabs Navigation */
.resources-tab-link {
    color: #9CA3AF;
    border-bottom: 2px solid transparent;
}

.resources-tab-link.active {
    color: #1D2632;
    border-bottom-color: #FC5D41;
}

/* Resource Cards */
.resource-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-4px);
}

/* Pagination */
.pagination-container .active {
    background-color: #1D2632;
    color: white;
    border-color: #1D2632;
}

/* Recent Post Tooltip */
.recent-post-tooltip {
    z-index: 10000;
    pointer-events: none;
    max-width: 250px;
    line-height: 1.4;
}

.recent-post-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #1D2632 transparent;
}

/* Hide inactive tab panes */
.resources-tab-pane {
    display: none;
}

.resources-tab-pane.active {
    display: block;
}

/* Line Clamp fallbacks (Tailwind handles this, but safe to keep) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loader Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* RTL/Responsive adjustments as needed */
@media (max-width: 1024px) {
    .resources-tabs-nav {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
}