/* Design System */
:root {
    /* Colors - Liquid Arts Magazine Palette */
    --bg-primary: #1b1b1b;
    /* Updated to Match Logo Black */
    --bg-secondary: #262626;
    /* Slightly lighter than primary */
    --bg-red: #9c100f;
    /* Updated to Match Side Red */
    --bg-glass: rgba(27, 27, 27, 0.85);
    /* Matched to new primary */

    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-accent: #9c100f;
    /* Updated Red */

    --border-color: rgba(255, 255, 255, 0.1);
    --border-red: #9c100f;
    /* Updated Red */

    /* Typography */
    --font-main: 'Inter', sans-serif;
    --font-display: 'Playfair Display', serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Animations */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --text-primary: #111111;
    --text-secondary: #555555;
    --border-color: #e0e0e0;
    --bg-glass: rgba(255, 255, 255, 0.9);
}

body.light-mode .logo-img {
    filter: none;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
}

.text-italic {
    font-style: italic;
}

.text-red {
    color: var(--text-accent);
}

.display-text {
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: -0.02em;
}

.serif-caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* Layout Utilities */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.talent-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
    /* Increased horizontal padding */
}

@media (max-width: 768px) {
    .talent-page-container {
        padding: 0 var(--spacing-sm);
    }
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

.bg-red {
    background-color: var(--bg-red);
    color: white;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    /* Remove padding to let flex align handle height */
    z-index: 1000;
    transition: background 0.3s ease;
    border-bottom: none;
    background: var(--bg-red);
    /* Standard Red */
    height: 60px;
    /* Fixed height for easier centering */
    display: flex;
    align-items: center;
    /* Center content vertically */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled {
    background: var(--bg-red);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Ensure container fills navbar */
    height: 100%;
}

/* --- Profile Filter Tabs --- */
.profile-filter-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
    border-bottom: none;
    /* Removed border */
    padding-bottom: 1rem;
}

.filter-tab {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.8rem;
    /* Much Larger */
    color: white;
    /* Default White */
    cursor: pointer;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.filter-tab:hover {
    opacity: 1;
}

.filter-tab.active {
    color: var(--bg-red);
    /* Active Red */
    font-weight: 700;
    opacity: 1;
}

.filter-tab.active::after {
    display: none;
    /* Remove underline */
}

/* --- Unify Grid Spacing --- */
.unified-grid {
    column-count: 4;
    /* Desktop default */
    column-gap: 2rem;
    min-height: 300px;
    width: 100%;
}

@media (max-width: 1400px) {
    .unified-grid {
        column-count: 3;
    }
}

@media (max-width: 1024px) {
    .unified-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .unified-grid {
        column-count: 1;
    }
}

/* Force all cards to respect max-width and behave as inline-block for masonry */
.unified-grid .art-card {
    page-break-inside: avoid;
    break-inside: avoid;
    /* Prevent split across columns */
    width: 100%;
    max-width: 380px !important;
    margin: 0 auto 2rem auto !important;
    /* Bottom margin for spacing */
    display: inline-block;
    /* Essential for column-count */
    vertical-align: top;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: white !important;
    /* Force white on red navbar */
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    transition: var(--transition-fast);
}

.nav-link:hover {
    opacity: 1;
    color: white;
    text-decoration: underline;
    /* Simple hover for white text */
}

/* Ensure logo in navbar is black (original image) */
.navbar .logo-img {
    filter: none !important;
}

/* Logo Images */
.logo-img {
    height: 40px;
    width: auto;
    filter: invert(1);
    /* Invert black logo to white for dark theme */
}

.hero-logo {
    width: 80%;
    max-width: 500px;
    height: auto;
    filter: invert(1);
    margin-bottom: var(--spacing-md);
}

/* Bottom Navigation (Mobile Only) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-red);
    /* Red background */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
    z-index: 1000;
    display: none;
    /* Hidden by default on desktop */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
    /* Inactive: Black */
    font-size: 0.7rem;
    transition: var(--transition-fast);
    padding: 2px;
    border-radius: 8px;
    opacity: 0.7;
    /* Slight opacity for inactive black on red? Checking contrast... Black on Red is low contrast. But user requested. */
    /* Actually, user requested "Unselected Black, Selected White". I will follow request. */
    /* I'll remove opacity to ensure black is visible. */
}

.nav-item.active {
    color: white;
    /* Selected: White */
    font-weight: 600;
    opacity: 1;
}

/* Ensure Icons Follow Text Color */
.nav-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 0px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    /* Thinner line for "Fashionable/Wireframe" look */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }

    .navbar .nav-links {
        display: none;
        /* Hide top nav links on mobile */
    }

    body {
        padding-bottom: 70px;
        /* Space for bottom nav */
    }

    .hero-split {
        min-height: 80vh;
        /* Adjust hero height for mobile */
    }
}

