/* ============================================================================
 * Widget FEED DO INSTAGRAM · skin WC_CLINIC
 * O carrossel na linguagem do tema (tokens --ag-* de wc_css/wc-agency.css, que
 * derivam da paleta do painel):
 *   - cabeçalho CENTRADO no padrão .ag-sec-head, com o eyebrow em CHIP pill
 *     (fundo suave da primária + borda), a assinatura das sections do tema;
 *   - cards com o hover das .ag-tile: sobe 5px, borda ganha o acento e a
 *     sombra --ag-shadow;
 *   - CTA no desenho dos .ag-btn (raio 12px) com o gradiente --ag-grad;
 *   - glows radiais discretos ao fundo, citação dos spotlights .cl-drop.
 * Fallbacks só para o caso de o skin ser forçado fora do tema.
 * ==========================================================================*/

.wcig {
    --wcig-accent:      var(--ag-accent, var(--bs-primary, #6D28D9));
    --wcig-accent-rgb:  var(--ag-accent-rgb, var(--bs-primary-rgb, 109, 40, 217));
    --wcig-accent2-rgb: var(--ag-primary-2-rgb, var(--bs-secondary-rgb, 192, 38, 211));
    --wcig-on-accent:   #fff;
    --wcig-surface:     var(--ag-surface, var(--bs-card-bg, #ffffff));
    --wcig-border:      var(--ag-border, var(--bs-border-color, #e5e9f2));
    --wcig-text:        var(--ag-text, var(--bs-body-color, #526484));
    --wcig-heading:     var(--ag-heading, var(--bs-heading-color, #364a63));
    --wcig-muted:       var(--ag-muted, #8094ae);
    /* Fundo claro (não o alternado): na home o widget entra logo após o blog,
       que já usa --ag-bg-2 — assim as sections seguem alternando. Os glows
       radiais dão a profundidade que os spotlights do tema usam. */
    --wcig-bg:          var(--ag-bg, var(--bs-body-bg, #ffffff));
    --wcig-noimg:       rgba(var(--wcig-accent-rgb), .35);
    --wcig-radius:      var(--ag-radius, 16px);
    background:
        radial-gradient(620px 340px at 10% -10%, rgba(var(--wcig-accent-rgb), .07), transparent 62%),
        radial-gradient(560px 320px at 92% 110%, rgba(var(--wcig-accent2-rgb), .06), transparent 62%),
        var(--wcig-bg);
    color: var(--wcig-text);
}

/* --- Cabeçalho centrado, padrão .ag-sec-head ------------------------------- */
.wcig-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 44px;
}
/* Eyebrow em chip pill — idêntico ao .ag-eyebrow das outras sections. */
.wcig-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--wcig-accent);
    background: rgba(var(--wcig-accent-rgb), .1);
    border: 1px solid rgba(var(--wcig-accent-rgb), .22);
    padding: .35rem .9rem;
    border-radius: 40px;
    margin-bottom: 0;
}
.wcig-title {
    color: var(--wcig-heading);
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 1rem 0 .4rem;
}
.wcig-lead { color: var(--wcig-muted); font-size: 1.06rem; max-width: 60ch; }

/* CTA no desenho dos .ag-btn, com o gradiente da marca. */
.wcig-follow {
    margin-top: 1.1rem;
    border: 0;
    border-radius: 12px;
    padding: .85rem 1.6rem;
    font-weight: 700;
    color: var(--wcig-on-accent);
    background: var(--ag-grad, var(--wcig-accent));
    box-shadow: 0 10px 24px rgba(var(--wcig-accent-rgb), .26);
    transition: .18s ease;
}
.wcig-follow:hover {
    color: var(--wcig-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--wcig-accent-rgb), .34);
    filter: brightness(1.06);
}

/* --- Cards com o hover das .ag-tile ---------------------------------------- */
/* A trilha corta o que vaza (overflow-x: auto) — folga interna para o card
   subir 5px e projetar sombra sem ser decapitado, com margem negativa
   compensando para os cards seguirem alinhados ao cabeçalho. */
.wcig .wcig-track { padding: 10px 6px 20px; margin: -10px -6px -10px; }

.wcig-item {
    background: var(--wcig-surface);
    border: 1px solid var(--wcig-border);
    box-shadow: 0 6px 18px rgba(43, 55, 72, .06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wcig-item:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--wcig-accent-rgb), .45);
    box-shadow: var(--ag-shadow, 0 16px 40px rgba(43, 55, 72, .14));
}
.wcig-item.is-featured { box-shadow: 0 0 0 2px rgba(var(--wcig-accent-rgb), .5); }

/* Setas ganham o gradiente no hover (mesma família do CTA). */
.wcig-nav:hover {
    background: var(--ag-grad, var(--wcig-accent));
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .wcig-item:hover, .wcig-follow:hover { transform: none; }
}