.mnsw-theme-magazine .mnsw-feed{

    grid-template-columns:repeat(auto-fill,minmax(min(var(--mnsw-card-min, 430px), 100%),1fr));

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

}

.mnsw-theme-magazine .mnsw-media-carousel--magazine{

    gap:var(--mnsw-feed-gap, 34px);
    padding:8px 0 18px;

}

.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item{

    flex-basis:min(var(--mnsw-carousel-item, 360px), 84vw);

}

.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item__image{

    /*
     * PRESENTATION-01: sem Image Ratio configurado a variavel nao e
     * emitida e os 4/5 permanecem exatamente como estavam.
     */
    aspect-ratio:var(--mnsw-image-ratio, 4 / 5);
    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-card-radius, 18px));

}

/*
 * Dentro do viewer o raio pertence ao viewer (que recorta); a imagem
 * zera o seu — mesmo idioma da folha base, com a especificidade que a
 * regra acima exige. O ramo sem viewer conserva o raio da imagem.
 */
.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item__viewer .mnsw-media-carousel-item__image{

    border-radius:0;

}

.mnsw-theme-magazine .mnsw-card{

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

    box-shadow:var(--mnsw-card-shadow, 0 14px 35px rgba(18,24,38,.14));

}

.mnsw-theme-magazine .mnsw-card:hover{

    transform:translateY(-7px);

}

/*
 * A reserva do Card sem Header espelha o lift proprio deste Theme.
 */
.mnsw-theme-magazine .mnsw-card--headerless{

    padding-top:7px;

}

.mnsw-theme-magazine .mnsw-card-header{

    padding:20px 22px;

}

.mnsw-theme-magazine .mnsw-network{

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

    font-weight:800;

    letter-spacing:.08em;

}

/*
 * Image Ratio: a proporcao propria deste Theme passa a ser o fallback
 * da variavel emitida pela Section. Com o estado original a variavel
 * nao e emitida e os 16 / 10 permanecem exatamente como estavam; com
 * uma proporcao configurada, ela prevalece — sem !important e sem
 * remover a regra, porque os dois caminhos leem o mesmo valor.
 */
.mnsw-theme-magazine .mnsw-image{

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

    object-fit:cover;

}

.mnsw-theme-magazine .mnsw-card-body{

    padding:22px;

}

.mnsw-theme-magazine .mnsw-card-body h3{

    margin:0 0 10px;

    /*
     * --mnsw-card-title acompanha o nivel do Card Size. Sem
     * configuracao, o titulo mantem o tamanho atual do Magazine.
     */
    font-size:var(--mnsw-card-title, 28px);

    line-height:1.2;

}

.mnsw-theme-magazine .mnsw-card-body p{

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

    line-height:1.8;

}

.mnsw-theme-magazine .mnsw-card-footer{

    padding:20px 22px 24px;

    /*
     * Mesma padronizacao estrutural do CSS compartilhado, com o
     * min-height compensando os paddings proprios do Magazine.
     */
    min-height:calc(44px + 1.75em);

}

.mnsw-theme-magazine .mnsw-card-footer a{

    /*
     * O tamanho proprio do Magazine acompanha o Link Button Text Size
     * da Section pela mesma escala do CSS compartilhado; sem
     * configuracao, escala 1 preserva os 14px atuais.
     */
    font-size:calc(14px * var(--mnsw-footer-text-scale, 1));

    letter-spacing:.02em;

}

@media (max-width: 1024px){

    .mnsw-theme-magazine .mnsw-feed{

        /*
         * No tablet, niveis menores de Card Size continuam aplicados e
         * niveis maiores ficam limitados a 340px para preservar a
         * responsividade.
         */
        grid-template-columns:repeat(auto-fill,minmax(min(var(--mnsw-card-min, 340px), 340px),1fr));

    }

    .mnsw-theme-magazine .mnsw-card-body h3{

        /*
         * No tablet, niveis configurados (todos ate 22px) continuam
         * valendo; sem configuracao, o limite atual de 24px permanece.
         */
        font-size:min(var(--mnsw-card-title, 24px), 24px);

    }

}

@media (max-width: 767px){

    .mnsw-theme-magazine .mnsw-feed{

        grid-template-columns:1fr;

    }

    .mnsw-theme-magazine .mnsw-card-header{

        padding:16px 16px 14px;

    }

    .mnsw-theme-magazine .mnsw-card-body{

        padding:16px;

    }

    .mnsw-theme-magazine .mnsw-card-body h3{

        font-size:min(var(--mnsw-card-title, 22px), 22px);

    }

    .mnsw-theme-magazine .mnsw-card-footer{

        padding:14px 16px 18px;

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

    }

}

/*
 * Single Line (FEED-02 R2): a regra de grid do Theme acima usa duas
 * classes e venceria a classe de modo definida em feed.css, mantendo
 * as colunas explicitas. Esta regra, declarada por ultimo com a mesma
 * especificidade, restabelece o fluxo em coluna unica com a largura
 * minima padrao do proprio Theme. A rolagem permanece herdada da
 * classe de modo (overflow-x:auto) e nao e redeclarada aqui.
 */
.mnsw-theme-magazine .mnsw-feed--single-line{

    grid-template-columns:none;

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

}

/*
 * ============================================================
 * Diferenciacao visual do Theme Magazine
 * ============================================================
 *
 * Tudo abaixo e exclusivo deste Theme e nao altera markup algum: o
 * Default permanece exatamente como esta.
 */

