/* 
 * OnlySynopsis Advanced Light-Mode Dashboard Layout
 * File: style.css
 * Theme: Premium Light Slate & Editorial White
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap');

:root {
    --os-body-bg: #ffffff;
    --os-card-bg: #f8f9fa;
    --os-card-hover: #f1f3f5;
    --os-primary: #0f172a; /* Deep Charcoal */
    --os-secondary: #475569; /* Slate Grey */
    --os-accent: #ff9f0a; /* Warm Amber */
    --os-accent-hover: #e08600;
    --os-border: #e2e8f0; /* Clean Grey Border */
    --os-border-hover: #cbd5e1;
    --os-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --os-card-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

/* Master plugin wrapper container (FULL-WIDTH EXPANSION) */
.os-title-page, 
.os-tool,
.os-person-page {
    max-width: 100% !important; /* Expanded to full screen width */
    margin: 20px auto;
    font-family: 'Outfit', sans-serif !important;
    color: var(--os-secondary) !important;
    background: var(--os-body-bg) !important;
    padding: 35px;
    border-radius: 16px;
    box-shadow: var(--os-shadow);
    border: 1px solid var(--os-border);
    box-sizing: border-box;
}

.os-title-page h1, .os-title-page h2, .os-title-page h3, .os-title-page p, .os-title-page li,
.os-person-page h1, .os-person-page h2, .os-person-page p, .os-person-page li {
    color: var(--os-primary) !important;
}

/* Master Grid Structure */
.os-main-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 30px;
    align-items: start;
}

/* Left Column Styling */
.os-col-left {
    display: flex;
    flex-direction: column;
}

.os-header-category {
    margin: 0 0 6px 0 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--os-accent-hover) !important;
}

.os-main-title {
    margin: 0 0 14px 0 !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    color: var(--os-primary) !important;
}

/* Compact Metadata Badge Bar */
.os-badge-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.os-badge-item {
    background: var(--os-card-bg) !important;
    color: var(--os-secondary) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--os-border) !important;
    display: inline-block;
}

/* Premium Light Boxed Synopsis (EXPANDED SIZE) */
.os-synopsis-box {
    background: var(--os-card-bg);
    border: 1px solid var(--os-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--os-card-shadow);
}

.os-synopsis-box h2,
.os-col-right h2,
.os-title-page h2,
.os-episodes-section h2 {
    font-size: 1rem !important;
    margin: 0 0 16px 0 !important;
    color: var(--os-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--os-primary) !important;
    padding-bottom: 8px !important;
}

.os-synopsis-text {
    line-height: 1.65 !important;
    font-size: 0.95rem !important;
    color: var(--os-secondary) !important;
    margin: 0 !important;
    max-height: 280px !important; /* Expanded from 110px to 280px for a larger layout */
    overflow-y: auto;
    padding-right: 12px;
}

/* Custom Scrollbar for Synopsis & Episodes */
.os-synopsis-text::-webkit-scrollbar,
.os-episodes-section::-webkit-scrollbar {
    width: 4px;
}
.os-synopsis-text::-webkit-scrollbar-track,
.os-episodes-section::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.os-synopsis-text::-webkit-scrollbar-thumb,
.os-episodes-section::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.os-synopsis-text::-webkit-scrollbar-thumb:hover,
.os-episodes-section::-webkit-scrollbar-thumb:hover {
    background: var(--os-accent);
}

/* Amazon Prime Call to Action */
.os-amazon-cta {
    margin-bottom: 24px;
}

