/* ========================================
   RASTI - Books Showcase Page
   ======================================== */

.books-showcase {
    min-height: calc(100vh - var(--navbar-height));
    padding: calc(var(--navbar-height) + 2rem) 0 4rem;
    background: var(--gray-50);
    margin-bottom: 0;
}

.books-showcase .books-header {
    margin-bottom: 3.25rem;
}

.books-showcase .recent-stories-title {
    color: var(--gray-900) !important;
}

.books-showcase .section-subtitle {
    max-width: 640px;
    line-height: 1.7;
}

.books-showcase .books-fade-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.books-showcase .books-header .books-fade-item:nth-child(1) { transition-delay: 0ms; }
.books-showcase .books-header .books-fade-item:nth-child(2) { transition-delay: 100ms; }
.books-showcase .books-cta.books-fade-item { transition-delay: 80ms; }
.books-showcase .stories-note.books-fade-item { transition-delay: 160ms; }

.books-showcase .books-fade-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.books-showcase .books-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.35rem;
    max-width: 980px;
    margin: 0 auto;
}

.books-showcase .book-card {
    width: 100%;
    opacity: 0;
    transform: translateY(40px) rotateX(12deg);
    transform-origin: top center;
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s ease;
    will-change: opacity, transform;
}

.books-showcase .book-card:nth-child(1) { transition-delay: 0ms; }
.books-showcase .book-card:nth-child(2) { transition-delay: 120ms; }
.books-showcase .book-card:nth-child(3) { transition-delay: 240ms; }

.books-showcase .book-card.is-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

.books-showcase .book-3d {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: none;
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 14px 28px rgba(15, 23, 42, 0.12),
        0 4px 10px rgba(15, 23, 42, 0.08);
    will-change: transform;
}

.books-showcase .book-cover-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.books-showcase .story-card .glow {
    opacity: 0;
}

.books-showcase .story-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.10) 52%, transparent 100%);
    padding: 1.35rem 1.1rem 1rem;
}

.books-showcase .story-title {
    font-size: 1.04rem;
}

.books-showcase .books-cta {
    margin-top: 3rem;
}

.books-showcase .books-primary-cta {
    min-width: 260px;
    border-radius: 14px;
    font-family: 'Poppins', var(--font-sans), sans-serif;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

@media (hover: hover) {
    .books-showcase .book-card:hover .book-3d {
        border: none;
    }

    .books-showcase .story-card:hover .glow {
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .books-showcase .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    .books-showcase {
        padding: calc(var(--navbar-height) + 1rem) 0 2rem;
    }

    .books-showcase .books-header {
        margin-bottom: 1.5rem;
    }

    .books-showcase .books-grid {
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .books-showcase .story-overlay {
        padding: 0.95rem 0.75rem 0.75rem;
    }

    .books-showcase .story-title {
        font-size: 0.88rem;
    }

    .books-showcase .books-primary-cta {
        min-width: 0;
        width: 100%;
        max-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .books-showcase .books-fade-item,
    .books-showcase .book-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}