/* Hero Section - Magazine Style */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-text-side {
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--bg-red);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-image-side {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
    /* B&W High Contrast */
}

.hero-title {
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 0.9;
    margin-bottom: var(--spacing-md);
    position: relative;
    left: -2rem;
    /* Overlap effect */
    text-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-family: var(--font-main);
    font-size: 1.1rem;
    max-width: 400px;
    margin-bottom: var(--spacing-md);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    padding-left: var(--spacing-sm);
}

/* Circular Feature (Like PeiPei image) */
.circle-feature {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.circle-mask {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.circle-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.circle-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    /* Wider than circle */
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 4rem;
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Grid Layouts */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
}

.grid-item {
    grid-column: span 4;
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.grid-item.large {
    grid-column: span 8;
}

.grid-item.full {
    grid-column: span 12;
}

/* Responsive Grid for Magazine Layout */
@media (max-width: 1024px) {
    .grid-item {
        grid-column: span 6;
        /* 2 Columns */
    }
}

@media (max-width: 600px) {
    .grid-item {
        grid-column: span 12;
        /* 1 Column */
    }

    .magazine-grid {
        gap: 1rem;
    }
}

/* Card Styles */
.art-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition-medium);
}

.art-card:hover {
    transform: translateY(-10px);
}

.art-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    /* IG Portrait Ratio */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    margin-bottom: var(--spacing-sm);
}

.art-card:hover .art-card-image {
    filter: grayscale(0%);
}

.art-card-title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.art-card-meta {
    font-family: var(--font-main);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bg-red);
}

/* Hopping Badge Styles (Mini Row) */
.hopping-badge-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s, z-index 0.2s;
    margin-left: -10px;
    /* Overlap effect */
    position: relative;
    z-index: 1;
}

.hopping-badge-mini:first-child {
    margin-left: 0;
}

.hopping-badge-mini:hover {
    transform: scale(1.2);
    z-index: 10;
    border-color: var(--bg-red);
}

/* --- Hopping Modal Design System --- */
.hopping-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Slightly more transparent for glass feel */
    backdrop-filter: blur(8px);
    /* Frosted glass effect */
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.hopping-modal-card {
    background: #fff;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    /* Smooth corners */
    padding: 1.5rem 2rem;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    font-family: var(--font-main);
}

.hopping-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #1b1b1b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hopping-label {
    display: block;
    margin-bottom: 0.8rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    font-weight: 600;
}

