/* ===================================================
   MangaMood - cards.css
   Horizontal "Top Picks" list cards
=================================================== */

/* ==========================
   RESULTS GRID
========================== */
.grid{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
}

/* Brief highlight when a quick-filter chip (search.js's triggerQuickFilter)
   re-renders this grid in place. Chips sit well above the grid with no
   other feedback that anything happened — this plus the accompanying
   scrollIntoView() is the fix for that. Purely visual, no layout impact
   (box-shadow doesn't reflow), removed via setTimeout shortly after class
   add — see triggerQuickFilter() in js/search.js. */
.qf-just-updated{
    animation: qfHighlight .9s ease;
}
@keyframes qfHighlight{
    0%{ box-shadow: 0 0 0 2px rgba(139,124,246,.55); border-radius: var(--radius); }
    100%{ box-shadow: 0 0 0 2px rgba(139,124,246,0); border-radius: var(--radius); }
}

/* ==========================
   MANGA CARD  (horizontal list card)
========================== */
.manga-card{
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    overflow:hidden;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.06);
    border-left:4px solid var(--gold);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor:pointer; /* ADD THIS: Make the whole card show a pointer */
}
.manga-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.4);
}

/* cycle accent colors so the list doesn't look monotone, echoing the
   gold / red / green rank-card treatment in the design mockup */
.grid .manga-card:nth-of-type(3n+2){ border-left-color:var(--red); }
.grid .manga-card:nth-of-type(3n+3){ border-left-color:var(--green); }

/* ==========================
   COVER IMAGE
========================== */
.manga-cover-container{
    position:relative;
    flex-shrink:0;
    width:110px;
    align-self:stretch;
    overflow:hidden;
    background:rgba(255,255,255,.03);
}

.manga-cover{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease, filter .5s ease;
}

.manga-card:hover .manga-cover{
    transform:scale(1.06);
    filter:brightness(1.05);
}

/* ==========================
   SCORE BADGE (gold match %)
========================== */
.manga-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.manga-title-row .manga-title{
    flex:1;
    min-width:0;
}

.score-badge{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:3px;
    padding:4px 9px;
    border-radius:30px;
    background:rgba(10,8,20,.8);
    color:var(--gold);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
    white-space:nowrap;
}

/* ==========================
   FAVORITE BUTTON — top-right of the cover
========================== */
.fav-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:4;
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1.05rem;
    color:#fff;
    background:rgba(10,8,20,.55);
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    transition:transform .25s ease, color .25s ease, background .25s ease;
}

.fav-btn:hover{ transform:scale(1.15); color:var(--pink); background:rgba(10,8,20,.75); }
.fav-btn.active{ color:var(--pink); }
.fav-btn:hover{ transform:scale(1.15); color:var(--pink); }
.fav-btn.active{ color:var(--pink); }

/* ==========================
   EMPTY FAVORITES
========================== */
.empty-favorites{
    grid-column:1/-1;
    padding:80px 20px;
    text-align:center;
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.8;
}

/* ===================================================
   Part 2 — Read Overlay • Card Info • Synopsis
=================================================== */

.read-options{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:14px;
    padding:20px;
    background:rgba(12,10,22,.92);
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
}
.read-options.active{ opacity:1; pointer-events:auto; }

