/* ===========================
   Post Tab Widget
=========================== */
.ek-post-tab {
    @apply w-full;

    &.ek-post-tab-filter-left {
        @apply flex flex-col md:flex-row gap-6 items-start;

        .ek-tab-nav {
            @apply flex flex-col w-full md:w-56 lg:w-64 shrink-0 mb-0;

            .ek-tab-nav-item {
                @apply w-full justify-start text-left;
            }
        }

        .ek-tab-content {
            @apply flex-1 min-w-0 w-full;
        }
    }

    &.ek-post-tab-filter-right {
        @apply flex flex-col md:flex-row-reverse gap-6 items-start;

        .ek-tab-nav {
            @apply flex flex-col w-full md:w-56 lg:w-64 shrink-0 mb-0;

            .ek-tab-nav-item {
                @apply w-full justify-start text-left;
            }
        }

        .ek-tab-content {
            @apply flex-1 min-w-0 w-full;
        }
    }
}

.ek-tab-nav {
    @apply flex flex-wrap gap-2.5 mb-6;
}

.ek-tab-nav-item {
    @apply inline-flex items-center justify-center px-5 py-2.5 font-semibold text-[14px] leading-5 text-ekl-neutral-700 bg-ekl-neutral-50 rounded-xl cursor-pointer transition-all duration-300 hover:text-ekl-red-orange-600 hover:bg-ekl-neutral-200 select-none border border-transparent;

    &.active {
        @apply text-white bg-ekl-red-orange-600 hover:bg-ekl-red-orange-600 shadow-sm;
    }
}

/* Keyboard focus on a tab; the selected one is the only stop in the row. */
.ek-tab-nav-item:focus-visible {
    outline: 3px solid var(--color-ekl-red-orange-600);
    outline-offset: 2px;
}

.ek-tab-content {
    @apply w-full;
}

.ek-tab-panel {
    @apply w-full;
}

.ek-tab-posts-grid {
    @apply w-full;
    gap: 24px;
}

.ek-tab-post-item {
    @apply flex flex-col overflow-hidden rounded-2xl bg-white border border-ekl-neutral-200 transition-all duration-300 hover:shadow-md hover:-translate-y-1;
}

.ek-tab-post-thumb {
    @apply relative w-full aspect-[16/10] overflow-hidden bg-ekl-neutral-50 shrink-0;

    a {
        @apply block w-full h-full no-underline;
    }

    img {
        @apply w-full h-full object-cover transition-transform duration-500;
    }

    &:hover img {
        @apply scale-105;
    }
}

.ek-tab-post-content {
    @apply flex flex-col flex-1 p-5;
}

.ek-tab-post-title {
    @apply m-0 text-[18px] font-bold leading-[1.3] text-ekl-neutral-900;

    a {
        @apply text-ekl-neutral-900 transition-colors duration-200 hover:text-ekl-red-orange-600 no-underline;
    }
}

.ek-tab-post-meta {
    @apply flex flex-wrap items-center gap-3 mt-2 text-[12px] font-medium text-ekl-neutral-700;

    .ek-tab-post-author,
    .ek-tab-post-date {
        @apply inline-flex items-center gap-1.5;

        a {
            @apply text-ekl-neutral-700 hover:text-ekl-red-orange-600 transition-colors no-underline;
        }

        i {
            @apply text-[11px] opacity-75;
        }
    }
}

.ek-tab-post-excerpt {
    @apply mt-3 text-[14px] leading-[1.6] text-ekl-neutral-700;
}

.ek-no-posts {
    @apply text-ekl-neutral-700 text-[14px] py-10 text-center col-span-full;
}