/* ==========================================================================
   CARD SYSTEM LAYOUT
   Shared structural layout for all card types
   ========================================================================== */

/* Review card in any grid - SAME structure as post/publication/study (single source of truth).
   CRITICAL: Force grid and clear flex so Bootstrap .card / review-display flex never wins;
   otherwise card height becomes content-driven and short body content shrinks the card.
   When the card is not a direct child of .cards-grid, review-display uses
   .review-card:not(.cards-grid > .review-card) { display: flex !important } which has
   specificity (0,5,0). We need (0,5,0) or higher so grid wins; use attribute selectors
   to reach (0,5,0) without relying on DOM order. */
.cards-grid .review-card,
.cards-grid .new-review-card,
.cards-grid > .review-card,
.cards-grid > .new-review-card,
.cards-grid > .card.review-card,
.cards-grid > .card.new-review-card,
.cards-grid .card.review-card[class*="card"][class*="review"],
.cards-grid .card.new-review-card[class*="card"][class*="review"] {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-rows: var(--card-grid-rows-review) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Override profile-reviews.css #reviews-list:not(.cards-grid) .review-card (specificity 1,2,0).
   #reviews-list wraps .cards-grid; the flex rule matches all cards. This wins for cards inside the grid. */
#reviews-list .cards-grid .card.review-card,
#reviews-list .cards-grid .card.new-review-card {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-rows: var(--card-grid-rows-review) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Override review-display.css for Explore: cards are #exploreFeed.cards-grid > .explore-card-wrapper > .explore-card > .review-card,
   so :not(.cards-grid > .review-card) matches and flex wins. Use #exploreFeed (1,2,0) to beat (0,5,0). */
#exploreFeed.cards-grid .card.review-card,
#exploreFeed.cards-grid .card.new-review-card {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-rows: var(--card-grid-rows-review) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Post card in any grid */
.cards-grid .post-card,
.cards-grid .unified-card.post-card,
.cards-grid .cards-grid__post-card {
    display: grid !important;
    grid-template-rows: var(--card-grid-rows-post) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Publication card in any grid */
.cards-grid .unified-card[data-publication-id],
.cards-grid .unified-card[data-item-id][data-publication-id] {
    display: grid !important;
    grid-template-rows: var(--card-grid-rows-publication) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Study card in any grid */
.cards-grid .study-card,
.cards-grid .unified-card.study-card {
    display: grid !important;
    grid-template-rows: var(--card-grid-rows-study) !important;
    grid-template-columns: 1fr !important;
    aspect-ratio: var(--card-aspect-ratio-unified) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    contain: layout style;
}

/* Image containers - Fill Grid Row 1 */
.cards-grid .post-card .position-relative,
.cards-grid .unified-card.post-card .position-relative,
.cards-grid .unified-card .position-relative,
.cards-grid .study-card .position-relative,
.cards-grid .review-card .position-relative,
.cards-grid .new-review-card .position-relative {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Anchor tags inside image containers */
.cards-grid .post-card .position-relative > a,
.cards-grid .unified-card.post-card .position-relative > a,
.cards-grid .unified-card .position-relative > a,
.cards-grid .study-card .position-relative > a,
.cards-grid .review-card .position-relative > a,
.cards-grid .new-review-card .position-relative > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Images - Fill Container (Post, Study cards) */
.cards-grid .post-card .position-relative img,
.cards-grid .post-card .position-relative .card-img-top,
.cards-grid .post-card .position-relative a img,
.cards-grid .unified-card.post-card .position-relative img,
.cards-grid .unified-card.post-card .position-relative .card-img-top,
.cards-grid .unified-card.post-card .position-relative a img,
.cards-grid .study-card .position-relative img,
.cards-grid .study-card .position-relative .card-img-top,
.cards-grid .study-card .position-relative a img {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Post card internal layout */
.cards-grid .cards-grid__post-card__image-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.cards-grid .cards-grid__post-card__body {
    grid-row: 2 !important;
}

.cards-grid .cards-grid__post-card__footer {
    grid-row: 3 !important;
}

.cards-grid .cards-grid__post-card__footer {
    padding: var(--card-footer-padding) !important;
    background-color: var(--card-footer-bg, #f8f9fa) !important;
    border-top: 1px solid var(--card-footer-border-color, rgba(0, 0, 0, 0.1)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.cards-grid .post-card .card-body,
.cards-grid .unified-card.post-card .card-body,
.cards-grid .cards-grid__post-card .card-body {
    grid-row: 2 !important;
    padding: var(--card-body-padding-post) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}

.cards-grid .post-card .card-footer,
.cards-grid .unified-card.post-card .card-footer,
.cards-grid .cards-grid__post-card .card-footer {
    grid-row: 3 !important;
    padding: var(--card-footer-padding) !important;
    min-height: var(--card-footer-min-height, 2.5rem) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Publication card internal layout */
.cards-grid .unified-card[data-publication-id] .card-body {
    grid-row: 2 !important;
    padding: var(--card-body-padding-publication) !important;
    gap: var(--card-body-gap-publication) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

.cards-grid .unified-card[data-publication-id] .card-footer {
    grid-row: 3 !important;
    padding: var(--card-footer-padding) !important;
    min-height: var(--card-footer-min-height, 2.5rem) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--card-footer-bg, #f8f9fa) !important;
    border-top: 1px solid var(--card-footer-border-color, rgba(0, 0, 0, 0.1)) !important;
    text-align: center !important;
    position: relative !important;
}

/* Study card internal layout */
.cards-grid .study-card .card-body,
.cards-grid .unified-card.study-card .card-body {
    grid-row: 2 !important;
    padding: var(--card-body-padding-study) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.cards-grid .study-card .card-footer,
.cards-grid .unified-card.study-card .card-footer {
    grid-row: 3 !important;
    padding: var(--card-footer-padding) !important;
    min-height: var(--card-footer-min-height, 2.5rem) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Unified study progress bar — Profile + Explore + Search (.cards-grid) */
.cards-grid .study-card .card-footer .progress,
.cards-grid .unified-card.study-card .card-footer .progress {
    height: 1.125rem !important;
    min-height: 1.125rem !important;
    border-radius: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    background-color: #e9ecef !important;
    font-size: 0 !important;
}

.cards-grid .study-card .card-footer .progress-bar,
.cards-grid .unified-card.study-card .card-footer .progress-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 100% !important;
    float: none !important;
    font-size: 0.625rem !important;
    line-height: 1 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.cards-grid .study-card .card-footer .progress-bar span,
.cards-grid .unified-card.study-card .card-footer .progress-bar span {
    font-size: 0.625rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Status badge in card body - align bottom-left for Study + Publication */
.cards-grid .study-card .card-body .badge,
.cards-grid .unified-card.study-card .card-body .badge,
.cards-grid .unified-card[data-publication-id] .card-body .badge {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: flex-start !important;
}

/* Review card header layout */
.cards-grid .review-card > a.review-header-link,
.cards-grid .new-review-card > a.review-header-link {
    grid-row: 1 !important;
    grid-column: 1 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

.cards-grid .review-card > .position-relative,
.cards-grid .new-review-card > .position-relative {
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.cards-grid .review-card .review-header,
.cards-grid .new-review-card .review-header,
.cards-grid .review-card > a.review-header-link > .review-header,
.cards-grid .new-review-card > a.review-header-link > .review-header,
.cards-grid .review-card > .position-relative > .review-header,
.cards-grid .new-review-card > .position-relative > .review-header {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: var(--card-header-padding) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    position: relative !important;
}

.cards-grid .review-card .review-content-area,
.cards-grid .new-review-card .review-content-area {
    grid-row: 2 !important;
    grid-column: 1 !important;
    padding: var(--card-body-padding-study) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

.cards-grid .review-card .review-footer,
.cards-grid .new-review-card .review-footer {
    grid-row: 3 !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: var(--card-footer-padding-y, 8px) var(--card-footer-padding-x, clamp(10px, 3vw, 16px)) !important;
    min-height: var(--card-footer-min-height, 40px) !important;
    height: auto !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    background-color: var(--card-footer-bg, #f8f9fa) !important;
    border-top: 1px solid var(--card-footer-border-color, rgba(0, 0, 0, 0.1)) !important;
    overflow: hidden !important;
}

.cards-grid .review-card .review-footer > .review-footer-actions,
.cards-grid .new-review-card .review-footer > .review-footer-actions,
.cards-grid .review-card .review-footer > .d-flex,
.cards-grid .new-review-card .review-footer > .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(4px, 2vw, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.cards-grid .review-card .review-footer .review-footer-stat,
.cards-grid .new-review-card .review-footer .review-footer-stat,
.cards-grid .review-card .review-footer .review-action-btn,
.cards-grid .new-review-card .review-footer .review-action-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    cursor: default;
}

.cards-grid .review-card .review-footer > *,
.cards-grid .new-review-card .review-footer > * {
    font-size: 0.875rem !important;
}

.cards-grid .review-card .review-footer .btn,
.cards-grid .new-review-card .review-footer .btn,
.cards-grid .review-card .review-footer .btn-outline-secondary,
.cards-grid .new-review-card .review-footer .btn-outline-secondary {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cards-grid .review-card .review-footer .btn span,
.cards-grid .new-review-card .review-footer .btn span,
.cards-grid .review-card .review-footer span[id*="likeCount"],
.cards-grid .new-review-card .review-footer span[id*="likeCount"],
.cards-grid .review-card .review-footer span[id*="commentCount"],
.cards-grid .new-review-card .review-footer span[id*="commentCount"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure card children can shrink (prevents grid rows from collapsing) */
.cards-grid .unified-card > *,
.cards-grid .review-card > *,
.cards-grid .new-review-card > *,
.cards-grid .post-card > *,
.cards-grid .publication-card > *,
.cards-grid .study-card > * {
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Mobile: drop layout containment — it can desync painted width from layout box in narrow grids */
@media (max-width: 768px) {
    .cards-grid .review-card,
    .cards-grid .new-review-card {
        contain: none !important;
    }
}

/* Mobile exception: ensure review header/body never collapse */
@media (max-width: 768px) {
    .cards-grid .review-card > .position-relative,
    .cards-grid .new-review-card > .position-relative,
    .cards-grid .review-card > .review-content-area,
    .cards-grid .new-review-card > .review-content-area {
        min-height: unset !important;
    }
}

/* Review header uses same grid row 1 (3fr) as post/publication/study – no fixed height;
   dimensions match profile and Explore card headers. */
@media (min-width: 769px) {
    #reviews-tab-pane .cards-grid .review-card:not(.mobile-expanded) .review-header,
    #reviews-tab-pane .cards-grid .new-review-card:not(.mobile-expanded) .review-header,
    .cards-grid .review-card:not(.mobile-expanded) .review-header,
    .cards-grid .new-review-card:not(.mobile-expanded) .review-header {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}