/*
 * Content Gallery — Galeria (COMPONENT-06, Correção 1).
 *
 * Layout do Component: Main Player central e Rails independentes nas
 * quatro áreas ao seu redor (Left/Right/Top/Bottom, por Rail). As
 * decisões visuais chegam como CSS variables emitidas pelo template do
 * Theme (DD-096); este arquivo materializa estados, nunca decide
 * configuração.
 *
 * Orientação por posição: Rails laterais são VERTICAIS — Rows viram
 * colunas e a navegação pagina no eixo vertical; Rails Top/Bottom são
 * horizontais — Rows são linhas. Show Scrollbar continua decisão
 * exclusivamente visual: overflow oculto nunca é utilizado em nenhum
 * eixo.
 *
 * Responsividade por largura do CONTAINER (RESPONSIVE-01): o runtime da
 * Galeria mede o contentor e aplica mnsw-content-gallery--stacked na
 * faixa Mobile — Player, Rail 1 e Rail 2, nessa ordem, em coluna única.
 */

.mnsw-content-gallery {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    background: var(--mnsw-surface-color, transparent);
}

/*
 * Fileira central: áreas laterais + Player. O Player define a altura
 * da fileira (aspect-ratio); as áreas laterais esticam até ela e os
 * seus Rails rolam verticalmente dentro desse limite.
 */
.mnsw-content-gallery__middle {
    display: flex;
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

.mnsw-content-gallery__player-slot {
    flex: 1 1 auto;
    min-width: 0;
}

.mnsw-content-gallery__area {
    display: flex;
    gap: 16px;
    min-width: 0;
}

/*
 * Áreas superior/inferior: Rails horizontais de largura total,
 * empilhados quando mais de um Rail escolhe o mesmo lado.
 */
.mnsw-content-gallery__area--top,
.mnsw-content-gallery__area--bottom {
    flex-direction: column;
}

/*
 * Áreas laterais: Rails verticais lado a lado, cada um com a largura
 * das suas colunas.
 */
.mnsw-content-gallery__area--left,
.mnsw-content-gallery__area--right {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
}

/* ------------------------------------------------------------------ */
/* Main Player                                                         */
/* ------------------------------------------------------------------ */

.mnsw-content-gallery__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--mnsw-card-radius, 8px);
    overflow: hidden;
    min-width: 0;
}

.mnsw-content-gallery__player-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.mnsw-content-gallery__player-empty {
    width: 100%;
    height: 100%;
    background: var(--mnsw-surface-color, #1f2937);
    opacity: .35;
}

/*
 * Player em modo Skeleton (COMPONENT-06): o espaço do Player pertence
 * ao Gallery Skeleton e assume a MESMA identidade visual de loading dos
 * Rails — o fundo neutro e a animação mnsw-skeleton-pulse já existentes
 * no projeto (Core). Assim o Gallery Skeleton é uma unidade: Rail 1 +
 * Rail 2 + Player pulsando juntos. A regra é escopada a .mnsw-skeleton
 * porque o mesmo .mnsw-content-gallery__player-empty também representa,
 * em Galeria real, um estado sem mídia — que não deve ser tocado aqui.
 */
.mnsw-skeleton .mnsw-content-gallery__player-empty {
    background: rgba(0, 0, 0, .09);
    opacity: 1;
    animation: mnsw-skeleton-pulse 1.4s ease-in-out infinite;
}

/*
 * Em Skeleton o PAI do Player abandona o fundo preto da apresentação
 * real: preto sob o véu de 9% do placeholder é invisível e quebrava a
 * unidade do Gallery Skeleton. A base passa a ser a MESMA dos frames
 * das thumbnails (rgba .08) — o Player pulsa junto com os Rails, com a
 * geometria intacta. Fora do Skeleton o preto permanece.
 */
.mnsw-skeleton .mnsw-content-gallery__player {
    background: rgba(0, 0, 0, .08);
}

/* ------------------------------------------------------------------ */
/* Rails — base                                                        */
/* ------------------------------------------------------------------ */

.mnsw-content-gallery__rail {
    min-width: 0;
}

/*
 * Faixa do Rail HORIZONTAL (Top/Bottom): rolagem horizontal nativa
 * sempre funcional. Uma linha por default; duas linhas pelo fluxo em
 * coluna do grid.
 */
/*
 * O respiro de 10px nos quatro lados garante que o anel de hover
 * (2px), o anel do Selected (gap 2px + 5px) e a cauda suave do halo
 * nunca sejam cortados pelo overflow do Rail — primeira/última
 * thumbnail e primeira/última linha incluídas. O overflow permanece:
 * ele é a própria rolagem. O controlador de navegação do Core já
 * tolera padding no viewport (edgeTolerance), portanto nada muda na
 * paginação. O Image Padding configurado soma-se ao respiro.
 */
.mnsw-content-gallery__rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--mnsw-cg-item, 200px);
    grid-template-rows: auto;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(10px + var(--mnsw-cg-media-padding-y, 0px)) calc(10px + var(--mnsw-cg-media-padding-x, 0px));
    scroll-behavior: smooth;
}

