/* ============================================================
   Comican Recommendations — Self-Contained CSS
   File: assets/css/comican-recommendations.css

   WHY THIS FILE IS SELF-CONTAINED:
   The homepage stylesheet defines .streams-card, .comic-cover,
   .genre-badge, .views-badge, .comic-title, .comic-publisher,
   .streams-grid and .comic-grid — but that stylesheet is scoped
   to the homepage template only. The series taxonomy page (and
   any future page using this module) has its OWN inline stylesheet
   that does not include these classes.

   Rather than depend on which stylesheet happens to be loaded on
   a given page, this file defines the full card styling scoped
   under .rec-section. Values are mirrored EXACTLY from the homepage
   stylesheet, so:
     - On the homepage: redundant but harmless (same values, same
       specificity range — no visual change).
     - On the series page (or anywhere else): this becomes the
       ONLY source of these styles, so cards render correctly.

   This makes the recommendation module fully portable — drop the
   PHP partial on any template, enqueue this CSS once, done.
   ============================================================ */


/* ============================================================
   1. GRID LAYOUT — mirrors .streams-grid.comic-grid
   ============================================================ */

.rec-section .rec-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    justify-content: start;
    align-items: stretch;
    height: 100%;
}

@media (max-width: 1024px) {
    .rec-section .rec-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .rec-section .rec-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Series page override — 3 cards, tighter columns.
   Same specificity (0,2,0) as the rules above, but written AFTER
   them — including after the @media blocks — so it wins on source
   order at every breakpoint without needing !important. If you ever
   reorder this file, keep this rule LAST among .rec-grid rules. */
.rec-section-series .rec-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}


/* ============================================================
   2. CARD — mirrors .streams-card
   ============================================================ */

.rec-section .streams-card {
    background: #000;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
}

.rec-section .streams-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* ============================================================
   3. COVER, BADGES — mirrors .streams-card .comic-cover etc.
   ============================================================ */

.rec-section .streams-card .comic-cover {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 3 / 4;
}

.rec-section .streams-card .comic-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.rec-section .streams-card .thumb-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

.rec-section .streams-card .genre-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    z-index: 2;
}

.rec-section .streams-card .views-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #0eafff;
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3px;
}

.rec-section .streams-card .views-badge svg {
    width: 12px;
    height: 12px;
}


/* ============================================================
   4. METADATA — mirrors .comic-title, .comic-publisher
   ============================================================ */

.rec-section .streams-card .comic-title {
    margin-top: 10px;
    font-weight: 700;
    color: #0eafff;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-section .streams-card .comic-publisher {
    font-size: 0.85rem;
    color: #bfcbdc;
    text-align: center;
}


/* ============================================================
   5. FOOTER / LOAD MORE — mirrors .streams-footer, .load-more-btn
   ============================================================ */

.rec-section .streams-footer {
    text-align: center;
    margin-top: 2rem;
}

.rec-section .load-more-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid #0eafff;
    color: #0eafff;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.rec-section .load-more-btn:hover {
    background: #0eafff;
    color: #000;
}


/* ============================================================
   6. SKELETON LOADER
   ============================================================ */

.rec-skeleton .skeleton-cover {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
    border-radius: 8px;
    aspect-ratio: 3 / 4;
    width: 100%;
    display: block;
}

.rec-skeleton .skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
    border-radius: 4px;
    height: 12px;
    margin-top: 10px;
}

.rec-skeleton .skeleton-title { width: 80%; margin-left: auto; margin-right: auto; }
.rec-skeleton .skeleton-pub   { width: 50%; margin: 8px auto 0; animation-delay: 0.2s; }

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ============================================================
   7. FADE-IN ON RENDER
   ============================================================ */

[data-rec-target] {
    transition: opacity 0.4s ease;
}


/* ============================================================
   8. SECTION HEADING — fallback for pages without #accent-header
      or .section-header styling already defined.
      Scoped narrowly so it won't conflict if the page DOES
      already style these.
   ============================================================ */

.rec-section .section-heading#accent-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.rec-section .section-heading#accent-header h2 {
    margin: 0;
}

.rec-section .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.rec-section .section-header .accent-bar {
    width: 8px;
    height: 28px;
    background-color: #0eafff;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
}

.rec-section .section-header h2,
.rec-section .section-heading h2 {
    margin: 0;
    color: #fff;
}