/* Upload Zone */
.upload-zone-stylish {
    width: 100%;
    aspect-ratio: 1/1;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.upload-zone-stylish:hover {
    background: #f5f5f5;
    border-color: #ccc;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

.upload-placeholder-text {
    color: #aaa;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Inputs */
.hopping-input-minimal {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-main);
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s;
    margin-bottom: 1.5rem;
}

.hopping-input-minimal:focus {
    outline: none;
    border-bottom-color: var(--bg-red);
}

/* Mobile Input Zoom Fix */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Rating Stars */
.hop-star {
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    color: #ddd;
}

.hop-star:hover {
    transform: scale(1.1);
}

/* Submit Button */
.btn-hop-submit {
    width: 100%;
    background: #1b1b1b;
    /* Minimalist Black */
    color: white;
    border: none;
    height: 50px;
    border-radius: 25px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 1rem;
}

.btn-hop-submit:hover {
    background: var(--bg-red);
    /* Hover Red */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
}

.btn-hop-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Close Button */
.btn-close-minimal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s;
}

/* --- Hop Detail Card (HopCard) --- */
.hop-detail-card {
    background: #fff;
    width: 90%;
    max-width: 380px;
    /* Match Grid Card Max-width */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    padding-bottom: 2.5rem;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hop-detail-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: visible;
}

.hop-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hop-detail-content {
    padding: 4.5rem 2rem 0 2rem;
    /* Increased top padding to clear hopper profile */
}

.hop-detail-date {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    display: block;
}

.hop-detail-stars {
    color: #ef4444;
    /* Standard Red */
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
    margin-top: 4px;
    /* Ensure minimal gap from padding top */
    display: flex;
    /* Ensure flex for centering */
    justify-content: center;
    /* Horizontally Center */
}

.hop-detail-desc {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    font-style: italic;
    position: relative;
    padding: 0 10px;
}

/* Add decorative quote marks for vibe */
.hop-detail-desc::before {
    content: '“';
    font-family: serif;
    font-size: 3rem;
    color: #f0f0f0;
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: -1;
}

.btn-close-detail {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 10;
}

.btn-close-detail:hover {
    background: rgba(0, 0, 0, 0.6);
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: transparent;
    border: 1px solid white;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: var(--transition-fast);
    font-size: 0.9rem;
}

.btn:hover {
    background: white;
    color: var(--bg-red);
}

/* Footer */
footer {
    background: var(--bg-secondary);
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero-text-side {
        padding: var(--spacing-lg) var(--spacing-sm);
        height: auto;
    }

    .hero-title {
        font-size: 4rem;
        left: 0;
    }

    .grid-item,
    .grid-item.large {
        grid-column: span 12;
    }
}

/* Article Body Content */
.article-body {
    width: 100%;
    overflow-wrap: break-word;
    padding: 2rem 0;
    /* Added spacing */
}

/* --- Article TOC --- */
.article-toc {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid var(--bg-red);
}

.article-toc h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc li {
    margin-bottom: 8px;
}

.article-toc li.toc-item-h3 {
    padding-left: 20px;
    font-size: 0.95em;
}

.article-toc a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.article-toc a:hover {
    border-bottom-color: var(--bg-red);
    color: var(--bg-red);
}

.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.article-body iframe,
.article-body video {
    max-width: 100%;
    margin: 1.5rem 0;
}

/* --- Article Figure (Image + Caption) --- */
figure.article-figure {
    margin: 2rem 0;
    text-align: center;
}

figure.article-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

figure.article-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    font-family: var(--font-main);
    cursor: pointer;
    /* Indicate clickable */
}

/* --- Editor Toolbar Styling --- */
.ql-toolbar.ql-snow {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-color: #e0e0e0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Remove spacing between groups */
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0 !important;
    padding-right: 5px;
    border-right: 1px solid #eee;
}

.ql-toolbar.ql-snow .ql-formats:last-child {
    border-right: none;
}

/* Compact buttons */
.ql-toolbar.ql-snow button {
    padding: 3px 5px !important;
    width: auto !important;
}

/* Adjust dropdowns */
.ql-toolbar.ql-snow .ql-picker-label {
    padding-left: 4px !important;
}

/* --- Sticky Toolbar --- */
.ql-toolbar {
    position: sticky;
    top: 80px;
    /* Offset to sit below the sticky header */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 12px 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 8px;
    width: 100% !important;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    align-items: center;
}

.ql-container {
    border: none !important;
    /* Remove border from editor container */
    font-size: 1.1rem;
}

/* --- Unify Grid Spacing --- */
.unified-grid {
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    /* Standard width */
    gap: 2rem;
    /* Consistent gap */
    width: 100%;
}

@media (max-width: 768px) {
    .unified-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

/* Ensure all cards in grid fill the column */
.unified-grid .art-card {
    width: 100%;
    margin: 0;
}

/* --- Related Bars Selection --- */
.bar-list-container {
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.bar-list-container.selected-list {
    background: #fdfdfd;
    border-color: #d0d0d0;
}

.bar-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    font-size: 0.9rem;
}

.bar-item:last-child {
    border-bottom: none;
}

.bar-item:hover {
    background-color: #f5f5f5;
}

.bar-item.selected-item {
    background-color: rgba(138, 0, 0, 0.05);
    /* Light red tint */
    color: var(--bg-red);
}

.bar-item.selected-item:hover {
    background-color: rgba(138, 0, 0, 0.1);
}

.bar-item .action-icon {
    font-size: 1.2em;
    color: #ccc;
}

.bar-item:hover .action-icon {
    color: #666;
}

.bar-item.selected-item .action-icon {
    color: var(--bg-red);
    /* Red X for removal */
}

/* --- Article Category Badge --- */
.article-category-badge {
    color: var(--bg-red);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 600;
}

/* --- Primary Button (CI Red) --- */
.btn-primary {
    background-color: var(--bg-red);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-primary:hover {
    background-color: #660000;
    /* Darker red */
}

.btn-secondary {
    background-color: #eee;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background-color: #ddd;
}

/* --- Bar Details Page --- */
.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    /* Increased gap for better separation */
    padding-bottom: 60px;
    align-items: start;
}

.hero-card {
    background-size: cover;
    background-position: center;
}

.detail-title-block {
    position: relative;
    z-index: 2;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.content-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Prevent Overflow */
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.content-card .section-title {
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--font-display);
    margin-bottom: 1.5rem;
    /* Standardized spacing */
    color: var(--text-primary);

    /* Ensure title wraps in narrow columns */
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .content-card {
        padding: 15px;
        /* Reduce padding on mobile to give content more space */
    }
}

.sidebar-info .content-card {
    padding: 25px;
}

@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.signatures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .signatures-grid {
        grid-template-columns: 1fr;
    }
}

