/* Profile Publications - tab-specific card styling (grid layout in profile-grid-layout.css) */

/* Publication card body - proportional layout in cards-grid */
#publications-tab-pane .unified-card .card-body {
    grid-row: 2 !important; /* Second row in grid - takes remaining space */
    min-height: 0 !important; /* Remove fixed min-height */
    max-height: none !important; /* Remove fixed max-height */
    padding: 0.75em !important; /* CRITICAL: Reduced padding to fit more content */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important; /* Take remaining space */
    gap: 0.4em !important; /* Smaller gap between elements to fit more content */
    overflow: hidden !important; /* CRITICAL: No scrolling - use line-clamp for text truncation */
    box-sizing: border-box !important;
}

/* Publication card body text elements - Responsive font sizes and text truncation */
/* CRITICAL: Smaller font sizes to fit all content in limited card space */
#publications-tab-pane .unified-card .card-body .card-title,
#publications-tab-pane .cards-grid .unified-card .card-body .card-title {
    font-size: clamp(0.7rem, 2vw, 0.8rem) !important; /* Responsive: 11.2px on mobile, 12.8px on desktop - REDUCED */
    line-height: 1.2 !important; /* Tighter line height */
    margin-bottom: 0 !important; /* No margin - gap handles spacing */
    font-weight: 600 !important;
    color: #6c757d !important; /* Lighter gray */
    /* Text truncation for long titles */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Max 2 lines for title */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#publications-tab-pane .unified-card .card-body .card-subtitle,
#publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle {
    font-size: clamp(0.65rem, 1.8vw, 0.85rem) !important; /* Responsive: 10.4px on mobile, 13.6px on desktop - REDUCED */
    line-height: 1.3 !important; /* Tighter line height */
    margin-bottom: 0 !important; /* No margin - gap handles spacing */
    margin-top: 0 !important; /* No negative margin - gap handles spacing */
    color: #6c757d !important; /* Lighter gray */
    font-weight: 600 !important;
    /* Single line truncation */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#publications-tab-pane .unified-card .card-body .card-subtitle i,
#publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle i {
    color: #adb5bd !important; /* Lighter gray for icons */
    font-size: clamp(0.6rem, 1.5vw, 0.8rem) !important; /* Responsive icon size - REDUCED */
}

#publications-tab-pane .unified-card .card-body > div,
#publications-tab-pane .cards-grid .unified-card .card-body > div {
    color: #868e96 !important; /* Lighter gray */
    font-size: clamp(0.6rem, 1.8vw, 0.75rem) !important; /* Responsive: 9.6px on mobile, 12px on desktop - REDUCED */
    line-height: 1.3 !important; /* Tighter line height */
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2em !important; /* Smaller gap between spans */
    margin-bottom: 0 !important;
}

#publications-tab-pane .unified-card .card-body > div > span,
#publications-tab-pane .cards-grid .unified-card .card-body > div > span {
    color: #868e96 !important; /* Lighter gray */
    font-size: clamp(0.6rem, 1.8vw, 0.75rem) !important; /* Responsive: 9.6px on mobile, 12px on desktop - REDUCED */
    font-weight: 500 !important;
    display: block !important; /* CRITICAL: Block display to ensure vertical stacking in flex column */
    width: 100% !important; /* Full width for proper alignment */
}

#publications-tab-pane .unified-card .card-body > div > span i,
#publications-tab-pane .cards-grid .unified-card .card-body > div > span i {
    color: #adb5bd !important; /* Lighter gray for icons */
    font-size: clamp(0.55rem, 1.5vw, 0.7rem) !important; /* Responsive icon size - REDUCED */
}

/* Card subtitle - Author name with ellipsis for very long names */
#publications-tab-pane .unified-card .card-subtitle {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Lighter text colors for publication card body elements */
#publications-tab-pane .unified-card .card-body .card-title,
#publications-tab-pane .cards-grid .unified-card .card-body .card-title,
#publications-tab-pane .card.h-100.unified-card .card-body .card-title {
    color: #6c757d !important; /* Lighter gray instead of #2c3e50 */
}

#publications-tab-pane .unified-card .card-body .card-subtitle,
#publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle,
#publications-tab-pane .card.h-100.unified-card .card-body .card-subtitle {
    color: #6c757d !important; /* Lighter gray instead of #2c3e50 */
}

/* Lighter icon color in card subtitle */
#publications-tab-pane .unified-card .card-body .card-subtitle i,
#publications-tab-pane .cards-grid .unified-card .card-body .card-subtitle i,
#publications-tab-pane .card.h-100.unified-card .card-body .card-subtitle i {
    color: #adb5bd !important; /* Lighter gray instead of #6c757d */
}

