/**
 * TitleCard.css - Reusable Title Card Component Styles
 *
 * Styles for the TitleCard component used across gallery views.
 * Works with PosterActionOverlay (loaded globally via header.php).
 */

/* ============================================================
   CSS VARIABLES - Card sizing (SINGLE SOURCE OF TRUTH)
   All card grid components should reference these variables.
   ============================================================ */
:root {
    /* Card widths - used by CardGridView and other card layouts */
    --title-card-width-sm: 170px;    /* Small cards - more per row */
    --title-card-width-md: 180px;    /* Standard cards - balanced */
    --title-card-width-lg: 220px;    /* Large cards - fewer per row */
    --title-card-width-recommend: 180px; /* Recommendation cards - same as standard, keeps proportions */
    --title-card-gap: 1rem;          /* Gap between cards */

    /* Legacy variables (for backwards compatibility) */
    --title-card-min-width: 150px;
    --title-card-max-width: 1fr;
}

/* ============================================================
   CARD WRAPPER - Grid item
   ============================================================ */
.title-card-wrapper {
    /* Used by CardGridView for grid placement */
}

/* ============================================================
   CARD CONTAINER
   ============================================================ */
.title-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.title-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: visible; /* Allow menu to extend beyond card */
}

/* Allow menu to extend beyond poster when hovering */
.title-card:hover .poster-container {
    overflow: visible;
}

/* Allow menu to extend beyond card when opened via touch (mobile) */
.title-card.pam-menu-open {
    overflow: visible;
    z-index: 100; /* Bring card above siblings so menu isn't clipped */
}

.title-card.pam-menu-open .poster-container {
    overflow: visible;
}

/* ============================================================
   POSTER CONTAINER - 2:3 aspect ratio
   ============================================================ */
.title-card .poster-container {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 2:3 aspect ratio (height = 150% of width) */
    background-color: #1a1a2e;
    overflow: hidden;
}

.title-card .card-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #374151;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.title-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5rem;
}

/* ============================================================
   TITLE
   ============================================================ */
.title-card .title-card-title,
.title-card .card-title {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.2rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    cursor: pointer;
}

.title-card .title-card-title:hover,
.title-card .card-title:hover {
    color: #0d6efd;
}

/* ============================================================
   CAST ROW
   ============================================================ */
.title-card .title-card-cast,
.title-card .cast-row {
    font-size: 0.75rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    color: #0d6efd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   META ROW (Year | Rating | Length)
   ============================================================ */
.title-card .title-card-meta,
.title-card .card-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* ============================================================
   SCORES ROW
   ============================================================ */
.title-card .title-card-scores,
.title-card .scores {
    margin-top: auto;
    min-height: 24px;
}

/* ============================================================
   SCORE BADGES (RT, IMDB, Personal)
   ============================================================ */
.title-card .score-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    margin-right: 2px;
}

.title-card .score-badge i {
    margin-right: 2px;
}

/* Rotten Tomatoes - Fresh (60%+) */
.title-card .rt-fresh {
    background-color: #fa320a;
    color: white;
}

/* Rotten Tomatoes - Rotten (<60%) */
.title-card .rt-rotten {
    background-color: #0ac855;
    color: white;
}

/* IMDB score */
.title-card .imdb-score {
    background-color: #f5c518;
    color: #000;
}

/* Personal rating */
.title-card .personal-score {
    background-color: #6f42c1;
    color: white;
    cursor: pointer;
}

.title-card .personal-score:hover {
    background-color: #5a32a3;
}

/* ============================================================
   NEXT EPISODE INFO (TV Cards) - slightly smaller text
   ============================================================ */
.title-card .next-episode-info,
.title-card .next-episode-markable,
.title-card .next-episode-upcoming {
    padding-top: 0.4rem !important;
    margin-top: 0.4rem !important;
}

/* Episode number (S05 E07) - 0.7rem */
.title-card .next-episode-info .fw-semibold,
.title-card .next-episode-markable .fw-semibold {
    font-size: 0.7rem;
}

/* "Ready" indicator inline with episode number - 0.65rem */
.title-card .next-episode-info .fw-semibold .text-success,
.title-card .next-episode-markable .fw-semibold .text-success {
    font-size: 0.65rem;
}

/* Episode title (e.g., "One-Eighty") - 0.8rem */
.title-card .next-episode-info .text-muted.text-truncate,
.title-card .next-episode-markable .text-muted.text-truncate {
    font-size: 0.8rem;
}

/* Upcoming episode info - 0.7rem */
.title-card .next-episode-upcoming .small {
    font-size: 0.7rem !important;
}