.mnsw-content-gallery__rail--rows-2 .mnsw-content-gallery__rail-track {
    grid-template-rows: repeat(2, auto);
}

/*
 * Rail VERTICAL (Left/Right): o wrapper estica até a altura da fileira
 * central e a faixa rola verticalmente dentro dele. Rows são COLUNAS
 * lado a lado; a navegação pagina no eixo vertical.
 */
.mnsw-content-gallery__rail--vertical {
    position: relative;
    width: var(--mnsw-cg-item, 200px);
    align-self: stretch;
}

.mnsw-content-gallery__rail--vertical.mnsw-content-gallery__rail--cols-2 {
    width: calc(2 * var(--mnsw-cg-item, 200px) + 10px);
}

/*
 * Com navegação ativa o wrapper mnsw-nav preenche o Rail em coluna:
 * a faixa ocupa o espaço flexível e a fita de dots pousa no rodapé,
 * sem participar da rolagem. Sem navegação, a própria faixa preenche.
 */
.mnsw-content-gallery__rail--vertical > .mnsw-nav {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.mnsw-content-gallery__rail--vertical > .mnsw-nav > .mnsw-content-gallery__rail-track {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
}

.mnsw-content-gallery__rail--vertical > .mnsw-content-gallery__rail-track {
    position: absolute;
    inset: 0;
}

.mnsw-content-gallery__rail--vertical .mnsw-content-gallery__rail-track {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-auto-rows: max-content;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.mnsw-content-gallery__rail--vertical.mnsw-content-gallery__rail--cols-2 .mnsw-content-gallery__rail-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Show Scrollbar desligado: decisão exclusivamente visual — a barra
 * some, a rolagem permanece (D-07), em qualquer orientação. Nenhum
 * overflow oculto participa.
 */
.mnsw-content-gallery__rail--no-scrollbar .mnsw-content-gallery__rail-track {
    scrollbar-width: none;
}

.mnsw-content-gallery__rail--no-scrollbar .mnsw-content-gallery__rail-track::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Navegação vertical — reposicionamento dos controles do Core         */
/* ------------------------------------------------------------------ */

/*
 * O controlador e os controles são os do Core (mnsw-nav); num Rail
 * vertical as setas pousam nas extremidades superior e inferior, com
 * os glifos girados — a classe é alternada junto do eixo pelo runtime
 * da Galeria, de modo que a faixa Mobile empilhada volta ao visual
 * horizontal padrão.
 */
.mnsw-nav--vertical .mnsw-nav__arrow--prev {
    left: 0;
    right: 0;
    top: 4px;
    bottom: auto;
    margin: 0 auto !important;
}

.mnsw-nav--vertical .mnsw-nav__arrow--next {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(var(--mnsw-nav-dots-space) + 4px);
    margin: 0 auto !important;
}

.mnsw-nav--vertical .mnsw-nav__arrow i {
    transform: rotate(90deg);
}

/* ------------------------------------------------------------------ */
/* Faixa Mobile (--stacked): Player → Rail 1 → Rail 2, coluna única    */
/* ------------------------------------------------------------------ */

/*
 * As áreas e a fileira central dissolvem-se (display: contents) e a
 * ordem apresentada é governada aqui: o Player primeiro, depois os
 * Rails pelo seu número. A Position configurada permanece persistida —
 * apenas a apresentação se adapta (Correção 1 §Mobile).
 */
.mnsw-content-gallery--stacked > .mnsw-content-gallery__area,
.mnsw-content-gallery--stacked > .mnsw-content-gallery__middle,
.mnsw-content-gallery--stacked > .mnsw-content-gallery__middle > .mnsw-content-gallery__area {
    display: contents;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__player-slot {
    order: 0;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--1 {
    order: 1;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--2 {
    order: 2;
}

/*
 * Um Rail lateral reapresenta-se na horizontal enquanto empilhado: a
 * estrutura absoluta desfaz-se, a faixa volta ao fluxo e rola no eixo
 * horizontal — o eixo do controlador acompanha via data-mnsw-nav-axis,
 * alternado pelo runtime da Galeria.
 */
.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical {
    position: static;
    width: 100%;
    align-self: auto;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical > .mnsw-nav {
    position: relative;
    inset: auto;
    display: block;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical > .mnsw-content-gallery__rail-track,
.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical > .mnsw-nav > .mnsw-content-gallery__rail-track {
    position: static;
    height: auto;
    grid-auto-flow: column;
    grid-auto-columns: var(--mnsw-cg-item, 200px);
    grid-auto-rows: unset;
    grid-template-columns: none;
    grid-template-rows: auto;
    overflow-x: auto;
    overflow-y: visible;
}

.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical.mnsw-content-gallery__rail--cols-2 > .mnsw-content-gallery__rail-track,
.mnsw-content-gallery--stacked .mnsw-content-gallery__rail--vertical.mnsw-content-gallery__rail--cols-2 > .mnsw-nav > .mnsw-content-gallery__rail-track {
    grid-template-rows: repeat(2, auto);
}

/* ------------------------------------------------------------------ */
/* Item (thumbnail)                                                    */
/* ------------------------------------------------------------------ */

/*
 * O item é um <button>, e regras de button do tema hospedeiro — com
 * especificidade maior que uma classe única — pintam fundo, borda,
 * sombra e cores próprias em repouso e nos estados (Correção 10: era
 * daí que vinham as cores estranhas observadas na validação). O reset
 * com !important é o MESMO recurso já adotado pelo Media Carousel
 * (.mnsw-media-carousel-item__viewer) e pelos controles do mnsw-nav.
 *
 * Nenhuma cor é decidida aqui: os estados visuais fluem exclusivamente
 * das CSS variables emitidas pelo template a partir da Appearance
 * resolvida (accent, typography, interactive) — o mesmo canal do Feed
 * e do Media Carousel.
 */
.mnsw-content-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mnsw-text-color, inherit) !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-family: var(--mnsw-font-family, inherit);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}

.mnsw-content-gallery-item:hover,
.mnsw-content-gallery-item:focus,
.mnsw-content-gallery-item:focus-visible,
.mnsw-content-gallery-item:active {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mnsw-text-color, inherit) !important;
    box-shadow: none !important;
}

/*
 * O contorno de foco visível permanece — o item é um controle real,
 * operável por teclado — e usa o Accent da Appearance efetiva, nunca
 * uma cor própria.
 */
.mnsw-content-gallery-item:focus-visible {
    outline: 2px solid var(--mnsw-accent-color, currentColor) !important;
    outline-offset: 2px;
}

/*
 * Separação estrutural entre a MÁSCARA da imagem e a caixa dos
 * overlays (correção final da VERIFICAÇÃO): o media é a caixa de
 * geometria e posicionamento — os overlays de Provider, Duration e
 * Date+Time vivem nela e NUNCA são recortados; o frame interno carrega
 * o clipping do border-radius (inclusive o círculo perfeito do Shape
 * Circular), a borda da imagem e o fundo. O círculo permanece intacto
 * e o Provider permanece completamente legível.
 */
.mnsw-content-gallery-item__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--mnsw-cg-image-ratio, 16 / 9);
}

.mnsw-content-gallery-item__frame {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: var(--mnsw-cg-image-shape-radius, var(--mnsw-cg-radius, 8px));
    overflow: hidden;
    background: rgba(0, 0, 0, .08);
    border: var(--mnsw-cg-image-border, 0) solid var(--mnsw-accent-color, #1877F2);
    box-sizing: border-box;
}

.mnsw-content-gallery-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Placeholder do skeleton dentro do frame: preenche a área da imagem e
 * herda do próprio Rail a forma, a proporção e o arredondamento — o
 * skeleton é o mesmo template em modo estrutural.
 *
 * A identidade de loading (fundo neutro + mnsw-skeleton-pulse do Core)
 * é declarada AQUI, escopada a .mnsw-skeleton, pela mesma razão do
 * Player acima: .mnsw-skeleton__image possui regras genéricas de
 * outros Components (feed.css, media-carousel.css) e o elemento também
 * carrega __image--empty, do estado real "sem imagem" — todas com uma
 * única classe de especificidade, decididas pela ordem de impressão
 * das folhas. Esta regra vence esses empates qualquer que seja a
 * ordem de carregamento.
 *
 * border-radius/aspect-ratio neutralizados: a geometria do placeholder
 * (Ratio, Shape, Rounding, círculo perfeito) pertence exclusivamente
 * ao frame, que faz o clipping — o raio próprio da regra genérica do
 * skeleton do Media Carousel nunca vale aqui.
 */
.mnsw-skeleton .mnsw-content-gallery-item__frame .mnsw-skeleton__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .09);
    opacity: 1;
    animation: mnsw-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 0;
    aspect-ratio: auto;
}

/*
 * O Core suprime o pulso do skeleton sob prefers-reduced-motion
 * (feed.css); a declaração local acima tem especificidade maior e
 * precisa de acompanhar a supressão.
 */
@media (prefers-reduced-motion: reduce) {
    .mnsw-skeleton .mnsw-content-gallery-item__frame .mnsw-skeleton__image {
        animation: none;
    }
}

/*
 * Skeleton sem affordance de interação (precedente do skeleton do
 * Feed): o placeholder não é clicável — nem cursor de ação, nem o anel
 * Accent de hover/focus do frame. A Galeria real não é tocada: estas
 * regras existem somente sob .mnsw-skeleton.
 */
.mnsw-skeleton .mnsw-content-gallery-item {
    cursor: default;
}

.mnsw-skeleton .mnsw-content-gallery-item:hover .mnsw-content-gallery-item__frame,
.mnsw-skeleton .mnsw-content-gallery-item:focus-visible .mnsw-content-gallery-item__frame {
    box-shadow: none;
}

.mnsw-content-gallery-item__image--empty {
    background: var(--mnsw-surface-color, #e5e7eb);
    opacity: .6;
}

/*
 * Circular geométrico com força de classe — a MESMA garantia do Media
 * Carousel (.mnsw-media-carousel--shape-circle): Shape = Circular é
 * SEMPRE um círculo perfeito, independentemente do Image Ratio
 * configurado. O Ratio continua governando normalmente quando o Shape
 * é Original.
 */
.mnsw-content-gallery__rail--shape-circle .mnsw-content-gallery-item__media {
    aspect-ratio: 1 / 1 !important;
}

.mnsw-content-gallery__rail--shape-circle .mnsw-content-gallery-item__frame {
    border-radius: 50% !important;
}

.mnsw-content-gallery__rail--shape-circle .mnsw-content-gallery-item__image {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 50% !important;
}

/*
 * Estados visuais da thumbnail — normal ≠ hover ≠ selected, todos
 * exclusivamente pelos tokens da Appearance resolvida.
 *
 * Hover: anel fino do Accent — convite ao clique.
 * Selected: usa **Appearance > Accent > Highlight** — o token de
 * destaque já existente no grupo accent, resolvido pelo
 * AppearanceResolver e materializado pelo template como
 * --mnsw-highlight-color (mesmo canal do Accent). Anel espesso,
 * barra inferior, Title e Play no Highlight: "esta é a thumbnail que
 * está no Player", inequívoca à distância, distinta do hover em cor e
 * espessura, e independente de hover. Nenhuma cor fixa: sem o token,
 * o fallback é o próprio Accent. O estado pertence à instância visual
 * no DOM e acompanha a troca feita pelo runtime, em qualquer Rail,
 * Position, Rows e instância da Galeria.
 */
/*
 * Os anéis de estado vivem no FRAME e usam box-shadow: a sombra
 * acompanha o border-radius do frame — retângulos, ovais e o círculo
 * perfeito do Shape Circular recebem um destaque com exatamente a sua
 * geometria, nos quatro lados, sem deformação e sem clipping (sombras
 * externas não são cortadas pelo overflow do próprio frame, e o
 * respiro do track as acomoda).
 *
 * Hover: anel fino do Accent — interação perceptível.
 * Selected (premium): gap de 2px na cor de Surface + anel sólido de
 * 3px no Highlight + halo suave DERIVADO da própria Highlight — o
 * desfoque da sombra é o que produz o esmaecimento, nenhuma segunda
 * cor participa. Selected + Hover permanece Selected (regra
 * reafirmada abaixo do hover).
 */
.mnsw-content-gallery-item:hover .mnsw-content-gallery-item__frame,
.mnsw-content-gallery-item:focus-visible .mnsw-content-gallery-item__frame {
    box-shadow: 0 0 0 2px var(--mnsw-accent-color, currentColor);
}

.mnsw-content-gallery-item--selected .mnsw-content-gallery-item__frame,
.mnsw-content-gallery-item--selected:hover .mnsw-content-gallery-item__frame,
.mnsw-content-gallery-item--selected:focus-visible .mnsw-content-gallery-item__frame {
    box-shadow:
        0 0 0 2px var(--mnsw-surface-color, transparent),
        0 0 0 5px var(--mnsw-highlight-color, var(--mnsw-accent-color, currentColor)),
        0 0 14px 2px var(--mnsw-highlight-color, var(--mnsw-accent-color, currentColor));
}

.mnsw-content-gallery-item--selected .mnsw-content-gallery-item__title {
    color: var(--mnsw-highlight-color, var(--mnsw-accent-color, currentColor));
}

.mnsw-content-gallery-item--selected .mnsw-content-gallery-item__play {
    background: var(--mnsw-highlight-color, var(--mnsw-accent-color, rgba(0, 0, 0, .55)));
}

.mnsw-content-gallery-item__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 50%;
    padding: 6px;
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    pointer-events: none;
}

/*
 * Hover preview (D-10): o elemento nasce no hover e morre com ele,
 * sempre mutado, cobrindo a área da thumbnail.
 */
.mnsw-content-gallery-item__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Informações da thumbnail — apresentação final da VERIFICAÇÃO        */
/* ------------------------------------------------------------------ */

/*
 * Provider (topo/esquerda), Duration (baixo/direita) e Date + Time
 * (baixo/centro) são OVERLAYS sobre a própria imagem e nunca criam
 * linhas externas: a altura externa do card é imagem + Title. O scrim
 * escuro neutro é o mesmo recurso que o Core já usa sobre mídia
 * (setas do mnsw-nav, controles dos overlays) — não é cor de
 * identidade. Elemento ausente não existe no markup e não reserva
 * espaço.
 */
.mnsw-content-gallery-item__datetime,
.mnsw-content-gallery-item__duration {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 12px);
    min-width: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: var(--mnsw-cg-meta, 12px);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

/*
 * Provider: overlay no topo — o Icon (≈2× o tamanho do meta) empilhado
 * acima do Provider Name, cada um com a sua própria pílula de scrim. O
 * contêiner apenas posiciona. Sempre COMPLETO: sem truncamento e sem
 * overflow oculto — um nome longo quebra em linhas dentro da largura
 * da thumbnail, nunca é cortado e nunca estoura o card. Fora da
 * máscara da imagem, a circunferência do Circular jamais o recorta.
 *
 * O alinhamento é derivado AUTOMATICAMENTE do Image Shape (classe
 * emitida pelo Theme, sem configuração): Original — inclusive o
 * quadrado 1:1 — alinha no topo/esquerda; Circular e Oval centram.
 */
/*
 * Linha única (Original/quadrado): Icon e Name lado a lado, PRÓXIMOS
 * (gap mínimo) e alinhados PELO TOPO — o topo da pílula do texto
 * acompanha o topo da pílula do Icon, nunca o centro vertical.
 */
.mnsw-content-gallery-item__provider-line {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    min-width: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    background: none;
    padding: 0;
    font-size: var(--mnsw-cg-meta, 12px);
    white-space: normal;
    text-align: left;
    line-height: 1.3;
    pointer-events: none;
}

/*
 * Composição por forma: Circular/Oval empilham Icon e Name centrados
 * em duas linhas; nas demais formas — Original, inclusive o quadrado
 * 1:1 — Icon e Name convivem numa ÚNICA linha no topo/esquerda, com o
 * Name proporcionalmente menor para preservar a área da thumbnail. As
 * pílulas permanecem independentes nos dois arranjos.
 */
/*
 * Circular/Oval: bloco compacto e colado ao topo — o Icon quase
 * encosta na borda superior e o Name vem imediatamente abaixo, com um
 * respiro mínimo.
 */
.mnsw-content-gallery__rail--provider-center .mnsw-content-gallery-item__provider-line {
    top: 4px;
    left: 6px;
    right: 6px;
    margin: 0 auto;
    width: fit-content;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}

.mnsw-content-gallery-item__provider {
    font-size: .9em;
}

.mnsw-content-gallery__rail--provider-center .mnsw-content-gallery-item__provider {
    font-size: 1em;
}

/*
 * Pílulas individuais: o fundo abraça cada elemento separadamente — e
 * o do Provider Name é menos transparente que o do Icon, para a
 * leitura do texto.
 */
.mnsw-content-gallery-item__icon,
.mnsw-content-gallery-item__provider {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
}

.mnsw-content-gallery-item__provider {
    background: rgba(0, 0, 0, .7);
}

/*
 * Identidade visual da origem: Provider Icon e Provider Name usam a
 * cor do próprio Provider/Card (--mnsw-provider-color, emitida do
 * ContentItem::$providerColor — o mesmo canal do Feed e do Media
 * Carousel). A Appearance da Galeria NUNCA pinta estes dois
 * elementos; sem identidade publicada, herdam o neutro do overlay.
 * A identidade permanece a mesma em normal, hover e selected.
 */
.mnsw-content-gallery-item__icon,
.mnsw-content-gallery-item__provider {
    color: var(--mnsw-provider-color, #fff);
}

.mnsw-content-gallery-item__provider {
    min-width: 0;
}

.mnsw-content-gallery-item__icon {
    flex: 0 0 auto;
    font-size: calc(var(--mnsw-cg-meta, 12px) * 2);
    width: auto;
    height: auto;
    line-height: 1;
}

/* Date + Time: overlay baixo/centro, sem transformações. */
.mnsw-content-gallery-item__datetime {
    bottom: 6px;
    left: 6px;
    right: 6px;
    margin: 0 auto;
    width: fit-content;
    justify-content: center;
}

/*
 * Duration: overlay baixo/direita, em área própria ACIMA da região do
 * Date + Time quando ele existe — nunca há sobreposição; sem
 * Date + Time, pousa no rodapé, sem espaço vazio.
 */
.mnsw-content-gallery-item__duration {
    right: 6px;
    bottom: 6px;
}

.mnsw-content-gallery-item__media--has-datetime .mnsw-content-gallery-item__duration {
    bottom: calc(12px + 1.9em);
}

/*
 * Title/Description — o ÚNICO texto fora da imagem: alinhado à
 * esquerda, na largura da thumbnail, truncando com reticências (a
 * convenção do Media Carousel), sem quebrar o card.
 */
.mnsw-content-gallery-item__title {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--mnsw-cg-meta, 12px);
    font-weight: 600;
    text-align: left;
}

/* ------------------------------------------------------------------ */
/* Motion (MOTION-01): mesmos modificadores do Feed e do Carousel      */
/* ------------------------------------------------------------------ */

.mnsw-motion-zoom .mnsw-content-gallery-item__image {
    transition: transform .25s ease;
}

.mnsw-motion-zoom .mnsw-content-gallery-item:hover .mnsw-content-gallery-item__image {
    transform: scale(1.05);
}

.mnsw-motion-click .mnsw-content-gallery-item:active .mnsw-content-gallery-item__media {
    transform: scale(.97);
    transition: transform .1s ease;
}

@media (prefers-reduced-motion: reduce) {
    .mnsw-motion-zoom .mnsw-content-gallery-item__image,
    .mnsw-motion-click .mnsw-content-gallery-item:active .mnsw-content-gallery-item__media {
        transition: none;
        transform: none;
    }
}