/* Map Label */
.map-label {
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    text-shadow: 0 1px 2px white, 0 0 1em white;
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* Scrollable Content Styling */
.scrollable-content::-webkit-scrollbar {
    width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

@media (max-width: 768px) {
    .container.detail-grid {
        flex-direction: column;
    }
}

/* CMS Editor Alignment Fixes */
.ql-editor .article-figure {
    display: block !important;
    width: 100% !important;
    margin: 1em 0;
    clear: both;
}

.ql-editor .article-figure img {
    display: block;
    max-width: 100%;
}

/* Center */
.ql-editor .article-figure.ql-align-center {
    text-align: center;
}

.ql-editor .article-figure.ql-align-center img {
    margin: 0 auto !important;
}

/* Right */
.ql-editor .article-figure.ql-align-right {
    text-align: right;
}

.ql-editor .article-figure.ql-align-right img {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Caption */
.ql-editor .article-figure figcaption {
    display: block;
    margin-top: 8px;
    font-style: italic;
    color: #666;
}

/* Lightbox Navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--bg-red);
    /* Red arrow */
    font-size: 3rem;
    /* Increased size since it's just an icon now */
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 2001;
    padding: 10px;
    /* Hit area */
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.2);
}

.lightbox-nav.prev {
    left: 15%;
    /* Moving closer to middle (away from edge) */
}

.lightbox-nav.next {
    right: 15%;
    /* Moving closer to middle */
}

@media (max-width: 768px) {
    .lightbox-nav.prev {
        left: 5%;
    }

    .lightbox-nav.next {
        right: 5%;
    }
}

/* Responsive Grids */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0;
    /* Remove legacy padding */
}

#bars-grid {
    display: block;
    column-count: 3;
    column-gap: 30px;
}

#bars-grid .grid-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    #bars-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    #bars-grid {
        column-count: 1;
    }
}

/* Masonry Grid for Detail Page (Review present) */
.masonry-grid {
    column-count: 3;
    column-gap: 30px;
    padding-bottom: 60px;
}

.masonry-grid .grid-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
    }
}

.magazine-grid .grid-item {
    margin-bottom: 0;
    /* Remove legacy margin */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

@media (max-width: 480px) {
    .magazine-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for gallery on mobile */
    }

    .content-card {
        padding: 20px;
    }
}

/* --- Search & Filter Bar Optimization --- */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-input,
.filter-select {
    padding: 12px 24px;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    /* Fully rounded pills */
    background: #fff;
    color: #444;
    font-family: var(--font-main);
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    min-width: 150px;
}

/* Custom Arrow for Filter Selects */
.filter-select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px;
    /* Angle space */
    cursor: pointer;
}

.search-input {
    width: 320px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-size: 18px;
    padding-left: 50px;
    /* Space for icon */
}

.search-input:focus,
.filter-select:focus,
.filter-select:hover {
    border-color: var(--bg-red);
    box-shadow: 0 6px 20px rgba(138, 0, 0, 0.15);
    color: #222;
}

.filter-select option {
    color: #333;
}

