/* /library-hub.css (Optimized v3 - Includes Visual Enhancements) */

/* --- Main Hub Layout --- */
.library-hub-container {
    padding: 100px 40px 40px; /* Adjusted top padding */
    max-width: 1800px; /* Wider max-width for larger screens */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* --- Section Styling & Animation --- */
.hub-section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    position: relative; /* Keep relative positioning */
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.hub-section-header {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.hub-section-header h2 {
    font-size: 1.3rem;        /* Slightly larger for this font style */
    margin: 0;
    text-transform: lowercase; /* Set text to lowercase */
    letter-spacing: 1.5px;     /* Adjust spacing */
    color: #c0cadb;          /* Slightly brighter, cool grey */
    font-weight: 600;         /* Use Semi-Bold weight */
    font-family: 'Oxanium', sans-serif; /* Apply Oxanium font */
    line-height: 1.2;          /* Ensure good line height */
}

/* --- CTA Button (Used in Hero & Banner) --- */
.cta-button {
    display: inline-block;
    padding: 12px 28px; /* Slightly larger */
    background: linear-gradient(45deg, #4a90e2, #5aa1f2);
    color: #fff;
    border: none;
    border-radius: 25px; /* More rounded */
    font-size: 1rem; /* Slightly larger */
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(74, 144, 226, 0.4);
}

/* --- Grid Layout --- */
.story-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 25px;
}
/* Grid uses the same .story-card styles as the carousel */

/* --- Featured Banner --- */
.featured-banner {
    aspect-ratio: 16 / 5; /* Wide banner aspect ratio */
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center; /* Center content vertically */
    padding: 40px;
    box-sizing: border-box;
    min-height: 250px;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(9, 10, 15, 0.8) 30%, transparent 80%);
}

.banner-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 500px;
}

.banner-content h2 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
}

