/**
 * Estilos do bloco de posts do Instagram ([dc_instagram_posts]).
 *
 * Card "rico": capa quadrada + corpo com @usuário/data, legenda e métricas.
 * Grid responsivo; no carrossel o card é reusado dentro do slider compartilhado
 * (.dc-social-slider*).
 */

/**
 * Card "chapado" no mesmo tratamento do YouTube: SEM fundo/borda/sombra/raio —
 * vive direto sobre a seção escura (#111530, na home). TODOS os textos usam a
 * MESMA cor clara (branco da marca), legível no fundo escuro, como o Flickr faz
 * na seção dele. Capa quadrada (nativa do IG) com o ícone do Instagram. Texto
 * principal (@usuário) em rosa no hover. Cores/fontes consomem os tokens --stb-*
 * (definidos no :root pelo tema), com fallback em cada var().
 */
.dc-ig {
    --dc-ig-gap: 28px;
    --dc-ig-ink: #D3C3A7;
    --dc-ig-font: var(--stb-font-body, 'Helvetica Neue', Arial, sans-serif);
}

/* ---------- Grid ---------- */

.dc-ig__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dc-ig-gap);
}

/* ---------- Card chapado (sem fundo/sombra/raio) ---------- */

.dc-ig-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    text-decoration: none;
    color: var(--dc-ig-ink);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.dc-ig-card:hover,
.dc-ig-card:focus-visible {
    outline: none;
}

.dc-ig-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    /* O token --stb-beige do tema é `rgb(#D3C3A7)` — inválido, e um var() definido
       porém inválido NÃO cai no fallback: a cor viraria transparente. Usa o token
       que guarda o valor bom. */
    background-color: var(--stb-beige-rgb, #D3C3A7);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Player de vídeo inline (modo API): ocupa a mesma caixa 4:5 da capa. Usa a
   thumbnail local como poster; toca o MP4 remoto direto do Instagram.

   Reels são 9:16 e a caixa do card é 4:5, então `cover` decepava topo e base do
   vídeo. Com `contain` a mídia aparece inteira (vale para o poster também, que
   respeita object-fit) e a faixa que sobra fica por conta do fundo desfocado de
   .dc-ig-card--video — daí o background transparente aqui. */
.dc-ig-card__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: transparent;
}

/* Preenchimento da faixa vazia: a própria capa, ampliada e desfocada, no lugar de
   uma tarja chapada. `background-image: inherit` puxa a URL do style inline que o
   shortcode escreve em .dc-ig-card__media; o scale evita a borda transparente que
   o blur deixaria nas bordas. Sem capa, não há imagem e vale a cor de fundo. */
.dc-ig-card--video .dc-ig-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.55);
    transform: scale(1.2);
}

/* Botão de play (o vídeo não tem controles nativos). Cobre a mídia inteira:
   o mesmo botão toca e pausa, o que dá alvo grande no celular e deixa pausar
   pelo teclado. O ícone é o play dos temas (.dc-temas__play no divi-child),
   com o mesmo tamanho, cor e hover. Some enquanto o vídeo toca. */
.dc-ig-card__play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--stb-pink, #ff0051);
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.dc-ig-card__play:focus {
    outline: none;
}

.dc-ig-card__play:focus-visible {
    outline: 3px solid var(--stb-white, #ffffff);
    outline-offset: -3px;
}

.dc-ig-card__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.9;
    transition: opacity .2s ease, transform .2s ease;
}

.dc-ig-card__play:hover .dc-ig-card__play-icon,
.dc-ig-card__play:focus-visible .dc-ig-card__play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

.dc-ig-card__play-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dc-ig-card--video.is-playing .dc-ig-card__play-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.dc-ig-card__glyph {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    color: var(--stb-white, #ffffff);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    /* Decorativo: nunca intercepta o clique do player de vídeo abaixo dele. */
    pointer-events: none;
}

/* No card de vídeo o corpo é um <a>; mantém o mesmo visual do <span> da foto. */
.dc-ig-card__body {
    text-decoration: none;
    color: inherit;
}

.dc-ig-card__glyph svg {
    width: 22px;
    height: 22px;
}

/* ---------- Corpo: texto direto, tudo na mesma cor clara ---------- */

.dc-ig-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.dc-ig-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--dc-ig-font);
    font-size: 13px;
    line-height: 1.3;
    color: #000;
}

