/*
 * Isolamento CSS dos Components (ALL K1; origem APPEARANCE-06).
 *
 * Reset MINIMO e escopado aos containers do plugin: neutraliza as
 * interferencias estruturais mais comuns do tema hospedeiro (box-sizing
 * divergente, imagens sem limite de largura, margens de figure) sem
 * tocar tipografia e cores — que continuam deliberadamente herdadas do
 * tema, como o Appearance define. Nenhum reset global, nenhum framework:
 * todas as regras vivem sob .mnsw-*.
 */
.mnsw-section-container,
.mnsw-section-container *,
.mnsw-render-placeholder,
.mnsw-render-placeholder *,
.mnsw-lightbox,
.mnsw-lightbox *{

    box-sizing:border-box;

}

/*
 * max-width apenas: height e border NAO sao tocados aqui — height fixo e
 * bordas pertencem aos Components e ao Appearance (Image Border), e um
 * reset de mesma especificidade os apagaria. O objetivo e impedir
 * overflow causado por imagens sem limite, nada alem.
 */
.mnsw-section-container img,
.mnsw-lightbox img{

    max-width:100%;

}

.mnsw-section-container figure{

    margin:0;

}

.mnsw-feed{

    display:grid;

    /*
     * --mnsw-card-min e emitido pelo template do Theme quando a Section
     * configura o Card Size. O min() impede overflow em containers mais
     * estreitos que a largura minima configurada.
     */
    grid-template-columns:repeat(auto-fill,minmax(min(var(--mnsw-card-min, 360px), 100%),1fr));

    gap:var(--mnsw-feed-gap, 30px);

    margin:30px 0;

}

/*
 * Single Line (FEED-02 R2): os Cards permanecem em uma unica linha
 * horizontal. O grid-auto-flow substitui a distribuicao automatica em
 * linhas, e cada coluna respeita a mesma largura minima configurada
 * pelo Card Size.
 *
 * overflow-x:auto e sempre aplicado: o conteudo excedente permanece
 * acessivel por roda, toque, teclado e demais mecanismos nativos.
 */
.mnsw-feed--single-line{

    grid-template-columns:none;

    grid-auto-flow:column;

    grid-auto-columns:minmax(min(var(--mnsw-card-min, 360px), 100%), 1fr);

    overflow-x:auto;

}

/*
 * Show Scrollbar desligado esconde apenas a apresentacao visual da
 * barra — nunca a rolagem. scrollbar-width e a propriedade padrao;
 * a pseudo-classe -webkit cobre as versoes anteriores a sua adocao.
 * overflow-x:hidden jamais e utilizado aqui: cortaria o conteudo.
 */
.mnsw-feed--no-scrollbar{

    scrollbar-width:none;

}

.mnsw-feed--no-scrollbar::-webkit-scrollbar{

    display:none;

}

.mnsw-card{

    background:var(--mnsw-surface-color, #fff);

    border-radius:var(--mnsw-card-radius, 14px);

    overflow:hidden;

    box-shadow:var(--mnsw-card-shadow, 0 10px 25px rgba(0,0,0,.08));

    display:flex;

    flex-direction:column;

    transition:.25s;

}

.mnsw-card:hover{

    transform:translateY(-5px);

}

/*
 * Card sem Header: reserva no topo exatamente o espaco do deslocamento
 * do hover acima. Com Header, o padding de 18px ja absorve a subida;
 * sem ele o conteudo comecava no topo do Card e os primeiros pixels
 * saiam da area original durante o hover. A reserva existe sempre —
 * hover e estado normal — para que nada dentro do Card mude de posicao
 * indevidamente. Cards com Header nao sao alterados.
 */
.mnsw-card--headerless{

    padding-top:5px;

}

.mnsw-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-bottom:1px solid #eee;

}

