/**
 * public/assets/css/folder-card.css
 * Component thẻ THƯ MỤC từ vựng (.fc-card) — nguồn dùng CHUNG.
 * Dùng bởi: public/vocab/sets.php (Khám phá, dựng bằng JS) và public/vocab/my-sets.php
 * (Bộ của tôi, dựng bằng PHP qua includes/folder_card.php). Sửa 1 chỗ, 2 nơi cùng đổi.
 * Mọi giá trị visual đi qua token — xem docs/design-system.md.
 */
/* ── Phase 3: Folder card (leaf — clean & minimal) ─────────── */
.fc-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
    --fc-tone: var(--color-muted);
    --fc-tone-soft: var(--color-soft);
    --fc-tone-deep: var(--color-ink);
}
.fc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--fc-tone) 35%, var(--color-border));
}
.fc-card:hover .fc-card__cover-icon { transform: scale(1.06); }
.fc-card--track-foundation { --fc-tone: var(--color-secondary); --fc-tone-soft: var(--color-secondary-soft); --fc-tone-deep: var(--color-secondary-deep); }
.fc-card--track-ielts      { --fc-tone: var(--color-primary);   --fc-tone-soft: var(--color-primary-soft);   --fc-tone-deep: var(--color-primary-deep); }
.fc-card--track-toeic      { --fc-tone: var(--color-primary);   --fc-tone-soft: var(--color-primary-soft);   --fc-tone-deep: var(--color-primary-deep); }
.fc-card--track-topic      { --fc-tone: var(--color-accent);    --fc-tone-soft: var(--color-accent-soft);    --fc-tone-deep: var(--color-accent-deep); }

/* Bìa lớn có icon + watermark thương hiệu — gradient dựng từ token tone của track,
 * không hardcode màu.
 */
.fc-card__cover {
    position: relative;
    height: 132px;
    background: linear-gradient(140deg,
        var(--fc-tone),
        color-mix(in srgb, var(--fc-tone) 60%, var(--color-inverse-surface)));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* Vệt sáng trang trí góc dưới-phải, giữ bìa đỡ phẳng */
.fc-card__cover::after {
    content: '';
    position: absolute;
    right: -16%; bottom: -52%;
    width: 72%; aspect-ratio: 1;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-on-dark) 10%, transparent);
    pointer-events: none;
}
.fc-card__cover-icon {
    position: relative; z-index: 1;
    font-size: 44px; line-height: 1;
    color: var(--color-on-dark);
    transition: transform var(--dur-base) var(--ease);
}

/* ── Bìa "công thức lượng từ": 三 [本] 书 + nhãn tiếng Việt ─────────────────────
 * Dùng cho thẻ sản phẩm Lượng từ ở hàng Khám phá. Vẽ bằng CHỮ HÁN THẬT + CSS,
 * không icon (webfont FA đã subset còn 299 glyph) và không SVG.
 * ⚠ z-index:1 là bắt buộc: vệt sáng .fc-card__cover::after đứng sau trong DOM nên
 *   không có nó thì ô trắng ở giữa bị phủ mờ.
 * ⚠ Khối này CHỈ thêm mới, không sửa luật .fc-card gốc → thẻ folder khác không đổi.
 */
