/* ===== YTI&W Posts Carousel: estilos base (sem libs externas) ===== */

.ytiw-carousel {

    --ytiw-gap: 16px;

    --ytiw-btn-size: 34px;       /* tamanho do botão */

    --ytiw-icon-size: 16px;      /* tamanho do ícone (font-size) */

    --ytiw-title-lh: 1.35;       /* line-height do título */

    --ytiw-excerpt-lh: 1.45;     /* line-height do excerpt */

    --ytiw-cols: 4;              /* Default columns */

    /* Variáveis de Filtro (padrões para fallback) */

    --ytiw-img-brightness: 100%;

    --ytiw-img-blur: 0px;

    

    position: relative;

    width: 100%;

    overflow: hidden;

}

.ytiw-carousel__viewport {

    overflow: hidden;

    width: 100%;

}

.ytiw-carousel__track {

    display: flex;

    gap: var(--ytiw-gap);

    will-change: transform;

    transition: transform 300ms ease-in-out;

}

.ytiw-carousel__slide {

    flex: 0 0 auto;

    width: calc(100% - 4px);

    max-width: 100%;

    box-sizing: border-box;

}

@media (min-width: 480px) {

    .ytiw-carousel__slide { width: calc(100%/2 - var(--ytiw-gap)/1.5); }

}

@media (min-width: 768px) {

    .ytiw-carousel__slide { width: calc(100%/ min(3, var(--ytiw-cols)) - var(--ytiw-gap)*0.6667); }

}

@media (min-width: 1024px) {

    .ytiw-carousel__slide { width: calc(100%/var(--ytiw-cols) - var(--ytiw-gap) * (1 - 1/var(--ytiw-cols))); }

}

.ytiw-carousel__card {

    display: block;

    text-decoration: none;

    border: 1px solid rgba(0,0,0,.08);

    border-radius: 8px;

    overflow: hidden;

    background: #fff;

    height: 100%; /* Garante altura total no flex/grid */

    position: relative;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.ytiw-carousel__thumb {

    display: block;

    width: 100%;

    height: 0;

    padding-top: 56.25%;

    position: relative;

    background: #f6f7f8;

    overflow: hidden;

}

.ytiw-carousel__thumb img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 250ms ease, filter 250ms ease, box-shadow 250ms ease;

    

    /* Aplicação dos Filtros de Brilho e Blur (v2.7.1) */

    filter: brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur));

}

.ytiw-carousel__body {

    padding: 12px;

}

.ytiw-carousel__title {

    margin: 0 0 8px 0;           /* sem espaço antes do título */

    font-size: 15px;

    line-height: var(--ytiw-title-lh);

    display:block;

    text-align:center !important; /* títulos centralizados */

    color: inherit;

}

.ytiw-carousel__meta {

    font-size: 12px;

    color: #666;

    display:block; /* garante nova linha abaixo do título */

    text-align:center !important; /* data e autor centralizados */

}

.ytiw-carousel__excerpt {

    margin-top: 8px;

    font-size: 13px;

    color: #333;

    line-height: var(--ytiw-excerpt-lh);

}

.ytiw-carousel__controls {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-top: 10px;

}

.ytiw-carousel__btn {

    appearance: none;

    border: 1px solid rgba(0,0,0,.12);

    background: #fff;

    padding: 0 10px;

    border-radius: 6px;

    cursor: pointer;

    line-height: 1;

    min-height: var(--ytiw-btn-size);

    min-width: calc(var(--ytiw-btn-size) * 1.15);

    font-size: var(--ytiw-icon-size);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

.ytiw-carousel__btn[disabled] {

    opacity: .5;

    cursor: not-allowed;

}

.ytiw-carousel__dots {

    display: flex;

    gap: 6px;

    align-items: center;

    justify-content: center;

    flex: 1;

    flex-wrap: wrap;

}

.ytiw-carousel__dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,.3);

    background: transparent;

}

.ytiw-carousel__dot[aria-current="true"] {

    background: rgba(0,0,0,.6);

    border-color: rgba(0,0,0,.6);

}



/* === Efeitos de hover nas imagens === */

.ytiw-hover-zoom .ytiw-carousel__thumb img { transform: scale(1); }

.ytiw-hover-zoom .ytiw-carousel__card:hover .ytiw-carousel__thumb img { transform: scale(1.06); }



/* Correção de conflito de Filtros: Grayscale + Brightness/Blur */

.ytiw-hover-grayscale .ytiw-carousel__thumb img { 

    filter: grayscale(100%) brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur)); 

}