/* --- Section Title (Global Large Header) --- */
.section-title {
    font-family: var(--font-display);
    font-size: 3rem;
    color: #1b1b1b;
    margin: 0 0 2rem 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Brighten Dark Map Routes (Fashion Style) */
.card-map .leaflet-tile-pane {
    filter: brightness(1.7) contrast(0.85);
}

/* --- Magazine Card Styling (Rich Information) --- */
.magazine-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.magazine-card {
    background: white;
    border-radius: 8px;
    /* Slightly rounded */
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.magazine-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    /* Standard card ratio */
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.magazine-card:hover .card-image {
    transform: scale(1.05);
}

/* Map Toggle Overlay */


.magazine-card:hover .card-map {
    opacity: 1;
    /* Show map on hover? Or maybe just keep it hidden until toggled. For now, let's assume JS handles map logic or keeps it minimal. Actually, looking at previous code, map was initialized. Let's allowing it to show if init. User feedback implies they want info. */
    /* Wait, the map might be annoying on hover. Let's make it visible only if specifically targeted or just static image usually. 
       Actually, previous logic had map initialized. I'll make it appear on hover for that "Discovery" feel */
}

.card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    gap: 5px;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

.badge-vibe {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

.card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-primary);
    line-height: 1.2;
}

.card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.rating {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.save-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* --- Art Card Map Hover Effect --- */


/* Ensure card map is visible in the content flow */
.card-content .card-map {
    display: block !important;
    opacity: 1 !important;
    height: 150px;
    /* Force height */
    background: #f0f0f0;
}

/* --- Hopping Gallery Transitions --- */
.hop-slide-container {
    position: relative;
    width: 90%;
    max-width: 380px;
    height: auto;
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    /* Optional for depth */
}



/* Animations */
.slide-out-to-left {
    animation: slideOutLeft 0.35s forwards ease-in;
}

.slide-out-to-right {
    animation: slideOutRight 0.35s forwards ease-in;
}

.slide-in-from-right {
    animation: slideInRight 0.35s forwards ease-out;
}

.slide-in-from-left {
    animation: slideInLeft 0.35s forwards ease-out;
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-120%) scale(0.9);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-120%) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Ensure only one card handles events during transition */
.hop-detail-card.exiting {
    pointer-events: none;
    position: absolute;
    /* Take out of flow to prevent height jumping if supported */
    top: 0;
    left: 0;
}

/* Hopper Profile on Card */
.hopper-profile-container {
    position: absolute;
    top: 100%;
    /* Align top edge to bottom of image */
    margin-top: -40px;
    /* Pull up by half the avatar height (80px/2) to center exactly on line */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Compact gap */
    z-index: 20;
    width: 100%;
}

.hopper-avatar {
    width: 80px;
    /* Increased Size */
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: #eee;
}

.hopper-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    background: transparent;
    /* Remove Frame */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    /* Readability */
}

.hopper-role {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-top: -2px;
    /* Close to name */
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 8px;
}

.hop-detail-content {
    padding: 8.75rem 25px 25px;
    /* Increased to ~140px to clear hanging profile buttons */
    flex-grow: 1;
    overflow-y: auto;
    background: #fff;
    position: relative;
}

.hop-interactions {
    display: flex;
    gap: 16px;
    /* Larger gap */
    margin-top: 4px;
    align-items: center;
    justify-content: center;
}

.btn-interaction {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    /* Larger padding */
    display: flex;
    align-items: center;
    gap: 8px;
    /* Larger gap */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, background 0.2s;
    color: #555;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.9rem;
    /* Larger font */
}

.btn-interaction:hover {
    transform: translateY(-2px);
    background: #fff;
}

.btn-interaction.active {
    color: #ef4444;
    /* Red for Cocktail */
    background: #fff;
    border-color: #fca5a5;
}

/* Liquid Animation (Cocktail - Scale Down from Top for "Filling" doesn't work well for Triangle) 
   Actually, for a cocktail glass (triangle), "filling" usually means scaling UP from the bottom tip.
   The path I used in JS is the full liquid triangle. 
   So I should scale it from 0 to 1 with transform-origin: bottom (the tip of the triangle).
*/
.cheers-liquid {
    transform-origin: bottom;
    /* The tip of the triangle (which is at y=11 roughly) */
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ef4444;
    /* Liquid Color: Red */
}

.btn-interaction.active .cheers-liquid {
    transform: scale(1);
}

.interaction-icon {
    width: 24px;
    /* Larger icon */
    height: 24px;
}

@keyframes clink {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-20deg) scale(1.1);
    }

    50% {
        transform: rotate(10deg) scale(1.1);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

/* Hop In Button Animation */
.pouring .hop-submit-icon {
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* --- Poster Style Components --- */
.poster-image-container {
    width: 320px;
    height: 320px;
}

#featured-talent-name {
    font-size: 5rem;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
    .poster-image-container {
        width: 240px !important;
        height: 240px !important;
    }

    #featured-talent-name {
        font-size: 3.5rem !important;
    }
}

