/**
 * Flavor Starter — Card Grid & Card Component
 *
 * Hover-to-reveal design: title, episode count, and play button
 * appear on hover. Clean card face by default.
 *
 * Uses rem units with dynamic root font-size (set by JS) so all
 * card content scales proportionally with viewport — same approach
 * as SysShorts (amfe-flexible pattern).
 *
 * Design base: 375px viewport = 14px root = 1rem
 *
 * @package Flavor_Starter
 */

/* Cards grid */
.flavor-cards-grid {
    display: grid;
    grid-template-columns: repeat(var(--flavor-grid-columns, 5), 1fr);
    gap: var(--flavor-grid-gap);
}

/* Card component */
.flavor-card {
    position: relative;
    border-radius: 0.71429rem;
    overflow: hidden;
    cursor: pointer;
    transition: var(--flavor-transition-med);
    aspect-ratio: 3 / 4;
    background: var(--flavor-bg-card);
}

.flavor-card:hover {
    transform: translateY(-0.28571rem);
    box-shadow: 0 0.85714rem 2.85714rem rgba(0, 0, 0, 0.4);
}

/* Card image */
.flavor-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--flavor-transition-med);
}

.flavor-card:hover .flavor-card-img {
    transform: scale(1.04);
}

/* ─── Gradient overlay (hidden by default, shown on hover) ─── */
.flavor-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.flavor-card:hover::after {
    opacity: 1;
}

/* ─── Info wrapper (title + badge, shown on hover) ─── */
.flavor-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 0;
    transform: translateY(0.57143rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.flavor-card:hover .flavor-card-info {
    opacity: 1;
    transform: translateY(0);
}

/* Card title */
.flavor-card-title {
    padding: 0.28571rem 0.71429rem 0.85714rem 0.71429rem;
    font-weight: 600;
    font-size: 0.92857rem;
    line-height: 1.3;
    text-shadow: 0 0.14286rem 0.57143rem rgba(0, 0, 0, 0.6);
    color: var(--flavor-text-primary);
}

/* Episode count badge */
.flavor-card-badge {
    display: block;
    padding: 0 0.71429rem;
    font-size: 0.64286rem;
    font-weight: 500;
    color: var(--flavor-text-secondary);
    text-shadow: 0 0.07143rem 0.28571rem rgba(0, 0, 0, 0.8);
}

/* ─── Play button (center, shown on hover) ─── */
.flavor-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 2;
    width: 2.85714rem;
    height: 2.85714rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.flavor-card-play svg {
    width: 100%;
    height: 100%;
}

.flavor-card:hover .flavor-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ─── Heart / Favorite button ─── */
.flavor-card-fav {
    position: absolute;
    top: 0.57143rem;
    right: 0.57143rem;
    z-index: 3;
    width: 1.71429rem;
    height: 1.71429rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: var(--flavor-transition-fast);
    opacity: 0;
}

@media (hover: hover) {
    .flavor-card:hover .flavor-card-fav {
        opacity: 1;
    }

    .flavor-card-fav:hover {
        background: rgba(232, 67, 147, 0.3);
        transform: scale(1.15);
    }

    .flavor-card-fav:hover svg {
        fill: var(--flavor-accent-primary);
        stroke: var(--flavor-accent-primary);
    }
}

.flavor-card-fav svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    transition: var(--flavor-transition-fast);
}

.flavor-card-fav.active svg {
    fill: var(--flavor-accent-primary);
    stroke: var(--flavor-accent-primary);
}

/* Favorited cards always show the heart */
.flavor-card-fav.active {
    opacity: 1;
}

/* ─── Tag on card (e.g. "New", "Featured") ─── */
.flavor-card-tag {
    position: absolute;
    top: 0.71429rem;      /* 10px */
    left: 0.71429rem;     /* 10px */
    z-index: 3;
    background: var(--flavor-accent-gradient);
    color: #fff;
    font-size: 0.78571rem;  /* 11px */
    font-weight: 600;
    padding: 0.21429rem 0.71429rem;  /* 3px 10px */
    border-radius: 1.42857rem;  /* 20px */
    text-transform: uppercase;
    letter-spacing: 0.03571rem;  /* 0.5px */
}

/* ─── Card entrance animation ─── */
.flavor-cards-grid .flavor-card {
    animation: flavor-card-enter 0.4s ease both;
}

@keyframes flavor-card-enter {
    from {
        opacity: 0;
        transform: translateY(1.14286rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flavor-cards-grid .flavor-card:nth-child(1) { animation-delay: 0.03s; }
.flavor-cards-grid .flavor-card:nth-child(2) { animation-delay: 0.06s; }
.flavor-cards-grid .flavor-card:nth-child(3) { animation-delay: 0.09s; }
.flavor-cards-grid .flavor-card:nth-child(4) { animation-delay: 0.12s; }
.flavor-cards-grid .flavor-card:nth-child(5) { animation-delay: 0.15s; }
.flavor-cards-grid .flavor-card:nth-child(6) { animation-delay: 0.18s; }
.flavor-cards-grid .flavor-card:nth-child(7) { animation-delay: 0.21s; }
.flavor-cards-grid .flavor-card:nth-child(8) { animation-delay: 0.24s; }
.flavor-cards-grid .flavor-card:nth-child(9) { animation-delay: 0.27s; }
.flavor-cards-grid .flavor-card:nth-child(10) { animation-delay: 0.30s; }

/* Infinite scroll sentinel & spinner/loader/message slot */
.flavor-load-more-sentinel {
    height: 1px;
    visibility: hidden;
}

/* Shared slot for spinner, pull loader, and end message. */
.flavor-load-more-spinner,
.flavor-pull-loader,
.flavor-end-message {
    display: flex;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.2s, opacity 0.2s;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flavor-load-more-spinner.flavor-visible,
.flavor-pull-loader.flavor-visible,
.flavor-end-message.flavor-visible {
    height: 5rem;
    opacity: 1;
}

.flavor-end-message.flavor-visible {
    height: 5rem;
    opacity: 1;
    transition: height 0.2s, opacity 1.5s;
}

/* Spinner */
.flavor-load-more-spinner::after {
    content: '';
    display: inline-block;
    width: 1.71429rem;
    height: 1.71429rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--flavor-accent-primary);
    border-radius: 50%;
    animation: flavor-spinner 0.7s linear infinite;
}

@keyframes flavor-spinner {
    to { transform: rotate(360deg); }
}

/* Pull-up loader */
.flavor-pull-loader {
    color: var(--flavor-text-muted);
    font-size: 0.85714rem;
}

.flavor-pull-progress {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
}

.flavor-pull-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.flavor-pull-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.flavor-pull-fill {
    fill: none;
    stroke: var(--flavor-accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 100.53;
    transition: stroke-dashoffset 0.1s ease;
}

.flavor-pull-text {
    display: block;
}

.flavor-pull-loader.flavor-pull-ready .flavor-pull-text {
    color: var(--flavor-accent-primary);
}

.flavor-pull-loader.flavor-pull-loading .flavor-pull-circle {
    animation: flavor-spinner 0.7s linear infinite;
    transform: none;
}

.flavor-pull-loader.flavor-pull-loading .flavor-pull-track {
    stroke: rgba(255, 255, 255, 0.1);
}

.flavor-pull-loader.flavor-pull-loading .flavor-pull-fill {
    stroke-dashoffset: 60;
    transition: none;
}

/* End message */
.flavor-end-message {
    color: var(--flavor-text-muted);
    font-size: 1rem; /* 16px */
}