/* ============================================================================
   RSL Card Component
   ============================================================================
   Flexible card layout with header, title, body, and footer sections.
   Uses CSS Grid for consistent card structure across different content types.

   Structure:
   .card
   ├── .card-header (optional - for images)
   │   └── .img-wrapper > .card-img
   ├── .card-title
   ├── .card-body
   └── .card-footer (optional)
   ============================================================================ */

/* ──────────────────────────────────────────────
   Base Card Styles
   ────────────────────────────────────────────── */

.card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-rows: min-content 1fr auto auto;
    grid-template-areas: "header" "title" "body" "footer";
}

.card-header,
.card-footer,
.card-body,
.card-title {
    position: relative;
}

/* ──────────────────────────────────────────────
   Card Sections
   ────────────────────────────────────────────── */

.card-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-title {
    grid-area: title;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-body {
    grid-area: body;
    font-size: 1rem;
    line-height: 1.6;
}

.card-body.push-img-top {
    grid-area: unset;
}

.card-footer {
    grid-area: footer;
    margin-top: 0.5rem;
    text-align: right;
}

/* ──────────────────────────────────────────────
   Card Images
   ────────────────────────────────────────────── */

.img-wrapper {
    width: 100%;
    overflow: hidden;
}

.card-img {
    width: 100%;
    object-fit: cover;
}

/* Fixed height image wrapper with cover */
.img-wrapper.img-cover {
    height: 200px;
    overflow: hidden;
}

.img-wrapper.img-cover img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ──────────────────────────────────────────────
   Utility Classes
   ────────────────────────────────────────────── */

.not-truncated {
    margin-bottom: -16px !important;
}

/* ──────────────────────────────────────────────
   Dark Mode Support
   ────────────────────────────────────────────── */

[data-theme="dark"] .card {
    background: #2d3748;
    border-color: #4a5568;
    color: #e0e0e0;
}

[data-theme="dark"] .card-title {
    color: #f1f5f9;
}

/* ──────────────────────────────────────────────
   FilterBus Integration
   Visibility and transition styles for cards
   subscribing to FilterBus state changes
   ────────────────────────────────────────────── */

/* Hidden state for FilterBus-controlled cards */
.card.card-filterbus-hidden {
    display: none !important;
}

/* Hide parent slot-item when card is hidden
   Collapses the grid cell so remaining cards shift */
.slot-item:has(.card.card-filterbus-hidden) {
    display: none !important;
}

/* Visible state - default */
.card:not(.card-filterbus-hidden) {
    opacity: 1;
    visibility: visible;
}

/* Transition for initialized cards
   Only apply after FilterBus is initialized to prevent flash */
.card.card-filterbus-initialized {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ──────────────────────────────────────────────
   Date Filter Integration
   ────────────────────────────────────────────── */

/* Hidden state for date-filtered cards */
.card.card-date-hidden {
    display: none !important;
}

/* Hide parent slot-item when card is hidden by date filter */
.slot-item:has(.card.card-date-hidden) {
    display: none !important;
}

/* ──────────────────────────────────────────────
   Reduced Motion Support
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .card.card-filterbus-initialized {
        transition: none;
    }
}