/* Year after title - only visible on mobile where meta line is hidden */
.card-el-title-year {
    display: none;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 576px) {
    :root {
        /* Smaller card widths on mobile for 3-column layout */
        /* 108px * 3 + 8px * 2 gaps = 340px, fits 375px screen with margins */
        --title-card-width-sm: 100px;
        --title-card-width-md: 108px;
        --title-card-width-lg: 115px;
        --title-card-gap: 0.5rem;
    }

    /* --------------------------------------------------------
       MOBILE VISIBILITY CONTROLS
       Title shown by default. Cast/meta hidden by default.
       Add .show-mobile-* class to container to override.
       -------------------------------------------------------- */
    .card-el-title {
        display: block !important;
        font-size: 0.7rem;
        min-height: auto;
    }

    .card-el-title-year {
        display: inline !important;
    }

    .card-el-cast,
    .card-el-meta {
        display: none !important;
    }

    /* Personal rating stays visible on mobile (user requested) */

    /* Reduced padding for compact mobile cards */
    .title-card .card-body {
        padding: 0.25rem !important;
    }

    /* Smaller scores on mobile */
    .title-card .score-badge {
        font-size: 0.55rem;
        padding: 1px 2px;
        margin-right: 1px;
    }

    /* Reduce scores container margin */
    .title-card .scores {
        margin-top: 0;
        min-height: auto;
    }

    /* Move streaming badge up on mobile to avoid overlap with release strip */
    .streaming-badge {
        bottom: 28px !important;
        right: 4px !important;
        padding: 2px 3px !important;
    }

    .streaming-badge img {
        height: 16px !important;
        max-width: 32px !important;
    }

    /* --------------------------------------------------------
       OVERRIDE CLASSES - Add to container to show on mobile
       Example: <div class="card-grid-view show-mobile-title">
       -------------------------------------------------------- */
    .show-mobile-title .card-el-title {
        display: block !important;
        font-size: 0.7rem;
        min-height: auto;
        -webkit-line-clamp: 1;
        margin-bottom: 0.15rem;
    }

    .show-mobile-cast .card-el-cast {
        display: block !important;
        font-size: 0.65rem;
    }

    .show-mobile-meta .card-el-meta {
        display: block !important;
        font-size: 0.65rem;
    }

    .show-mobile-rating .personal-score {
        display: inline-block !important;
    }

    /* Hide scores completely if needed */
    .hide-mobile-scores .card-el-scores {
        display: none !important;
    }
}

/* Legacy styles for backwards compatibility */
@media (max-width: 576px) {
    .title-card .title-card-title,
    .title-card .card-title {
        font-size: 0.7rem;
        min-height: auto;
    }

    .title-card .title-card-cast,
    .title-card .cast-row,
    .title-card .title-card-meta,
    .title-card .card-text {
        font-size: 0.65rem;
    }
}

/* ============================================================
   STREAMING BADGE (Bottom-right on poster)
   ============================================================ */
.streaming-badge {
    position: absolute;
    bottom: 28px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.streaming-badge img {
    height: 20px;
    max-width: 40px;
    object-fit: contain;
    border-radius: 2px;
}

.streaming-badge-theatrical {
    background: rgba(220, 53, 69, 0.9);
    color: white;
    font-size: 0.85rem;
}

.streaming-badge-paid {
    background: rgba(25, 135, 84, 0.9);
    color: white;
    font-size: 0.85rem;
}

.streaming-badge-text {
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Hover effect - only for clickable badges */
.streaming-badge[onclick]:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* Non-clickable badges */
.streaming-badge:not([onclick]) {
    cursor: default;
}

/* Streaming availability borders - prototype */
/* Green border: Available on a service user subscribes to */
.streaming-badge-subscribed {
    border: 2px solid #198754;
    box-shadow: 0 0 3px rgba(25, 135, 84, 0.5);
}

/* Red border: Available on a streaming service user doesn't subscribe to */
.streaming-badge-unsubscribed {
    border: 2px solid #dc3545;
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.5);
}

/* Broadcast network badge: Available on ABC/NBC/CBS/FOX via cable/antenna */
.streaming-badge-broadcast {
    background: rgba(13, 110, 253, 0.9);
    border: 2px solid #0d6efd;
    box-shadow: 0 0 3px rgba(13, 110, 253, 0.5);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    gap: 3px;
}

.streaming-badge-broadcast .broadcast-network-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .title-card {
    background: var(--mv-bg-card);
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] .title-card .title-card-meta,
[data-bs-theme="dark"] .title-card .card-text {
    color: var(--mv-text-muted);
}