/* Eixo Category Feed — Alpha 0.1.7 */

/*
 * O widget não define largura própria.
 * Ele passa a obedecer integralmente o espaço calculado pelo tema para a sidebar,
 * da mesma forma que um widget clássico padrão do WordPress.
 */
.eixo-category-feed-widget {
    box-sizing: border-box;
    display: block;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto;
    align-self: stretch;
    justify-self: stretch;
}

/* Compatibilidade com sidebars em Grid/Flex e wrappers comuns do WordPress. */
.sidebar .eixo-category-feed-widget,
.widget-area .eixo-category-feed-widget,
.wp-block-widget-area .eixo-category-feed-widget,
aside .eixo-category-feed-widget {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Não força largura no wrapper interno do tema. */
.eixo-category-feed-widget > * {
    min-width: 0;
    max-width: 100%;
}

/* O widget usa o card do próprio tema como superfície principal. */
.eixo-cf {
    --eixo-cf-accent:
        var(--eixo-cf-manual-accent,
        var(--eixo-cf-detected-accent,
        var(--eixo-accent,
        var(--eixo-accent-color,
        var(--eixo-theme-accent,
        var(--theme-accent,
        var(--accent-color,
        var(--accent,
        var(--primary-color,
        var(--color-accent,
        var(--color-primary,
        var(--wp--preset--color--accent,
        var(--wp--preset--color--accent-1,
        var(--wp--preset--color--primary, #E11D2E))))))))))))));

    --eixo-cf-text:
        var(--eixo-card-text,
        var(--eixo-text-color,
        var(--text-color,
        var(--wp--preset--color--contrast, currentColor))));

    --eixo-cf-muted:
        var(--eixo-muted-color,
        var(--muted-color,
        var(--secondary-text-color, #8f9298)));

    --eixo-cf-border:
        var(--eixo-card-border,
        var(--eixo-border-color,
        var(--border-color, rgba(127,127,127,.22))));

    --eixo-cf-radius: 10px;
    --eixo-cf-title-lines: 3;

    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;

    /*
     * Fundo transparente = usa exatamente o background do widget/card
     * criado pelo tema. Se houver override manual, ele assume.
     */
    background: var(--eixo-cf-manual-card, transparent);
    color: var(--eixo-cf-text);
    border: 0;
    border-radius: inherit;
    font: inherit;
    overflow: hidden;
}

.eixo-cf *, .eixo-cf *::before, .eixo-cf *::after { box-sizing: border-box; }
.eixo-cf a { color: inherit; text-decoration: none; }

.eixo-cf__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px;
}

.eixo-cf__heading-title {
    margin: 0;
    color: inherit;

    /*
     * Segue a tipografia configurada para o breadcrumb do Eixo Geek.
     * A cadeia aceita diferentes nomes de variáveis para manter compatibilidade
     * entre versões do tema.
     */
    font-family:
        var(--eixo-breadcrumb-font-family,
        var(--eixo-breadcrumb-font,
        var(--breadcrumb-font-family,
        var(--breadcrumb-font,
        inherit))));

    font-size:
        var(--eixo-breadcrumb-font-size,
        var(--eixo-breadcrumb-size,
        var(--breadcrumb-font-size,
        var(--breadcrumb-size,
        inherit))));

    font-weight:
        var(--eixo-breadcrumb-font-weight,
        var(--eixo-breadcrumb-weight,
        var(--breadcrumb-font-weight,
        var(--breadcrumb-weight,
        inherit))));

    line-height:
        var(--eixo-breadcrumb-line-height,
        var(--breadcrumb-line-height,
        1.2));

    letter-spacing:
        var(--eixo-breadcrumb-letter-spacing,
        var(--breadcrumb-letter-spacing,
        normal));

    text-transform:
        var(--eixo-breadcrumb-text-transform,
        var(--breadcrumb-text-transform,
        none));
}

.eixo-cf__heading-line {
    display: block;
    flex: 1;
    height: 2px;
    background: var(--eixo-cf-accent);
    opacity: .9;
}

.eixo-cf__featured { margin: 0; }

.eixo-cf__featured-media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--eixo-cf-radius);
    aspect-ratio: 16 / 9;
    background: rgba(127,127,127,.1);
}

.eixo-cf__featured-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.eixo-cf__featured-body { padding: 10px 0 12px; }

.eixo-cf__eyebrow {
    margin: 0 0 6px;
    color: var(--eixo-cf-accent);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.eixo-cf__featured-title,
.eixo-cf__item-title {
    margin: 0;
    font: inherit;
    font-weight: 750;
}

.eixo-cf__featured-title { font-size: .92rem; line-height: 1.2; }

.eixo-cf__featured-title a,
.eixo-cf__item-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--eixo-cf-title-lines);
}

.eixo-cf__date {
    display: block;
    margin-top: 6px;
    color: var(--eixo-cf-muted);
    font-size: .7rem;
}

.eixo-cf__section-bar {
    margin-inline: -1px;
    padding: 9px 10px;
    background: var(--eixo-cf-accent);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.eixo-cf__list { padding: 6px 0 8px; }

.eixo-cf__item {
    display: grid;
    grid-template-columns: 10px minmax(0,1fr);
    gap: 7px;
    align-items: start;
    min-width: 0;
    padding: 8px 0;
}

.eixo-cf__item + .eixo-cf__item {
    border-top: 1px solid var(--eixo-cf-border);
}

.eixo-cf__chevron {
    color: var(--eixo-cf-accent);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: .95;
}

.eixo-cf__item-copy { min-width: 0; }
.eixo-cf__item-title { font-size: .79rem; line-height: 1.22; }
.eixo-cf__date--list { margin-top: 3px; font-size: .66rem; }

.eixo-cf__more {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--eixo-cf-radius);
    background: var(--eixo-cf-accent);
    color: #fff !important;
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.eixo-cf__more:hover,
.eixo-cf__more:focus-visible {
    opacity: .9;
}

/* Garante que estilos genéricos de links/botões do tema não sobrescrevam o Accent. */
.eixo-category-feed-widget .eixo-cf__section-bar,
.eixo-category-feed-widget a.eixo-cf__more {
    background-color: var(--eixo-cf-accent) !important;
}

.eixo-category-feed-widget .eixo-cf__eyebrow,
.eixo-category-feed-widget .eixo-cf__chevron {
    color: var(--eixo-cf-accent) !important;
}


/* Ajuste responsivo à largura definida pelo tema */
.eixo-category-feed-widget .eixo-cf,
.eixo-category-feed-widget .eixo-cf__featured,
.eixo-category-feed-widget .eixo-cf__featured-media,
.eixo-category-feed-widget .eixo-cf__list,
.eixo-category-feed-widget .eixo-cf__more {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.eixo-category-feed-widget img {
    max-width: 100%;
}

/* Evita que títulos ou conteúdo aumentem a coluna da sidebar. */
.eixo-category-feed-widget .eixo-cf__featured-title,
.eixo-category-feed-widget .eixo-cf__item-title,
.eixo-category-feed-widget .eixo-cf__item-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* Alpha 0.1.4: o detector escreve aqui a Accent Color computada do tema. */
.eixo-category-feed-widget .eixo-cf {
    accent-color: var(--eixo-cf-accent);
}


/* Alpha 0.1.5 — conteúdo preenche melhor o próprio widget */
.eixo-category-feed-widget .eixo-cf {
    width: 100%;
    padding: 0;
}

.eixo-category-feed-widget .eixo-cf__heading {
    width: 100%;
}

.eixo-category-feed-widget .eixo-cf__featured-media {
    width: 100%;
    margin: 0;
    border-radius: var(--eixo-cf-radius);
}

.eixo-category-feed-widget .eixo-cf__featured-body {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.eixo-category-feed-widget .eixo-cf__section-bar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.eixo-category-feed-widget .eixo-cf__list {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.eixo-category-feed-widget .eixo-cf__item {
    width: 100%;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 0;
}

.eixo-category-feed-widget .eixo-cf__featured-title {
    font-size: .96rem;
    line-height: 1.22;
}

.eixo-category-feed-widget .eixo-cf__item-title {
    font-size: .82rem;
    line-height: 1.24;
}

.eixo-category-feed-widget .eixo-cf__more {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Em sidebars estreitas, mantém o conteúdo cheio sem estourar. */
@media (max-width: 420px) {
    .eixo-category-feed-widget .eixo-cf__featured-title {
        font-size: .92rem;
    }

    .eixo-category-feed-widget .eixo-cf__item-title {
        font-size: .79rem;
    }
}


/* Alpha 0.1.6 — garante que estilos genéricos do widget não sobrescrevam a tipografia do breadcrumb */
.eixo-category-feed-widget .eixo-cf__heading-title {
    font-family:
        var(--eixo-breadcrumb-font-family,
        var(--eixo-breadcrumb-font,
        var(--breadcrumb-font-family,
        var(--breadcrumb-font,
        inherit)))) !important;

    font-size:
        var(--eixo-breadcrumb-font-size,
        var(--eixo-breadcrumb-size,
        var(--breadcrumb-font-size,
        var(--breadcrumb-size,
        inherit)))) !important;

    font-weight:
        var(--eixo-breadcrumb-font-weight,
        var(--eixo-breadcrumb-weight,
        var(--breadcrumb-font-weight,
        var(--breadcrumb-weight,
        inherit)))) !important;
}


/* Alpha 0.1.7 — controles próprios do título do widget */
.eixo-category-feed-widget .eixo-cf__heading-title {
    font-family: inherit !important;
    font-size: var(--eixo-cf-widget-title-size, 16px) !important;
    font-weight: var(--eixo-cf-widget-title-weight, 800) !important;
    text-transform: var(--eixo-cf-widget-title-transform, none) !important;
    line-height: 1.2 !important;
}