.banner-content p {
    font-size: 1rem;
    color: #ccc;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* --- Empty Row Message --- */
.empty-row-message {
    color: #6b7280; /* Muted text color */
    font-style: italic;
    padding: 20px 0;
}

/* --- Skeleton Loader --- */
.story-card-list.is-loading {
    display: flex; /* Make skeleton list flex for horizontal layout */
    gap: 25px;
    overflow: hidden; /* Prevent scrolling during loading */
}

.skeleton-story-card {
    flex-shrink: 0; /* Prevent skeleton cards from shrinking */
    width: 320px; /* Match the final card width */
    aspect-ratio: 16 / 9; /* Match card ratio */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skeleton-shine 1.5s infinite linear;
}

@keyframes skeleton-shine {
    to { background-position: -200% 0; }
}

/* --- Standard Story Carousel & Card Styles --- */

.story-carousel-wrapper {
    position: relative; /* For positioning navigation buttons */
}

.story-card-list {
    display: flex;
    gap: 25px;
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth;
    padding-bottom: 20px; /* Space for scrollbar, if visible */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

.story-card-list::-webkit-scrollbar {
    display: none;
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-calc(50% + 10px)); /* Move up slightly more */
    width: 44px;
    height: 44px;
    background-color: rgba(15, 17, 26, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.2s ease;
}

.story-carousel-wrapper:hover .carousel-nav-btn {
    opacity: 1;
    pointer-events: auto;
}

.carousel-nav-btn:hover {
    background-color: #4a90e2;
}

.carousel-nav-btn.prev {
    left: -22px; /* Position half outside */
}

.carousel-nav-btn.next {
    right: -22px; /* Position half outside */
}

.carousel-nav-btn svg {
    width: 24px;
    height: 24px;
}

.story-card {
    position: relative;
    display: block; /* Important for link */
    border-radius: 8px;
    overflow: hidden;
    background-color: #1a1c29; /* Fallback */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 16 / 9; /* Landscape ratio */
    width: 320px; /* Fixed width */
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

.story-card:hover {
    transform: translateY(-8px); /* Lift effect */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.story-card-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.story-card:hover .story-card-bg {
    transform: scale(1.05); /* Slight zoom on hover */
}

.story-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px; /* Adjusted padding */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 20%, transparent 100%);
    color: #fff;
    transition: background 0.3s ease; /* Smooth transition */
}

.story-card-title {
    font-size: 1.3rem; /* Adjusted size */
    font-weight: bold;
    margin: 0 0 4px 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-card-author {
    font-size: 0.85rem; /* Adjusted size */
    color: #ccc;
}

.story-card--no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(45deg, #1a1c29, #2a2d3a);
}
.story-card--no-image .story-card-title {
    font-size: 1.5rem;
    position: relative;
    text-shadow: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.story-card--no-image .story-card-author {
     margin-top: 5px;
}
.story-card--no-image .story-card-overlay {
    position: static;
    background: none;
    padding: 10px;
}

.story-card-hover-info {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(9, 10, 15, 0.75);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 2;
}

.story-card:hover .story-card-hover-info {
    opacity: 1;
    visibility: visible;
}
.story-card:hover .story-card-overlay {
    background: none;
}

.story-card-synopsis {
    font-size: 0.85rem;
    color: #e0e0e0;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Enhanced Hero Carousel Styles --- */

.hub-section:first-child {
    margin-top: 0; /* Reset top margin for hero */
    border-bottom: none;
    padding-top: 0;
}
.hub-section:first-child .hub-section-header {
    border-bottom: none;
}

.hero-carousel {
    position: relative;
    height: 55vh;         /* Reduced viewport height */
    min-height: 350px;    /* Minimum height */
    max-height: 450px;    /* Maximum height ceiling */
    border-radius: 8px;
    overflow: hidden;
    background-color: #1a1c29; /* Fallback background */
    margin-bottom: -100px; /* Significant overlap */
    z-index: 5;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute; /* Force absolute positioning */
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    padding: 0 5%;       /* Horizontal padding only */
    box-sizing: border-box;
    /* Removed display:flex and align-items:flex-end */
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center; /* Focus on center */
    transform: scale(1.1);
    transition: transform 7s ease-out;
}

.hero-slide.is-active .hero-slide-bg {
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 10, 15, 1) 0%, rgba(9, 10, 15, 0.7) 30%, transparent 80%);
    z-index: 1;
}

.hero-content {
    position: absolute; /* Position absolutely bottom-left */
    bottom: 4%;       /* Distance from bottom */
    left: 5%;         /* Distance from left */
    z-index: 2;
    color: #fff;
    max-width: 45%;
    opacity: 0;
    transform: translateY(0); /* Start at final vertical position */
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
}

.hero-slide.is-active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Content Visual Enhancements --- */

.hero-content h2 {
    /* Larger, Bolder Title */
    font-size: clamp(2.2rem, 4vw, 3.2rem); /* Increased size range */
    font-weight: 600; /* Semi-bold or bold */
    margin-bottom: 12px; /* Increased space below title */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* Soft shadow for readability */
    line-height: 1.1; /* Slightly tighter line height for large titles */
}

.hero-content p {
    /* Author Line Styling */
    font-size: clamp(0.85rem, 1.4vw, 0.95rem); /* Slightly smaller than default */
    color: #D1D5DB; /* Slightly muted color */
    margin-bottom: 15px; /* Space below author */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-banner-summary {
    /* Summary Styling */
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Keep original size or adjust slightly */
    line-height: 1.6; /* Ensure good readability */
    color: #E0E0E0;
    margin-bottom: 30px; /* Increased space below summary, above button */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    /* Keep existing text-overflow properties */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.6 * 1rem * 2); /* Adjust based on final font size if needed */
}

.hero-content .cta-button {
    /* Button Polish */
    margin-top: 0; /* Remove top margin as summary margin handles spacing */
    padding: 13px 30px; /* Slightly increase padding */
    border-radius: 30px; /* Make it more rounded */
    /* Keep existing hover effects */
}

/* --- Optional Divider --- */
/*
.hero-content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: rgba(74, 144, 226, 0.6);
    margin-top: 15px;
}
*/

/* --- Hero Navigation --- */
.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6; /* Ensure above overlap */
    width: 40px;
    height: 40px;
    background-color: rgba(15, 17, 26, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 38px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.2s ease, transform 0.2s ease;
}
.hero-carousel:hover .hero-nav-btn {
    opacity: 0.8;
    pointer-events: auto;
}
.hero-nav-btn:hover { background-color: rgba(74, 144, 226, 0.9); transform: translateY(-50%) scale(1.1); }
.hero-nav-prev { left: 2%; }
.hero-nav-next { right: 2%; }

/* --- Hero Dots --- */
.hero-dots {
    position: absolute;
    bottom: 25px;
    right: 5%;
    left: auto;
    transform: translateX(0);
    z-index: 6; /* Ensure above overlap */
    display: flex;
    gap: 12px;
}
.hero-dot {
    width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3);
    border: none; cursor: pointer; padding: 0; transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-dot:hover { background-color: rgba(255, 255, 255, 0.6); }
.hero-dot.is-active { background-color: #fff; transform: scale(1.2); }


/* --- Visual Integration Rules --- */

/* Apply default spacing and stacking to ALL sections initially */
.hub-section {
    margin-top: 50px;
    padding-top: 0;
    background: none;
    position: relative; /* Needed for z-index context */
    z-index: 3;       /* Default stacking */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Remove top margin specifically for the very first section (hero) */
.hub-section:first-child {
    margin-top: -25px; /* Adjust as needed */
    border-bottom: none;
}
.hub-section:first-child .hub-section-header {
    border-bottom: none;
}

/* Override defaults ONLY for the section immediately after the hero */
.hero-carousel + .hub-section {
    margin-top: -120px; /* Pull the section up significantly */
    padding-top: 0;   /* Remove padding from the section itself */
    position: relative;
    z-index: 4; /* Place it below hero (5) but above others (3) */
    background: none; /* Ensure no background blocks hero */
    /* Adjust animation for integrated section if needed */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out 0.15s forwards; /* Example: slightly delayed */
}

/* Gradient using Pseudo-element for the integrated section */
.hero-carousel + .hub-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(9, 10, 15, 0) 0%, rgba(9, 10, 15, 1) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Padding for the inner content wrapper of the integrated section */
.hero-carousel + .hub-section .story-carousel-wrapper,
.hero-carousel + .hub-section .story-grid-list {
    position: relative;
    z-index: 1;
    padding-top: 80px; /* Push content below gradient */
    padding-bottom: 20px; /* Add space below row */
}

/* Hide the header for the integrated section */
.hero-carousel + .hub-section .hub-section-header {
    display: none;
}


/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .hero-carousel {
        height: 50vh;
        min-height: 300px;
        max-height: 400px;
        margin-bottom: -80px; /* Less overlap */
    }
    .hero-content { max-width: 60%; padding: 0 4%; /* Removed margin-bottom */ }
    .hero-content h2 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        margin-bottom: 10px;
    }
    .hero-content p {
        font-size: clamp(0.8rem, 1.3vw, 0.9rem);
        margin-bottom: 12px;
    }
    .hero-banner-summary {
        font-size: clamp(0.85rem, 1.4vw, 0.95rem);
        margin-bottom: 25px;
        max-height: calc(1.6 * 0.95rem * 2);
    }
    .hero-content .cta-button {
        padding: 11px 25px;
        font-size: 0.9rem; /* Added missing font-size */
    }
    .hero-dots { left: 50%; transform: translateX(-50%); right: auto; bottom: 15px; }

    .hero-carousel + .hub-section { margin-top: -100px; }
    .hero-carousel + .hub-section::before { height: 100px; }
    .hero-carousel + .hub-section .story-carousel-wrapper,
    .hero-carousel + .hub-section .story-grid-list { padding-top: 40px; }

    /* Other responsive adjustments */
    .carousel-nav-btn { display: none; }
    .story-card { width: 280px; }
    .story-grid-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .story-card-list { scroll-snap-type: x mandatory; }
    .story-card { scroll-snap-align: start; }
    .hub-section-header h2 { font-size: 1.5rem; }
    .library-hub-container { padding: 80px 20px 20px; gap: 30px; } /* Adjust main container padding */
}

@media (max-width: 600px) {
    .hero-carousel {
        height: 45vh;
        min-height: 250px;
        max-height: 350px;
        margin-bottom: -60px; /* Less overlap */
    }
    .hero-content { max-width: 85%; padding: 0 5%; /* Removed margin-bottom */ }
    .hero-content h2 {
        font-size: clamp(1.8rem, 5vw, 2.4rem);
        margin-bottom: 8px;
    }
     .hero-content p {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }
    .hero-banner-summary {
        font-size: 0.9rem;
        margin-bottom: 20px;
        max-height: calc(1.6 * 0.9rem * 3); /* Adjust height for 3 lines */
         -webkit-line-clamp: 3; /* Allow slightly more text on small screens */
    }
    .hero-content .cta-button {
        padding: 10px 22px;
        font-size: 0.9rem;
    }
    .hero-nav-btn { display: none; }
    .hero-dots { gap: 8px; bottom: 10px; }
    .hero-dot { width: 8px; height: 8px; }

    .hero-carousel + .hub-section { margin-top: -80px; }
    .hero-carousel + .hub-section::before { height: 80px; }
    .hero-carousel + .hub-section .story-carousel-wrapper,
    .hero-carousel + .hub-section .story-grid-list { padding-top: 20px; }

    /* Other responsive adjustments */
    .library-hub-container { padding: 80px 15px 15px; gap: 25px; }
    .story-card { width: 250px; }
    .story-card-list { gap: 15px; }
    .story-grid-list { gap: 15px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

/* --- NEW: Hero Story Logo Styling --- */
.hero-story-logo {
    display: block; /* Ensure it takes block layout */
    /* --- INCREASED VALUE --- */
    max-height: 110px; /* Increased from 80px - Adjust as needed */
    /* --- END INCREASE --- */
    max-width: 80%; /* Prevent overly wide logos */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px; /* Increased space below logo slightly */
    object-fit: contain; /* Prevent distortion */
}

/* --- Adjust spacing for elements following the logo --- */
.hero-story-logo + p { /* Target the author line immediately after logo */
    margin-top: 5px; /* Add a little space if needed */
}

/* --- Adjust responsive logo size --- */
@media (max-width: 900px) {
    .hero-story-logo {
       max-height: 90px;
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    .hero-story-logo {
        max-height: 75px;
        margin-bottom: 10px;
    }
}

/* --- Add to the end of library-hub.css --- */

/* --- Coming Soon Section Styles --- */

/* Ensure the coming soon section header is styled like others if a title is added */
.hub-section:has(.coming-soon-card) .hub-section-header {
    /* Reuses existing header styles */
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.coming-soon-card .story-card-overlay {
    /* Make slightly more space in the overlay */
    padding: 18px;
}

.coming-soon-card .story-card-title {
    font-size: 1.1rem; /* Slightly smaller title for chapter */
    margin-bottom: 5px;
}

.coming-soon-card .story-card-author {
    font-size: 0.8rem; /* Smaller author/story line */
    color: #b0bdcf; /* Slightly different color */
    display: block; /* Ensure it takes its own line */
    margin-bottom: 8px;
}

.coming-soon-date {
    display: block; /* Ensure it takes its own line */
    font-size: 0.85rem;
    font-weight: 500;
    color: #a4e48c; /* Greenish color for emphasis */
    /* Optional: Add an icon */
    /* content: '⏰ '; */
}

/* Prevent hover effects if needed, or keep them for consistency */
.coming-soon-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}
.coming-soon-card:hover .story-card-bg {
    transform: scale(1.05);
}