/* ================================================================
   BlogLentor Pro — v3.0.0
   ================================================================ */

/* ----------------------------------------------------------------
   Header Styles 2-6
   Classe aplicada: .blfe-post-header.blfe-post-header-{style}
   ---------------------------------------------------------------- */

/* Style 2 — barra esquerda azul */
.blfe-post-header-style_2 {
    border-bottom: none;
    border-left: 4px solid #2568ef;
    padding-left: 14px;
    padding-bottom: 2px;
}

/* Style 3 — fundo escuro com texto branco */
.blfe-post-header-style_3 {
    border-bottom: none;
    background: #111;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 25px;
}
.blfe-post-header-style_3 .blfe-post-header-title-inner,
.blfe-post-header-style_3 .blfe-post-header-title a { color: #fff !important; }

/* Style 4 — linha dupla: grossa preta + traço azul */
.blfe-post-header-style_4 {
    border-bottom: 3px solid #111;
    padding-bottom: 8px;
    position: relative;
}
.blfe-post-header-style_4::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 50px; height: 3px;
    background: #2568ef;
}

/* Style 5 — barra vertical antes do título */
.blfe-post-header-style_5 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.blfe-post-header-style_5 .blfe-post-header-title {
    padding-left: 14px;
    position: relative;
}
.blfe-post-header-style_5 .blfe-post-header-title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 22px;
    background: #2568ef;
    border-radius: 2px;
}

/* Style 6 — gradiente no rodapé */
.blfe-post-header-style_6 {
    border-bottom: none;
    padding-bottom: 10px;
    position: relative;
}
.blfe-post-header-style_6::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, #2568ef, #b721ff);
    border-radius: 2px;
}


/* ================================================================
   News Skins 1-5
   Classe do inner_wrapper: .blfe-news{N} + .blfe-skin-news
   ================================================================ */

/* Compartilhado: remove min-height padrão dos itens secundários */
.blfe-skin-news .blfe-post-grid-item { position: relative; overflow: hidden; }

/* ------ News 1 ------
   Post principal ocupa linha inteira (topo).
   Demais: imagem miniatura à esquerda + texto à direita.         */
.blfe-news1 { display: grid; grid-gap: 4px; }
.blfe-news1 > div:first-child { grid-column: 1 / -1; }

