/* AstroPanda Showcase Widget v8 */
.astropanda-showcase { position:relative; box-sizing:border-box; padding:0; margin:0; }
.astropanda-showcase *, .astropanda-showcase *::before, .astropanda-showcase *::after { box-sizing:border-box; }
.astropanda-showcase.astropanda-empty {
    display:flex; align-items:center; justify-content:center;
    min-height:200px; background:#f8f9fa; border:2px dashed #ccc;
    border-radius:12px; color:#666; font-size:15px;
}
.astropanda-showcase { --ap-zoom: 1.06; }

/* ── GRID ─────────────────────────────────────── */
.ap-grid { display:flex; gap:16px; align-items:stretch; }

/* ── FEATURED ─────────────────────────────────── */
.ap-featured {
    flex:0 0 38%; max-width:38%; min-height:420px;
    border-radius:12px; position:relative;
    display:flex; flex-direction:column;
}

/* ── RIGHT COLUMN ─────────────────────────────── */
.ap-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }

/* ── HEADER ───────────────────────────────────── */
.ap-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ap-header-text { flex:1; min-width:0; }
.ap-title { margin:0 0 8px; font-size:36px; font-weight:800; line-height:1.2; color:#1a1a2e; }
.ap-desc  { margin:0 0 14px; font-size:16px; line-height:1.5; color:#555; }

/* ── BUTTON ───────────────────────────────────── */
.ap-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 24px; font-size:14px; font-weight:600;
    text-decoration:none; color:#fff; background:#e8541e;
    border:none; border-radius:25px; cursor:pointer;
    transition:all .25s ease; white-space:nowrap;
}
.ap-btn:hover { opacity:.9; transform:translateY(-1px); }
.ap-btn--link { background:transparent; color:#e8541e; padding:0; border-radius:0; }
.ap-btn--link:hover { transform:none; opacity:.8; }
.ap-btn-icon { display:inline-flex; align-items:center; font-size:.85em; }
.ap-btn-icon--after { margin-left:8px; }
.ap-btn-icon--before { margin-right:8px; }

/* ── NAV ARROWS ───────────────────────────────── */
.ap-nav { display:flex; align-items:center; gap:8px; flex-shrink:0; padding-top:6px; }
.ap-nav-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border:none; background:transparent;
    cursor:pointer; border-radius:50%;
    transition:background .2s, color .2s;
    color:#1a1a2e; font-size:18px; line-height:1; padding:0;
}
.ap-nav-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.ap-nav-btn i { font-size:inherit; color:inherit; display:block; }
.ap-nav-btn:hover { background:rgba(0,0,0,.08); color:#e8541e; }
.ap-nav-btn.is-disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }

/* ── SMALL CARDS ──────────────────────────────── */
.ap-smalls { display:flex; gap:16px; flex:1; }
.ap-small {
    flex:1; border-radius:12px; position:relative; min-height:200px;
    display:flex; flex-direction:column;
}

/* ── CARD LINK ────────────────────────────────── */
.ap-card-link {
    display:flex; flex-direction:column; flex:1;
    text-decoration:none; color:inherit; width:100%; height:100%;
}

/* ── CARD IMAGE ───────────────────────────────── */
.ap-card-img {
    position:relative; flex:1; width:100%; min-height:inherit;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    border-radius:inherit; overflow:hidden;
}
.ap-tint { position:absolute; inset:0; pointer-events:none; z-index:1; }
.ap-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    z-index:2;
}

/* ── CARD BODY ────────────────────────────────── */
.ap-card-body {
    position:absolute; bottom:0; left:0; right:0; padding:22px;
    display:flex; flex-direction:column; gap:6px; z-index:3;
    align-items:flex-start;
}

/* ── FEATURED TITLE ───────────────────────────── */
.ap-featured .ap-card-title {
    display:inline-flex; align-items:center; gap:6px;
    font-size:21px; font-weight:700; color:#fff; line-height:1.3;
    background-image:linear-gradient(currentColor, currentColor);
    background-position:left bottom; background-repeat:no-repeat;
    background-size:0% 2px; transition:background-size .3s ease;
}
.ap-featured .ap-card-title .ap-icon {
    display:inline-flex; margin-left:6px;
    opacity:0; transform:translate(-4px,4px);
    transition:opacity .25s ease, transform .25s ease;
}
.ap-featured:hover .ap-card-title { background-size:100% 2px; }
.ap-featured:hover .ap-card-title .ap-icon { opacity:1; transform:translate(0,0); }

/* ── SMALL LABEL ──────────────────────────────── */
.ap-small .ap-label {
    display:inline-flex; align-items:center; gap:5px;
    font-size:14px; font-weight:600; color:#fff;
    background-image:linear-gradient(currentColor, currentColor);
    background-position:left bottom; background-repeat:no-repeat;
    background-size:0% 2px; transition:background-size .3s ease;
    padding-bottom:2px; text-decoration:none; cursor:pointer;
}
.ap-hover-icon {
    display:inline-flex; align-items:center; justify-content:center;
    opacity:0; transform:translate(-4px,4px);
    transition:opacity .25s ease, transform .25s ease;
    font-size:.85em; color:inherit; line-height:1;
}
.ap-hover-icon i   { font-size:inherit; color:inherit; }
.ap-hover-icon svg { width:1em; height:1em; stroke:currentColor; fill:none; }
.ap-small:hover .ap-label      { background-size:100% 2px; }
.ap-small:hover .ap-hover-icon { opacity:1; transform:translate(0,0); }

