/**
 * Estilos do bloco de posts do Instagram ([arth_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
 * (.arth-social-slider*).
 */

.arth-ig {
    --arth-ig-radius: 14px;
    --arth-ig-gap: 24px;
    --arth-ig-accent: #111530;
}

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

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

/* ---------- Card ---------- */

.arth-ig-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--arth-ig-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 81, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.arth-ig-card:hover,
.arth-ig-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15, 23, 81, 0.16);
    outline: none;
}

.arth-ig-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #e9ecf5;
    background-size: cover;
    background-position: center;
}

.arth-ig-card__glyph {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

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

.arth-ig-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 18px;
}

.arth-ig-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    line-height: 1.3;
}

.arth-ig-card__user {
    font-weight: 700;
    color: var(--arth-ig-accent);
}

.arth-ig-card__date {
    color: #6a6f86;
    white-space: nowrap;
}

.arth-ig-card__caption {
    font-size: 14px;
    line-height: 1.45;
    color: #2a2f4a;
    /* Limita a legenda a 3 linhas no card. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arth-ig-card__stats {
    display: flex;
    gap: 16px;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--arth-ig-accent);
}

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

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

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

.arth-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. */
.arth-ig--embed .arth-social-slider__slide {
    flex: 0 0 326px;
    max-width: 326px;
}
.arth-ig--embed .arth-social-slider__track {
    align-items: flex-start;
    gap: 16px;
}

/* O slider compartilhado força `.arth-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 `.arth-ig-embed-frame`: a regra
   `> *` (e este override) atinge o WRAPPER, nunca o iframe, que então respeita
   seu próprio `height`. */
.arth-ig--embed .arth-social-slider__slide > *,
.arth-ig-embed-slide > * {
    height: auto !important;
}
.arth-ig-embed-frame {
    width: 100%;
}

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

/* Grid: cada coluna com a largura nativa do embed. */
.arth-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. */
.arth-ig-embed-slide {
    min-height: 540px;
}
.arth-ig-embed-slide .instagram-media,
.arth-ig-embed-slide iframe.instagram-media {
    margin: 0 auto !important;
}

@media (max-width: 600px) {
    .arth-ig--embed .arth-social-slider__slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .arth-ig__grid--embed {
        grid-template-columns: 1fr;
    }
    /* Setas no meio vertical, encostadas nas bordas, com fundo para contraste. */
    .arth-ig--embed .arth-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: #ffffff;
        background: rgba(17, 21, 48, 0.6);
        border-radius: 0;
    }
    .arth-ig--embed .arth-social-slider__nav--prev { left: 0; right: auto; }
    .arth-ig--embed .arth-social-slider__nav--next { right: 0; left: auto; }
    .arth-ig-embed-slide { min-height: 500px; }
}