.blfe-news1 > div:not(:first-child) .blfe-post-grid-item-inner {
    display: flex; flex-direction: row; background: #fff;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-image {
    flex: 0 0 110px; max-width: 110px;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-image img {
    min-height: 85px !important; height: 100%; object-fit: cover;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-details {
    position: static !important; flex: 1;
    background: #fff; padding: 10px 12px;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-details-inner {
    position: static !important; padding: 0 !important; bottom: auto !important;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-title {
    font-size: 13px; padding-bottom: 4px;
}
.blfe-news1 > div:not(:first-child) .blfe-post-grid-title a { color: #111; }
.blfe-news1 > div:not(:first-child) .blfe-post-grid-meta span { color: #777; }
.blfe-news1 > div:not(:first-child) .blfe-post-category a {
    font-size: 10px; padding: 2px 7px;
}

/* ------ News 2 ------
   Grade 2×2 simétrica, imagem com overlay e detalhes sobrepostos. */
.blfe-news2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4px;
}
.blfe-news2 .blfe-post-grid-item .blfe-post-grid-details { height: 100%; }
.blfe-news2 .blfe-post-grid-item .blfe-post-grid-image img { min-height: 230px !important; }

/* ------ News 3 ------
   Principal: 60% esquerda (2 linhas). Secundários: coluna direita. */
.blfe-news3 {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 4px;
}
.blfe-news3 > div:first-child {
    grid-column: 1; grid-row: 1 / 3;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-item-inner {
    display: flex; flex-direction: row; background: #fff;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-image {
    flex: 0 0 95px; max-width: 95px;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-image img {
    min-height: 80px !important; height: 100%; object-fit: cover;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-details {
    position: static !important; flex: 1;
    background: #fff; padding: 8px 10px;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-details-inner {
    position: static !important; padding: 0 !important; bottom: auto !important;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-title {
    font-size: 13px; padding-bottom: 3px;
}
.blfe-news3 > div:not(:first-child) .blfe-post-grid-title a { color: #111; }

/* ------ News 4 ------
   Principal: ocupa 2 colunas à esquerda. Dois pequenos à direita. */
.blfe-news4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 4px;
}
.blfe-news4 > div:first-child {
    grid-column: 1 / 3; grid-row: 1 / 3;
}
.blfe-news4 .blfe-post-grid-item .blfe-post-grid-details { height: 100%; }
.blfe-news4 > div:first-child .blfe-post-grid-image img { min-height: 350px !important; }
.blfe-news4 > div:not(:first-child) .blfe-post-grid-image img { min-height: 160px !important; }
.blfe-news4 > div:not(:first-child) .blfe-post-grid-title { font-size: 13px; }
.blfe-news4 > div:not(:first-child) .blfe-post-grid-details-inner {
    bottom: 12px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* ------ News 5 ------
   Principal: esquerda full-height. Lista com miniaturas na direita. */
.blfe-news5 {
    display: grid;
    grid-template-columns: 55% 1fr;
    grid-gap: 0;
}
.blfe-news5 > div:first-child {
    grid-column: 1; grid-row: 1 / 5;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-item-inner {
    display: flex; align-items: center; gap: 10px;
    background: #fff; padding: 12px; height: 100%;
    border-bottom: 1px solid #eee;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-image {
    flex: 0 0 85px; max-width: 85px;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-image img {
    min-height: 65px !important; height: 65px; object-fit: cover; border-radius: 4px;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-details {
    position: static !important; flex: 1; background: transparent; padding: 0;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-details-inner {
    position: static !important; padding: 0 !important; bottom: auto !important;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-title {
    font-size: 12px; line-height: 1.3; padding-bottom: 4px;
}
.blfe-news5 > div:not(:first-child) .blfe-post-grid-title a { color: #111; }
.blfe-news5 > div:not(:first-child) .blfe-post-category a {
    font-size: 10px; padding: 2px 6px;
}


/* ================================================================
   Hero Skins 5-10
   O free já aplica a classe blfe-{skin} no inner_wrapper para
   heroes APÓS o nosso filtro. O posicionamento absoluto dos
   detalhes já vem do main.css para hero1-10.
   Aqui diferenciamos cada um visualmente.
   ================================================================ */

/* ------ Hero 5 ------
   Detalhes no TOPO (não na base como o padrão)                   */
.blfe-hero5 .blfe-post-grid-item .blfe-post-grid-details-inner {
    top: 25px;
    bottom: auto !important;
    transition: top 0.3s ease;
}
.blfe-hero5 .blfe-post-grid-item:hover .blfe-post-grid-details-inner {
    top: 40px;
    bottom: auto !important;
}
.blfe-hero5 .blfe-post-grid-item .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 60%);
    opacity: 1 !important;
}

/* ------ Hero 6 ------
   Detalhes centralizados vertical e horizontalmente               */
.blfe-hero6 .blfe-post-grid-item .blfe-post-grid-details {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.blfe-hero6 .blfe-post-grid-item .blfe-post-grid-details-inner {
    position: relative !important;
    bottom: auto !important;
    text-align: center;
    padding: 20px !important;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.blfe-hero6 .blfe-post-grid-item:hover .blfe-post-grid-details-inner {
    opacity: 1;
    bottom: auto !important;
}
.blfe-hero6 .blfe-post-grid-item .blfe-post-grid-meta { justify-content: center; }
.blfe-hero6 .blfe-post-grid-item .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    opacity: 0.3;
}
.blfe-hero6 .blfe-post-grid-item:hover .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    opacity: 0.7;
}

/* ------ Hero 7 ------
   Faixa semitransparente fixa na base                             */
.blfe-hero7 .blfe-post-grid-item .blfe-post-grid-details {
    align-items: flex-end;
}
.blfe-hero7 .blfe-post-grid-item .blfe-post-grid-details-inner {
    background: rgba(0,0,0,0.55);
    width: 100%;
    bottom: 0 !important;
    padding: 14px 20px !important;
    transition: background 0.3s;
}
.blfe-hero7 .blfe-post-grid-item:hover .blfe-post-grid-details-inner {
    background: rgba(0,0,0,0.75);
    bottom: 0 !important;
}
.blfe-hero7 .blfe-post-grid-item .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    display: none;
}

/* ------ Hero 8 ------
   Slide-up: detalhes entram por baixo no hover                    */
.blfe-hero8 .blfe-post-grid-item .blfe-post-grid-details-inner {
    bottom: -120px !important;
    transition: bottom 0.4s ease;
    background: rgba(0,0,0,0.6);
    padding: 16px 22px !important;
}
.blfe-hero8 .blfe-post-grid-item:hover .blfe-post-grid-details-inner {
    bottom: 0 !important;
}
.blfe-hero8 .blfe-post-grid-item .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    opacity: 0.1;
}
.blfe-hero8 .blfe-post-grid-item:hover .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    opacity: 0.5;
}

/* ------ Hero 9 ------
   Fade-in do overlay + detalhes, borda colorida no hover          */
.blfe-hero9 .blfe-post-grid-item {
    border: 3px solid transparent;
    transition: border-color 0.3s;
}
.blfe-hero9 .blfe-post-grid-item:hover { border-color: #2568ef; }
.blfe-hero9 .blfe-post-grid-item .blfe-post-grid-details-inner {
    opacity: 0;
    transition: opacity 0.4s ease, bottom 0.4s ease;
}
.blfe-hero9 .blfe-post-grid-item:hover .blfe-post-grid-details-inner {
    opacity: 1;
    bottom: 30px !important;
}

/* ------ Hero 10 ------
   Dois blocos: imagem e card branco com texto abaixo (sem overlay)*/
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-item-inner {
    display: flex; flex-direction: column;
}
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-details {
    position: static !important;
    background: #fff;
    padding: 14px 16px;
    height: auto !important;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-details-inner {
    position: static !important;
    bottom: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
}
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-title a { color: #111; }
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-meta span,
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-meta span a { color: #666; }
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-bg-image .blfe-post-grid-image-inner:before {
    display: none;
}
.blfe-hero10 .blfe-post-grid-item .blfe-post-grid-bg-image img { min-height: 200px !important; }