/* ============================================================
   branike/posts — style.css  (BB verzia, adaptovaná z branike-posts v1.0.9)
   ============================================================ */

/* ── CSS premenné — defaults ────────────────────────────────── */
.bb-posts {
    --bb-ps-accent: var(--bb-primary, #7C3AED);
    --bb-ps-cols-d:   3;
    --bb-ps-cols-t:   2;
    --bb-ps-cols-m:   1;
    --bb-ps-gap:      24px;
    --bb-ps-radius:   10px;
    --bb-ps-ratio:    16/9;
    --bb-ps-card-gap: 8px;
}

/* ── LAYOUT: grid ─────────────────────────────────────────── */
.bb-posts.bb-ps-layout-grid,
.bb-posts.bb-ps-layout-masonry {
    display:               grid;
    grid-template-columns: repeat( var(--bb-ps-cols-d), 1fr );
    gap:                   var(--bb-ps-gap);
}

/* ── LAYOUT: list ─────────────────────────────────────────── */
.bb-posts.bb-ps-layout-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--bb-ps-gap);
}

.bb-posts.bb-ps-layout-list .bb-ps__card {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            1.2rem;
}

.bb-posts.bb-ps-layout-list .bb-ps__img-wrap {
    flex-shrink: 0;
    width:       200px;
}

/* ── LAYOUT: masonry ──────────────────────────────────────── */
.bb-posts.bb-ps-layout-masonry {
    align-items: start;
}

/* ── LAYOUT: carousel ─────────────────────────────────────── */
.bb-posts.bb-ps-layout-carousel {
    position: relative;
    overflow: hidden;
}

.bb-posts.bb-ps-layout-carousel .bb-ps__carousel-track {
    display:    flex;
    gap:        var(--bb-ps-gap);
    transition: transform .4s ease;
    will-change: transform;
}

.bb-posts.bb-ps-layout-carousel .bb-ps__card {
    flex:        0 0 calc( (100% - (var(--bb-ps-cols-d) - 1) * var(--bb-ps-gap)) / var(--bb-ps-cols-d) );
    min-width:   0;
}

.bb-posts .bb-ps__carousel-prev,
.bb-posts .bb-ps__carousel-next {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,.45);
    color:           #fff;
    border:          none;
    border-radius:   50%;
    width:           2.4rem;
    height:          2.4rem;
    font-size:       1.4em;
    line-height:     1;
    cursor:          pointer;
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s;
}
.bb-posts .bb-ps__carousel-prev:hover,
.bb-posts .bb-ps__carousel-next:hover { background: rgba(0,0,0,.7); }
.bb-posts .bb-ps__carousel-prev:disabled,
.bb-posts .bb-ps__carousel-next:disabled { opacity: .3; cursor: default; }
.bb-posts .bb-ps__carousel-prev { left:  .5rem; }
.bb-posts .bb-ps__carousel-next { right: .5rem; }

.bb-posts .bb-ps__carousel-dots {
    display:         flex;
    justify-content: center;
    gap:             .4rem;
    margin-top:      1rem;
}

.bb-posts .bb-ps__carousel-dot {
    width:        .55rem;
    height:       .55rem;
    border-radius: 50%;
    background:    rgba(0,0,0,.2);
    border:        none;
    cursor:        pointer;
    padding:       0;
    transition:    background .2s;
}
.bb-posts .bb-ps__carousel-dot.is-active { background: var(--bb-ps-accent); }