/* ── EXCERPT (siempre visible) ────────────────── */
.ap-excerpt-hover, .ap-excerpt {
    display:block !important; opacity:1 !important;
    visibility:visible !important; max-height:none !important;
    overflow:visible !important; clip:auto !important;
    clip-path:none !important; transform:none !important;
}
.ap-featured .ap-excerpt-hover,
.ap-featured .ap-excerpt {
    font-size:13px; line-height:1.55;
    color:rgba(255,255,255,0.88); margin-top:6px;
}
.ap-small .ap-excerpt-hover,
.ap-small .ap-excerpt {
    font-size:12px; line-height:1.45;
    color:rgba(255,255,255,0.85); margin-top:4px;
}

/* ── HOVER EFFECTS ────────────────────────────── */
.ap-hover-zoom .ap-card-img { transition:transform .4s ease; }
.ap-hover-zoom .ap-featured:hover .ap-card-img,
.ap-hover-zoom .ap-small:hover .ap-card-img { transform:scale(var(--ap-zoom,1.06)); }
.ap-hover-lift .ap-featured, .ap-hover-lift .ap-small { will-change:transform; }
.ap-hover-lift .ap-featured:hover, .ap-hover-lift .ap-small:hover { transform:translateY(-8px); box-shadow:0 18px 40px rgba(0,0,0,.2); }
.ap-hover-zoom_lift .ap-featured, .ap-hover-zoom_lift .ap-small { will-change:transform; }
.ap-hover-zoom_lift .ap-card-img { transition:transform .4s ease; }
.ap-hover-zoom_lift .ap-featured:hover, .ap-hover-zoom_lift .ap-small:hover { transform:translateY(-8px); box-shadow:0 18px 40px rgba(0,0,0,.2); }
.ap-hover-zoom_lift .ap-featured:hover .ap-card-img,
.ap-hover-zoom_lift .ap-small:hover .ap-card-img { transform:scale(var(--ap-zoom,1.06)); }

/* ── TABLET ───────────────────────────────────── */
@media (max-width:1024px) {
    .ap-grid { flex-direction:column; }
    .ap-featured { flex:none; max-width:100%; width:100%; min-height:300px; }
    .ap-title { font-size:28px; }
    .ap-small { min-height:180px; }
}

/* ── MOBILE — Carousel horizontal, featured oculta ─────────────────────────
   Layout:
   [ Título + descripción + botón ]     [ ← → ]
   [ Card 1 (swipeable) ]
   Todas las cards (incluso la que era "featured") se muestran
   de a 1 en el carousel, arrastrables izquierda/derecha.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px) {

    /* Ocultar la featured card — en mobile todas van al carousel */
    .ap-featured { display:none !important; }

    /* El grid pasa a columna única: header arriba, carousel abajo */
    .ap-grid { flex-direction:column; gap:12px; }
    .ap-right { gap:12px; }

    /* Header: título a la izquierda, flechas a la derecha — todo en una fila */
    .ap-header {
        flex-direction:row;
        align-items:center;
        gap:12px;
    }
    .ap-header-text { flex:1; }
    .ap-nav { padding-top:0; flex-shrink:0; }

    .ap-title { font-size:22px; margin-bottom:4px; }
    .ap-desc  { font-size:14px; margin-bottom:10px; }

    /* Carousel: 1 card visible, sin gap entre slots (sólo el activo se muestra) */
    .ap-smalls {
        flex-direction:row;
        gap:0;
        overflow:hidden;
        position:relative;
    }

    /* Cada card ocupa el 100% del ancho */
    .ap-small {
        flex:0 0 100% !important;
        width:100% !important;
        min-width:100%;
        min-height:280px;
        border-radius:12px;
    }

    /* Indicador de posición (dots) — lo agrega JS si hay > 1 post */
    .ap-dots {
        display:flex; justify-content:center; gap:6px;
        margin-top:10px;
    }
    .ap-dot {
        width:7px; height:7px; border-radius:50%;
        background:rgba(0,0,0,0.2); cursor:pointer;
        transition:background .2s;
    }
    .ap-dot.is-active { background:#e8541e; }

    /* Excerpt en mobile: un poco más grande para que sea legible */
    .ap-small .ap-excerpt-hover,
    .ap-small .ap-excerpt { font-size:13px; }
}

/* ── ENTRANCE ─────────────────────────────────── */
.astropanda-showcase.ap-animated .ap-featured           { animation:apUp .5s .05s ease both; }
.astropanda-showcase.ap-animated .ap-small:nth-child(1) { animation:apUp .5s .15s ease both; }
.astropanda-showcase.ap-animated .ap-small:nth-child(2) { animation:apUp .5s .25s ease both; }
.astropanda-showcase.ap-animated .ap-small:nth-child(3) { animation:apUp .5s .35s ease both; }
@keyframes apUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}