/* Hide Leaflet Zoom Controls on Mobile */
@media (max-width: 768px) {
    .leaflet-control-zoom {
        display: none !important;
    }
}

/* Map Page Layout Fix */
.map-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 60px;
    /* Account for navbar */
    position: relative;
}

@media (max-width: 768px) {
    .map-layout {
        height: 100vh;
        /* Allow full height */
        padding-bottom: 70px;
        /* Space for bottom nav */
    }
}

/* --- Talent Page Styling --- */

/* Talent Hero */
.talent-hero {
    background: #1b1b1b;
    /* Dark theme default for hero? Or white? Let's go Clean White per Liquid Arts standard, or Split? */
    /* Let's try a distinct look: White background, large image. */
    background: #fff;
    padding-top: 100px;
    /* Nav spacing */
    padding-bottom: 4rem;
}

.talent-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.talent-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.talent-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s;
}

.talent-main-image:hover {
    filter: none;
}

.talent-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.talent-label {
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--bg-red);
    margin-bottom: 1rem;
    font-weight: 600;
}

.talent-name {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: #1b1b1b;
    margin-bottom: 2rem;
}

.talent-quote-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.quote-mark {
    position: absolute;
    top: -30px;
    left: -20px;
    font-size: 6rem;
    font-family: var(--font-display);
    color: rgba(239, 68, 68, 0.1);
    z-index: 0;
    line-height: 1;
}

.talent-quote {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-style: italic;
    color: #333;
    position: relative;
    z-index: 1;
}

.talent-bio {
    font-family: var(--font-main);
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.talent-roles-container {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.talent-role-item {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    color: #1b1b1b;
    border-left: 3px solid var(--bg-red);
    padding-left: 0.8rem;
    line-height: 1.2;
}

/* Sections */
.section-title-small {
    font-family: var(--font-display);
    font-size: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    color: var(--text-primary);
    /* Changed from #1b1b1b for visibility on dark */
    letter-spacing: 0.05em;
}

/* Split Details */
.talent-details-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

/* Timeline List */
.timeline-list {
    list-style: none;
    padding: 0;
    border-left: 2px solid #f0f0f0;
}

.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    /* Center on 2px border */
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--bg-red);
    border-radius: 50%;
}

.timeline-year {
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--bg-red);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.timeline-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-primary);
    /* Changed to use variable (likely dark on light body, but these sections might need light on dark depending on context?) 
    WAIT - The body background is not forced dark, but user said "Dark Background".
    If body is standard, it's light. BUT user said "black background part text to white".
    This implies the sections are on a black background? 
    Checking `talent.html` structure: <main class="container section-padding">.
    If body is default, it's light.
    Unless `styles.css` sets body to dark?
    Let's check body styles.
    Assuming the user sees a dark background, created by a theme or user preference.
    Let's force these to be clearly visible against typical Liquid Arts dark/red themes if that's what's happening.
    Actually, maybe the user implies the WHOLE page below the clean white hero feels like it should be dark or IS dark in their view?
    Let's trust the user: "Black background part text to white".
    So we set color to white.
    */
    color: #fff;
    /* Forcing white as requested for "black background part" */
    margin-bottom: 0.2rem;
}

.timeline-desc {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #ccc;
    /* Lighter grey for visibility on black */
}

/* Talent Hops Grid */
.talent-hops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns on desktop */
    gap: 1rem;
}

@media (max-width: 1024px) {
    .talent-hops-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .talent-hops-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.talent-hop-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #222;
}

.talent-hop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.talent-hop-card:hover .talent-hop-img {
    transform: scale(1.05);
}

.talent-hop-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.talent-hop-card:hover .talent-hop-overlay {
    opacity: 1;
}

.talent-hop-date {
    font-size: 0.75rem;
    font-family: var(--font-main);
}

.talent-hop-rating {
    font-size: 0.85rem;
    color: #FFD700;
}

/* Responsive */
@media (max-width: 900px) {
    .talent-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .talent-details-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .talent-name {
        font-size: 3rem;
    }
}

/* Talent Hop Card */
.talent-hop-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.talent-hop-card:hover {
    transform: scale(1.02);
}

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

.talent-hop-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.talent-hop-card:hover .talent-hop-overlay {
    opacity: 1;
}

.talent-hop-rating {
    color: #ef4444;
    /* Red */
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.talent-hop-date {
    color: #ccc;
    font-size: 0.8rem;
    font-family: var(--font-display);
    text-transform: uppercase;
}