/* ==========================================================================
   CARD SYSTEM CORE
   Shared base styles + typography for all card types
   Single source of truth for core visuals and text sizing
   ========================================================================== */

/* Single source of truth for card proportions: all four types use the same
   aspect ratio and same grid row split (header 60% | body 30% | footer 10%). */
:root {
    --card-aspect-ratio-unified: 1 / 1.8;
    --card-aspect-ratio-expanded: var(--card-aspect-ratio-unified);
    --card-expanded-height-multiplier: 1.8;
    --card-grid-rows-review: minmax(0, 3fr) minmax(0, 1.5fr) minmax(var(--card-footer-min-height, 2.5rem), 0.5fr);
    --card-grid-rows-post: minmax(0, 3fr) minmax(0, 1.5fr) minmax(var(--card-footer-min-height, 2.5rem), 0.5fr);
    --card-grid-rows-publication: minmax(0, 3fr) minmax(0, 1.5fr) minmax(var(--card-footer-min-height, 2.5rem), 0.5fr);
    --card-grid-rows-study: minmax(0, 3fr) minmax(0, 1.5fr) minmax(var(--card-footer-min-height, 2.5rem), 0.5fr);
    --card-grid-rows-expanded: minmax(0, 3fr) minmax(0, 1.5fr) minmax(var(--card-footer-min-height, 40px), 0.5fr);
    --card-aspect-ratio-review: var(--card-aspect-ratio-unified);
    --card-footer-padding: 8px 16px;
    --card-footer-padding-x: clamp(10px, 3vw, 16px);
    --card-footer-padding-y: 8px;
    --card-header-min-height: 3rem;
    /* Fixed header height for review cards in grid on desktop (article/book/author variants match) */
    --card-header-fixed-height-desktop: 200px;
    --card-body-min-height: 2.5rem;
    --card-footer-min-height: 2.5rem;
    --card-footer-expanded-min-height: 4.125rem;
    --card-content-padding: 16px 16px 12px 16px;
    --card-header-padding: 20px;
    --card-body-padding-post: 1em;
    --card-body-padding-publication: 0.75em;
    --card-body-gap-publication: 0.4em;
    --card-body-padding-study: clamp(10px, 0.75em, 16px);
    --card-body-padding-expanded: 1.25em 1.5em;
    --card-body-padding-expanded-publication: clamp(10px, 3vw, 16px);
    --card-body-font-size-expanded: 1.2rem;
    --card-body-line-height-expanded: 1.7;
    --card-publication-expanded-icon-size: 0.95rem;
    --card-publication-info-gap: 0.4em;
    --card-publication-info-margin-top: 0.5em;
    --card-publication-badge-gap: 0.4em;
    --card-publication-info-color: #495057;
    --card-publication-info-icon-color: #6c757d;
}