/* ── Karta ────────────────────────────────────────────────── */
.bb-posts .bb-ps__card {
    background:     var(--bb-ps-card-bg, var(--theme-palette-color-8, #fff));
    border-radius:  var(--bb-ps-radius);
    border:         1px solid var(--bb-ps-border, transparent);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    position:       relative;
    transition:     transform .25s, box-shadow .25s;
}

/* Tieň */
.bb-posts.bb-ps-shadow-sm .bb-ps__card { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.bb-posts.bb-ps-shadow-md .bb-ps__card { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.bb-posts.bb-ps-shadow-lg .bb-ps__card { box-shadow: 0 8px 28px rgba(0,0,0,.18); }

/* Hover efekty */
.bb-posts.bb-ps-hover-lift .bb-ps__card:hover           { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.bb-posts.bb-ps-hover-glow .bb-ps__card:hover           { box-shadow: 0 0 0 3px var(--bb-ps-accent); }
.bb-posts.bb-ps-hover-scale-img .bb-ps__card:hover .bb-ps__img { transform: scale(1.07); }

/* Clickable overlay */
.bb-posts.bb-ps-clickable .bb-ps__card { cursor: pointer; }
.bb-posts .bb-ps__overlay-link {
    position: absolute;
    inset:    0;
    z-index:  1;
}
.bb-posts .bb-ps__more { position: relative; z-index: 2; }

/* ── Featured badge ───────────────────────────────────────── */
.bb-posts .bb-ps__badge {
    position:     absolute;
    top:          .6rem;
    right:        .6rem;
    z-index:      3;
    background:   var(--bb-ps-accent);
    color:        #fff;
    font-size:    .7em;
    font-weight:  700;
    padding:      2px 8px;
    border-radius: 999px;
    pointer-events: none;
}

/* ── Obrázok ──────────────────────────────────────────────── */
.bb-posts .bb-ps__img-wrap {
    overflow:      hidden;
    flex-shrink:   0;
    aspect-ratio:  var(--bb-ps-ratio);
    position:      relative;
}

.bb-posts .bb-ps__img-link { display: block; }

.bb-posts .bb-ps__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .3s ease;
}

.bb-posts .bb-ps__card:hover .bb-ps__img { transform: scale(1.03); }

/* Image overlay */
.bb-posts .bb-ps__img-overlay {
    position:   absolute;
    inset:      0;
    background: #000;
    pointer-events: none;
}

/* Image placeholder */
.bb-posts .bb-ps__img-placeholder {
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, #e2e8f0 25%, #f8fafc 100%);
}

/* ── Body ─────────────────────────────────────────────────── */
.bb-posts .bb-ps__body {
    padding: 1rem 1.1rem .4rem;
    display: flex;
    flex-direction: column;
    gap:     var(--bb-ps-card-gap);
    flex:    1;
}

/* ── Kategórie / termy ────────────────────────────────────── */
.bb-posts .bb-ps__cats {
    display:  flex;
    gap:      .4rem;
    flex-wrap: wrap;
}

.bb-posts .bb-ps__cat {
    font-size:       .75em;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    color:           var(--bb-ps-accent);
    text-decoration: none;
    background:      rgba(124,58,237,.1);
    padding:         2px 8px;
    border-radius:   999px;
}

.bb-posts .bb-ps__cat:hover { background: rgba(124,58,237,.2); }

/* ── Nadpis ───────────────────────────────────────────────── */
.bb-posts .bb-ps__title {
    margin:      0;
    font-size:   1.05em;
    font-weight: 700;
    line-height: 1.35;
}

.bb-posts .bb-ps__title a {
    color:           inherit;
    text-decoration: none;
}

.bb-posts .bb-ps__title a:hover { color: var(--bb-ps-accent); }

/* ── Meta ─────────────────────────────────────────────────── */
.bb-posts .bb-ps__meta {
    display:  flex;
    gap:      .75rem;
    flex-wrap: wrap;
    font-size: .8em;
    color:     var(--bb-ps-meta, inherit);
    opacity:   .65;
}

/* ── Excerpt ──────────────────────────────────────────────── */
.bb-posts .bb-ps__excerpt {
    font-size:   .88em;
    line-height: 1.6;
    opacity:     .8;
    margin:      0;
}

.bb-posts .bb-ps__excerpt p { margin: 0; }

/* ── CTA odkaz ────────────────────────────────────────────── */
.bb-posts .bb-ps__more {
    display:         inline-block;
    margin:          0 1.1rem 1rem;
    font-size:       .85em;
    font-weight:     600;
    color:           var(--bb-ps-accent);
    text-decoration: none;
    transition:      color .2s;
}

.bb-posts .bb-ps__more--filled {
    background:    var(--bb-ps-btn-bg, var(--bb-ps-accent));
    color:         var(--bb-ps-btn-txt, #fff);
    padding:       .45em 1.1em;
    border-radius: var(--bb-ps-radius);
    margin-bottom: 1rem;
}

.bb-posts .bb-ps__more--outlined {
    border:        2px solid var(--bb-ps-btn-bg, var(--bb-ps-accent));
    color:         var(--bb-ps-btn-bg, var(--bb-ps-accent));
    padding:       .4em 1.1em;
    border-radius: var(--bb-ps-radius);
    margin-bottom: 1rem;
}

.bb-posts .bb-ps__more:hover { text-decoration: underline; }
.bb-posts .bb-ps__more--filled:hover,
.bb-posts .bb-ps__more--outlined:hover { text-decoration: none; opacity: .85; }

/* ── Filter bar ───────────────────────────────────────────── */
.bb-posts .bb-ps__filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    gap:             .4rem;
    margin-bottom:   1rem;
    grid-column:     1 / -1;
}

.bb-posts .bb-ps__filter-btn {
    background:   transparent;
    border:       1px solid var(--bb-ps-border, var(--bb-border, #d1d5db));
    border-radius: 999px;
    padding:      .3em .9em;
    font-size:    .85em;
    cursor:       pointer;
    transition:   background .2s, color .2s;
    line-height:  1.4;
}

.bb-posts .bb-ps__filter-btn:hover {
    background: rgba(124,58,237,.08);
    border-color: var(--bb-ps-accent);
    color: var(--bb-ps-accent);
}

.bb-posts .bb-ps__filter-btn.is-active {
    background: var(--bb-ps-accent);
    border-color: var(--bb-ps-accent);
    color:  #fff;
}

.bb-posts .bb-ps__filter-count {
    font-size: .8em;
    opacity:   .7;
}

/* ── Sort bar ─────────────────────────────────────────────── */
.bb-posts .bb-ps__sort-bar {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           .35rem;
    margin-bottom: .75rem;
    grid-column:   1 / -1;
    font-size:     .85em;
}

.bb-posts .bb-ps__sort-label {
    font-weight: 600;
    opacity:     .7;
    margin-right: .2rem;
}

.bb-posts .bb-ps__sort-btn {
    background:   transparent;
    border:       1px solid var(--bb-ps-border, var(--bb-border, #d1d5db));
    border-radius: 999px;
    padding:      .2em .8em;
    font-size:    .85em;
    cursor:       pointer;
    transition:   background .2s, color .2s;
}

.bb-posts .bb-ps__sort-btn:hover {
    background: rgba(124,58,237,.08);
    border-color: var(--bb-ps-accent);
}

.bb-posts .bb-ps__sort-btn.is-active {
    background:   var(--bb-ps-accent);
    border-color: var(--bb-ps-accent);
    color:        #fff;
}

/* ── No results ───────────────────────────────────────────── */
.bb-posts .bb-ps__no-results,
.bb-posts__empty {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     2rem;
    opacity:     .6;
    font-size:   .95em;
}

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes bb-ps-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.bb-ps__skeleton {
    background:           linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size:      800px 100%;
    animation:            bb-ps-shimmer 1.4s infinite linear;
    border-radius:        6px;
}

.bb-ps__skeleton-card {
    background:    var(--bb-ps-card-bg, var(--theme-palette-color-8, #fff));
    border-radius: var(--bb-ps-radius);
    overflow:      hidden;
}

.bb-ps__skeleton--image {
    width:        100%;
    aspect-ratio: var(--bb-ps-ratio);
}

.bb-ps__skeleton-body { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.bb-ps__skeleton--meta  { height: 12px; width: 45%; border-radius: 4px; }
.bb-ps__skeleton--title { height: 20px; width: 85%; border-radius: 4px; }
.bb-ps__skeleton--line  { height: 12px; width: 100%; border-radius: 4px; }
.bb-ps__skeleton--short { width: 65%; }

/* ── Loader ───────────────────────────────────────────────── */
.bb-posts .bb-ps__loading { padding: 40px; text-align: center; }

/* ── Responzívnosť ────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .bb-posts.bb-ps-layout-grid,
    .bb-posts.bb-ps-layout-masonry {
        grid-template-columns: repeat( var(--bb-ps-cols-t), 1fr );
    }
    .bb-posts.bb-ps-layout-carousel .bb-ps__card {
        flex-basis: calc( (100% - (var(--bb-ps-cols-t) - 1) * var(--bb-ps-gap)) / var(--bb-ps-cols-t) );
    }
}

@media ( max-width: 560px ) {
    .bb-posts.bb-ps-layout-grid,
    .bb-posts.bb-ps-layout-masonry {
        grid-template-columns: repeat( var(--bb-ps-cols-m), 1fr );
    }
    .bb-posts.bb-ps-layout-list .bb-ps__card {
        flex-direction: column;
    }
    .bb-posts.bb-ps-layout-list .bb-ps__img-wrap {
        width: 100%;
    }
    .bb-posts.bb-ps-layout-carousel .bb-ps__card {
        flex-basis: calc( (100% - (var(--bb-ps-cols-m) - 1) * var(--bb-ps-gap)) / var(--bb-ps-cols-m) );
    }
}