/*
 * Media Carousel: a Description passa a ocupar a propria area da
 * imagem, em vez de abrir uma faixa abaixo dela.
 *
 * O item vira contexto de posicionamento e o paragrafo sai do fluxo —
 * por isso a altura do item continua sendo a da imagem, seja qual for
 * a proporcao ou o Image Size. O gradiente garante leitura sobre
 * qualquer fotografia.
 *
 * O alinhamento continua vindo de --mnsw-description-align, entao
 * Description Align governa esta Description como governa a do Default.
 */
.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item{

    position:relative;

}

/*
 * A Description sobreposta e o seu degrade sao ancorados no item, e
 * por isso so ficam contidos na imagem enquanto o wrapper da midia
 * nao abrir espaco interno proprio. A folha base ja declara padding:0
 * nesse wrapper, mas o botao e alcancado por regras de tema hospedeiro
 * que atingem [type="button"] — mesma especificidade da classe, e
 * vencem por ordem de origem, empurrando a imagem para dentro e
 * deixando o degrade transbordar sobre o fundo do card.
 *
 * A declaracao apenas garante o que a folha base ja pretende, com a
 * mesma forca que o Feed ja aplica ao seu proprio wrapper de midia
 * clicavel. A imagem volta a ocupar o item inteiro e o degrade passa a
 * coincidir com ela — largura, base e cantos.
 */
.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item__viewer{

    /*
     * O mesmo empate atinge o display: como inline-block o botao
     * assenta numa linha de texto e o espaco do descendente abre uma
     * faixa sob a imagem, que o degrade tambem alcancava.
     */
    display:block !important;

    /*
     * A mesma forca passa a materializar o Image Padding: o fallback 0
     * preserva byte a byte a garantia original contra as regras de
     * [type="button"] do tema hospedeiro, e os dois eixos configurados
     * pela Section passam a valer tambem neste Theme.
     */
    padding:0 !important;

    /*
     * O espaco do Image Padding vive como margem, como na folha base: o
     * viewer abraca a caixa da imagem e carrega a Image Border, parada
     * durante o Hover Zoom. O raio repete a primeira escolha do shape
     * com o fallback proprio deste Theme.
     */
    margin:var(--mnsw-carousel-media-padding-y, 0) var(--mnsw-carousel-media-padding-x, 0) !important;
    width:auto;
    border-radius:var(--mnsw-image-shape-radius, var(--mnsw-card-radius, 18px));

}

.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item__title{

    /*
     * O overlay cobre o pe da imagem, mas quem interage ali e a imagem:
     * sem isto o ponteiro parava no gradiente e o hover e o clique
     * morriam na faixa inferior. Mesmo idioma da pill de metadata, que
     * ja declara pointer-events:none na folha base.
     */
    pointer-events:none;

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:1;

    margin:0;
    padding:48px 14px 40px;

    color:#fff;

    background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);

    border-bottom-left-radius:var(--mnsw-card-radius, 18px);
    border-bottom-right-radius:var(--mnsw-card-radius, 18px);

}

/*
 * Metadata (icone, data e hora): o mesmo elemento e o mesmo conteudo,
 * apenas ancorado na parte inferior da imagem em vez do topo. Icon,
 * Date e Time continuam governando o que aparece dentro dele.
 *
 * Fica acima do gradiente da Description pelo z-index que a folha base
 * ja lhe atribui.
 */
.mnsw-theme-magazine .mnsw-media-carousel--magazine .mnsw-media-carousel-item__date{

    top:auto;
    bottom:10px;

}

/*
 * Feed: o Badge passa a aparecer depois da imagem, antes do conteudo.
 *
 * display:contents promove o cabecalho e a sua caixa de metadados a
 * filhos diretos do Card, que ja e um flex column — assim a ordem
 * visual muda sem duplicar markup e sem tocar no template compartilhado
 * pelos dois Themes. O <header> dentro de <article> nao carrega funcao
 * de landmark, entao nada se perde na arvore de acessibilidade.
 *
 * O espaco interno que o cabecalho aplicava passa a ser declarado nos
 * dois elementos promovidos, preservando a apresentacao anterior.
 */
.mnsw-theme-magazine .mnsw-card-header,
.mnsw-theme-magazine .mnsw-card-meta{

    display:contents;

}

.mnsw-theme-magazine .mnsw-network{

    order:1;

    /*
     * O espaco interno e a linha separadora que o cabecalho aplicava
     * passam a ser declarados aqui, preservando a apresentacao anterior
     * do topo do Card.
     */
    padding:20px 22px 18px;

    border-bottom:1px solid #eee;

}

.mnsw-theme-magazine .mnsw-media-shell,
.mnsw-theme-magazine .mnsw-image{

    order:2;

}

.mnsw-theme-magazine .mnsw-badges{

    order:3;

    padding:16px 22px 0;

}

.mnsw-theme-magazine .mnsw-card-body{

    order:4;

}

.mnsw-theme-magazine .mnsw-card-footer{

    order:5;

}

/*
 * Estado expandido: a faixa do controle desce para depois do corpo,
 * como no CSS compartilhado. Este Theme ordena os filhos do Card
 * explicitamente, entao os dois valores sao redeclarados aqui — order
 * identico, com a ordem do DOM decidindo o desempate: faixa antes do
 * footer. Badges e corpo permanecem nas posicoes proprias do Theme.
 */
.mnsw-theme-magazine .mnsw-card.is-expanded .mnsw-media-shell{

    order:5;

}

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

    order:5;

}

/*
 * A data do cabecalho — apresentada apenas quando o Card nao possui
 * imagem — acompanha o rotulo de origem, preservando a linha unica que
 * o cabecalho produzia.
 */
.mnsw-theme-magazine .mnsw-card-header time{

    order:1;

    padding:12px 22px 0;

}