/* IM Youtube Feed - Public Styles */
/* par Interface Monde | v1.0.0 */

/* ── Wrapper ───────────────────────────────────────────────── */
.imyf-wrap {
    --imyf-col-d: 3;
    --imyf-col-t: 2;
    --imyf-col-m: 1;
    --imyf-gap: 20px;
    --imyf-radius: 8px;
    --imyf-font: inherit;
    --imyf-fs-title: 15px;
    --imyf-fs-meta: 13px;
    --imyf-bg: #ffffff;
    --imyf-card-bg: #f9f9f9;
    --imyf-txt: #222222;
    --imyf-meta: #777777;
    --imyf-accent: #FF0000;
    --imyf-sub: #FF0000;

    background: var(--imyf-bg);
    font-family: var(--imyf-font);
    color: var(--imyf-txt);
    padding: 4px 0;
}

.imyf-error, .imyf-empty {
    padding: 16px 20px;
    border-radius: 6px;
    font-size: 14px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

/* ── GRID LAYOUT ───────────────────────────────────────────── */
.imyf-layout-grid .imyf-grid,
.imyf-layout-gallery .imyf-grid {
    display: grid;
    grid-template-columns: repeat(var(--imyf-col-d), 1fr);
    gap: var(--imyf-gap);
}

/* ── LIST LAYOUT ───────────────────────────────────────────── */
.imyf-layout-list .imyf-grid {
    display: flex;
    flex-direction: column;
    gap: var(--imyf-gap);
}

/* ── CARD BASE ─────────────────────────────────────────────── */
.imyf-card {
    background: var(--imyf-card-bg);
    border-radius: var(--imyf-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}
.imyf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Grid / Gallery card */
.imyf-card-grid,
.imyf-card-gallery {
    display: flex;
    flex-direction: column;
}

/* List card */
.imyf-card-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.imyf-card-list .imyf-thumb-wrap {
    flex: 0 0 240px;
    max-width: 240px;
}
.imyf-card-list .imyf-card-body {
    flex: 1;
    padding: 14px 18px;
}

/* ── GALLERY special: big first item ──────────────────────── */
.imyf-layout-gallery .imyf-card:first-child {
    grid-column: span 2;
}
.imyf-layout-gallery .imyf-card:first-child .imyf-thumb {
    aspect-ratio: 16/9;
    max-height: 400px;
}

/* ── THUMBNAIL ─────────────────────────────────────────────── */
.imyf-thumb-wrap { position: relative; overflow: hidden; }
.imyf-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.imyf-card:hover .imyf-thumb { transform: scale(1.04); }

/* Play overlay */
.imyf-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity .25s;
}
.imyf-card:hover .imyf-play-overlay { opacity: 1; }
.imyf-thumb-link { display: block; }

.imyf-play-btn {
    width: 52px; height: 52px;
    background: rgba(255,0,0,.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transform: scale(.85);
    transition: transform .2s;
    box-shadow: 0 4px 16px rgba(255,0,0,.4);
}
.imyf-card:hover .imyf-play-btn { transform: scale(1); }

/* Duration badge */
.imyf-duration {
    position: absolute;
    bottom: 7px; right: 8px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .3px;
}

/* ── CARD BODY ─────────────────────────────────────────────── */
.imyf-card-body { padding: 14px; }

.imyf-title {
    margin: 0 0 6px;
    font-size: var(--imyf-fs-title);
    font-weight: 700;
    line-height: 1.35;
    color: var(--imyf-txt);
}
.imyf-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.imyf-title a:hover { color: var(--imyf-accent); }

.imyf-description {
    margin: 0 0 8px;
    font-size: calc(var(--imyf-fs-meta) - 1px);
    color: var(--imyf-meta);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.imyf-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.imyf-views, .imyf-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--imyf-fs-meta);
    color: var(--imyf-meta);
}

/* ── FOOTER BUTTONS ────────────────────────────────────────── */
.imyf-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: calc(var(--imyf-gap) * 1.2);
    flex-wrap: wrap;
}

.imyf-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all .2s;
    line-height: 1;
    font-family: var(--imyf-font);
}

.imyf-load-more {
    background: var(--imyf-card-bg);
    color: var(--imyf-txt);
    border-color: #ddd;
}
.imyf-load-more:hover {
    border-color: var(--imyf-accent);
    color: var(--imyf-accent);
}
.imyf-load-more.imyf-loading {
    opacity: .6;
    pointer-events: none;
}

.imyf-subscribe {
    background: var(--imyf-sub);
    color: #fff;
    border-color: var(--imyf-sub);
}
.imyf-subscribe:hover {
    background: transparent;
    color: var(--imyf-sub);
}

/* Loading spinner */
.imyf-load-more.imyf-loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: imyf-spin .6s linear infinite;
}
@keyframes imyf-spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .imyf-layout-grid .imyf-grid,
    .imyf-layout-gallery .imyf-grid {
        grid-template-columns: repeat(var(--imyf-col-t), 1fr);
    }
    .imyf-layout-gallery .imyf-card:first-child { grid-column: span 1; }
    .imyf-card-list { flex-direction: column; }
    .imyf-card-list .imyf-thumb-wrap { flex: unset; max-width: 100%; }
}

@media (max-width: 480px) {
    .imyf-layout-grid .imyf-grid,
    .imyf-layout-gallery .imyf-grid {
        grid-template-columns: repeat(var(--imyf-col-m), 1fr);
    }
    .imyf-footer { flex-direction: column; }
    .imyf-btn { width: 100%; justify-content: center; }
}

/* Fade-in animation for loaded cards */
.imyf-card {
    animation: imyf-fadein .35s ease both;
}
@keyframes imyf-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.imyf-card:nth-child(2) { animation-delay: .05s; }
.imyf-card:nth-child(3) { animation-delay: .10s; }
.imyf-card:nth-child(4) { animation-delay: .15s; }
.imyf-card:nth-child(5) { animation-delay: .20s; }
.imyf-card:nth-child(6) { animation-delay: .25s; }