.mnsw-card-meta{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mnsw-network{

    font-weight:700;

    color:var(--mnsw-accent-color, #1877F2);

}

.mnsw-badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.mnsw-badge{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

    background:rgba(24,119,242,.12);

    color:var(--mnsw-accent-color, #1877F2);

}

.mnsw-badge--story{

    background:rgba(255,132,0,.14);

    color:#b45b00;

}

.mnsw-badge--reel{

    background:rgba(214,0,143,.13);

    color:#9a0067;

}

.mnsw-badge--video{

    background:rgba(0,137,123,.14);

    color:#00695f;

}

.mnsw-card-header time{

    font-size:13px;

    color:#888;

}

.mnsw-image{

    width:100%;

    height:auto;

    display:block;

    /*
     * Image Ratio: a proporcao da area de imagem e emitida pelo
     * template do Theme quando a Section a configura. O fallback auto
     * preserva a proporcao natural do arquivo, que e o comportamento
     * vigente deste Theme.
     *
     * object-fit:cover acompanha a proporcao para que a imagem seja
     * recortada, nunca distorcida. Com proporcao auto a caixa ja
     * corresponde a proporcao intrinseca e a declaracao nao produz
     * efeito algum — o estado original permanece identico.
     */
    aspect-ratio:var(--mnsw-image-ratio, auto);

    object-fit:cover;

}

/*
 * Image Border e Image Shape da imagem do Card.
 *
 * O seletor tem duas classes de proposito: o reset do Elementor —
 * .elementor img — vence uma classe unica e apagava a borda e o raio
 * na pagina real. Duas classes vencem sem !important.
 *
 * A linha vive na propria imagem e acompanha a area exibida: Image
 * Padding e Image Scale movem a imagem, e a borda vai junto. A cor e o
 * Accent da Appearance. O raio so existe quando o Image Shape o emite
 * (circle = 50%); o fallback 0 preserva a apresentacao atual.
 */
.mnsw-card .mnsw-image{

    border:var(--mnsw-image-border, 0) solid var(--mnsw-accent-color, #1877F2);

    box-sizing:border-box;

    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-image-rounding, 0));

}

.mnsw-card-body{

    padding:20px;

    flex:1;

    /*
     * --mnsw-body-max e emitido pelo template do Theme quando a Section
     * configura o Post Height. Sem configuracao, o fallback preserva a
     * altura atual do conteudo textual.
     */
    max-height:var(--mnsw-body-max, 160px);

    overflow:hidden;

    transition:max-height .2s ease;

}

.mnsw-card-body h3{

    margin:0 0 15px;

    /*
     * --mnsw-card-title acompanha o nivel do Card Size emitido pelo
     * template do Theme. Sem configuracao, o titulo mantem o tamanho
     * atual. --mnsw-title-align e emitido apenas quando a Section
     * configura o alinhamento; o fallback left preserva o atual.
     */
    font-size:var(--mnsw-card-title, 20px);

    text-align:var(--mnsw-title-align, left);

    /*
     * Cor do Title pelo contrato de Typography. O fallback inherit
     * preserva a cor do corpo quando o Theme nao resolver o token.
     */
    color:var(--mnsw-title-color, inherit);

    line-height:1.4;

}

.mnsw-card-body p{

    color:var(--mnsw-text-color, #444);

    line-height:1.7;

}

.mnsw-card-footer{

    /*
     * Area estrutural do Link Button: renderizada apenas quando o
     * card possui link valido, com altura padronizada entre todos os
     * cards. O min-height acomoda o maior cenario permitido — Text
     * Size nivel 5 com icones de 20px — somado ao padding vertical
     * (box-sizing explicito torna a conta deterministica). O flex
     * centraliza o conteudo verticalmente; o alinhamento horizontal
     * configurado pela Section atua via justify-content com os mesmos
     * valores emitidos (left/center/right), sem alterar a altura.
     */
    display:flex;

    align-items:center;

    justify-content:var(--mnsw-footer-align, left);

    box-sizing:border-box;

    min-height:calc(40px + 1.75em);

    /*
     * Na coluna flex do card, a margem automatica absorve o espaco
     * residual que o Body (limitado a 160px) nao absorve quando o
     * Grid estica o card ate a altura da linha, fixando o Footer
     * rente a base do card. A faixa do Footer permanece identica em
     * todos os cards da linha, em qualquer Provider.
     */
    margin-top:auto;

    padding:20px;

    border-top:1px solid #eee;

    text-align:var(--mnsw-footer-align, left);

}

.mnsw-card-footer a{

    /*
     * O link e a faixa interna do Footer: ocupa toda a largura util,
     * dentro do padding estrutural, e estica-se ate a altura interna
     * que o Footer ja possui. Nada disso altera a altura do Footer nem
     * do card, definidas pelo min-height e pelo padding do proprio
     * Footer — apenas a area pintada do link acompanha esse espaco.
     *
     * O alinhamento configurado pela Section passa a atuar aqui, sobre
     * o conteudo da faixa: left, center e right continuam valendo pela
     * mesma variavel, agora dentro do link em vez de dentro do Footer.
     */
    display:flex;

    width:100%;

    align-self:stretch;

    justify-content:var(--mnsw-footer-align, left);

    align-items:center;

    gap:6px;

    line-height:1.2;

    font-weight:600;

    /*
     * --mnsw-footer-text-scale acompanha o Link Button Text Size da
     * Section (niveis 1-5). Sem configuracao, escala 1 corresponde ao
     * nivel 3 e preserva o tamanho atual.
     */
    font-size:calc(1em * var(--mnsw-footer-text-scale, 1));

    /*
     * Estado de repouso: sem fundo e sem decoracao. As declaracoes sao
     * !important pelo motivo ja comprovado nos demais elementos
     * interativos do projeto — regras de link do tema hospedeiro
     * possuem especificidade maior que uma classe unica e
     * reintroduziriam underline, cor ou fundo proprios.
     */
    background:transparent !important;

    color:var(--mnsw-accent-color, #1877F2) !important;

    text-decoration:none !important;

    border-radius:4px;

}

.mnsw-card-footer a i,
.mnsw-card-footer a span{

    color:inherit !important;

    text-decoration:none !important;

}

/*
 * Hover e foco por teclado apresentam a faixa: o fundo preenche toda a
 * area interna do link e o texto e os icones assumem a cor definida
 * para o conteudo sobre esse fundo.
 *
 * Somente cor e fundo mudam. Nenhuma propriedade que ocupe espaco
 * participa deste estado, de modo que o Footer, o card e a posicao dos
 * elementos permanecem exatamente os mesmos.
 */
.mnsw-card-footer a:hover,
.mnsw-card-footer a:focus-visible{

    background:var(--mnsw-hover-background, #155CC0) !important;

    color:var(--mnsw-button-text, #fff) !important;

    text-decoration:none !important;

}

.mnsw-card-footer a:hover i,
.mnsw-card-footer a:hover span,
.mnsw-card-footer a:focus-visible i,
.mnsw-card-footer a:focus-visible span{

    color:var(--mnsw-button-text, #fff) !important;

    text-decoration:none !important;

}

.mnsw-section-container{

    position:relative;

    transition:opacity .2s ease, box-shadow .2s ease, transform .2s ease;

}

.mnsw-section-container--checking{

    opacity:.95;

}

.mnsw-section-container--update-available{

    box-shadow:0 0 0 2px rgba(24,119,242,.18), 0 10px 25px rgba(24,119,242,.1);

}

.mnsw-section-container--refreshing{

    opacity:.9;

    transform:translateY(-1px);

}

.mnsw-section-container[data-render-state="checking"]::after,
.mnsw-section-container[data-render-state="refreshing"]::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border:1px dashed rgba(24,119,242,.25);

    border-radius:inherit;

}

.mnsw-section-container[data-render-state="update-available"]::before{

    content:"New update available";

    position:absolute;

    top:8px;

    right:8px;

    z-index:2;

    padding:4px 8px;

    border-radius:999px;

    background:rgba(24,119,242,.14);

    color:var(--mnsw-accent-color, #1877F2);

    font-size:11px;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

}

.mnsw-card-footer a:focus-visible{

    outline:none;
    box-shadow:0 0 0 2px var(--mnsw-accent-color, #1877F2);
    border-radius:4px;

}

.mnsw-media-shell{

    position:relative;

    overflow:hidden;

    /*
     * Image Padding: a area de midia e o unico ponto comum aos quatro
     * ramos de apresentacao da imagem — Navigation, Viewer, Lightbox e
     * sem experiencia —, e por isso a regra vive aqui e vale igualmente
     * para todos. O valor emitido pelo Theme e unico e o shorthand o
     * aplica aos quatro lados. O fallback 0 preserva exatamente o
     * comportamento atual: a imagem ocupa integralmente a area.
     */
    padding:var(--mnsw-media-padding-y, 0) var(--mnsw-media-padding-x, 0);

}

/*
 * Data sobreposta a imagem, no canto superior direito, sem ocupar
 * espaco no fluxo vertical do Header. A fonte acompanha a proporcao
 * do Card Size atraves da mesma variavel do controle de expansao.
 */
.mnsw-media-shell .mnsw-card-date{

    position:absolute;

    top:10px;

    right:10px;

    z-index:2;

    padding:calc(3px * var(--mnsw-expand-scale, 1)) calc(8px * var(--mnsw-expand-scale, 1));

    border-radius:999px;

    background:rgba(0, 0, 0, .55);

    color:#fff;

    font-size:calc(12px * var(--mnsw-expand-scale, 1));

    line-height:1.4;

}

/*
 * O controle da interacao expand permanece sobreposto a imagem e nao
 * ocupa linha propria no fluxo vertical do card.
 */
.mnsw-expand-trigger{

    position:absolute;

    left:14px;

    bottom:14px;

    z-index:2;

    /*
     * --mnsw-expand-scale acompanha o Card Size emitido pelo template
     * do Theme: cards menores reduzem proporcionalmente fonte e
     * padding do controle. Sem configuracao, escala 1 (tamanho atual).
     */
    padding:calc(7px * var(--mnsw-expand-scale, 1)) calc(14px * var(--mnsw-expand-scale, 1));

    border:0;

    border-radius:999px;

    /*
     * Cores do grupo Interactive do Appearance (button_background e
     * button_text), materializadas pelo template do Theme. O !important
     * segue o padrao ja adotado neste projeto para elementos <button>:
     * regras de button do tema hospedeiro tem especificidade maior que
     * uma classe unica e, sem a mesma forca, pintariam o controle com
     * uma cor constante, alheia a configuracao da Section. Por ser
     * !important na regra base, o texto tambem permanece com a cor
     * configurada em todos os estados.
     */
    background:var(--mnsw-button-background, #1877F2) !important;

    color:var(--mnsw-button-text, #fff) !important;

    font-size:calc(13px * var(--mnsw-expand-scale, 1));

    font-weight:600;

    line-height:1.2;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(0,0,0,.18);

}

.mnsw-expand-trigger:hover,
.mnsw-expand-trigger:focus-visible{

    /*
     * A cor de hover vem diretamente do token hover_background do
     * grupo Interactive — nao mais de uma derivacao aritmetica da cor
     * base. A cor do texto permanece a da regra base (button_text).
     */
    background:var(--mnsw-hover-background, #155CC0) !important;

}

/*
 * Sem conteudo a revelar nao ha o que expandir: o runtime marca o
 * controle da instancia cujo conteudo completo cabe integralmente na
 * area textual do layout expandido, medido na geometria real do DOM
 * (is- e estado de runtime, na convencao ja declarada pelo projeto). O
 * controle e sobreposto a imagem e nao reserva espaco no fluxo, entao
 * nada mais muda no Card.
 */
.mnsw-expand-trigger.is-unneeded{

    display:none;

}

.mnsw-interaction-hook{

    display:none;

}

/*
 * Estado expandido.
 *
 * A altura externa do Card e constante: o runtime a congela, antes da
 * troca de estado, no valor que o mecanismo do Feed ja produziu para o
 * estado recolhido (altura inline no proprio Card). Por isso nenhuma
 * regra deste bloco precisa — nem pode — declarar altura para o Card.
 *
 * Dentro dessa altura fixa o interior se reorganiza: a imagem sai do
 * fluxo e o espaco liberado e absorvido pelo corpo, que apresenta o
 * conteudo completo; a area de midia colapsa para a faixa do proprio
 * controle, reordenada para depois do texto e antes do footer. Header
 * e footer permanecem no lugar.
 *
 * A area rolavel e exclusivamente a AREA TEXTUAL: o corpo e coluna
 * flex com titulo e subtitulo fixos no topo, e o conteudo completo
 * ocupa o espaco restante e rola internamente. O overflow:hidden da
 * regra base do corpo permanece: nada alem do texto rola.
 */
.mnsw-card.is-expanded{

    /*
     * A altura congelada pelo runtime e a altura de borda a borda do
     * estado recolhido; border-box garante que ela seja aplicada com o
     * mesmo significado, qualquer que seja o box-sizing do tema
     * hospedeiro.
     */
    box-sizing:border-box;

}

/*
 * A imagem desaparece somente neste estado. display:none nos dois
 * ramos — wrapper de zona e imagem sem wrapper — retira do fluxo a
 * imagem, o indicador de Play, o icone e a moldura do Image Border de
 * uma so vez, liberando o espaco para o corpo. Nao fica buraco: o
 * corpo absorve o espaco pela propria coluna flex do Card.
 */
.mnsw-card.is-expanded .mnsw-media-shell .mnsw-media-link{

    display:none !important;

}

.mnsw-card.is-expanded .mnsw-image{

    display:none;

}

/*
 * A data sobreposta pertence a imagem; sem imagem, nada a sobrepor.
 */
.mnsw-card.is-expanded .mnsw-card-date{

    display:none;

}

/*
 * A area de midia colapsa para a faixa do controle e desce para
 * depois do corpo: order identico no shell e no footer deixa a ordem
 * do DOM decidir o desempate — shell antes do footer — sem tocar nos
 * demais elementos, que permanecem em order 0. O Theme Magazine, que
 * ordena os filhos do Card explicitamente, redeclara os dois valores
 * na folha propria.
 */
.mnsw-card.is-expanded .mnsw-media-shell{

    order:1;

    padding:12px 14px;

}

.mnsw-card.is-expanded .mnsw-card-footer{

    order:1;

}

.mnsw-card.is-expanded .mnsw-expand-trigger{

    position:static;

    box-shadow:none;

}

/*
 * O corpo absorve o espaco liberado pela imagem: o teto do estado
 * recolhido e liberado e o flex:1 da regra base preenche o espaco
 * interno disponivel — limitado pela altura externa congelada do
 * Card, nunca pelo volume do texto.
 */
.mnsw-card-body.is-expanded{

    display:flex;

    flex-direction:column;

    min-height:0;

    max-height:none;

}

/*
 * Titulo e subtitulo permanecem no lugar: itens fixos da coluna, sem
 * encolher quando o texto excede a area disponivel.
 */
.mnsw-card-body.is-expanded h3,
.mnsw-card-body.is-expanded .mnsw-card-subtitle{

    flex:0 0 auto;

}

/*
 * O resumo truncado e o conteudo completo coexistem no markup do
 * corpo, emitidos pelo template do item; cada estado apresenta
 * exclusivamente o seu. A troca e por display — nenhuma altura
 * participa, e a geometria do corpo nao muda entre os estados.
 */
.mnsw-card-text--full{

    display:none;

}

.mnsw-card-body.is-expanded .mnsw-card-text--summary{

    display:none;

}

/*
 * min-height:0 libera o item flex do piso do proprio conteudo — sem
 * ele, o texto empurraria a coluna em vez de rolar. flex:1 1 auto
 * entrega ao texto exatamente o espaco que titulo e subtitulo nao
 * ocupam, e o overflow vertical so apresenta barra quando o conteudo
 * completo excede esse espaco.
 */
.mnsw-card-body.is-expanded .mnsw-card-text--full{

    display:block;

    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;

}

/*
 * Card somente-titulo (FEED-02 R8): sem subtitulo e sem descricao
 * apresentada, o corpo deixa de absorver o espaco livre da coluna e
 * passa a ocupar apenas a altura natural do titulo; o rodape perde a
 * margem automatica e encosta nele.
 *
 * O max-height do corpo e um teto, nao um piso, e por isso nao reserva
 * altura neste estado; o min-height pertence exclusivamente ao estado
 * expandido, que aqui nao ocorre — o controle de expansao nao e
 * apresentado. Os demais Cards preservam integralmente flex:1 e
 * margin-top:auto, e o alinhamento do Grid permanece inalterado.
 */
.mnsw-card--title-only .mnsw-card-body{

    flex:0 0 auto;

}

.mnsw-card--title-only .mnsw-card-footer{

    margin-top:0;

}

/*
 * Snapshot Update Animation (SNAPSHOT-03).
 *
 * O fade envolve a substituicao do conteudo; a troca em si permanece
 * atomica e sincrona. Reutiliza a transicao de opacidade que o container
 * da Section ja declara — nenhuma transicao nova e criada.
 *
 * A primeira apresentacao usa animacao, e nao uma classe de estado
 * inicial: a animacao termina em opacity 1 por si mesma, de modo que a
 * Section fica visivel mesmo que o JavaScript nunca corra.
 */
@keyframes mnsw-snapshot-fade-in{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

[data-snapshot-animation="fade"]{

    animation:mnsw-snapshot-fade-in .25s ease;

}

/*
 * O placeholder nao participa do bloco de estados do container e por
 * isso declara aqui a sua propria transicao, para que a saida do estado
 * de espera seja tambem suave.
 */
.mnsw-render-placeholder[data-snapshot-animation="fade"]{

    transition:opacity .2s ease;

}

/*
 * Com o Fade ligado e ele que governa a opacidade da transicao: os
 * efeitos do estado refreshing nao se acumulam. A semantica dos estados
 * permanece intacta — apenas opacidade e deslocamento deixam de somar.
 */
.mnsw-section-container[data-snapshot-animation="fade"].mnsw-section-container--refreshing{

    opacity:1;

    transform:none;

}

/*
 * Estado aplicado pelo Runtime imediatamente antes da troca. Declarado
 * depois da regra acima para vencer o empate de especificidade.
 *
 * Usa opacidade, nunca display: sem caixa de layout o container perderia
 * scrollWidth e a posicao horizontal reposta pela MOTION-01 nao
 * sobreviveria a substituicao.
 */
[data-snapshot-animation="fade"].is-snapshot-fading{

    opacity:0;

}

@media (prefers-reduced-motion: reduce){

    [data-snapshot-animation="fade"]{

        animation:none;

    }

}

/*
 * Skeleton do estado de espera (SNAPSHOT-03).
 *
 * Blocos neutros: nenhum titulo, texto ou imagem e sintetizado, e o
 * Official Snapshot anterior nunca participa. A geometria vem das
 * variaveis de Appearance que o Theme ja emitiu, e por isso o espaco
 * reservado corresponde ao do conteudo real.
 */
.mnsw-skeleton__media,
.mnsw-skeleton__image,
.mnsw-skeleton__line{

    display:block;

    background:rgba(0,0,0,.09);

    animation:mnsw-skeleton-pulse 1.4s ease-in-out infinite;

}

@keyframes mnsw-skeleton-pulse{

    0%,
    100%{

        opacity:.55;

    }

    50%{

        opacity:1;

    }

}

.mnsw-skeleton__media{

    width:100%;

    aspect-ratio:var(--mnsw-image-ratio, 1 / 1);

}

.mnsw-skeleton__header{

    padding:18px;

}

.mnsw-skeleton__footer{

    padding:16px 20px;

}

.mnsw-skeleton__line--action{

    height:18px;

    width:120px;

    border-radius:999px;

}

.mnsw-skeleton__body{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:20px;

}

.mnsw-skeleton__line{

    height:12px;

    width:100%;

    border-radius:6px;

}

.mnsw-skeleton__line--title{

    height:16px;

    width:70%;

}

.mnsw-skeleton__line--short{

    width:45%;

}

/*
 * O Card do skeleton reutiliza a caixa do Card real — fundo, raio,
 * sombra e coluna da grelha —, mas nao a sua resposta ao ponteiro: nao
 * ha nada para interagir enquanto se aguarda o conteudo.
 */
.mnsw-skeleton .mnsw-skeleton__card:hover{

    transform:none;

}

@media (prefers-reduced-motion: reduce){

    .mnsw-skeleton__media,
    .mnsw-skeleton__image,
    .mnsw-skeleton__line{

        animation:none;

    }

}

/*
 * Indicacao visual de que a midia e clicavel (FEED-02 R5): a imagem
 * escurece levemente e um simbolo de Play aparece centralizado, nos
 * estados de hover e de foco por teclado — o mesmo par ja adotado pelo
 * controle de expansao.
 *
 * Os dois pseudo-elementos sao desenhados inteiramente em CSS: ::before
 * e o circulo e ::after e o triangulo, sem SVG, sem dependencia de
 * fonte de icones e sem markup adicional. Ambos sao posicionados contra
 * a .mnsw-media-shell, que ja e o contexto de posicionamento da area de
 * midia, e possuem pointer-events:none para jamais interceptarem o
 * clique — o comportamento de Lightbox, Viewer e Navigation permanece
 * exatamente o mesmo.
 *
 * O Media Carousel participa das mesmas declaracoes, pelo seu proprio
 * elemento clicavel: os valores sao literalmente os mesmos do Feed e
 * nao podem divergir, por serem uma unica regra. O ramo sem interacao
 * nao possui elemento clicavel e por isso nao recebe indicador.
 */
.mnsw-media-link::before,
.mnsw-media-link::after,
.mnsw-media-carousel-item__viewer::before,
.mnsw-media-carousel-item__viewer::after{

    content:'';

    position:absolute;

    top:50%;

    left:50%;

    opacity:0;

    pointer-events:none;

    transition:opacity .25s;

}

.mnsw-media-link::before,
.mnsw-media-carousel-item__viewer::before{

    width:52px;

    height:52px;

    margin:-26px 0 0 -26px;

    border-radius:50%;

    background:rgba(0,0,0,.55);

}

.mnsw-media-link::after,
.mnsw-media-carousel-item__viewer::after{

    width:0;

    height:0;

    margin:-9px 0 0 -5px;

    border-style:solid;

    border-width:9px 0 9px 15px;

    border-color:transparent transparent transparent #fff;

}

.mnsw-media-link:hover::before,
.mnsw-media-link:hover::after,
.mnsw-media-link:focus-visible::before,
.mnsw-media-link:focus-visible::after,
.mnsw-media-carousel-item__viewer:hover::before,
.mnsw-media-carousel-item__viewer:hover::after,
.mnsw-media-carousel-item__viewer:focus-visible::before,
.mnsw-media-carousel-item__viewer:focus-visible::after{

    opacity:1;

}

.mnsw-media-link:hover .mnsw-image,
.mnsw-media-link:focus-visible .mnsw-image,
.mnsw-media-carousel-item__viewer:hover .mnsw-media-carousel-item__image,
.mnsw-media-carousel-item__viewer:focus-visible .mnsw-media-carousel-item__image{

    /*
     * A intensidade do escurecimento e o complemento do brilho: .75
     * escurecia 25%, .5 escurece 50% — o dobro. Apenas o filtro muda;
     * a imagem nao e transformada, ampliada nem animada.
     */
    filter:brightness(.5);

}

.mnsw-image,
.mnsw-media-carousel-item__image{

    /*
     * A transicao de transform serve exclusivamente ao Hover Zoom
     * (MOTION-01). Sem o modificador de classe nenhuma regra transforma
     * a imagem, e a declaracao nao produz efeito algum: o estado atual
     * permanece identico.
     */
    transition:filter .25s, transform .3s ease;

}

/*
 * Hover Zoom (MOTION-01).
 *
 * A imagem — e somente ela — e ampliada. transform nao participa do
 * fluxo: o Card nao cresce, nao se desloca e os vizinhos nao se movem.
 *
 * A caixa de recorte e o proprio wrapper da zona de Media, cuja area e
 * exatamente a area da imagem. O excedente e recortado ali, dentro da
 * .mnsw-media-shell, que ja e o contexto de posicionamento e que ja
 * hospeda o Image Padding: o espaco interno configurado permanece livre.
 *
 * O recorte vale apenas fora do estado expandido. Ali a imagem sai do
 * fluxo (display:none) e o wrapper passa a apresentar o icone do
 * Provider ampliado por transform:scale(2), cujo avanco a esquerda e
 * absorvido pelo espaco interno da area de midia — recortar o wrapper
 * naquele estado cortaria o glifo.
 *
 * O efeito convive com os ja existentes por atuarem sobre elementos
 * distintos: o escurecimento e filter na imagem, o indicador de Play
 * sao pseudo-elementos do wrapper e o Click Animation transforma o
 * wrapper. Nenhuma propriedade e disputada.
 */
.mnsw-motion-zoom .mnsw-card .mnsw-media-link{

    overflow:hidden;

}

.mnsw-motion-zoom .mnsw-card .mnsw-media-link:hover .mnsw-image,
.mnsw-motion-zoom .mnsw-card .mnsw-media-link:focus-visible .mnsw-image{

    transform:scale(1.06);

}

/*
 * Click Animation (MOTION-01).
 *
 * Resposta breve ao clique reconhecido. O estado e alternado pelo
 * Runtime e representado aqui (DD-INT-011): a animacao percorre e
 * devolve a escala original, de modo que nenhuma dimensao e alterada
 * permanentemente.
 *
 * A escala e para dentro: no Media Carousel o wrapper nao possui
 * recorte no estado padrao, e uma escala para fora invadiria os itens
 * vizinhos. transform nao ocupa espaco, entao nem o Card nem os
 * vizinhos se deslocam.
 *
 * Os dois Components partilham a mesma regra, cada um pelo seu proprio
 * elemento clicavel, exatamente como ja acontece com o indicador de
 * Play. Lightbox, Viewer e Navigation permanecem intactos: a animacao
 * nao intercepta o clique.
 */
@keyframes mnsw-motion-press{

    0%{

        transform:scale(1);

    }

    45%{

        transform:scale(.96);

    }

    100%{

        transform:scale(1);

    }

}

.mnsw-motion-click .mnsw-media-link.is-pressed,
.mnsw-motion-click .mnsw-media-carousel-item__viewer.is-pressed{

    animation:mnsw-motion-press .18s ease;

}

/*
 * Motion dentro do overlay do Lightbox (INTERACTION-17 D-19).
 *
 * Hover Zoom da thumbnail, Click Feedback e a transicao da midia
 * principal do Gallery sao animacao e transicao: pertencem a Capability
 * motion, e nao ao contrato de media-lightbox. Por isso vivem aqui,
 * junto das demais materializacoes de Motion, e sob o mesmo modificador
 * emitido pelo Theme — que o Runtime apenas propaga ao overlay, por ele
 * viver fora da raiz da Section.
 *
 * Desligada a Motion na Section, nenhum destes efeitos existe.
 *
 * Nenhuma animacao nova e declarada: mnsw-motion-press e
 * mnsw-snapshot-fade-in ja existem neste arquivo e sao reutilizadas.
 */
.mnsw-motion-zoom .mnsw-lightbox__thumb img{

    transition:transform .25s ease;

}

.mnsw-motion-zoom .mnsw-lightbox__thumb:hover img{

    transform:scale(1.06);

}

.mnsw-motion-click .mnsw-lightbox__thumb.is-pressed{

    animation:mnsw-motion-press .18s ease;

}

.mnsw-motion-click .mnsw-lightbox__main img,
.mnsw-motion-click .mnsw-lightbox__main video{

    animation:mnsw-snapshot-fade-in .2s ease;

}

/*
 * Deslocamento dos cards do Stories entre as cinco posicoes.
 *
 * Posicao, escala e opacidade sao animadas juntas, numa unica
 * transicao: e o que faz os cards percorrerem visualmente o caminho de
 * uma posicao a outra em vez de trocarem de conteudo no lugar.
 *
 * O gatilho e o mesmo modificador de Motion ja emitido pelo Theme,
 * propagado ao overlay pelo Runtime. Desligada a Motion na Section, os
 * cards assumem a posicao nova imediatamente e nenhum efeito e
 * aplicado — as posicoes, a escala e a opacidade permanecem corretas.
 */
.mnsw-motion-click .mnsw-lightbox__card{

    transition:transform .38s ease, opacity .38s ease;

}

/*
 * prefers-reduced-motion suprime o movimento nao solicitado: a animacao
 * de clique deixa de existir e o Hover Zoom passa a ser imediato, sem
 * percurso. O avanco automatico da navegacao e suprimido pelo proprio
 * controlador, no interaction.js.
 */
@media (prefers-reduced-motion: reduce){

    .mnsw-image,
    .mnsw-media-carousel-item__image{

        transition:filter .25s;

    }

    .mnsw-motion-click .mnsw-media-link.is-pressed,
    .mnsw-motion-click .mnsw-media-carousel-item__viewer.is-pressed{

        animation:none;

    }

    .mnsw-motion-zoom .mnsw-lightbox__thumb img,
    .mnsw-motion-zoom .mnsw-lightbox__thumb:hover img{

        transition:none;
        transform:none;

    }

    .mnsw-motion-click .mnsw-lightbox__thumb.is-pressed,
    .mnsw-motion-click .mnsw-lightbox__main img,
    .mnsw-motion-click .mnsw-lightbox__main video{

        animation:none;

    }

    .mnsw-motion-click .mnsw-lightbox__card{

        transition:none;

    }

}

/*
 * O icone emitido dentro dos wrappers da zona de Media permanece fora
 * da apresentacao por padrao. O Menu Card o revela no hover e no foco,
 * pela regra propria adiante; nos demais Cards nada e apresentado — a
 * imagem permanece no fluxo em ambos os estados do expand-collapse.
 */
.mnsw-media-link i,
.mnsw-media-carousel-item__viewer i{

    display:none;

}

/*
 * Menu Cards nao utilizam o indicador de Play: o proprio icone do
 * Card ocupa o seu lugar. content:none suprime integralmente os dois
 * pseudo-elementos, de modo que o circulo e o triangulo nao chegam a
 * existir neste ramo.
 *
 * O escurecimento da imagem, o hover e o focus-visible permanecem os
 * mesmos de qualquer outra midia clicavel. Sem icone configurado nada
 * e revelado alem do escurecimento — nenhum simbolo substituto e
 * sintetizado.
 */
.mnsw-media-link--icon::before,
.mnsw-media-link--icon::after{

    content:none;

}

/*
 * O icone e centralizado contra a .mnsw-media-shell, o mesmo contexto
 * de posicionamento ja utilizado pelo indicador de Play, e nao ocupa
 * espaco no fluxo: o layout da imagem permanece inalterado.
 * pointer-events:none preserva integralmente o clique da zona.
 *
 * A imagem permanece no fluxo em ambos os estados do expand-collapse,
 * e por isso a regra vale igualmente nos dois.
 */
.mnsw-card .mnsw-media-link--icon:hover i,
.mnsw-card .mnsw-media-link--icon:focus-visible i,
.mnsw-media-carousel-item__viewer.mnsw-media-link--icon:hover i,
.mnsw-media-carousel-item__viewer.mnsw-media-link--icon:focus-visible i{

    display:block;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%, -50%);

    z-index:2;

    pointer-events:none;

    color:#fff;

    /*
     * Dashicons define 20px fixos de fonte e caixa; a normalizacao
     * segue o mesmo padrao ja adotado pela metadata do Media Carousel
     * para que o icone acompanhe o tamanho declarado aqui.
     */
    font-size:36px;

    width:auto;

    height:auto;

    line-height:1;

}

.mnsw-empty{

    background:var(--mnsw-surface-color, #fff);

    padding:50px;

    text-align:center;

    border-radius:var(--mnsw-card-radius, 14px);

    box-shadow:var(--mnsw-card-shadow, 0 8px 20px rgba(0,0,0,.05));

}

/*
 * PRESENTATION-01 — Tipografia, cor de origem e cor do Badge.
 *
 * Todas as variaveis abaixo sao emitidas pelo template do Theme ou
 * pelo template do item. Nenhuma possui valor proprio aqui: sem
 * emissao, o fallback reproduz exatamente a apresentacao anterior.
 */

/*
 * Familia tipografica comum ao Card. O estado neutro nao emite a
 * variavel e o Card continua herdando a fonte do tema hospedeiro.
 */
.mnsw-card{

    font-family:var(--mnsw-font-family, inherit);

}

/*
 * Escalas de texto. Multiplicam a base declarada por cada Theme, no
 * mesmo idioma ja adotado pelo Link Button Text Size, preservando-a
 * quando a escala nao e emitida.
 */
.mnsw-network{

    font-size:calc(1em * var(--mnsw-provider-label-scale, 1));

}

.mnsw-card-header time{

    font-size:calc(13px * var(--mnsw-date-scale, 1));

}

.mnsw-media-shell .mnsw-card-date{

    font-size:calc(12px * var(--mnsw-expand-scale, 1) * var(--mnsw-date-scale, 1));

}

.mnsw-card-body p{

    font-size:calc(1em * var(--mnsw-description-scale, 1));

    /*
     * Content Alignment: emitido apenas fora do estado left; o fallback
     * preserva o alinhamento atual. O Subtitle possui alinhamento
     * proprio, declarado adiante, que o sobrepoe.
     */
    text-align:var(--mnsw-description-align, left);

}

/*
 * Cor de identidade do Provider (Provider Color): pinta o icone e o
 * nome da origem. Chega como atributo do ContentItem, nunca por
 * consulta ao Provider a partir da Presentation Layer. Sem cor, o
 * accent continua governando.
 */
.mnsw-network{

    color:var(--mnsw-provider-color, var(--mnsw-accent-color, #1877F2));

}

/*
 * Cor do Badge: uma unica cor base configurada, da qual o texto e o
 * fundo derivam — texto mais escuro, fundo mais claro, exatamente a
 * regra ja praticada pelas tres cores fixas acima.
 *
 * Reagem os badges cujo rotulo integra o dominio configuravel de algum
 * Provider: conteudo, video e reel. Story permanece com a sua cor fixa.
 * Sem --mnsw-badge-color as duas declaracoes sao invalidas e
 * descartadas, e o badge cai na regra base.
 */
.mnsw-badge--content,
.mnsw-badge--video,
.mnsw-badge--reel{

    color:color-mix(in srgb, var(--mnsw-badge-color) 70%, #000);

    background:color-mix(in srgb, var(--mnsw-badge-color) 14%, transparent);

}

/*
 * Titulo da Section: o texto e o name da Section, emitido pela
 * Rendering Layer dentro do container da Section. Desligado, o
 * elemento nao existe e nao ocupa espaco algum.
 */
.mnsw-section-title{

    margin:0 0 16px;

    font-family:var(--mnsw-section-title-font, inherit);

    font-size:calc(24px * var(--mnsw-section-title-scale, 1));

    text-align:var(--mnsw-section-title-align, left);

    color:var(--mnsw-section-title-color, var(--mnsw-text-color, #444));

}

/* ---------------------------------------------------------------
 * Card Alignment
 *
 * Alinha as linhas de Cards quando o Feed nao esta em Single Line. O
 * estado left nao emite classe alguma: a regra base do .mnsw-feed
 * continua valendo tal como sempre valeu, e nada muda para quem nunca
 * configurou a opcao.
 *
 * Para os demais estados as trilhas deixam de ser 1fr e passam a ter a
 * largura do proprio Card — e o auto-fit descarta as trilhas vazias. E
 * isso que permite a ultima linha parar de ocupar artificialmente todas
 * as colunas e ser posicionada por justify-content. A largura do Card
 * continua sendo a mesma do Card Size: nenhuma regra aqui a altera.
 *
 * Single Line nao e alcancado: a classe so e emitida quando ele esta
 * desligado, e .mnsw-feed--single-line permanece intocada.
 * --------------------------------------------------------------- */
.mnsw-feed--align-center,
.mnsw-feed--align-right,
.mnsw-feed--align-justify{

    /*
     * Flex, e nao grid, nestes tres estados.
     *
     * Num grid a ultima linha ocupa as primeiras trilhas e nao se
     * realinha: justify-content move o conjunto de trilhas, nao os itens
     * da linha incompleta. Uma flex line, ao contrario, distribui os
     * seus proprios itens — e e exatamente disso que o alinhamento da
     * ultima linha depende.
     *
     * Left nao passa por aqui: continua no grid original.
     */
    display:flex;
    flex-wrap:wrap;

}

/*
 * A largura do Card continua sendo a do Card Size: base fixa, sem
 * crescer nem encolher. Nenhuma regra aqui altera tamanho, proporcao ou
 * altura — apenas a posicao do Card na linha.
 */
.mnsw-feed--align-center > *,
.mnsw-feed--align-right > *,
.mnsw-feed--align-justify > *{

    flex:0 0 min(var(--mnsw-card-min, 360px), 100%);

}

.mnsw-feed--align-center{

    justify-content:center;

}

.mnsw-feed--align-right{

    justify-content:flex-end;

}

/*
 * Justify distribui o espaco livre ENTRE os Cards: as extremidades
 * encostam nas bordas da linha e apenas o intervalo cresce. Com um
 * unico Card na linha, space-between o mantem a esquerda, que e o
 * comportamento natural da propriedade.
 */
.mnsw-feed--align-justify{

    justify-content:space-between;

}

/*
 * Icone dos Menu Cards: sem sublinhado.
 *
 * O elemento e um link, e por isso herda o sublinhado que o tema aplica
 * no hover — sobre um glifo isso nao comunica nada, apenas risca o
 * icone. A regra alcanca exclusivamente a classe dos Menu Cards, que so
 * existe quando a origem e essa; links, textos, titulos e os demais
 * Providers permanecem como estao, e cor, tamanho, posicao e animacao
 * do icone nao sao tocados.
 */
.mnsw-media-link--icon,
.mnsw-media-link--icon:hover,
.mnsw-media-link--icon:focus,
.mnsw-media-link--icon:focus-visible{

    text-decoration:none;

}

/*
 * Subtitle: informacao textual secundaria do Card, e por isso usa a cor
 * Meta do contrato de Typography — a mesma categoria semantica dos
 * demais textos secundarios, com a heranca Wall -> Section que ja
 * governa Typography. Sem Meta resolvido, permanece a cor do corpo.
 */
.mnsw-card-body .mnsw-card-subtitle{

    color:var(--mnsw-meta-color, var(--mnsw-text-color, #444));

    font-size:calc(1em * var(--mnsw-subtitle-scale, 1));

    text-align:var(--mnsw-subtitle-align, left);

}

/*
 * Image Size: largura visual da imagem do Card.
 *
 * A variavel e emitida pelo Theme apenas nos niveis abaixo de 100%; sem
 * ela a imagem ocupa a area inteira, como sempre ocupou. A reducao age
 * sobre a propria imagem e a centraliza — nao ha padding simulando
 * tamanho, e nenhuma altura e acrescentada, de modo que o texto acima e
 * abaixo continua encostado na area real da imagem.
 */
/*
 * Image Size (Feed): fora de um wrapper de zona, a propria midia e
 * dimensionada; dentro do media-link, quem escala e o wrapper — regra
 * adiante — e a midia o preenche.
 */
.mnsw-media-shell > img,
.mnsw-media-shell > video,
.mnsw-media-shell > iframe{

    width:var(--mnsw-media-scale, 100%);
    margin-inline:auto;

}


/*
 * Image Border e Image Shape quando a midia vive num wrapper de zona.
 *
 * A linha mora no media-link — a caixa de recorte do Hover Zoom, que
 * nunca sofre transform — e nao na midia: era a borda na propria imagem
 * que escalava junto com o zoom e desaparecia para fora do card. Aqui
 * ela permanece parada, sempre dentro dos limites visuais, enquanto o
 * conteudo amplia por baixo, recortado pelo overflow.
 *
 * O wrapper tambem assume o Image Scale (width) para abracar exatamente
 * a caixa da imagem, e os !important vencem o reset estrutural do
 * proprio media-link (width/margin/border 0 !important), pelo mesmo
 * recurso ja documentado naquele bloco. A imagem permanece no fluxo em
 * ambos os estados do expand-collapse, e a regra vale nos dois.
 */
.mnsw-card .mnsw-media-shell .mnsw-media-link{

    width:var(--mnsw-media-scale, 100%) !important;
    margin-inline:auto !important;
    border:var(--mnsw-image-border, 0) solid var(--mnsw-accent-color, #1877F2) !important;
    /*
     * !important pela mesma razao da borda: o reset do plugin para o
     * .mnsw-media-link declara border-radius:0 !important, e sem a
     * mesma forca o anel da borda ficava quadrado ao redor da imagem
     * oval. A especificidade maior desta regra decide o empate.
     */
    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-image-rounding, 0)) !important;
    box-sizing:border-box;
    overflow:hidden;

}

.mnsw-card .mnsw-media-shell .mnsw-media-link .mnsw-image{

    width:100%;
    border:0;
    /*
     * O raio pertence ao wrapper, que ja recorta com overflow:hidden.
     * Com raio proprio a imagem arredondava numa caixa recuada pelo
     * anel da borda e abria um vao nos cantos que o zoom preenchia —
     * area visivel diferente entre os estados. O ramo sem wrapper
     * conserva o raio na propria imagem.
     */
    border-radius:0;

}

/*
 * Circular geometrico: com a classe emitida pelo Theme, o circulo e
 * garantido com forca propria — area quadrada e raio de 50% — contra
 * qualquer proporcao ou altura imposta por regra externa. O Oval
 * permanece exclusivamente nas variaveis e preserva o comportamento
 * anterior.
 */
.mnsw-feed--shape-circle .mnsw-image{

    aspect-ratio:1 / 1 !important;
    height:auto !important;
    border-radius:50% !important;

}

.mnsw-feed--shape-circle .mnsw-media-link{

    border-radius:50% !important;

}