/* ==========================================================================
   CARD SYSTEM BEHAVIOR
   Mobile expansion (First Tap) shared across Profile and Explore
   ========================================================================== */

/* Intermediate viewports (e.g. Surface Duo 540px, small tablets): cap expanded card size
   so they don't dominate the screen. Below 481px keep full width; 481px–768px use max-width. */
@media (min-width: 481px) and (max-width: 768px) {
    .cards-grid > .mobile-expanded,
    .cards-grid > .mobile-expanded.post-card,
    .cards-grid > .mobile-expanded.unified-card,
    .cards-grid > .mobile-expanded.review-card,
    .cards-grid > .mobile-expanded.new-review-card,
    .cards-grid > .mobile-expanded.study-card,
    .cards-grid > .mobile-expanded.unified-card[data-publication-id],
    .cards-grid > .mobile-expanded.unified-card[data-item-id][data-publication-id],
    #exploreFeed .explore-card-wrapper.mobile-expanded,
    #exploreFeed .explore-card.mobile-expanded,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card,
    #exploreFeed .explore-card.mobile-expanded .unified-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card,
    #exploreFeed .explore-card.mobile-expanded .review-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card,
    #exploreFeed .explore-card.mobile-expanded .new-review-card {
        max-width: 480px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 768px) {
    /* When ANY card is expanded, switch to single-column layout */
    .cards-grid.has-expanded-cards,
    .cards-grid:has(.mobile-expanded),
    #exploreFeed.explore-feed-grid.has-expanded-cards,
    #exploreFeed.explore-feed-grid:has(.mobile-expanded),
    #exploreFeed.cards-grid.has-expanded-cards,
    #exploreFeed.cards-grid:has(.mobile-expanded) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Explore wrappers stay in flow (no fullscreen overlay) */
    #exploreFeed .explore-card-wrapper.mobile-expanded,
    #exploreFeed .explore-card.mobile-expanded {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-column: 1 / -1 !important;
        background: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    /* Expanded card base */
    .cards-grid > .mobile-expanded,
    .cards-grid > .mobile-expanded.post-card,
    .cards-grid > .mobile-expanded.unified-card,
    .cards-grid > .mobile-expanded.review-card,
    .cards-grid > .mobile-expanded.new-review-card,
    .cards-grid > .mobile-expanded.study-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card,
    #exploreFeed .explore-card.mobile-expanded .unified-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card,
    #exploreFeed .explore-card.mobile-expanded .review-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card,
    #exploreFeed .explore-card.mobile-expanded .new-review-card {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: var(--card-aspect-ratio-expanded, var(--card-aspect-ratio-unified)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0 !important;
        z-index: 10 !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
        display: grid !important;
        grid-template-rows: var(--card-grid-rows-expanded, var(--card-grid-rows-review)) !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Publication cards in expanded state */
    .cards-grid > .mobile-expanded.unified-card[data-publication-id],
    .cards-grid > .mobile-expanded.unified-card[data-item-id][data-publication-id],
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-publication-id],
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-publication-id] {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: var(--card-aspect-ratio-expanded, var(--card-aspect-ratio-unified)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-rows: var(--card-grid-rows-expanded, var(--card-grid-rows-publication)) !important;
        gap: 0 !important;
    }

    /* Post cards in expanded state */
    .cards-grid > .mobile-expanded.post-card,
    .cards-grid > .mobile-expanded.unified-card.post-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"],
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: var(--card-aspect-ratio-expanded, var(--card-aspect-ratio-unified)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-rows: var(--card-grid-rows-expanded, var(--card-grid-rows-post)) !important;
        gap: 0 !important;
    }

    /* Review cards in expanded state */
    .cards-grid > .mobile-expanded.review-card,
    .cards-grid > .mobile-expanded.new-review-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card,
    #exploreFeed .explore-card.mobile-expanded .review-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="review"],
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="review"],
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card,
    #exploreFeed .explore-card.mobile-expanded .new-review-card {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: var(--card-aspect-ratio-expanded, var(--card-aspect-ratio-unified)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-rows: var(--card-grid-rows-expanded, var(--card-grid-rows-review)) !important; /* match Profile expanded rows */
        gap: 0 !important;
        grid-template-columns: 1fr !important;
    }

    /* Study cards in expanded state */
    .cards-grid > .mobile-expanded.study-card,
    .cards-grid > .mobile-expanded.unified-card.study-card,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="study"],
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="study"] {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: var(--card-aspect-ratio-expanded, var(--card-aspect-ratio-unified)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-rows: var(--card-grid-rows-expanded, var(--card-grid-rows-study)) !important;
        gap: 0 !important;
    }

    /* Expanded card image/header container */
    .cards-grid > .mobile-expanded .position-relative,
    .cards-grid > .mobile-expanded > .position-relative,
    .cards-grid > .mobile-expanded .unified-card .position-relative,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .position-relative,
    #exploreFeed .explore-card.mobile-expanded .review-card .position-relative,
    #exploreFeed .explore-card-wrapper.mobile-expanded .position-relative,
    #exploreFeed .explore-card.mobile-expanded .position-relative {
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Expanded review header: keep unified padding and layout */
    .cards-grid > .mobile-expanded.review-card .review-header,
    .cards-grid > .mobile-expanded.new-review-card .review-header,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-header,
    #exploreFeed .explore-card.mobile-expanded .review-card .review-header,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-header,
    #exploreFeed .explore-card.mobile-expanded .new-review-card .review-header {
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        position: relative !important;
        margin: 0 !important;
        padding: var(--card-header-padding, 20px) !important;
        box-sizing: border-box !important;
    }

    /* Review card body (content area) in expanded state */
    .cards-grid .review-card.mobile-expanded .review-content-area,
    .cards-grid .new-review-card.mobile-expanded .review-content-area,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-content-area,
    #exploreFeed .explore-card.mobile-expanded .review-card .review-content-area,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="review"] .review-content-area,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="review"] .review-content-area,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-content-area,
    #exploreFeed .explore-card.mobile-expanded .new-review-card .review-content-area {
        grid-row: 2 / 3 !important;
        grid-column: 1 !important;
        width: 100% !important;
        padding: var(--card-body-padding-expanded, var(--card-content-padding, 16px)) !important;
        flex-shrink: 1 !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
        zoom: 1 !important;
        font-size: var(--card-body-font-size-expanded, 1.2rem) !important;
        line-height: var(--card-body-line-height-expanded, 1.7) !important;
    }

    /* Expanded review text should behave like other card bodies */
    .cards-grid .review-card.mobile-expanded .review-text-content,
    .cards-grid .new-review-card.mobile-expanded .review-text-content,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-text-content,
    #exploreFeed .explore-card.mobile-expanded .review-card .review-text-content,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="review"] .review-text-content,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="review"] .review-text-content,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-text-content,
    #exploreFeed .explore-card.mobile-expanded .new-review-card .review-text-content {
        display: block !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        -webkit-line-clamp: unset !important;
        max-height: none !important;
        font-size: var(--card-body-font-size-expanded, 1.2rem) !important;
        line-height: var(--card-body-line-height-expanded, 1.7) !important;
    }

    .cards-grid .review-card.mobile-expanded .review-text-content *,
    .cards-grid .new-review-card.mobile-expanded .review-text-content *,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-text-content *,
    #exploreFeed .explore-card.mobile-expanded .review-card .review-text-content *,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="review"] .review-text-content *,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="review"] .review-text-content *,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-text-content *,
    #exploreFeed .explore-card.mobile-expanded .new-review-card .review-text-content * {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Expanded card body (post/publication/study) */
    .cards-grid > .mobile-expanded .card-body,
    #exploreFeed .explore-card-wrapper.mobile-expanded .card-body,
    #exploreFeed .explore-card.mobile-expanded .card-body {
        grid-row: 2 / 3 !important;
        grid-column: 1 !important;
        width: 100% !important;
        padding: var(--card-body-padding-expanded, var(--card-content-padding, var(--profile-card-padding, var(--explore-card-padding, 16px)))) !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
    }

    /* Expanded post card body/text - unified across Profile + Explore */
    .cards-grid > .mobile-expanded.post-card .card-body,
    .cards-grid > .mobile-expanded.unified-card.post-card .card-body,
    .cards-grid > .mobile-expanded .cards-grid__post-card__body,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-body,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-body,
    #exploreFeed .explore-card-wrapper.mobile-expanded .cards-grid__post-card__body,
    #exploreFeed .explore-card.mobile-expanded .cards-grid__post-card__body {
        font-size: 1.2rem !important;
        padding: var(--card-body-padding-expanded, var(--card-content-padding, var(--profile-card-padding, var(--explore-card-padding, 16px)))) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
    }

    .cards-grid > .mobile-expanded.unified-card[data-publication-id] .card-body,
    .cards-grid > .mobile-expanded.unified-card[data-item-id][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,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-item-id][data-publication-id] .card-body,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-item-id][data-publication-id] .card-body,
    .cards-grid > .mobile-expanded.study-card .card-body,
    .cards-grid > .mobile-expanded.unified-card.study-card .card-body,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="study"] .card-body,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="study"] .card-body {
        padding: var(--card-body-padding-expanded, var(--card-content-padding, var(--profile-card-padding, var(--explore-card-padding, 16px)))) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
    }

    .cards-grid > .mobile-expanded.post-card .card-text,
    .cards-grid > .mobile-expanded.unified-card.post-card .card-text,
    .cards-grid > .mobile-expanded .cards-grid__post-card__text,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-text,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-text,
    #exploreFeed .explore-card-wrapper.mobile-expanded .cards-grid__post-card__text,
    #exploreFeed .explore-card.mobile-expanded .cards-grid__post-card__text {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .cards-grid > .mobile-expanded.post-card .card-subtitle,
    .cards-grid > .mobile-expanded.unified-card.post-card .card-subtitle,
    .cards-grid > .mobile-expanded .cards-grid__post-card__subtitle,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="post"] .card-subtitle,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="post"] .card-subtitle,
    #exploreFeed .explore-card-wrapper.mobile-expanded .cards-grid__post-card__subtitle,
    #exploreFeed .explore-card.mobile-expanded .cards-grid__post-card__subtitle {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Review card footer in expanded state */
    .cards-grid > .mobile-expanded.review-card .review-footer,
    .cards-grid > .mobile-expanded.new-review-card .review-footer,
    #exploreFeed .explore-card-wrapper.mobile-expanded .review-card .review-footer,
    #exploreFeed .explore-card.mobile-expanded .review-card .review-footer,
    #exploreFeed .explore-card-wrapper.mobile-expanded .unified-card[data-type="review"] .review-footer,
    #exploreFeed .explore-card.mobile-expanded .unified-card[data-type="review"] .review-footer,
    #exploreFeed .explore-card-wrapper.mobile-expanded .new-review-card .review-footer,
    #exploreFeed .explore-card.mobile-expanded .new-review-card .review-footer {
        grid-row: 3 / 4 !important;
        grid-column: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: var(--card-footer-expanded-min-height, var(--card-footer-min-height, 40px)) !important;
        padding: var(--card-footer-padding, 8px 16px) !important;
        background: var(--card-footer-bg, #f8f9fa) !important;
        border-top: 1px solid var(--card-footer-border-color, rgba(0, 0, 0, 0.1)) !important;
        z-index: var(--profile-z-index-footer, var(--explore-z-index-footer, 10)) !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
    }

    /* Expanded card footer (post/publication/study) */
    .cards-grid > .mobile-expanded .card-footer,
    #exploreFeed .explore-card-wrapper.mobile-expanded .card-footer,
    #exploreFeed .explore-card.mobile-expanded .card-footer {
        grid-row: 3 / 4 !important;
        grid-column: 1 !important;
        width: 100% !important;
        padding: var(--card-footer-padding, var(--profile-card-footer-padding, var(--explore-card-footer-padding, 8px 16px))) !important;
        padding-bottom: var(--profile-card-footer-padding-bottom, var(--explore-card-footer-padding-bottom, 8px)) !important;
        min-height: var(--card-footer-expanded-min-height, var(--card-footer-min-height, 40px)) !important;
        height: auto !important;
        max-height: none !important;
        background: 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: space-between !important;
        z-index: var(--profile-z-index-footer, var(--explore-z-index-footer, 10)) !important;
    }

    /* Expanded card interaction buttons - larger touch targets */
    .cards-grid > .mobile-expanded .card-footer .btn,
    .cards-grid > .mobile-expanded .card-footer .btn-sm,
    .cards-grid > .mobile-expanded .review-footer .btn,
    .cards-grid > .mobile-expanded .review-footer .btn-sm,
    .cards-grid > .mobile-expanded .cards-grid__post-card__interaction-btn {
        min-width: clamp(36px, 10vw, 44px) !important;
        min-height: clamp(36px, 10vw, 44px) !important;
        padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px) !important;
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        gap: clamp(4px, 1vw, 6px) !important;
    }

    .cards-grid > .mobile-expanded .card-footer .btn i,
    .cards-grid > .mobile-expanded .card-footer .btn-sm i,
    .cards-grid > .mobile-expanded .review-footer .btn i,
    .cards-grid > .mobile-expanded .review-footer .btn-sm i,
    .cards-grid > .mobile-expanded .cards-grid__post-card__interaction-btn i {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
        width: clamp(10px, 2.5vw, 12px) !important;
        height: clamp(10px, 2.5vw, 12px) !important;
    }

    .cards-grid > .mobile-expanded .card-footer,
    .cards-grid > .mobile-expanded .review-footer {
        gap: clamp(8px, 2vw, 12px) !important;
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px) !important;
    }

    /* Mobile expansion close button (explore + profile) */
    .mobile-expanded .close-btn {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Explore: hide profile-only edit/delete menu on feed cards */
#exploreFeed .mobile-card-menu-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}