/* ===========================================================
   Economus Streaming Gallery — v1.0.5
   Layout: cards com descrição sempre visível,
   card destacado em caixa branca com borda rosa.
   =========================================================== */

.esg-gallery{
    --esg-card-w:300px;
    --esg-active-w:520px;
    --esg-media-h:380px;
    --esg-gap:16px;
    --esg-pink:#f3246b;
    --esg-navy:#173186;
    --esg-title:#24398c;
    position:relative;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:visible;
    padding:40px;
    background:transparent;
}
.esg-gallery *{box-sizing:border-box;}

.esg-section-title{
    font-size:28px;line-height:1.1;font-weight:900;
    margin:0 0 28px;color:var(--esg-title);letter-spacing:.01em;
}
.esg-section-subtitle{margin:-16px 0 24px;color:var(--esg-title);}

/* ---------- Carrossel ---------- */
.esg-carousel-wrap{position:relative;width:100%;display:flex;align-items:flex-start;}
.esg-viewport{width:100%;overflow:hidden;padding:4px 0 12px;}
.esg-track{display:flex;align-items:flex-start;gap:var(--esg-gap);transition:transform .42s ease;will-change:transform;}

/* ---------- Card ---------- */
.esg-card{
    flex:0 0 var(--esg-card-w);
    width:var(--esg-card-w);
    display:flex;flex-direction:column;
    background:transparent;
    border:2px solid transparent;
    border-radius:16px;
    padding:0;
    transition:flex-basis .34s ease,width .34s ease,background .24s ease,
               border-color .24s ease,box-shadow .24s ease,padding .24s ease;
}
.esg-card-link{display:block;text-decoration:none!important;color:inherit;}

.esg-card-media{
    position:relative;
    height:var(--esg-media-h);
    overflow:hidden;
    background-size:cover;background-position:center;
    border-radius:12px;
    isolation:isolate;
}
.esg-card-media:before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(8,12,18,.18) 40%,rgba(8,12,18,.92) 100%);
}
.esg-card-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 35%);}

