/* ============================================================
   MICHLOR — Blog Listing CSS
   Klasy: .mblog-* (michlor-blog)
   ============================================================ */

/* ── Logo w hero bloga ───────────────────────────────────── */
.mblog-hero-logo {
    margin-bottom: 1.5rem;
}

.mblog-hero-logo img {
    max-height:  48px;
    width:       auto;
    display:     block;
}

.mblog-hero-logo .mhdr__logo-text {
    font-family:    var(--font-heading);
    font-size:      1.75rem;
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          var(--color-text);
}

/* ── Filtry kategorii ────────────────────────────────────── */
.mblog-cats {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.5rem;
    margin-bottom: 2.5rem;
}

.mblog-cat {
    display:         inline-flex;
    align-items:     center;
    gap:             0.375rem;
    padding:         0.4rem 0.875rem;
    font-size:       0.8125rem;
    font-weight:     500;
    color:           var(--color-muted);
    background:      var(--glass-bg);
    border:          1px solid rgba(255, 255, 255, 0.08);
    border-radius:   var(--radius-pill);
    text-decoration: none;
    transition:      background-color var(--transition-fast),
                     color            var(--transition-fast),
                     border-color     var(--transition-fast);
}

.mblog-cat:hover,
.mblog-cat--active {
    background-color: rgba(0, 180, 166, 0.1);
    border-color:     var(--glass-border);
    color:            var(--color-accent);
}

.mblog-cat__count {
    font-size:      0.7rem;
    padding:        0.1rem 0.35rem;
    background:     rgba(0, 180, 166, 0.15);
    border-radius:  var(--radius-pill);
    color:          var(--color-accent);
    font-weight:    600;
}

/* ── Grid kart ───────────────────────────────────────────── */
.mblog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   1.5rem;
    margin-bottom:         3rem;
}

/* ── Karta artykułu ──────────────────────────────────────── */
.mblog-card {
    background:      var(--glass-bg);
    border:          1px solid var(--glass-border);
    border-radius:   var(--radius-lg);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    backdrop-filter: var(--glass-blur);
    transition:      border-color var(--transition-base),
                     transform    var(--transition-base),
                     box-shadow   var(--transition-base);
}

.mblog-card:hover {
    border-color: rgba(0, 180, 166, 0.35);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-card);
}

/* Thumbnail */
.mblog-card__thumb {
    display:  block;
    position: relative;
    overflow: hidden;
    height:   210px;
    flex-shrink: 0;
}

.mblog-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display:    block;
}

.mblog-card:hover .mblog-card__img {
    transform: scale(1.04);
}

.mblog-card__placeholder {
    width:           100%;
    height:          100%;
    background:      linear-gradient(135deg, var(--color-bg-card) 0%, #0e2d48 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-accent);
    opacity:         0.5;
}

.mblog-card__cat {
    position:       absolute;
    bottom:         0.875rem;
    left:           0.875rem;
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-bg);
    background:     var(--color-accent);
    padding:        0.25rem 0.625rem;
    border-radius:  var(--radius-pill);
}

/* Treść karty */
.mblog-card__body {
    padding:        1.375rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.mblog-card__meta {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    flex-wrap:   wrap;
}

.mblog-card__date,
.mblog-card__read {
    font-size:  0.78rem;
    color:      var(--color-muted);
}

.mblog-card__date {
    opacity: 0.8;
}

.mblog-card__read::before {
    content: '·';
    margin-right: 0.875rem;
    opacity: 0.4;
}

.mblog-card__title {
    font-family:    var(--font-heading);
    font-size:      1.0625rem;
    font-weight:    700;
    letter-spacing: var(--letter-heading);
    line-height:    1.3;
    margin:         0;
}

.mblog-card__title a {
    color:           var(--color-text);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.mblog-card__title a:hover {
    color: var(--color-accent);
}

.mblog-card__excerpt {
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.65;
    margin:      0;
    flex:        1;
}

.mblog-card__more {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    font-size:       0.8125rem;
    font-weight:     500;
    color:           var(--color-accent);
    text-decoration: none;
    margin-top:      0.25rem;
    transition:      gap var(--transition-fast);
}

.mblog-card__more:hover {
    gap:   0.65rem;
    color: var(--color-accent-glow);
}

/* ── Paginacja ───────────────────────────────────────────── */
.mblog-pagination {
    display:         flex;
    justify-content: center;
    margin-top:      1rem;
}

.mblog-pagination .page-numbers {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.375rem;
    align-items: center;
}

.mblog-pagination .page-numbers li a,
.mblog-pagination .page-numbers li span {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.25rem;
    height:          2.25rem;
    padding:         0 0.625rem;
    background:      var(--glass-bg);
    border:          1px solid rgba(255, 255, 255, 0.08);
    border-radius:   var(--radius-sm);
    color:           var(--color-muted);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    transition:      background-color var(--transition-fast),
                     color            var(--transition-fast),
                     border-color     var(--transition-fast);
}

.mblog-pagination .page-numbers li a:hover {
    background-color: rgba(0, 180, 166, 0.08);
    border-color:     var(--glass-border);
    color:            var(--color-accent);
}

.mblog-pagination .page-numbers li span.current {
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
    color:            var(--color-bg);
}

/* ── Stan pusty ──────────────────────────────────────────── */
.mblog-empty {
    text-align:      center;
    padding:         5rem 2rem;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             1rem;
    max-width:       500px;
    margin:          0 auto;
}

.mblog-empty__icon {
    width:           80px;
    height:          80px;
    border-radius:   50%;
    background:      rgba(0, 180, 166, 0.08);
    border:          1px solid rgba(0, 180, 166, 0.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-accent);
    opacity:         0.7;
    margin-bottom:   0.5rem;
}

.mblog-empty__title {
    font-family:    var(--font-heading);
    font-size:      1.75rem;
    font-weight:    700;
    color:          var(--color-text);
    margin:         0;
    letter-spacing: var(--letter-heading);
}

.mblog-empty__sub {
    font-size:   1rem;
    color:       var(--color-muted);
    line-height: var(--line-height-body);
    margin:      0;
}

/* ── Licznik wyników (category archive) ──────────────────── */
.mblog-results-info {
    font-size:     0.875rem;
    color:         var(--color-muted);
    margin-bottom: 1.5rem;
    opacity:       0.8;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .mblog-grid {
        grid-template-columns: 1fr;
    }
}