/* Shared card base (posts/publications/studies/reviews) */
.unified-card,
.review-card,
.post-card,
.publication-card,
.study-card {
    border-radius: var(--profile-card-radius, 12px);
    box-shadow: var(--profile-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    background: var(--profile-card-bg, #ffffff);
    border: var(--profile-card-border, 1px solid rgba(0, 0, 0, 0.08));
    transition: var(--profile-card-transition, transform 0.3s ease, box-shadow 0.3s ease);
}

.unified-card {
    width: 100%;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    margin: 0;
}

.unified-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Profile BEM post card block — same surface as .unified-card.post-card */
.cards-grid .cards-grid__post-card {
    border-radius: var(--profile-card-radius, var(--lc-radius-lg, 12px));
    box-shadow: var(--profile-card-shadow, var(--lc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1)));
    background: var(--profile-card-bg, var(--lc-card-bg, #ffffff));
    border: var(--profile-card-border, var(--lc-card-border, 1px solid rgba(0, 0, 0, 0.08)));
    transition: var(--profile-card-transition, transform 0.3s ease, box-shadow 0.3s ease);
    width: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    contain: layout style;
    flex: unset;
}

.cards-grid .cards-grid__post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-card-shadow-hover, 0 8px 25px rgba(0, 0, 0, 0.15));
}

.cards-grid .cards-grid__post-card.h-100 {
    height: auto;
}

/* Unified Card Image - Proportional Height */
.unified-card .card-img-top {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transition: transform 0.3s ease;
    background-color: #f8f9fa;
    display: block;
    flex-shrink: 0;
}

.unified-card:hover .card-img-top,
.unified-card .card-cover-image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unified-card .card-cover-link {
    display: block;
    text-decoration: none;
    position: relative;
}

.unified-card .card-cover-image {
    cursor: pointer;
}

.view-details-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

@media (hover: hover) and (min-width: 769px) {
    .unified-card .card-cover-link:hover .card-cover-image,
    .unified-card .card-cover-link:hover .card-img-top {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .unified-card .card-cover-link:hover .view-details-overlay {
        opacity: 1;
    }
}

/* Review footer buttons: no borders in all contexts */
.cards-grid .review-footer .btn,
.cards-grid .review-footer .btn-sm,
.cards-grid .review-footer span.btn,
.cards-grid .review-footer .btn-outline-secondary {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Explore-specific override to ensure no outline borders */
#exploreFeed .review-footer .btn,
#exploreFeed .review-footer .btn-sm,
#exploreFeed .review-footer span.btn,
#exploreFeed .review-footer .btn-outline-secondary {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Remove focus/active outlines in review footer buttons */
.cards-grid .review-footer .btn:focus,
.cards-grid .review-footer .btn:active,
.cards-grid .review-footer .btn-sm:focus,
.cards-grid .review-footer .btn-sm:active,
.cards-grid .review-footer .btn-outline-secondary:focus,
.cards-grid .review-footer .btn-outline-secondary:active,
#exploreFeed .review-footer .btn:focus,
#exploreFeed .review-footer .btn:active,
#exploreFeed .review-footer .btn-sm:focus,
#exploreFeed .review-footer .btn-sm:active,
#exploreFeed .review-footer .btn-outline-secondary:focus,
#exploreFeed .review-footer .btn-outline-secondary:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Unified Card Title */
.cards-grid .cards-grid__post-card__title,
.cards-grid .post-card .card-title,
.cards-grid .unified-card.post-card .card-title,
.cards-grid .unified-card .card-title,
.cards-grid .publication-card .card-title,
.cards-grid .study-card .card-title,
.cards-grid h6.card-title,
.cards-grid .card-title {
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
}

/* Unified Card Subtitle */
.cards-grid .card-subtitle,
.cards-grid p.card-subtitle,
.cards-grid .cards-grid__post-card__subtitle,
.cards-grid .post-card .card-subtitle,
.cards-grid .unified-card.post-card .card-subtitle,
.cards-grid .unified-card .card-subtitle,
.cards-grid .publication-card .card-subtitle,
.cards-grid .study-card .card-subtitle {
    font-size: 0.85rem !important;
    color: #6c757d !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 1.2em !important;
    max-height: 1.2em !important;
}

/* Unified Card Text/Content */
.cards-grid .card-text,
.cards-grid .cards-grid__post-card__text,
.cards-grid .post-card .card-text,
.cards-grid .unified-card.post-card .card-text,
.cards-grid .unified-card .card-text,
.cards-grid .publication-card .card-text,
.cards-grid .study-card .card-text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    max-width: none !important;
    width: 100% !important;
    flex-grow: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    color: #6c757d !important;
}

.cards-grid .cards-grid__post-card__read-more {
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    margin-top: 0.25em !important;
    flex-shrink: 0 !important;
}

.cards-grid .cards-grid__post-card__interaction-btn {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
    padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 12px) !important;
}

/* Mobile text sizing - unified across card types */
@media (max-width: 768px) {
    .cards-grid .card-title,
    .cards-grid h6.card-title,
    .cards-grid .cards-grid__post-card__title,
    .cards-grid .post-card .card-title,
    .cards-grid .unified-card.post-card .card-title,
    .cards-grid .unified-card .card-title,
    .cards-grid .study-card .card-title,
    .cards-grid .publication-card .card-title,
    .cards-grid .review-title-text,
    .cards-grid .review-header .review-title-text {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    .cards-grid .card-subtitle,
    .cards-grid p.card-subtitle,
    .cards-grid .cards-grid__post-card__subtitle,
    .cards-grid .post-card .card-subtitle,
    .cards-grid .unified-card.post-card .card-subtitle,
    .cards-grid .unified-card .card-subtitle,
    .cards-grid .study-card .card-subtitle,
    .cards-grid .publication-card .card-subtitle,
    .cards-grid .review-header p,
    .cards-grid .review-header .review-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
    }

    .cards-grid .card-text,
    .cards-grid .cards-grid__post-card__text,
    .cards-grid .post-card .card-text,
    .cards-grid .unified-card.post-card .card-text,
    .cards-grid .unified-card .card-text,
    .cards-grid .publication-card .card-text,
    .cards-grid .study-card .card-text {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }

    /* Consistent footer height across all card types (non-expanded) */
    .cards-grid > .unified-card .card-footer,
    .cards-grid > .post-card .card-footer,
    .cards-grid > .unified-card.post-card .card-footer,
    .cards-grid > .study-card .card-footer,
    .cards-grid > .review-card .card-footer,
    .cards-grid > .new-review-card .card-footer,
    .cards-grid > .review-card .review-footer,
    .cards-grid > .new-review-card .review-footer,
    .cards-grid .review-card .review-footer,
    .cards-grid .new-review-card .review-footer {
        grid-row: 3 !important;
        grid-column: 1 !important;
        min-height: var(--card-footer-min-height, 2.5rem) !important;
        max-height: 100% !important;
        height: 100% !important;
        padding: var(--card-footer-padding, 8px 16px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .cards-grid > .review-card .review-footer,
    .cards-grid > .new-review-card .review-footer,
    .cards-grid .review-card .review-footer,
    .cards-grid .new-review-card .review-footer {
        justify-content: center !important;
    }

    /* Footer content sizing */
    .cards-grid > .unified-card .card-footer > *,
    .cards-grid > .post-card .card-footer > *,
    .cards-grid > .unified-card.post-card .card-footer > *,
    .cards-grid > .study-card .card-footer > *,
    .cards-grid > .review-card .card-footer > *,
    .cards-grid > .new-review-card .card-footer > *,
    .cards-grid > .review-card .review-footer > *,
    .cards-grid > .new-review-card .review-footer > *,
    .cards-grid .review-card .review-footer > *,
    .cards-grid .new-review-card .review-footer > * {
        font-size: 0.75rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Unified button styles for all card footers on mobile */
    .cards-grid .card-footer .btn,
    .cards-grid .card-footer .btn-sm,
    .cards-grid .card-footer span.btn,
    .cards-grid .card-footer button.btn,
    .cards-grid .review-footer .btn,
    .cards-grid .review-footer .btn-sm,
    .cards-grid .review-footer span.btn,
    .cards-grid .cards-grid__post-card__interaction-btn {
        min-width: clamp(28px, 8vw, 36px) !important;
        min-height: clamp(28px, 8vw, 36px) !important;
        width: auto !important;
        height: auto !important;
        padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) !important;
        font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        gap: clamp(2px, 0.5vw, 4px) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 4px !important;
        background: transparent !important;
        cursor: default !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Review footer buttons: no border/box-shadow */
    .cards-grid .review-footer .btn,
    .cards-grid .review-footer .btn-sm,
    .cards-grid .review-footer .btn-outline-secondary {
        border: none !important;
        box-shadow: none !important;
    }

    .cards-grid .card-footer .btn i,
    .cards-grid .card-footer .btn-sm i,
    .cards-grid .review-footer .btn i,
    .cards-grid .review-footer .btn-sm i,
    .cards-grid .cards-grid__post-card__interaction-btn i {
        font-size: clamp(0.6rem, 1.6vw, 0.7rem) !important;
        width: clamp(8px, 2vw, 10px) !important;
        height: clamp(8px, 2vw, 10px) !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .cards-grid .card-footer .btn span,
    .cards-grid .card-footer .btn-sm span,
    .cards-grid .review-footer .btn span,
    .cards-grid .review-footer .btn-sm span,
    .cards-grid .cards-grid__post-card__interaction-btn span {
        font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
        line-height: 1.2 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    .cards-grid .cards-grid__post-card__interactions,
    .cards-grid .cards-grid__post-card__footer > div,
    .cards-grid .card-footer > div:not(.progress) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: clamp(4px, 1vw, 6px) !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cards-grid .review-footer,
    .cards-grid .new-review-card .review-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        padding: var(--card-footer-padding-y, 8px) var(--card-footer-padding-x, clamp(10px, 3vw, 16px)) !important;
    }

    .cards-grid .review-footer .review-action-btn {
        padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) !important;
        min-width: auto !important;
        min-height: auto !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
        border-radius: 4px !important;
        line-height: 1.2 !important;
    }

    .cards-grid .review-footer .review-action-btn i {
        font-size: clamp(0.6rem, 1.6vw, 0.7rem) !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
    }

    .cards-grid .card-footer .btn + .btn,
    .cards-grid .card-footer .btn-sm + .btn-sm,
    .cards-grid .review-footer .btn + .btn,
    .cards-grid .review-footer .btn-sm + .btn-sm,
    .cards-grid .cards-grid__post-card__interaction-btn + .cards-grid__post-card__interaction-btn {
        margin-left: 0 !important;
    }
}