.mwf {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-items: center; align-items: center;
    gap: 6px var(--space-2);
    pointer-events: none;
}
.mwf__t {
    width: var(--mwf-t); height: var(--mwf-t);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-cjk); font-size: var(--mwf-fs); font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-on-dark);
    background: color-mix(in srgb, var(--color-on-dark) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-on-dark) 30%, transparent);
    border-radius: var(--radius-md);
    transition: transform var(--dur-base) var(--ease);
}
/* Ô giữa = LƯỢNG TỪ, thứ sản phẩm này dạy → nổi hẳn lên bằng ô trắng đặc */
.mwf__t--key {
    width: var(--mwf-key); height: var(--mwf-key);
    font-size: var(--mwf-key-fs);
    color: var(--fc-tone-deep, var(--color-primary-deep));
    background: var(--color-surface);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.mwf__cap {
    font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1;
    color: color-mix(in srgb, var(--color-on-dark) 85%, transparent);
}
.mwf__cap--key { color: var(--color-on-dark); font-weight: var(--fw-extrabold); }

.mwf--map { --mwf-t: 40px; --mwf-key: 48px; --mwf-fs: 22px; --mwf-key-fs: 26px; }
.fc-card--mw:hover .mwf__t--key { transform: translateY(-2px) scale(1.06); }

@media (max-width: 720px) {
    .mwf--map { --mwf-t: 34px; --mwf-key: 40px; --mwf-fs: 19px; --mwf-key-fs: 22px; row-gap: 4px; }
}
@media (max-width: 380px) {
    .mwf--map { --mwf-t: 32px; --mwf-key: 38px; }
}
.fc-card__brand {
    position: absolute; right: var(--space-3); bottom: var(--space-2);
    z-index: 2; pointer-events: none;
    font-size: var(--fs-micro);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, var(--color-on-dark) 55%, transparent);
}
/* Cả mảng bìa bấm được — không bắt người dùng phải nhắm đúng cái nút */
.fc-card__cover-link { position: absolute; inset: 0; z-index: 1; }

.fc-card__save {
    position: absolute;
    top: var(--space-2); right: var(--space-2);
    width: 32px; height: 32px;
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-small);
    z-index: 3;
}
.fc-card__save:hover { color: var(--fc-tone); }
.fc-card__save.is-saved { background: var(--fc-tone); color: var(--color-on-dark); }
.fc-card__save:disabled { opacity: .55; cursor: not-allowed; }

/* Badge nằm TRÊN bìa màu → dùng nền tối trong suốt cho tương phản ổn định ở mọi tone.
 * Mỗi badge luôn kèm icon + chữ nên không dựa vào riêng màu để truyền tin (a11y §15).
 */
.fc-badge {
    position: absolute;
    top: var(--space-2); left: var(--space-2);
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    white-space: nowrap;
    z-index: 2; pointer-events: none;
    background: color-mix(in srgb, var(--color-inverse-surface) 45%, transparent);
    color: var(--color-on-dark);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.fc-badge i { font-size: var(--fs-micro); }

.fc-card__body {
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
}
.fc-card__chips {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    align-items: center;
}
.fc-card__track {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--fc-tone-soft);
    color: var(--fc-tone-deep);
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.fc-card__track i { font-size: var(--fs-micro); }
.fc-card__cefr {
    padding: 2px var(--space-2);
    background: var(--color-soft);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
}
.fc-card__topics {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.fc-card__topic {
    padding: 2px var(--space-2);
    background: color-mix(in srgb, var(--fc-tone) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--fc-tone) 22%, transparent);
    color: var(--fc-tone-deep);
    border-radius: var(--radius-sm);
    font-size: var(--fs-micro); font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-card__name {
    font-size: var(--fs-body); font-weight: var(--fw-extrabold);
    margin: 0; line-height: var(--lh-tight);
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
}
.fc-card__name a {
    color: var(--color-ink); text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fc-card__name a:hover { color: var(--color-primary); }
.fc-card__desc {
    font-size: var(--fs-micro); color: var(--color-muted);
    margin: 0; line-height: var(--lh-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fc-card__stats {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    font-size: var(--fs-micro); color: var(--color-muted);
    align-items: center;
}
.fc-card__stats b { color: var(--color-ink); font-weight: var(--fw-bold); }
.fc-card__dot { color: var(--color-mute2); }
.fc-card__date {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--fs-micro); color: var(--color-mute2);
}

.fc-card__actions {
    display: flex; gap: var(--space-2);
    margin-top: auto; padding-top: var(--space-1);
}
/* Nút dùng component chung .btn (docs/design-system.md §17) — chỉ chỉnh phần co giãn */
.fc-card__actions .btn { flex: 1; }
.fc-card__actions .btn-outline { flex: 0 0 auto; }