.esg-card-copy{position:absolute;z-index:4;left:22px;right:18px;bottom:22px;color:#fff;}
.esg-episode{font-size:15px;line-height:1.2;margin-bottom:8px;color:#fff;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.esg-card-title{font-size:26px;font-weight:900;line-height:1.02;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55);max-width:100%;}

/* Badge ORIGINAL — canto superior direito */
.esg-badge{
    position:absolute;z-index:5;top:16px;right:18px;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:900;color:var(--esg-pink);
    text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* Coração — canto superior ESQUERDO, estilo contorno */
.esg-heart{
    position:absolute;z-index:8;top:14px;left:14px;
    width:40px;height:40px;border-radius:999px;
    border:1.6px solid rgba(255,255,255,.9);
    background:rgba(10,18,30,.22);
    color:#fff;font-size:20px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;backdrop-filter:blur(2px);
    transition:transform .18s ease,background .18s ease,color .18s ease;
}
.esg-heart:hover{transform:scale(1.08);}
.esg-heart.is-saved{background:rgba(255,255,255,.96);border-color:transparent;color:var(--esg-pink);font-size:0;}
.esg-heart.is-saved:before{content:"\2665";font-size:21px;line-height:1;}

/* ---------- Painel de descrição (sempre visível) ---------- */
.esg-description-panel{
    background:transparent;
    color:var(--esg-navy);
    padding:16px 4px 4px;
}
.esg-meta{font-size:15px;font-weight:900;margin-bottom:10px;color:var(--esg-pink);}
.esg-desc-title{display:block;font-size:16px;margin-bottom:8px;font-weight:900;color:var(--esg-title);}
.esg-description-panel p{font-size:15px;line-height:1.5;margin:0;}

/* ---------- Card em destaque (ativo / hover) ---------- */
.esg-card.is-active,
.esg-card:hover{
    flex-basis:var(--esg-active-w);
    width:var(--esg-active-w);
    background:#fff;
    border-color:var(--esg-pink);
    padding:7px;
    box-shadow:0 22px 50px rgba(4,15,32,.20);
}
.esg-card.is-active .esg-description-panel,
.esg-card:hover .esg-description-panel{padding:16px 12px 8px;}

/* ---------- Setas ---------- */
.esg-arrow{
    position:absolute;z-index:10;
    top:calc(var(--esg-media-h) / 2);transform:translateY(-50%);
    width:48px;height:48px;border:0;border-radius:50%;
    background:#fff;color:#3a4a6b;
    font-size:26px;font-weight:700;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 8px 22px rgba(8,20,45,.20);
    transition:transform .18s ease,box-shadow .18s ease;
}
.esg-arrow:hover{transform:translateY(-50%) scale(1.07);box-shadow:0 12px 28px rgba(8,20,45,.28);}
.esg-prev{left:-10px;}
.esg-next{right:-10px;}

/* ---------- Dots ---------- */
.esg-dots{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px;}
.esg-dot{width:9px;height:9px;border:0;border-radius:50%;background:rgba(120,140,170,.45);padding:0;cursor:pointer;transition:background .2s ease;}
.esg-dot.is-active{background:var(--esg-pink);}

/* ---------- Continuar assistindo ---------- */
.esg-continue{margin-top:42px;}
.esg-continue-title{
    font-size:20px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
    color:var(--esg-title);margin:0 0 18px;
}
.esg-continue-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:18px;
}
.esg-continue-card{display:block;text-decoration:none!important;color:inherit;}
.esg-continue-thumb{
    position:relative;width:100%;aspect-ratio:16/9;
    border-radius:14px;overflow:hidden;
    background-size:cover;background-position:center;background-color:#0c1626;
    box-shadow:0 14px 30px rgba(4,15,32,.18);
}
.esg-continue-thumb:before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.85) 100%);
}
.esg-play{
    position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
    width:56px;height:56px;border-radius:50%;
    border:2px solid rgba(255,255,255,.92);
    background:rgba(12,22,38,.30);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:20px;padding-left:3px;
    transition:transform .18s ease,background .18s ease;
}
.esg-continue-card:hover .esg-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(243,36,107,.85);border-color:transparent;}
.esg-continue-copy{position:absolute;z-index:3;left:16px;right:16px;bottom:14px;color:#fff;}
.esg-continue-copy strong{display:block;font-size:15px;font-weight:800;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.esg-continue-copy small{display:block;font-size:12px;margin-top:5px;color:rgba(255,255,255,.85);}
.esg-continue-progress{position:absolute;z-index:4;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28);}
.esg-continue-progress i{display:block;height:100%;background:var(--esg-pink);}

/* ---------- Página de favoritos (shortcode) ---------- */
.esg-favorites-page{width:100%;padding:20px 0;}
.esg-fav-page-title{color:var(--esg-title);font-weight:900;margin:0 0 22px;}
.esg-favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.esg-fav-card{display:block;text-decoration:none!important;color:inherit;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.08);}
.esg-fav-thumb{height:150px;background-size:cover;background-position:center;background-color:#071324;position:relative;}
.esg-fav-thumb:after{content:"\25B6";position:absolute;inset:auto 14px 14px auto;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--esg-title);}
.esg-fav-body{padding:15px;}
.esg-fav-body strong{display:block;color:var(--esg-title);font-size:17px;line-height:1.2;}
.esg-fav-body small{display:block;color:var(--esg-pink);margin-top:7px;font-weight:700;}
.esg-fav-empty{color:var(--esg-title);font-size:18px;}

/* ---------- Backgrounds demo (cards sem imagem) ---------- */
.esg-demo-bg{background-image:linear-gradient(135deg,#c9e9ff,#1e293b);}
.esg-demo-1{background-image:linear-gradient(140deg,#bfe4ff,#243e68 58%,#111);}
.esg-demo-2{background-image:linear-gradient(140deg,#d5d5d5,#8ea1ad 45%,#111);}
.esg-demo-3{background-image:linear-gradient(140deg,#557c4e,#d0b56d 48%,#111);}
.esg-demo-4{background-image:linear-gradient(140deg,#10233d,#587a91 45%,#111);}
.esg-demo-5{background-image:linear-gradient(140deg,#052034,#0079bd 50%,#111);}
.esg-demo-6{background-image:linear-gradient(140deg,#fff,#c7b196 46%,#111);}

/* ---------- Responsivo ---------- */
@media(max-width:1100px){
    .esg-prev{left:6px;}
    .esg-next{right:6px;}
    .esg-arrow{width:42px;height:42px;font-size:23px;}
}
@media(max-width:767px){
    .esg-gallery{--esg-card-w:78vw;--esg-active-w:78vw;--esg-media-h:300px;}
    .esg-section-title{font-size:24px;margin-bottom:20px;}
    .esg-card,
    .esg-card.is-active,
    .esg-card:hover{flex-basis:var(--esg-card-w);width:var(--esg-card-w);}
    .esg-card-title{font-size:23px;}
    .esg-card-copy{left:18px;right:16px;bottom:20px;}
    .esg-continue-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
    .esg-continue-title{font-size:18px;}
    .esg-dots{gap:10px;}
    .esg-dot{width:7px;height:7px;}
}

/* ---------- Robustez contra estilos de botão do tema (WoodMart) ----------
   Garante que setas/coração não entrem no fluxo e empurrem os cards. */
.esg-gallery .esg-arrow{position:absolute!important;}
.esg-gallery .esg-heart{position:absolute!important;}