/* Lighter color for publisher and page count spans */
#publications-tab-pane .unified-card .card-body div > span,
#publications-tab-pane .cards-grid .unified-card .card-body div > span,
#publications-tab-pane .card.h-100.unified-card .card-body div > span {
    color: #868e96 !important; /* Lighter gray instead of #495057 */
}

/* Lighter color for any text in card body divs */
#publications-tab-pane .unified-card .card-body > div,
#publications-tab-pane .cards-grid .unified-card .card-body > div,
#publications-tab-pane .card.h-100.unified-card .card-body > div {
    color: #868e96 !important;
}

/* Additional selectors for spans with inline styles */
#publications-tab-pane .unified-card .card-body > div > span[style*="color"],
#publications-tab-pane .cards-grid .unified-card .card-body > div > span[style*="color"],
#publications-tab-pane .card.h-100.unified-card .card-body > div > span[style*="color"] {
    color: #868e96 !important; /* Override inline color styles */
}

/* Enhanced description text styling */
.description-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: 2.8em;
}

/* Status badge styling */
.unified-card .status-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap !important; /* Prevent text from wrapping - keep on one line */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
}

/* Card Actions */
.card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: flex;
    gap: 5px;
    z-index: 20;
}

/* !important to override review-display.css global .card-actions { opacity: 0 !important } */
#publications-tab-pane .unified-card:hover .card-actions,
.unified-card.publication-card:hover .card-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    visibility: visible !important;
}

/* Expanded state + mobile publication-additional-info rules below
   When cards are expanded (.mobile-expanded), increase font sizes
   CRITICAL: Override viewport-based (vw) units with rem for proportional scaling
   ============================================ */

/* Expanded publication card body - larger font size */
.cards-grid > .mobile-expanded .card-body,
.cards-grid > .mobile-expanded .unified-card .card-body,
#publications-tab-pane .cards-grid > .mobile-expanded .card-body,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body {
    font-size: 1.2rem !important; /* Larger base font size for better readability when expanded */
    padding: var(--card-body-padding-expanded, 1.25em 1.5em) !important; /* Larger padding in expanded state */
}

/* Publication cards in expanded state - align body padding across Profile + Explore */
.cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body,
#publications-tab-pane .cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body {
    padding: var(--card-body-padding-expanded-publication, 1rem) !important;
}

/* Profile-only: offset container padding to match Explore left edge */
#publications-tab-pane .cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body {
    padding-left: calc(var(--card-body-padding-expanded-publication, 1rem) - 5px) !important;
}

/* Expanded publication card body text elements - larger font size */
/* CRITICAL: Override viewport-based and inline font sizes with higher specificity */
.cards-grid > .mobile-expanded .card-body > div,
.cards-grid > .mobile-expanded .card-body > div > span,
.cards-grid > .mobile-expanded .unified-card .card-body > div,
.cards-grid > .mobile-expanded .unified-card .card-body > div > span,
#publications-tab-pane .cards-grid > .mobile-expanded .card-body > div,
#publications-tab-pane .cards-grid > .mobile-expanded .card-body > div > span,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body > div > span,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body > div,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body > div > span,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body > div,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body > div > span {
    font-size: 1.05rem !important; /* Larger than normal state - use rem instead of vw, override inline styles */
    line-height: 1.6 !important;
    white-space: normal !important; /* Allow wrapping in expanded state */
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Expanded publication additional info icons - unify size across Profile + Explore */
.cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body > div > span i,
#publications-tab-pane .cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body > div > span i,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body > div > span i,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body > div > span i {
    font-size: var(--card-publication-expanded-icon-size, 0.95rem) !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Expanded publication card subtitle - larger font size */
/* CRITICAL: Override viewport-based font sizes with higher specificity */
.cards-grid > .mobile-expanded .card-subtitle,
.cards-grid > .mobile-expanded .unified-card .card-subtitle,
.cards-grid > .mobile-expanded .card-body .card-subtitle,
.cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle,
#publications-tab-pane .cards-grid > .mobile-expanded .card-subtitle,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-subtitle,
#publications-tab-pane .cards-grid > .mobile-expanded .card-body .card-subtitle,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-subtitle,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-subtitle,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body .card-subtitle,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-subtitle,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body .card-subtitle {
    font-size: 1.1rem !important; /* Larger than normal state - use rem instead of vw */
    line-height: 1.7 !important;
    -webkit-line-clamp: none !important; /* Remove line clamp in expanded state */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important; /* Allow wrapping */
}

