#instagramStoryModal .modal-title { line-height: 1.2; }

/* Better mobile experience: fullscreen modal without extra scroll */
@media (max-width: 576px) {
    #instagramStoryModal .modal-dialog { margin: 0 !important; max-width: 100vw !important; width: 100vw !important; }
    #instagramStoryModal .modal-content { height: 100svh; border-radius: 20px !important; display: flex; flex-direction: column; padding: 10px !important; }
    #instagramStoryModal .modal-body { flex: 1 1 auto; padding: 0 !important; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .story-preview-container { height: 100%; min-height: 0; }
    .story-preview { width: 100%; max-width: 100vw; height: auto; }
}

/* iOS Safari-specific full-viewport adjustments */
@supports (-webkit-touch-callout: none) {
    #instagramStoryModal .modal-dialog { margin: 0 !important; max-width: 100vw !important; width: 100vw !important; }
    #instagramStoryModal .modal-content { height: 100dvh !important; border-radius: 20px !important; display: flex; flex-direction: column; padding: 10px !important; }
    #instagramStoryModal .modal-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 !important; }
    .story-preview-container { height: 100% !important; min-height: 0 !important; }
    .story-preview { width: 100% !important; max-width: 100% !important; height: auto !important; }
}
.movie-meta {
    color: #777;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.movie-description {
    font-size: 0.9rem;
    margin-bottom: 0;
    margin-top: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.movie-notes {
    font-size: 0.85rem;
    color: #495057;
    font-style: italic;
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    margin-top: 10px;
}

/* When we render title/meta in the description area on mobile */
.mobile-info .movie-title { padding-right: 0; }
.mobile-info .movie-meta { padding-right: 0; }
.mobile-info { margin-top: 12px; }
.mobile-info .movie-title { margin-bottom: 6px; }
.movie-title { word-break: normal; overflow-wrap: anywhere; }
.movie-meta .sep { margin: 0 6px; color: #9aa1a8; white-space: nowrap; }
.movie-meta .runtime { white-space: nowrap; }

/* Rating Pill on curated list cards */
.ratings-pills-curated {
    position: absolute;
    top: 10px;
    right: 80px; /* mirror spacing from ranking block */
    width: 60px; /* match desktop ranking width */
    height: 60px; /* match desktop ranking height */
}
.ratings-pills-curated .rating-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 1px solid #333;
    border-radius: 5px; /* match ranking radius */
    padding: 0; /* fixed-height badge; keep content centered */
    font-weight: 600;
    background: #101010;
}
.ratings-pills-curated .rating-pill .num { font-size: 18px; font-weight: 700; line-height: 1; color: #fff; }
.ratings-pills-curated .rating-pill .lbl { font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Ranking Number */
.ranking {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    background-color: #333;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
}

/* Media Queries */
@media (max-width: 576px) {
    .movie-poster {
        max-width: 100px;
    }
    
    .movie-title {
        font-size: 1.1rem;
    }
    
    .ranking {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    /* Pill should match the mobile ranking width/position */
    .ratings-pills-curated { right: 70px; width: 50px; height: 50px; }
    .ratings-pills-curated .rating-pill { border-radius: 5px; }
    .ratings-pills-curated .rating-pill .num { font-size: 16px; }
    .ratings-pills-curated .rating-pill .lbl { font-size: 9px; white-space: nowrap; }
    /* Push text block down below badges area so title/meta appear where description would be */
    .movie-details { padding-top: 90px; }
    .movie-title { font-size: 1.05rem; }
    .movie-meta { font-size: 0.85rem; }
} 

/* Instagram Story Button - Global Styles (match playlist) */
.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
    background: linear-gradient(45deg, #e6683c 0%,#dc2743 25%,#cc2366 50%,#bc1888 75%,#f09433 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4) !important;
    border: none !important;
    text-decoration: none !important;
}

.btn-instagram:visited { color: white !important; }

/* Copy Link Button - Same style as Instagram but blue (match playlist) */
.btn-copy-link {
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.btn-copy-link:hover {
    background: linear-gradient(45deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    color: white;
}

.btn-copy-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
}

/* Story Preview Styles (match playlist) */
.story-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.story-preview {
    /* Keep a true 9:16 frame and allow responsive downsizing while preserving aspect */
    width: min(360px, 90vw);
    aspect-ratio: 9 / 16;
    height: auto;
    background-color: #000; /* black base under featured image */
    border-radius: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.story-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px);
    opacity: 1;
}

.story-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(17,18,23,.6);
}

/* Center content vertically within the story frame */
.story-centered { display: flex; justify-content: center; align-items: center; }
.story-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px; max-height: 100%; overflow: auto; width: calc(100% - 40px); }
.story-stack::-webkit-scrollbar { display: none; }

.story-header { padding: 40px 20px 20px; text-align: center; }

.story-title {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
}

.story-curator {
    color: white;
    font-size: 0.8rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    opacity: 0.9;
}

.story-items { display: flex; flex-direction: column; gap: 8px; margin: 0; flex: 0 0 auto; overflow: visible; width: 100%; }

.story-item {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 8px; /* increased from 8px to 10px for 25% more height */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: 80%; /* Always cover 80% width */
    align-self: center; /* Center the item horizontally */
    min-height: 50px; /* Added minimum height for consistency */
    box-shadow: 0 8px 24px rgba(0,0,0,.5); /* Added shadow from suggestion poster */
}

.story-poster {
    width: 50px; /* increased from 40px */
    /* Stretch vertically to fill the item, compensating for container padding */
    height: auto;
    align-self: stretch;
    object-fit: cover;
    /* Flush the poster to the left and to the top/bottom edges of the box */
    margin-left: -8px; /* cancel left padding */
    margin-right: 12px;
    margin-top: -10px;  /* increased from -8px for 25% more height */
    margin-bottom: -10px; /* increased from -8px for 25% more height */
    /* Only round the left corners; no radius on the right */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.story-item-title {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    /* Allow wrapping so titles are not cut off */
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    flex: 1;
}

.story-more { padding: 20px; text-align: center; }
.story-more-text { color: white; font-size: 1rem; font-weight: 600; margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }

.story-more-count { padding: 8px 20px; text-align: center; }
.story-more-count-text { 
    color: white; 
    font-size: 0.85rem; 
    font-weight: 500; 
    margin: 0; 
    opacity: 0.8; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); 
}

/* Modal adjustments (match playlist/suggestion) */
#instagramStoryModal .modal-body { padding: 0 !important; display:flex; align-items:center; justify-content:center; overflow:hidden; }
@media (max-width: 576px) { .story-preview { width: 100%; max-width: 100vw; height: auto; } }
#instagramStoryModal .modal-dialog { max-width: 800px; z-index: 1070 !important; }
#instagramStoryModal .modal-content { z-index: 1071 !important; border-radius: 20px !important; padding: 10px !important; }
#shareInstagramStoryBtn { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#instagramStoryModal + .modal-backdrop { z-index: 1069 !important; }
#instagramStoryModal { z-index: 1070 !important; }
#instagramStoryModal .modal-dialog { z-index: 1071 !important; pointer-events: auto !important; }
#instagramStoryModal .modal-content { z-index: 1072 !important; pointer-events: auto !important; }
.modal-backdrop.show { opacity: 0.5 !important; pointer-events: none !important; }

/* Author Card - reuse playlist suggestion-profile-card look */
.author-card {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.1) 0%, rgba(229, 9, 20, 0.05) 100%);
    border: 1px solid rgba(229, 9, 20, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.author-card .author-avatar img.rounded-circle {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border: 3px solid #e50914;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.author-card .author-name {
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.author-card .author-bio {
    color: #f8f9fa;
    font-size: 0.9rem;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.author-card .social-link {
    color: #e50914;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.author-card .social-link:hover {
    color: #ff1a2b;
    text-decoration: underline;
}

/* Keep author-card side-by-side on mobile */
@media (max-width: 768px) {
    .author-card .row {
        display: flex;
        flex-direction: row !important; /* override stacking rules */
        align-items: center;
        flex-wrap: nowrap;
        text-align: left;
    }
    .author-card .author-avatar { 
        margin-bottom: 0 !important; 
    }
    .author-card .col-md-2 {
        flex: 0 0 auto;
        width: 80px;
        max-width: 80px;
    }
    .author-card .col-md-10 {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
    .author-card .author-avatar img.rounded-circle {
        width: 60px !important;
        height: 60px !important;
    }
}