.read-link-btn{
    width:100%;
    max-width:220px;
    text-align:center;
    text-decoration:none;
    padding:12px 18px;
    border-radius:12px;
    font-size:.9rem;
    font-weight:600;
    color:var(--text-bright);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.read-link-btn:hover{ background:var(--purple); border-color:var(--purple); transform:translateY(-2px); }

/* ==========================
   CARD INFO
========================== */
.manga-info{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px 40px 14px 16px;
    flex:1;
    min-width:0;
}

.manga-title{
    color:var(--text-title);
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.3;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.manga-meta{
    color:var(--purple-bright);
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.3px;
}

.manga-facts{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    color:var(--text-muted);
    font-size:.76rem;
    font-weight:500;
    margin-top:2px;
}

.manga-facts span:not(:last-child)::after{
    content:"•";
    margin-left:6px;
    color:var(--text-muted);
    opacity:.6;
}

.manga-synopsis{
    position:relative;
    color:var(--text-main);
    font-size:.82rem;
    line-height:1.5;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    cursor:pointer;
    transition:max-height .35s ease;
}

.manga-synopsis::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1.4rem;
    background:linear-gradient(transparent, rgba(23,20,42,.9));
    pointer-events:none;
}

.manga-synopsis.expanded{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.manga-synopsis.expanded::after{ display:none; }

/* ===================================================
   Part 3 — Skeleton • Responsive • Animations
=================================================== */

.skeleton-card{
    display:flex;
    overflow:hidden;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
    height:130px;
}

.skeleton-cover{
    width:110px;
    height:100%;
    flex-shrink:0;
    background:linear-gradient(90deg, rgba(255,255,255,.03) 20%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 80%);
    background-size:400% 100%;
    animation:shimmer 1.4s infinite;
}

.skeleton-info{ padding:16px; display:flex; flex-direction:column; gap:12px; flex:1; }

.skeleton-line{
    height:12px;
    border-radius:8px;
    background:linear-gradient(90deg, rgba(255,255,255,.03) 20%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 80%);
    background-size:400% 100%;
    animation:shimmer 1.4s infinite;
}

.skeleton-title{ width:78%; height:18px; }
.skeleton-meta{ width:45%; height:10px; }
.skeleton-text{ width:100%; }
.skeleton-text-short{ width:70%; }

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

@keyframes cardFade{
    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.manga-card{ animation:cardFade .45s ease; }

/* ==========================
   MOBILE
========================== */
@media (max-width:768px){

    .manga-cover-container{ width:92px; }

    .manga-info{ padding:12px 38px 12px 14px; }

    .manga-title{ font-size:1rem; }

    .manga-synopsis{ display:none; }

    .fav-btn{ top:10px; right:10px; }
}

/* ==========================
   TABLET / DESKTOP — two columns
========================== */
@media (min-width:900px){
    .grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }
}

@media (min-width:1400px){
    .grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===================================================
   Part 4 — Match Score Badge • "Why?" Match Breakdown
=================================================== */

.match-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    padding:3px 11px;
    border-radius:30px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.2px;
    color:var(--text-bright);
    background:linear-gradient(135deg, rgba(139,124,246,.35), rgba(139,124,246,.12));
    border:1px solid rgba(139,124,246,.4);
}

.match-badge.match-high{
    background:linear-gradient(135deg, rgba(52,211,153,.35), rgba(52,211,153,.12));
    border-color:rgba(52,211,153,.45);
    color:var(--green);
}

.match-badge.match-low{
    background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border-color:rgba(255,255,255,.12);
    color:var(--text-muted);
}

.why-btn{
    align-self:flex-start;
    border:none;
    cursor:pointer;
    padding:3px 10px;
    border-radius:14px;
    font-size:.72rem;
    font-weight:700;
    color:var(--purple-bright);
    background:rgba(139,124,246,.1);
    border:1px solid rgba(139,124,246,.25);
    transition:var(--transition);
}
.why-btn:hover{ background:rgba(139,124,246,.2); color:var(--text-bright); }

.why-panel{ display:none; flex-direction:column; gap:10px; }
.why-panel.open{ display:flex; }

.why-panel-score{
    align-self:flex-start;
    padding:4px 12px;
    border-radius:20px;
    font-size:.8rem;
    font-weight:700;
    color:var(--green);
    background:rgba(52,211,153,.1);
    border:1px solid rgba(52,211,153,.3);
}

.match-reasons{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
}

.match-reason{ display:flex; align-items:center; gap:8px; font-size:.8rem; line-height:1.4; color:var(--text-muted); }
.match-reason.is-match{ color:var(--text-main); }
.match-reason-icon{ flex-shrink:0; font-weight:700; }
.match-reason.is-match .match-reason-icon{ color:var(--green); }
.match-reason:not(.is-match) .match-reason-icon{ color:var(--red); }

.fav-btn:focus, .read-link-btn:focus, .why-btn:focus{
    outline:2px solid var(--purple);
    outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}