/* Expanded publication card title - larger font size */
/* CRITICAL: Override viewport-based font sizes with higher specificity */
.cards-grid > .mobile-expanded .card-title,
.cards-grid > .mobile-expanded .unified-card .card-title,
.cards-grid > .mobile-expanded .card-body .card-title,
.cards-grid > .mobile-expanded .unified-card .card-body .card-title,
#publications-tab-pane .cards-grid > .mobile-expanded .card-title,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-title,
#publications-tab-pane .cards-grid > .mobile-expanded .card-body .card-title,
#publications-tab-pane .cards-grid > .mobile-expanded .unified-card .card-body .card-title,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-title,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body .card-title,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-title,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body .card-title {
    font-size: 1.3rem !important; /* Larger than normal state - use rem instead of vw */
    line-height: 1.6 !important;
    -webkit-line-clamp: none !important; /* Remove line clamp in expanded state */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important; /* Allow wrapping */
}

/* ==========================================================================
   MOBILE RESPONSIVENESS - Publication Card Additional Info
   Hide additional publication information (publisher, pages, publication source, year) on mobile
   Show when card is expanded (mobile-expanded class)
   ========================================================================== */

/* Hide additional publication info on mobile and tablet screens (max-width: 768px) */
/* This applies to both Profile and Explore publication cards */
@media (max-width: 768px) {
    /* Profile publication cards */
    #publications-tab-pane .unified-card .card-body .publication-additional-info,
    #publications-tab-pane .cards-grid .unified-card .card-body .publication-additional-info {
        display: none !important;
    }
    
    /* Explore publication cards */
    #exploreFeed .explore-card[data-type="publication"] .unified-card .card-body .publication-additional-info,
    #exploreFeed .explore-card-wrapper .explore-card[data-type="publication"] .unified-card .card-body .publication-additional-info {
        display: none !important;
    }
    
    /* CRITICAL: Show publication-additional-info when card is expanded on mobile */
    /* Profile publication cards - expanded state */
    #publications-tab-pane .unified-card.mobile-expanded .card-body .publication-additional-info,
    #publications-tab-pane .cards-grid .unified-card.mobile-expanded .card-body .publication-additional-info,
    #publications-tab-pane .cards-grid > .mobile-expanded .card-body .publication-additional-info,
    #publications-tab-pane .cards-grid > .mobile-expanded.unified-card .card-body .publication-additional-info {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--card-publication-info-gap, 0.4em) !important;
        margin-top: var(--card-publication-info-margin-top, 0.5em) !important;
    }
    
    /* Explore publication cards - expanded state */
    #exploreFeed .explore-card.mobile-expanded[data-type="publication"] .unified-card .card-body .publication-additional-info,
    #exploreFeed .explore-card-wrapper.mobile-expanded .explore-card[data-type="publication"] .unified-card .card-body .publication-additional-info,
    #exploreFeed .explore-card-wrapper .explore-card.mobile-expanded[data-type="publication"] .unified-card .card-body .publication-additional-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--card-publication-info-gap, 0.4em) !important;
        margin-top: var(--card-publication-info-margin-top, 0.5em) !important;
    }
    
    /* Enhanced readability for expanded publication additional info */
    .mobile-expanded .card-body .publication-additional-info span {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: var(--card-publication-info-color, #495057) !important;
        width: 100% !important;
        opacity: 1 !important;
    }
    
    .mobile-expanded .card-body .publication-additional-info span i {
        color: var(--card-publication-info-icon-color, #6c757d) !important;
        margin-right: 0.4em !important;
        opacity: 1 !important;
    }
}

/* Expanded publication status badge spacing - match Profile + Explore */
.cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body .badge,
#publications-tab-pane .cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body .badge,
#exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id] .card-body .badge,
#exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] .card-body .badge {
    margin-top: var(--card-publication-badge-gap, 0.4em) !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
}

/* Hide status badge (Published/Draft/In Progress etc.) in card body on mobile when cards are in three-in-a-row and NOT expanded */
@media (max-width: 480px) {
    #exploreFeed .explore-card-wrapper:not(.mobile-expanded) .card-body .badge,
    #exploreFeed .explore-card-wrapper:not(.mobile-expanded) .unified-card .card-body .badge,
    #exploreFeed .explore-card-wrapper:not(.mobile-expanded) .study-card .card-body .badge {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #publications-tab-pane .cards-grid > .unified-card:not(.mobile-expanded) .card-body .badge,
    #publications-tab-pane .cards-grid > *:not(.mobile-expanded) .card-body .badge,
    #studies-tab-pane .cards-grid > .unified-card:not(.mobile-expanded) .card-body .badge,
    #studies-tab-pane .cards-grid > .study-card:not(.mobile-expanded) .card-body .badge {
        display: none !important;
    }
}