/* ═══════════════════════════════════════════════════════════════════
   PPEAP Auto Slider — Frontend CSS v1.1.0
   Clean rewrite: no legacy PostEngine conflicts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Slider wrapper ── */
.ppeap-post-slider {
    position: relative;
    width: 100%;
    margin: 28px 0;
    padding: 0 52px;
    --ppeap-slider-gap: 18px;
    --ppeap-slider-speed: 450ms;
    --ppeap-slider-items: 3;
}
@media (max-width: 1024px) {
    .ppeap-post-slider { --ppeap-slider-items: var(--ppeap-slider-tablet-items, 2); }
}
@media (max-width: 640px) {
    .ppeap-post-slider { padding: 0 38px; --ppeap-slider-items: var(--ppeap-slider-mobile-items, 1); --ppeap-slider-gap: 12px; }
}

/* ── Viewport + track ── */
.ppeap-slider-viewport {
    overflow: hidden;
    border-radius: 18px;
}
.ppeap-slider-track {
    display: flex;
    align-items: stretch;
    gap: var(--ppeap-slider-gap);
    transition: transform var(--ppeap-slider-speed) cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.ppeap-slider-track > .ppeap-loop-card {
    flex: 0 0 calc((100% - (var(--ppeap-slider-items) - 1) * var(--ppeap-slider-gap)) / var(--ppeap-slider-items));
    min-width: 0;
}

/* ── Arrows ── */
.ppeap-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.92);
    color: #1f2937;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    padding: 0;
}
.ppeap-slider-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ppeap-slider-arrow:hover { transform: translateY(-50%) scale(1.07); border-color: #8b5cf6; color: #8b5cf6; box-shadow: 0 12px 28px rgba(139,92,246,.25); }
.ppeap-slider-prev { left: 0; }
.ppeap-slider-next { right: 0; }
@media (max-width: 640px) {
    .ppeap-slider-arrow { width: 36px; height: 36px; }
    .ppeap-slider-arrow svg { width: 17px; height: 17px; }
}

/* ── Dots ── */
.ppeap-slider-dots {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.ppeap-slider-dot {
    appearance: none;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(148,163,184,.25);
    cursor: pointer; padding: 0;
    transition: all .22s ease;
    /* pill default */
    width: 10px; height: 10px; border-radius: 999px;
}
.ppeap-slider-dot.is-active { width: 28px; background: #8b5cf6; border-color: #8b5cf6; }
.ppeap-slider-dots-style-dots .ppeap-slider-dot { width: 9px; height: 9px; border-radius: 50%; }
.ppeap-slider-dots-style-dots .ppeap-slider-dot.is-active { width: 9px; transform: scale(1.3); background: #8b5cf6; border-color: #8b5cf6; }
.ppeap-slider-dots-style-line .ppeap-slider-dot { width: 26px; height: 4px; border-radius: 999px; border: 0; background: rgba(148,163,184,.28); }
.ppeap-slider-dots-style-line .ppeap-slider-dot.is-active { background: #8b5cf6; width: 40px; }
.ppeap-slider-dots-style-square .ppeap-slider-dot { width: 10px; height: 10px; border-radius: 3px; }
.ppeap-slider-dots-style-square .ppeap-slider-dot.is-active { background: #8b5cf6; border-color: #8b5cf6; transform: rotate(45deg); }
.ppeap-slider-dots-style-diamond .ppeap-slider-dot { width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg); }
.ppeap-slider-dots-style-diamond .ppeap-slider-dot.is-active { background: #8b5cf6; border-color: #8b5cf6; }
.ppeap-slider-dots-style-ring .ppeap-slider-dot { width: 14px; height: 14px; border-radius: 50%; background: transparent; border-width: 2px; }
.ppeap-slider-dots-style-ring .ppeap-slider-dot.is-active { border-color: #8b5cf6; background: #8b5cf6; }

/* ── Empty state ── */
.ppeap-post-loop-empty {
    padding: 32px; text-align: center; color: #6b7280; font-size: 15px;
    border: 1px dashed rgba(148,163,184,.4); border-radius: 16px; margin: 24px 0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ppeap-slider-track { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   CARD LAYOUTS — প্রতিটি template-এর সম্পূর্ণ আলাদা design
   ═══════════════════════════════════════════════════════════════════ */

/* Shared micro-resets */
.ppeap-loop-card { box-sizing: border-box; overflow: hidden; position: relative; }
.ppeap-loop-card * { box-sizing: border-box; }
.ppeap-card-img-wrap { display: block; overflow: hidden; width: 100%; }
.ppeap-card-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ppeap-loop-card:hover .ppeap-card-img-wrap img { transform: scale(1.06); }

/* Shared text elements */
.ppeap-card-cat {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    background: var(--card-accent, #8b5cf6); color: #fff; margin-bottom: 8px;
}
.ppeap-card-title { margin: 0 0 8px; font-size: clamp(15px, 2vw, 20px); font-weight: 800; line-height: 1.28; }
.ppeap-card-title a { color: inherit; text-decoration: none; }
.ppeap-card-title a:hover { text-decoration: underline; }
.ppeap-card-excerpt { margin: 0 0 10px; font-size: 14px; line-height: 1.65; opacity: .85; }
.ppeap-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ppeap-card-author { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; text-decoration: none; color: inherit; opacity: .8; }
.ppeap-card-author img, .ppeap-loop-author-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ppeap-card-date { font-size: 12px; opacity: .6; }
.ppeap-card-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ppeap-card-author-name { font-size: 12px; font-weight: 700; opacity: .7; }
.ppeap-card-read-more {
    display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
    background: var(--card-accent, #8b5cf6); color: #fff !important;
    font-size: 12px; font-weight: 800; text-decoration: none !important;
    transition: transform .18s, box-shadow .18s;
}
.ppeap-card-read-more:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ppeap-card-read-more-text { font-size: 13px; font-weight: 700; color: var(--card-accent, #2563eb) !important; text-decoration: none; }
.ppeap-card-read-more-text:hover { text-decoration: underline; }
.ppeap-card-cat-text {
    display: inline-block; font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--card-accent, #2563eb); margin-bottom: 7px;
}


/* ══════════════════════════════════════════════════
   1. GAMING SLIDER
   Dark card. Image top → text overlays bottom.
   Purple neon border + glow.
   ══════════════════════════════════════════════════ */
.ppeap-card-gaming {
    --card-accent: #8b5cf6;
    background: #070b18;
    border-radius: 20px;
    border: 1px solid rgba(139,92,246,.4);
    box-shadow: 0 0 0 1px rgba(139,92,246,.12), 0 20px 50px rgba(2,6,23,.45);
}
.ppeap-card-gaming .ppeap-card-img-wrap {
    aspect-ratio: 16/9;
    border-radius: 18px 18px 0 0;
}
.ppeap-card-gaming .ppeap-card-img-gradient {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(7,11,24,0) 35%, rgba(7,11,24,.97) 100%);
}
.ppeap-card-gaming .ppeap-card-overlay-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 18px 16px; color: #fff;
}
.ppeap-card-gaming .ppeap-card-title { color: #fff; font-size: clamp(15px,2vw,21px); }
.ppeap-card-gaming .ppeap-card-excerpt { color: rgba(255,255,255,.75); }
.ppeap-card-gaming .ppeap-card-cat { background: linear-gradient(135deg,#7c3aed,#06b6d4); }
.ppeap-card-gaming .ppeap-card-author { color: rgba(255,255,255,.75); }
.ppeap-card-gaming .ppeap-card-read-more { background: rgba(139,92,246,.9); box-shadow: 0 4px 14px rgba(139,92,246,.4); }


/* ══════════════════════════════════════════════════
   2. NEWS SLIDER
   Horizontal 2-col grid: image LEFT 42%, text RIGHT.
   Light clean card. Author name + date row.
   ══════════════════════════════════════════════════ */
.ppeap-card-news {
    --card-accent: #0ea5e9;
    display: grid !important;
    grid-template-columns: 42% 1fr;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.1);
    background: #fff;
    box-shadow: 0 4px 16px rgba(15,23,42,.07);
    min-height: 150px;
}
.ppeap-card-news .ppeap-card-img-wrap {
    height: 100%;
    border-radius: 14px 0 0 14px;
}
.ppeap-card-news .ppeap-card-img-wrap img { height: 100%; }
.ppeap-card-news .ppeap-card-body {
    padding: 16px 16px 14px;
    display: flex; flex-direction: column; justify-content: center;
    color: #0f172a;
}
.ppeap-card-news .ppeap-card-cat { background: #0ea5e9; font-size: 10px; padding: 3px 10px; }
.ppeap-card-news .ppeap-card-title { font-size: clamp(13px,1.6vw,16px); color: #0f172a; }
.ppeap-card-news .ppeap-card-author-name { color: #475569; }
.ppeap-card-news .ppeap-card-date { color: #94a3b8; }
.ppeap-card-news .ppeap-card-read-more { background: #0ea5e9; font-size: 11px; padding: 5px 11px; }
@media (max-width: 640px) {
    .ppeap-card-news { grid-template-columns: 1fr !important; }
    .ppeap-card-news .ppeap-card-img-wrap { height: 140px; border-radius: 14px 14px 0 0; }
}


/* ══════════════════════════════════════════════════
   3. HERO SLIDER
   Image = card background (background-image).
   Big title. Text bottom-left. Full immersive feel.
   ══════════════════════════════════════════════════ */
.ppeap-card-hero {
    --card-accent: #3b82f6;
    background-size: cover !important;
    background-position: center !important;
    background-color: #0f172a;
    min-height: 360px;
    display: flex !important;
    align-items: flex-end;
    border-radius: 22px;
    border: 0 !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.45);
}
.ppeap-card-hero .ppeap-card-hero-overlay {
    position: absolute; inset: 0; border-radius: 22px;
    background: linear-gradient(180deg, rgba(2,6,23,.06) 0%, rgba(2,6,23,.48) 50%, rgba(2,6,23,.92) 100%);
}
.ppeap-card-hero .ppeap-card-hero-body {
    position: relative; z-index: 2;
    padding: 32px 28px; color: #fff; width: 100%;
}
.ppeap-card-hero .ppeap-card-title { font-size: clamp(20px,3vw,34px) !important; color: #fff; margin-bottom: 10px; }
.ppeap-card-hero .ppeap-card-excerpt { color: rgba(255,255,255,.8); }
.ppeap-card-hero .ppeap-card-cat { background: #3b82f6; }
.ppeap-card-hero .ppeap-card-author { color: rgba(255,255,255,.75); }
.ppeap-card-hero .ppeap-card-read-more { background: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,.4); }
@media (max-width: 640px) {
    .ppeap-card-hero { min-height: 240px; }
    .ppeap-card-hero .ppeap-card-hero-body { padding: 20px; }
}


/* ══════════════════════════════════════════════════
   4. OVERLAY SLIDER
   Image fills full card (absolute).
   Gradient bottom-to-top. Text floats on image.
   ══════════════════════════════════════════════════ */
.ppeap-card-overlay {
    --card-accent: #f97316;
    min-height: 280px;
    border-radius: 18px;
    border: 0 !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.2);
}
.ppeap-card-overlay .ppeap-card-img-wrap {
    position: absolute; inset: 0;
    border-radius: 18px; height: 100%;
}
.ppeap-card-overlay .ppeap-card-img-wrap img { height: 100%; }
.ppeap-card-overlay .ppeap-card-overlay-gradient {
    position: absolute; inset: 0; border-radius: 18px; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.88) 100%);
}
.ppeap-card-overlay .ppeap-card-overlay-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 18px 18px 16px; color: #fff; z-index: 2;
}
.ppeap-card-overlay .ppeap-card-title { color: #fff; }
.ppeap-card-overlay .ppeap-card-excerpt { color: rgba(255,255,255,.8); }
.ppeap-card-overlay .ppeap-card-cat { background: #f97316; }
.ppeap-card-overlay .ppeap-card-author { color: rgba(255,255,255,.75); }
.ppeap-card-overlay .ppeap-card-read-more { background: rgba(249,115,22,.9); }


/* ══════════════════════════════════════════════════
   5. COMPACT SLIDER
   Thumbnail LEFT (110px fixed) + title/date RIGHT.
   Very dense/small cards. No excerpt.
   ══════════════════════════════════════════════════ */
.ppeap-card-compact {
    --card-accent: #10b981;
    display: grid !important;
    grid-template-columns: 110px 1fr;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.1);
    background: #fff;
    box-shadow: 0 2px 10px rgba(15,23,42,.06);
    min-height: 90px;
    max-height: 110px;
}
.ppeap-card-compact .ppeap-card-img-wrap {
    width: 110px; height: 100%;
    border-radius: 12px 0 0 12px;
}
.ppeap-card-compact .ppeap-card-img-wrap img { height: 100%; }
.ppeap-card-compact .ppeap-card-body {
    padding: 10px 12px;
    display: flex; flex-direction: column; justify-content: center;
    color: #0f172a;
}
.ppeap-card-compact .ppeap-card-cat { font-size: 9px; padding: 3px 8px; margin-bottom: 5px; background: #10b981; }
.ppeap-card-compact .ppeap-card-title {
    font-size: 13px !important; line-height: 1.3; margin-bottom: 5px; color: #0f172a;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ppeap-card-compact .ppeap-card-meta-row { margin-bottom: 0; }
.ppeap-card-compact .ppeap-card-author-name { font-size: 11px; color: #475569; }
.ppeap-card-compact .ppeap-card-date { font-size: 11px; color: #94a3b8; }
@media (max-width: 640px) {
    .ppeap-card-compact { grid-template-columns: 80px 1fr !important; max-height: none; }
    .ppeap-card-compact .ppeap-card-img-wrap { width: 80px; }
}


/* ══════════════════════════════════════════════════
   6. THUMBNAIL SLIDER
   Square 1:1 image. Centered caption below.
   Category badge absolute top-left on image.
   Gallery/portfolio feel.
   ══════════════════════════════════════════════════ */
.ppeap-card-thumbnail {
    --card-accent: #a855f7;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.1);
    background: #fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.08);
    overflow: hidden;
}
.ppeap-card-thumbnail .ppeap-card-img-wrap {
    aspect-ratio: 1/1;
    position: relative;
}
.ppeap-card-thumbnail .ppeap-card-img-wrap .ppeap-card-cat {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    margin: 0; background: rgba(168,85,247,.9);
}
/* Hide the cat that renders outside img-wrap */
.ppeap-card-thumbnail > .ppeap-card-body > .ppeap-card-cat { display: none; }
.ppeap-card-thumbnail .ppeap-card-body {
    padding: 12px 14px 14px; text-align: center; color: #0f172a;
}
.ppeap-card-thumbnail .ppeap-card-title {
    font-size: 14px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: #0f172a; margin-bottom: 10px;
}
.ppeap-card-thumbnail .ppeap-card-read-more {
    background: #a855f7; font-size: 11px; padding: 6px 12px; margin: 0 auto;
}


/* ══════════════════════════════════════════════════
   7. MINIMAL SLIDER
   NO image at all. Pure text.
   Category as colored text (not pill).
   Border-bottom separator between cards.
   ══════════════════════════════════════════════════ */
.ppeap-card-minimal {
    --card-accent: #2563eb;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 4px;
}
.ppeap-card-minimal:last-child { border-bottom: 0 !important; }
.ppeap-card-minimal .ppeap-card-body { padding: 0; color: #0f172a; }
.ppeap-card-minimal .ppeap-card-title {
    font-size: clamp(17px, 2.2vw, 23px) !important; color: #0f172a; margin-bottom: 8px;
}
.ppeap-card-minimal .ppeap-card-excerpt { color: #475569; }
.ppeap-card-minimal .ppeap-card-author { color: #64748b; }
.ppeap-card-minimal .ppeap-card-date { color: #94a3b8; font-size: 12px; }

/* For minimal, the slider viewport should have no border-radius */
.ppeap-slider-template-minimal_slider .ppeap-slider-viewport { border-radius: 0; background: transparent; }
.ppeap-slider-template-minimal_slider .ppeap-slider-arrow {
    background: transparent; border-color: rgba(15,23,42,.18); color: #475569;
    box-shadow: none;
}


/* ══════════════════════════════════════════════════
   8. CREATIVE SLIDER
   Cards tilt alternately (-1.8° / 0 / +1.8°).
   Pink-purple glow. Tilt resets to 0 on hover.
   Dark moody background.
   ══════════════════════════════════════════════════ */
.ppeap-card-creative {
    --card-accent: #ec4899;
    background: #0f0720;
    border-radius: 22px;
    border: 1px solid rgba(236,72,153,.28) !important;
    box-shadow: 0 0 0 1px rgba(168,85,247,.15), 0 22px 55px rgba(88,28,135,.38) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
}
/* Odd cards tilt left */
.ppeap-slider-track > *:nth-child(odd) .ppeap-card-creative   { transform: rotate(-1.8deg); }
/* Even cards tilt right */
.ppeap-slider-track > *:nth-child(even) .ppeap-card-creative  { transform: rotate(1.8deg); }
/* Hover — flatten and lift */
.ppeap-slider-track > * .ppeap-card-creative:hover {
    transform: rotate(0deg) translateY(-5px) !important;
    box-shadow: 0 0 0 1px rgba(236,72,153,.4), 0 30px 70px rgba(168,85,247,.5) !important;
}
.ppeap-card-creative .ppeap-card-img-wrap { aspect-ratio: 16/9; border-radius: 20px 20px 0 0; }
.ppeap-card-creative .ppeap-card-img-gradient {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(15,7,32,0) 30%, rgba(15,7,32,.96) 100%);
}
.ppeap-card-creative .ppeap-card-overlay-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 18px 18px 14px; color: #fff;
}
.ppeap-card-creative .ppeap-card-title { color: #fff; }
.ppeap-card-creative .ppeap-card-excerpt { color: rgba(255,255,255,.75); }
.ppeap-card-creative .ppeap-card-cat { background: linear-gradient(135deg,#ec4899,#a855f7); }
.ppeap-card-creative .ppeap-card-read-more { background: linear-gradient(135deg,#ec4899,#a855f7); box-shadow: 0 4px 14px rgba(236,72,153,.4); }
.ppeap-card-creative .ppeap-card-author { color: rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce) {
    .ppeap-card-creative,
    .ppeap-slider-track > * .ppeap-card-creative:hover { transform: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile fixes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {

    .ppeap-post-slider {
        padding: 0 44px;
    }

    /* Hero: থোড়া ছোট */
    .ppeap-card-hero {
        min-height: 300px;
    }
    .ppeap-card-hero .ppeap-card-hero-body {
        padding: 24px 22px;
    }
    .ppeap-card-hero .ppeap-card-title {
        font-size: clamp(18px, 2.5vw, 26px) !important;
    }

    /* Compact: height একটু বাড়াও */
    .ppeap-card-compact {
        max-height: 120px;
    }
}

/* ── Mobile (max 640px) ── */
@media (max-width: 640px) {

    /* Slider wrapper */
    .ppeap-post-slider {
        padding: 0 34px;
        --ppeap-slider-gap: 10px;
    }

    /* Arrows ছোট */
    .ppeap-slider-arrow {
        width: 32px;
        height: 32px;
    }
    .ppeap-slider-arrow svg {
        width: 15px;
        height: 15px;
    }

    /* ── 1. Gaming — mobile ── */
    .ppeap-card-gaming .ppeap-card-img-wrap {
        aspect-ratio: 4/3;
    }
    .ppeap-card-gaming .ppeap-card-overlay-body {
        padding: 14px 14px 12px;
    }
    .ppeap-card-gaming .ppeap-card-title {
        font-size: 15px !important;
    }
    .ppeap-card-gaming .ppeap-card-excerpt {
        display: none; /* mobile-এ excerpt লুকাও */
    }
    .ppeap-card-gaming .ppeap-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ── 2. News — mobile: stack vertically ── */
    .ppeap-card-news {
        grid-template-columns: 1fr !important;
        min-height: auto;
    }
    .ppeap-card-news .ppeap-card-img-wrap {
        height: 150px;
        border-radius: 14px 14px 0 0;
    }
    .ppeap-card-news .ppeap-card-body {
        padding: 12px 14px;
    }

    /* ── 3. Hero — mobile ── */
    .ppeap-card-hero {
        min-height: 220px;
        align-items: flex-end;
    }
    .ppeap-card-hero .ppeap-card-hero-body {
        padding: 16px 16px 14px;
    }
    .ppeap-card-hero .ppeap-card-title {
        font-size: 18px !important;
    }
    .ppeap-card-hero .ppeap-card-excerpt {
        display: none;
    }
    .ppeap-card-hero .ppeap-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* ── 4. Overlay — mobile ── */
    .ppeap-card-overlay {
        min-height: 220px;
    }
    .ppeap-card-overlay .ppeap-card-overlay-body {
        padding: 12px 14px 12px;
    }
    .ppeap-card-overlay .ppeap-card-excerpt {
        display: none;
    }

    /* ── 5. Compact — mobile: stack vertically ── */
    .ppeap-card-compact {
        grid-template-columns: 1fr !important;
        max-height: none;
        min-height: auto;
    }
    .ppeap-card-compact .ppeap-card-img-wrap {
        width: 100%;
        height: 120px;
        border-radius: 12px 12px 0 0;
    }
    .ppeap-card-compact .ppeap-card-body {
        padding: 10px 12px 12px;
    }
    .ppeap-card-compact .ppeap-card-title {
        -webkit-line-clamp: 3;
    }

    /* ── 6. Thumbnail — mobile ── */
    .ppeap-card-thumbnail .ppeap-card-img-wrap {
        aspect-ratio: 4/3; /* mobile-এ square না রেখে একটু landscape */
    }
    .ppeap-card-thumbnail .ppeap-card-body {
        padding: 10px 12px 12px;
    }

    /* ── 7. Minimal — mobile ── */
    .ppeap-card-minimal {
        padding: 14px 2px;
    }
    .ppeap-card-minimal .ppeap-card-title {
        font-size: 16px !important;
    }
    .ppeap-card-minimal .ppeap-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ── 8. Creative — mobile: tilt বন্ধ ── */
    .ppeap-slider-track > *:nth-child(odd) .ppeap-card-creative,
    .ppeap-slider-track > *:nth-child(even) .ppeap-card-creative {
        transform: none !important; /* mobile-এ tilt layout ভাঙে */
    }
    .ppeap-card-creative .ppeap-card-overlay-body {
        padding: 12px 14px 12px;
    }
    .ppeap-card-creative .ppeap-card-excerpt {
        display: none;
    }

    /* Dots mobile */
    .ppeap-slider-dots {
        gap: 6px;
        margin-top: 12px;
    }
}

/* ── Very small mobile (max 400px) ── */
@media (max-width: 400px) {
    .ppeap-post-slider {
        padding: 0 28px;
    }
    .ppeap-card-hero { min-height: 190px; }
    .ppeap-card-overlay { min-height: 190px; }
    .ppeap-card-gaming .ppeap-card-img-wrap { aspect-ratio: 3/2; }
}


@media (max-width: 640px) {
    .ppeap-slider-track { display: flex !important; }
    .ppeap-slider-track > *, .ppeap-loop-card { width: 100% !important; flex: 0 0 100% !important; }
}