/* ===== 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 */



    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;



}



.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;



}



.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 */



}



.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); }







.ytiw-hover-grayscale .ytiw-carousel__thumb img { filter: grayscale(100%); }



.ytiw-hover-grayscale .ytiw-carousel__card:hover .ytiw-carousel__thumb img { filter: grayscale(0%); }







.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;



}