.os-amazon-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--os-accent) !important;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    font-size: 0.92rem;
    border: none;
    box-shadow: 0 4px 14px 0 rgba(255, 159, 10, 0.25);
    transition: all 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.os-amazon-cta a:hover {
    background: var(--os-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(255, 159, 10, 0.35);
}

/* Right Column (Cast, Directors, Producers) */
.os-col-right {
    background: var(--os-card-bg);
    border: 1px solid var(--os-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--os-card-shadow);
}

.os-credits-section {
    margin-bottom: 24px;
}

.os-credits-section:last-child {
    margin-bottom: 0;
}

.os-credits-list {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.os-credits-list li {
    font-size: 0.85rem !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.os-credits-list li a {
    color: var(--os-primary) !important;
    text-decoration: none;
    font-weight: 600;
    background: #ffffff !important;
    border: 1px solid var(--os-border) !important;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.os-credits-list li a:hover {
    background: var(--os-primary) !important;
    border-color: var(--os-primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Directory Indices (Movies, Series, People grids) */
.os-directory-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--os-primary) !important;
    margin: 0 0 24px 0 !important;
    border-bottom: 2px solid var(--os-primary) !important;
    padding-bottom: 8px !important;
    display: inline-block;
}

.os-directory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    list-style-type: none !important;
}

.os-directory-card {
    background: var(--os-card-bg) !important;
    border: 1px solid var(--os-border) !important;
    padding: 18px 14px !important;
    border-radius: 12px !important;
    text-align: center !important;
    list-style-type: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    break-inside: avoid;
    box-shadow: var(--os-card-shadow) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.os-directory-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--os-primary) !important;
    background: #ffffff !important;
    box-shadow: var(--os-shadow) !important;
}

.os-directory-card a {
    color: var(--os-primary) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: block;
    line-height: 1.35 !important;
}

.os-directory-card a:hover {
    color: var(--os-primary) !important;
}

.os-directory-card small {
    display: block;
    margin-top: 8px;
    color: var(--os-secondary) !important;
    font-size: 0.78rem !important;
}

/* Sibling Episode Navigation List */
.os-episode-nav-list {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.os-episode-nav-list li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--os-border) !important;
    font-size: 0.9rem !important;
    color: var(--os-secondary) !important;
    list-style-type: none !important;
}

.os-episode-nav-list li:last-child {
    border-bottom: none;
}

.os-episode-nav-list a {
    color: var(--os-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.os-episode-nav-list a:hover {
    text-decoration: underline !important;
}

/* Bottom Horizontal Layout Sections */
.os-bottom-section {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 30px;
}

/* Binge Metrics Card */
.os-binge-profile {
    background: var(--os-card-bg);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--os-border);
    box-shadow: var(--os-card-shadow);
}

.os-binge-profile h2 {
    font-size: 1.05rem !important;
    margin: 0 0 14px 0 !important;
    border-bottom: 2px solid var(--os-primary) !important;
    padding-bottom: 8px !important;
}

.os-binge-profile p {
    margin: 0 0 10px 0 !important;
    font-size: 0.9rem !important;
    color: var(--os-secondary) !important;
}

.os-binge-badge {
    background: var(--os-primary);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.os-episodes-section {
    background: var(--os-card-bg);
    border: 1px solid var(--os-border);
    border-radius: 12px;
    padding: 20px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: var(--os-card-shadow);
}

/* DNA Similar Recommendations Grid */
.os-dna-section {
    margin-top: 30px;
    grid-column: 1 / -1;
}

.os-dna-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Entire card is now a single cohesive clickable block */
.os-dna-card {
    background: var(--os-card-bg) !important;
    border: 1px solid var(--os-border) !important;
    padding: 16px !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    box-shadow: var(--os-card-shadow);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.os-dna-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--os-primary) !important;
    background: #ffffff !important;
    box-shadow: var(--os-shadow) !important;
}

.os-dna-card h4 {
    margin: 0 0 6px 0 !important;
    font-size: 0.92rem !important;
    color: var(--os-primary) !important;
    font-weight: 700 !important;
    transition: color 0.15s ease;
}

.os-dna-card:hover h4 {
    color: var(--os-primary) !important;
}

.os-dna-card small {
    color: var(--os-secondary) !important;
    font-size: 0.78rem !important;
}

/* Alphabet Segmented Tabs (People Directory) */
.os-alphabet-filter {
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 2.2;
    text-align: center;
    background: var(--os-card-bg) !important;
    border: 1px solid var(--os-border) !important;
    padding: 18px !important;
    border-radius: 14px !important;
    box-shadow: var(--os-card-shadow);
}

.os-alphabet-filter strong {
    color: var(--os-primary) !important;
}

.os-alphabet-filter a {
    text-decoration: none;
    color: var(--os-secondary) !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.os-alphabet-filter a:hover {
    background: var(--os-primary);
    color: #ffffff !important;
}

/* Custom Page Pagination Blocks */
.os-pagination a {
    padding: 8px 14px !important;
    border: 1px solid var(--os-border) !important;
    background: var(--os-card-bg) !important;
    color: var(--os-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease;
}

.os-pagination a:hover {
    border-color: var(--os-primary) !important;
    color: #ffffff !important;
    background: var(--os-primary) !important;
}

/* Responsive collapse to Single Column for small tablets/phones */
@media (max-width: 820px) {
    .os-main-grid,
    .os-bottom-section {
        grid-template-columns: 1fr;
    }
    .os-dna-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}