/* ==========================================================================
   "NO NOSSO INSTAGRAM" — faixa da home
   --------------------------------------------------------------------------
   Grade de cards: capa quadrada, legenda em 2 linhas, data e o link para o
   post. Quatro colunas no desktop (duas fileiras de quatro), três até 1220px,
   duas até 970px e uma fileira que corre para o lado no celular, como já
   fazem os cards de avaliação logo acima.

   O card é de propósito pequeno: a faixa é um aperitivo do perfil, não a
   atração da home — com capa 4:5 em três colunas ela passava de mil pixels
   de altura e empurrava a newsletter para longe.

   A capa vai "position: absolute" dentro de um quadro com aspect-ratio. Com
   a imagem solta no fluxo, uma foto 9:16 de reel estica o card inteiro: o
   aspect-ratio cede quando o conteúdo é mais alto que a proporção.

   Fundo: --surface-blue, para a seção não encostar no branco do #blog logo
   acima nem no azul-escuro do #newsletter logo abaixo.

   Markup: parts/home-instagram.php
   Breakpoints do tema: 1220 / 970 / 680.
   ========================================================================== */

#instagram.qs-sec {
    margin-bottom: 0px;
    padding: 60px 0px;
    background-color: var(--surface-blue);
}

/* o tema dá margem a p/ul/li dentro de .block; aqui o espaçamento é da grade */
#instagram p,
#instagram ul,
#instagram li {
    margin: 0px;
    padding: 0px;
    line-height: 1.5;
}


/* ==========================================================================
   LINHA DO PERFIL
   ========================================================================== */

.qs-ig-perfil {
    margin-bottom: 24px !important;
    text-align: center;
}

.qs-ig-perfil a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--darkblue, #123A5E);
    font-size: 14px;
    font-weight: 600;
}

.qs-ig-perfil a i { font-size: 17px; }

.qs-ig-perfil a span {
    color: var(--blue, #1A72B8);
    font-weight: 600;
}

.qs-ig-perfil a:hover { border-color: var(--blue, #1A72B8); }


/* ==========================================================================
   GRADE
   ========================================================================== */

.qs-ig-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 16px;
    list-style: none !important;
    text-align: left;
}

/* o <li> vira flex para o card esticar até o fim da linha da grade, mesmo
   quando o card vizinho tem legenda mais longa */
.qs-ig-item { display: flex; }

.qs-ig-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: #FFFFFF;
    color: inherit;
}

.qs-ig-card:hover { border-color: var(--blue, #1A72B8); }


/* ==========================================================================
   CAPA
   ========================================================================== */

/* quadrada, como a grade do próprio Instagram: a capa 4:5 empurrava a
   seção para mais de mil pixels de altura na home */
.qs-ig-capa {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface, #F6F8FA);
}

/* sem aspect-ratio (navegador antigo), o padding-top segura o mesmo quadro */
@supports not (aspect-ratio: 1 / 1) {
    .qs-ig-capa { padding-top: 100%; }
}

.qs-ig-capa img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.qs-ig-card:hover .qs-ig-capa img { transform: scale(1.04); }

/* o rotulo do selo existe para o leitor de tela; o tema nao define a
   .screen-reader-text do WordPress, entao a regra vem daqui */
.qs-ig-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.qs-ig-selo {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    font-size: 12px;
}


/* ==========================================================================
   TEXTO
   ========================================================================== */

.qs-ig-texto {
    display: -webkit-box;
    overflow: hidden;
    padding: 12px 14px 0px 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--gray, #6B7885);
    font-size: 13px;
    line-height: 1.5;
}

.qs-ig-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;   /* gruda no rodapé mesmo com legendas de tamanhos diferentes */
    padding: 10px 14px 12px 14px;
}

.qs-ig-data {
    color: var(--gray, #6B7885);
    font-size: 12px;
}

.qs-ig-ver {
    color: var(--blue, #1A72B8);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.qs-ig-card:hover .qs-ig-ver { text-decoration: underline; }

.qs-ig-fonte {
    margin-top: 20px !important;
    color: var(--gray, #6B7885);
    font-size: 13px;
    text-align: center;
}

.qs-ig-fonte i { margin-right: 6px; }


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1220px) {
    .qs-ig-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 8 cards em 3 colunas deixariam a última fileira pela metade; aqui
       entram 6, duas fileiras cheias. Em 2 colunas os 8 fecham sozinhos. */
    .qs-ig-item:nth-child(n+7) { display: none; }
}

@media (max-width: 970px) {
    #instagram.qs-sec { padding: 48px 0px; }

    .qs-ig-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    #instagram.qs-sec { padding: 40px 0px; }

    /* empilhar 6 cards vira uma coluna sem fim: no celular eles viram uma
       fileira que corre para o lado, com encaixe, como no resto do site */
    .qs-ig-grade {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        margin: 0px -16px !important;
        padding: 0px 16px 4px 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .qs-ig-item {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }
}