/* ─────────────────────────────────────────────────────────────
   Homepage E-Book sections (partials/home/ebooks_showcase.php +
   ebooks_teaser.php). The showcase reuses the paid-course card/
   carousel classes — this file only carries the ebook-specific
   overrides. All selectors scoped under .ebooks-navy / .ebooks-teaser.
───────────────────────────────────────────────────────────── */

/* Book covers are A4 portrait — give the thumb the same ratio so the
   whole cover shows, scaled proportionally (no crop). Overrides the
   course-thumb landscape sizing from the shared card styles. */
.ebooks-navy .ebook-thumb {
    aspect-ratio: 210 / 297;
    height: auto;
}
.ebooks-navy .ebook-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ≤2 books: centered grid instead of a left-anchored carousel strip */
.ebooks-navy .ebooks-grid-few {
    justify-content: center;
}
.ebooks-navy .ebooks-grid-few .modern-course-card {
    max-width: 360px;
}

/* Value chips under the section title — the ebook sales pitch in 3 beats */
.ebooks-navy .eb-value-chips {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
    margin-top: 18px;
}
.ebooks-navy .eb-value-chips span {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem; font-weight: 600;
    padding: 8px 16px; border-radius: 99px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
    .ebooks-navy .eb-value-chips { gap: 6px; }
    .ebooks-navy .eb-value-chips span { font-size: 0.72rem; padding: 6px 12px; }
}

/* ── Favorite hearts (Etsy-style) on homepage cards ──────────
   Injected by js/home-favorites.js into .ct-thumb / .course-thumb. */
.fav-heart {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22);
    font-size: 1.02rem; line-height: 1; color: #475569;
    display: grid; place-items: center;
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.15s;
}
.ct-card:hover .fav-heart,
.modern-course-card:hover .fav-heart,
.fav-heart.is-on { opacity: 1; transform: scale(1); }
.fav-heart:hover { color: #E11D48; transform: scale(1.1); }
.fav-heart.is-on { color: #E11D48; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-heart.pop { animation: fav-pop 0.3s ease; }
/* Touch devices have no hover — keep hearts visible */
@media (hover: none) { .fav-heart { opacity: 1; transform: scale(1); } }