.ytiw-hover-grayscale .ytiw-carousel__card:hover .ytiw-carousel__thumb img { 

    filter: grayscale(0%) brightness(var(--ytiw-img-brightness)) blur(var(--ytiw-img-blur)); 

}



.ytiw-hover-lift .ytiw-carousel__thumb img { transform: translateY(0); }

.ytiw-hover-lift .ytiw-carousel__card:hover .ytiw-carousel__thumb img {

    transform: translateY(-4px);

    box-shadow: 0 6px 18px rgba(0,0,0,.12);

}



/* === Botões fantasma (transparentes) === */

.ytiw-btn-ghost .ytiw-carousel__btn {

    background: transparent !important;

    border-color: transparent !important;

    box-shadow: none !important;

}



/* * =========================================

 * LAYOUT MASONRY / MAGAZINE (NOVO v2.7)

 * =========================================

 */

.ytiw-layout-masonry .ytiw-carousel__viewport {

    overflow: visible; /* Grid não precisa de overflow hidden */

}

.ytiw-layout-masonry .ytiw-carousel__track {

    display: grid;

    grid-template-columns: 1fr; /* Mobile: Pilha vertical */

    gap: var(--ytiw-gap);

    transform: none !important; /* Desativa movimento do slider */

}



/* Desktop Grid (Similar ao Bento Grid / Magazine) */

@media (min-width: 768px) {

    .ytiw-layout-masonry .ytiw-carousel__track {

        grid-template-columns: 1.4fr 1fr 1fr; 

        grid-template-rows: 200px 200px; /* Altura fixa base para alinhamento */

        grid-auto-rows: 200px; /* Linhas subsequentes */

    }



    /* Reset width do slide */

    .ytiw-layout-masonry .ytiw-carousel__slide {

        width: auto !important;

        height: 100%;

    }



    /* Item 1: Hero (Esquerda Total) */

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(1) {

        grid-column: 1 / 2;

        grid-row: 1 / 3; /* Ocupa 2 linhas de altura */

    }



    /* Item 2: Topo Direito (Largo) */

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(2) {

        grid-column: 2 / 4; /* Ocupa colunas 2 e 3 */

        grid-row: 1 / 2;

    }



    /* Item 3: Baixo Esquerda do bloco direito */

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(3) {

        grid-column: 2 / 3;

        grid-row: 2 / 3;

    }



    /* Item 4: Baixo Direita do bloco direito */

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(4) {

        grid-column: 3 / 4;

        grid-row: 2 / 3;

    }



    /* Itens excedentes */

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(n+5) {

        display: none; 

    }

}



/* Ajustes visuais do Card no modo Masonry (Overlay) */

.ytiw-layout-masonry .ytiw-carousel__card {

    border: none;

    background: #000; /* Fundo preto para carregamento */

    border-radius: 6px;

}



.ytiw-layout-masonry .ytiw-carousel__thumb {

    height: 100%;

    padding-top: 0; /* Remove aspect ratio hack */

    position: absolute;

    inset: 0;

    z-index: 1;

}



/* Gradiente de Overlay */

.ytiw-overlay-gradient {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 80%;

    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 90%);

    z-index: 2;

    pointer-events: none;

}



/* Ajuste do Corpo (Texto sobreposto) */

.ytiw-layout-masonry .ytiw-carousel__body {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 3;

    padding: 20px;

    text-align: left !important; /* Força alinhamento à esquerda */

    text-shadow: 0 1px 2px rgba(0,0,0,0.5);

}



/* Tipografia Masonry */

.ytiw-layout-masonry .ytiw-carousel__title,

.ytiw-layout-masonry .ytiw-carousel__meta,

.ytiw-layout-masonry .ytiw-carousel__excerpt {

    text-align: left !important;

    color: #fff !important;

}



.ytiw-layout-masonry .ytiw-carousel__title {

    font-size: 18px; /* Maior destaque */

    font-weight: 700;

    margin-bottom: 5px;

}



/* Título Hero (Primeiro item) ainda maior */

@media (min-width: 768px) {

    .ytiw-layout-masonry .ytiw-carousel__slide:nth-child(1) .ytiw-carousel__title {

        font-size: 24px;

        line-height: 1.2;

    }

}



.ytiw-layout-masonry .ytiw-carousel__meta {

    opacity: 0.8;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 0;

}



/* Categoria Label (Tag sobre a imagem) */

.ytiw-carousel__cat-label {

    display: inline-block;

    background: #2271b1; /* Cor primária YTI&W (ajustável) */

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    padding: 3px 8px;

    border-radius: 3px;

    margin-bottom: 8px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.2);

}



.ytiw-layout-masonry .ytiw-carousel__excerpt {

    display: none; 

}