.dc-ig-card__user {
    font-weight: 700;
    color: #000;
    transition: color 0.2s ease;
}

.dc-ig-card:hover .dc-ig-card__user,
.dc-ig-card:focus-visible .dc-ig-card__user {
    color: var(--stb-pink, #ff0051);
}

.dc-ig-card__date {
    color: #000;
    white-space: nowrap;
}

.dc-ig-card__caption {
    font-family: var(--dc-ig-font);
    font-size: 14px;
    line-height: 1.45;
    color: #000;
    /* Limita a legenda a 3 linhas no card. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dc-ig-card__stats {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    font-family: var(--dc-ig-font);
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.dc-ig-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dc-ig-card__stat svg {
    width: 15px;
    height: 15px;
}

/* ===========================================================
   Modo Manual (embed.js) — [dc_instagram_posts] com Fonte: Manual
   Slides com a largura nativa do embed oficial do Instagram (326px).
   Portado de divi-child/style.css (.dc-slider--instagram).
   =========================================================== */

.dc-ig--embed {
    margin-top: 40px;
}

/* Carrossel: slide fixo em 326px → passo do slider estável mesmo que a
   altura do iframe só seja definida após o carregamento do embed.js. */
.dc-ig--embed .dc-social-slider__slide {
    flex: 0 0 326px;
    max-width: 326px;
}
.dc-ig--embed .dc-social-slider__track {
    align-items: flex-start;
    gap: 16px;
}

/* O slider compartilhado força `.dc-social-slider__slide > * { height:100% }`
   (pensado para os cards curtos). O embed.js define a altura real do iframe via
   atributo `height` (dica de apresentação, baixíssima prioridade) — qualquer
   `height` de autor no iframe o achata para o default de 150px. Por isso o
   blockquote/iframe fica dentro de um wrapper `.dc-ig-embed-frame`: a regra
   `> *` (e este override) atinge o WRAPPER, nunca o iframe, que então respeita
   seu próprio `height`. */
.dc-ig--embed .dc-social-slider__slide > *,
.dc-ig-embed-slide > * {
    height: auto !important;
}
.dc-ig-embed-frame {
    width: 100%;
}

/* As setas herdam a cor escura do slider compartilhado — invisíveis sobre o
   fundo escuro da seção. Clareia, como faz a variante do tema. */
.dc-ig--embed .dc-social-slider__nav {
    color: var(--stb-white, #ffffff);
}

/* Grid: cada coluna com a largura nativa do embed. */
.dc-ig__grid--embed {
    grid-template-columns: repeat(auto-fit, 326px);
    justify-content: center;
    gap: 16px;
}

/* Reserva espaço enquanto o blockquote ainda não virou iframe. */
.dc-ig-embed-slide {
    min-height: 540px;
}
.dc-ig-embed-slide .instagram-media,
.dc-ig-embed-slide iframe.instagram-media {
    margin: 0 auto !important;
}

@media (max-width: 600px) {
    .dc-ig--embed .dc-social-slider__slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .dc-ig__grid--embed {
        grid-template-columns: 1fr;
    }
    /* Setas no meio vertical, encostadas nas bordas, com fundo para contraste. */
    .dc-ig--embed .dc-social-slider__nav {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 28px;
        color: var(--stb-white, #ffffff);
        background: rgba(var(--stb-dark-rgb, 39, 43, 56), 0.6);
        border-radius: 0;
    }
    .dc-ig--embed .dc-social-slider__nav--prev { left: 0; right: auto; }
    .dc-ig--embed .dc-social-slider__nav--next { right: 0; left: auto; }
    .dc-ig-embed-slide { min-height: 500px; }
}