/* Blog List Page Styles - Design System 2.0 */

/* Blog Card Image Placeholder */
.blog-card-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #D9E5D3 0%, #AFC7A2 50%, #8FA57D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
}

.blog-card-image-placeholder svg {
  width: 64px;
  height: 64px;
  opacity: 0.6;
  color: var(--color-text-muted);
  animation: placeholder-pulse 2s ease-in-out infinite;
}

@keyframes placeholder-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.blog-card-image-actual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Blog Page */
/* Design System: padding-top: 0 !important - hero section handles spacing */
.blog-page {
    /* Gradient background (4-stop) - Design System 2.0 */
    background: linear-gradient(
        180deg,
        var(--color-hero-step-1) 0%,    /* Off White #F8F6EF */
        var(--color-hero-step-2) 25%,    /* #EDEEE5 */
        var(--color-hero-step-3) 60%,    /* #D9E5D3 */
        var(--color-hero-step-4) 100%    /* #A3BC98 - Sage Green variant */
    );
    padding-top: 0 !important;
    /* Override any other rules - hero section handles spacing */
    padding-bottom: var(--spacing-xl);
}

@media (max-width: 768px) {
    .blog-page {
        padding-top: 0 !important;
        /* Override any other rules - hero section handles spacing */
        padding-bottom: var(--spacing-xl);
    }
}

/* Blog Hero - Design System 2.0 */
.blog-hero {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.blog-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Design System 2.0 */
    font-weight: var(--font-weight-h1); /* 800 */
    color: var(--color-deep-sage); /* #4F5D43 */
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.01em; /* +1% tracking */
    font-family: var(--font-family-heading); /* Playfair Display */
    line-height: 1.2;
}

.blog-hero-subtitle {
    font-size: var(--fs-base); /* Fluid base font: 16px mobile → 18px desktop */
    color: var(--color-text-muted); /* rgba(79, 93, 67, 0.7) - improved contrast */
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--line-height-body); /* 1.65 - consistent system-wide */
}

/* Blog Filters - Design System 2.0 */
.blog-filters {
    margin-bottom: var(--spacing-xl); /* Zgodne z shop.css filters-section */
}

.blog-search {
    margin-bottom: var(--spacing-lg); /* Zmniejszone z spacing-xl */
}

.search-form {
    display: flex;
    gap: var(--spacing-md);
    max-width: 600px;
    margin: 0 auto;
    align-items: stretch;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input {
    padding-left: calc(var(--spacing-md) + var(--spacing-button-padding-x) + var(--spacing-sm));
    border: 2px solid var(--color-border); /* Stone Gray #E1E3DE */
    border-radius: var(--radius-input); /* 12px */
    font-size: var(--font-size-body-mobile); /* 16px */
    min-height: var(--tap-target-min); /* 44px - accessibility */
    background: var(--color-pure-white);
    color: var(--color-text-dark);
    font-family: var(--font-family-body); /* Inter */
}

.search-input::placeholder {
    color: var(--color-primary-olive);
    opacity: 0.6;
}

.search-input:focus {
    outline: none;
    border: 2px solid var(--color-primary-olive); /* Primary Olive #6D8259 */
    box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18); /* Focus ring */
}

.search-btn {
    flex-shrink: 0;
    min-width: 120px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .search-form {
        flex-direction: column;
    }
    
    .search-btn {
        width: 100%;
        min-width: auto;
    }
}

.blog-category-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* filter-pill styles are inherited from shop.css */

/* Blog Filter Pills – unify desktop vs mobile presentation */
.blog-filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Mobile: hide inline pills above the list – use bottom sheet instead */
@media (max-width: 767px) {
    .blog-filter-pills {
        display: none;
    }
}

/* Mobile bottom-sheet pills – vertical layout */
.blog-filter-pills--mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Desktop: hide mobile variant (only inline pills visible) */
@media (min-width: 768px) {
    .blog-filter-pills--mobile {
        display: none;
    }
}

/* Blog Posts Grid - Design System 2.0 */
/* Note: public blog list uses <section class="blog-list"> as the articles container.
    We apply the grid to .blog-list as well so cards align in two columns on desktop. */
.blog-posts-grid,
.blog-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg); /* Zgodne z shop.css product-grid mobile */
    margin-bottom: var(--spacing-xl); /* Zgodne z shop.css product-grid */
}

@media (min-width: 640px) {
    .blog-posts-grid,
    .blog-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl); /* Zgodne z shop.css product-grid desktop */
    }
}

@media (min-width: 1024px) {
    .blog-posts-grid,
    .blog-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl); /* Zgodne z shop.css product-grid - ujednolicone */
    }
}

/* Blog List Cards - mobile-first affordances (clickable, hover, tap feedback)
   Scoped to the blog list page so homepage sections can keep their own tuning. */
.blog-list .blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-pure-white);
    border-radius: var(--radius-card);
    overflow: visible;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Menu „…” – dropdown musi wychodzić poza kartę (jak na stronie głównej) */
.blog-list .blog-card.post-menu-open {
    z-index: 50;
    position: relative;
}

.blog-list .blog-card-link {
    display: block;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.blog-list .blog-card:active {
    transform: scale(0.985);
}

@media (hover: hover) {
    .blog-list .blog-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft-hover);
    }
}

/* Focus outline for keyboard users on the main link inside the card */
.blog-list .blog-card-link:focus-visible {
    outline: 2px solid var(--color-primary-olive);
    outline-offset: 4px;
}

/* Featured blog card variant used when we want a card-style
   featured article instead of the full-bleed hero section. */
.blog-card.blog-card--featured {
    margin-bottom: var(--spacing-2xl);
}

.blog-card.blog-card--featured .blog-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.blog-card.blog-card--featured .blog-card-title {
    font-size: var(--font-size-h2);
    line-height: 1.2;
}

.blog-featured-badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--color-primary-olive);
    color: var(--color-pure-white);
    font-size: var(--font-size-small);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 999px;
}

@media (min-width: 768px) {
    .blog-card.blog-card--featured {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: var(--spacing-xl);
        align-items: center;
    }

    .blog-card.blog-card--featured .blog-card-image {
        aspect-ratio: 4 / 3;
    }
}

/* Container-level focus outline for keyboard users when any
   interactive element inside the card receives focus. */
.blog-list .blog-card:focus-within {
    outline: 3px solid rgba(109, 130, 89, 0.4);
    outline-offset: 4px;
}

/* Blog Post Card - Design System 2.0 */
.blog-post-card {
    background: var(--color-pure-white); /* #FFFFFF */
    border-radius: var(--radius-card); /* 22px - premium soft */
    overflow: hidden;
    box-shadow: var(--shadow-soft); /* 0 4px 14px rgba(0,0,0,0.05) */
    border: 1px solid var(--color-border); /* Stone Gray #E1E3DE */
    transition: all var(--transition-base); /* 200ms */
    position: relative;
    z-index: 1;
}

.blog-post-card:hover {
    transform: translateY(-3px); /* Design System 2.0 - allowed for cards */
    box-shadow: var(--shadow-soft-hover); /* 0 8px 24px rgba(0,0,0,0.08) */
    background: var(--color-pure-white); /* Prevent gradient bleed */
}

.blog-post-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-post-image {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: var(--color-stone-gray);
}

@media (max-width: 768px) {
    .blog-post-image {
        height: 200px;
    }
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-post-card:hover .blog-post-image img {
    transform: scale(1.05);
}

.blog-post-content {
    padding: var(--spacing-card-padding); /* 28px - zgodne z .card w design system */
}

.blog-post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.blog-post-category {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm); /* Design System 2.0 badge padding */
    background: var(--color-sage-green); /* #AFC7A2 */
    color: var(--color-deep-sage); /* #4F5D43 */
    border-radius: var(--radius-badge); /* 8px */
    font-size: var(--font-size-small); /* Design System 2.0 badge font-size */
    font-weight: var(--font-weight-bold); /* 700 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-post-date {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.blog-post-title {
    font-size: var(--font-size-h3); /* 32px desktop, 24px mobile */
    font-weight: var(--font-weight-h3); /* 700 */
    color: var(--color-deep-sage); /* #4F5D43 */
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    transition: color var(--transition-fast); /* 150ms */
    font-family: var(--font-family-heading); /* Playfair Display */
}

.blog-post-card:hover .blog-post-title {
    color: var(--color-primary-olive); /* Primary Olive on hover */
}

.blog-post-excerpt {
    font-size: clamp(0.9375rem, 0.9375rem + 0.125vw, 1rem); /* Mobile: 15px → Desktop: 16px - improved readability on mobile */
    color: var(--color-text-muted); /* rgba(79, 93, 67, 0.7) - improved contrast */
    line-height: var(--line-height-body); /* 1.65 - consistent system-wide line-height */
    margin-bottom: var(--spacing-lg);
    font-family: var(--font-family-body); /* Inter */
}

.blog-post-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border); /* Stone Gray */
}

.blog-post-author-avatar {
    width: 32px;
    height: 32px;
}

.blog-post-author-name {
    font-size: var(--font-size-small); /* 13px */
    font-weight: var(--font-weight-medium); /* 500 */
    color: var(--color-text-dark); /* Deep Sage */
    font-family: var(--font-family-body); /* Inter */
}

/* Alias classes for blog-card (used in blog-list.js) */
/* These map to blog-post-card classes for consistency */
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-pure-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

.blog-card-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft-hover);
    background: var(--color-pure-white);
}

/* Bazowa wysokość obrazka w kartach .blog-list (homepage – bez .blog-layout; oryginalne skalowanie) */
.blog-list .blog-card-image {
    position: relative;
    width: 100% !important;
    height: 240px;
    overflow: hidden;
    background-color: var(--color-stone-gray);
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: var(--radius-card);
}

@media (max-width: 768px) {
    .blog-list .blog-card-image {
        height: 200px;
        border-radius: var(--radius-card);
    }
}

/* Karty na stronie listy bloga (/blog/index.html – wewnątrz .blog-layout): przeskalowane, żeby nie wchodziły na sidebar */
.blog-layout .blog-list .blog-card-image {
    position: relative;
    width: 100% !important;
    height: 200px;
    overflow: hidden;
    background-color: var(--color-stone-gray);
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: var(--radius-card);
}

@media (max-width: 768px) {
    .blog-layout .blog-list .blog-card-image {
        height: 160px;
        border-radius: var(--radius-card);
    }
}

@media (min-width: 1024px) {
    .blog-layout .blog-list .blog-card-image {
        height: 200px;
    }
}

.blog-list .blog-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    z-index: 2;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: var(--spacing-card-padding);
}

.blog-layout .blog-list .blog-card-content {
    padding: var(--spacing-md) var(--spacing-lg);
}

.blog-layout .blog-list .blog-card-meta {
    margin-bottom: var(--spacing-xs);
    font-size: 0.8125rem;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.blog-card-meta-likes,
.blog-card-meta-comments {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.blog-card-meta-likes svg,
.blog-card-meta-comments svg {
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.blog-card-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    color: var(--color-deep-sage);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    transition: color var(--transition-fast);
    font-family: var(--font-family-heading);
}

.blog-layout .blog-list .blog-card-title {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    margin-bottom: var(--spacing-sm);
}

.blog-card:hover .blog-card-title {
    color: var(--color-primary-olive);
}

.blog-card-excerpt {
    font-size: clamp(0.9375rem, 0.9375rem + 0.125vw, 1rem);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-body);
}

.blog-layout .blog-list .blog-card-excerpt {
    font-size: var(--font-size-small);
    line-height: 1.45;
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rząd akcji w kartach listy (tylko strona blog) – przeskalowany */
.blog-layout .blog-list .blog-card .post-actions-row {
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.blog-layout .blog-list .blog-card .post-card-action {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8125rem;
}

.blog-layout .blog-list .blog-card .post-card-action svg {
    width: 16px;
    height: 16px;
}

/* Blog card actions row (bottom) – poza linkiem, stała odległość od krawędzi karty */
.blog-card > .blog-card-actions {
    padding: var(--spacing-md) var(--spacing-card-padding);
    margin: 0;
    flex-shrink: 0;
}

.blog-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-md);
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.blog-card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

.blog-card-action svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Blog Layout - Main + Sidebar */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
    .blog-layout {
        grid-template-columns: 1fr 320px;
        gap: var(--spacing-3xl);
    }
}

/* Kolumna główna musi się kurczyć, żeby karty nie wchodziły na sidebar (min-width: 0) */
.blog-layout .blog-content {
    min-width: 0;
}

.blog-layout .blog-main {
    min-width: 0;
}

.blog-layout .blog-list {
    min-width: 0;
}

.blog-layout .blog-list .blog-card {
    min-width: 0;
}

/* Na stronie listy bloga: kolumny siatki mogą się kurczyć (bez overflow w sidebar) */
@media (min-width: 640px) {
    .blog-layout .blog-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .blog-layout .blog-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sticky wymaga braku overflow: hidden u przodków – wymuszenie na stronie blog list */
body:has(main.blog-page) {
    overflow: visible !important;
}
.blog-page .container,
.blog-page .blog-layout {
    overflow: visible !important;
}

/* Blog Sidebar Wrapper – ukryty na mobile, widoczny na desktop */
.blog-sidebar-wrapper {
    display: none;
}

@media (min-width: 1024px) {
    .blog-sidebar-wrapper {
        display: block;
    }
    .blog-sidebar {
        /* Wyrównanie z treścią; sticky w main-combined.css */
        padding-top: var(--spacing-md);
    }
    .blog-page .container,
    .blog-page .blog-layout {
        overflow: visible;
    }
}

/* Popular Articles */
.popular-articles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.popular-article {
    margin-bottom: var(--spacing-lg);
}

.popular-article:last-child {
    margin-bottom: 0;
}

.popular-article-link {
    display: flex;
    gap: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.popular-article-link:hover {
    background: var(--color-off-white);
    transform: translateX(4px);
}

.popular-article-image {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-stone-gray);
    position: relative;
}

.popular-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-article-image .popular-article-image-actual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.popular-article-image .blog-card-image-placeholder {
    /* Ten sam styl co przy zdjęciu: zielony gradient, nie szare tło */
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
}

.popular-article-image .blog-card-image-placeholder svg {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    color: var(--color-deep-sage);
    animation: placeholder-pulse 2s ease-in-out infinite;
}

.popular-article-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popular-article-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.popular-article-link:hover .popular-article-title {
    color: var(--color-primary-olive);
}

.popular-article-meta,
.popular-article-date {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* Category List */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: var(--spacing-sm);
}

.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-dark);
    padding: var(--spacing-sm) 0;
    transition: color var(--transition-fast);
}

.category-link:hover {
    color: var(--color-primary-olive);
}

.category-count {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* Tag Cloud */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.tag-cloud .tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-sage-green);
    /* #AFC7A2 - pastel green matching design */
    color: var(--color-deep-sage);
    /* #4F5D43 - dark text */
    border-radius: var(--radius-full);
    /* Fully rounded like admin tags */
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-body);
    border: 1px solid rgba(79, 93, 67, 0.1);
    /* Subtle border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    text-decoration: none;
    transition: all var(--transition-fast);
}

.tag-cloud .tag:hover {
    background: var(--color-primary-olive);
    color: var(--color-pure-white);
    border-color: var(--color-primary-olive);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(109, 130, 89, 0.15);
}

/* Pagination - Fix button class name */
.blog-page .pagination {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.pagination-button {
    min-width: 44px; /* Zwiększone dla lepszych tap targets */
    min-height: 44px; /* Zwiększone dla lepszych tap targets */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-stone-gray);
    background-color: var(--color-pure-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text-dark);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-ui-label);
    font-family: var(--font-family-body);
}

@media (max-width: 768px) {
    .blog-page .pagination {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-2xl);
        margin-bottom: var(--spacing-xl);
    }
    
    .pagination-button {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--font-size-ui-label);
    }
}

.pagination-button:hover {
    border-color: var(--color-primary-olive);
    color: var(--color-primary-olive);
    background-color: rgba(109, 130, 89, 0.05);
}

.pagination-button.active {
    background-color: var(--color-primary-olive);
    color: var(--color-pure-white);
    border-color: var(--color-primary-olive);
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-button:disabled:hover {
    border-color: var(--color-stone-gray);
    color: var(--color-deep-sage);
    background-color: var(--color-pure-white);
}

/* Blog Pagination Wrapper - Load More + Pagination */
.blog-pagination-wrapper {
    margin-top: var(--spacing-xl);
    /* Same spacing as gap between blog cards (32px) - gap from last card */
    margin-bottom: 0;
    /* Load-more button handles bottom spacing */
}

/* Mobile Pagination Container */
.blog-pagination-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .blog-pagination-mobile {
        display: none;
    }
}

/* Mobile Page Navigation Button */
.blog-page-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-body);
}

@media (min-width: 768px) {
    .blog-page-nav-btn {
        display: none;
    }
}

/* Load More Button (Mobile-first) */
.blog-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 48px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

/* Mobile: Footer is hidden, so no extra margin needed */
@media (max-width: 767px) {
    .blog-load-more {
        margin-bottom: var(--spacing-xl);
        /* Standard spacing - footer is hidden on mobile for blog-page */
    }
}

.blog-load-more-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.blog-load-more-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hidden articles */
.blog-card--hidden {
    display: none;
}

.blog-card--hidden.blog-card--visible {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pagination (Desktop) */
.blog-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-pure-white);
    border-radius: var(--radius-sm);
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    font-family: var(--font-family-body);
    transition: all var(--transition-fast);
}

.pagination-link:hover {
    border-color: var(--color-primary-olive);
    color: var(--color-primary-olive);
    background-color: rgba(109, 130, 89, 0.05);
}

.pagination-link.active,
.pagination-link[aria-current="page"] {
    background-color: var(--color-primary-olive);
    color: var(--color-pure-white);
    border-color: var(--color-primary-olive);
}

.pagination-link--prev,
.pagination-link--next {
    padding: var(--spacing-sm) var(--spacing-md);
}

.pagination-pages {
    display: flex;
    gap: var(--spacing-xs);
}

.pagination-link--page {
    min-width: 44px;
}

/* Mobile: Show Load More, Hide Pagination */
@media (max-width: 767px) {
    .blog-load-more {
        width: 100%;
        display: flex;
        margin-bottom: 0;
        /* Gap is handled by .blog-pagination-mobile */
    }

    .blog-pagination {
        display: none;
    }
}

/* Mobile Pagination Bottom Sheet */
@media (max-width: 767px) {
    .blog-pagination-bottom-sheet {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        pointer-events: none;
    }

    .blog-pagination-bottom-sheet.active {
        pointer-events: all;
    }

    .blog-pagination-bottom-sheet-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 150ms ease-out;
    }

    .blog-pagination-bottom-sheet.active .blog-pagination-bottom-sheet-overlay {
        opacity: 1;
    }

    .blog-pagination-bottom-sheet-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-pure-white);
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        max-width: 480px;
        margin: 0 auto;
        transform: translateY(100%);
        transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-bottom-sheet);
        padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    }

    .blog-pagination-bottom-sheet.active .blog-pagination-bottom-sheet-content {
        transform: translateY(0);
    }

    .blog-pagination-bottom-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--color-border);
    }

    .blog-pagination-bottom-sheet-header h3 {
        margin: 0;
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-dark);
    }

    .blog-pagination-bottom-sheet-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--color-text-dark);
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: background var(--transition-fast);
    }

    .blog-pagination-bottom-sheet-close:active {
        background: var(--color-off-white);
    }

    .blog-pagination-bottom-sheet-body {
        padding: var(--spacing-md);
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .blog-pagination-mobile-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .blog-pagination-mobile-item {
        width: 100%;
        padding: var(--spacing-md);
        text-align: left;
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--color-text-dark);
        font-size: var(--font-size-body);
        font-family: var(--font-family-body);
        cursor: pointer;
        transition: background-color var(--transition-fast);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .blog-pagination-mobile-item:active {
        background: var(--color-off-white);
    }

    .blog-pagination-mobile-item.active {
        background: var(--color-sage-green);
        color: var(--color-deep-sage);
        font-weight: var(--font-weight-semibold);
    }
}

@media (min-width: 768px) {
    .blog-pagination-bottom-sheet {
        display: none !important;
    }
}

/* Desktop: Hide Load More, Show Pagination */
@media (min-width: 768px) {
    .blog-load-more {
        display: none;
    }

    .blog-pagination {
        display: flex;
    }
}

.blog-hero-featured {
  position: relative;
  width: 100%;
  margin-top: 0;
  /* Directly after breadcrumbs - no gap */
  margin-bottom: var(--spacing-xl);
  /* Spacing before blog-page content */
  overflow: hidden;
  min-height: 60vh;
  /* Mobile - Variant A */
  aspect-ratio: 16 / 9;
  /* Fallback for CLS prevention */
  display: flex;
  align-items: flex-end;
  /* Mobile: text at bottom (Variant A) */
  /* Safari fix: No transform needed - link is not wrapper, clean stacking context */
}

@media (min-width: 768px) {
  .blog-hero-featured {
    min-height: 70vh;
    /* Desktop - Variant A */
    margin-bottom: var(--spacing-xl);
    /* Same spacing as between categories and popular sections */
    /* Desktop: text slightly below center (editorial bias) - Variant A */
    align-items: flex-end;
    padding-bottom: 8%;
    /* Creates editorial bias down */
  }
}

/* Variant C - Minimal (uncomment to use, better for very long titles) */
/* Smaller height, more focus on typography */
/*
.blog-hero-featured {
  min-height: 50vh;
}
@media (min-width: 768px) {
  .blog-hero-featured {
    min-height: 55vh;
  }
}
*/

/* Remove margin-bottom from media query above - already defined above */

/* Background Image */
.blog-hero-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Fallback background gradient when no image */
  background: linear-gradient(135deg,
      rgba(109, 130, 89, 0.8) 0%,
      rgba(79, 93, 67, 0.9) 50%,
      rgba(60, 75, 55, 1) 100%);
}

.blog-hero-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback: When no image, use gradient background */
.blog-hero-featured--no-image .blog-hero-featured-image {
  background: linear-gradient(135deg,
      rgba(109, 130, 89, 0.95) 0%,
      rgba(79, 93, 67, 0.98) 50%,
      rgba(60, 75, 55, 1) 100%);
}

.blog-hero-featured--no-image .blog-hero-featured-image img {
  display: none;
}

/* When no image, overlay should be more transparent */
.blog-hero-featured--no-image .blog-hero-featured-overlay {
  background: rgba(0, 0, 0, 0.2);
}

/* When no image, text color stays white (already on dark background) */
.blog-hero-featured--no-image .blog-hero-featured-content {
  color: var(--color-pure-white);
}

/* Alternative: If you want to use light text on light background when no image */
/* Uncomment this if you prefer dark text on light gradient background */
/*
.blog-hero-featured--no-image .blog-hero-featured-content {
  color: var(--color-text-dark);
}

.blog-hero-featured--no-image .blog-hero-featured-title,
.blog-hero-featured--no-image .blog-hero-featured-excerpt,
.blog-hero-featured--no-image .blog-hero-featured-meta,
.blog-hero-featured--no-image .blog-hero-featured-eyebrow {
  color: var(--color-text-dark);
}

.blog-hero-featured--no-image .blog-hero-featured-category {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
}
*/

/* Dark Overlay for Text Readability */
/* Variant A - Editorial/Magazine (default) - gradient only where text is */
/* Safer UX - works with any image quality */
.blog-hero-featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
  /* Allow clicks to pass through */
}

/* Variant B - Brand/Atmosphere (more emotional, requires curated images) */
/* Uncomment to use - WARNING: requires high-quality, curated images */
/*
.blog-hero-featured-overlay {
  background: linear-gradient(
    to bottom,
    rgba(109, 130, 89, 0.35) 0%,
    rgba(79, 93, 67, 0.55) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
}
*/

/* Variant C - Minimal/Typography-first (subtle overlay, best for long titles) */
/* Uncomment to use - best for very long titles */
/*
.blog-hero-featured-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.65) 100%
  );
}
*/

/* Safari fix: Link moved from wrapper to title only to avoid WebKit stacking context bug */
/* Invisible click layer for full-section clickability (UX enhancement) */
.hero-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Invisible - just for click target */
  background: transparent;
  cursor: pointer;
  /* Hidden from screen readers - main link is on title */
}

/* Title link - semantic, accessible link */
.blog-hero-featured-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
  outline: none;
}

.blog-hero-featured-title-link:focus-visible {
  outline: 3px solid var(--color-pure-white);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Content Overlay - Text positioned at bottom (mobile) / 55-60% (desktop) */
/* Safari fix: Clean stacking context - no transform needed, link is not wrapper */
.blog-hero-featured-content {
  position: relative;
  z-index: 3;
  /* Above overlay (1) and click layer (2) */
  width: 100%;
  padding: var(--spacing-2xl) var(--container-padding-mobile);
  color: var(--color-pure-white);
  /* Clean stacking - no transform hacks needed */
}

@media (min-width: 768px) {
  .blog-hero-featured-content {
    padding: var(--spacing-3xl) var(--container-padding);
  }
}

/* Editorial Eyebrow - "Wyróżniony artykuł" (Variant A - Editorial/Magazine) */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-sm);
    opacity: 0.95;
}

/* Meta Information - Always visible on both mobile and desktop */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.blog-hero-featured-category {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(109, 130, 89, 0.9);
  color: var(--color-pure-white);
  border-radius: var(--radius-badge);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* Typography - Hero Title (Editorial Quality) */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 5.2vw, 3rem);
  /* Mobile: 24px → Desktop: 48px - reduced min for better mobile fit */
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Consistent with card titles */
  margin: 0 0 0.5rem 0;
  max-width: var(--reading-width);
  /* Optimal reading width */
  color: var(--color-pure-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Stronger shadow for better contrast */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Maximum 3 lines for long titles */
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Very small screens: further reduce hero title to prevent 4-5 line titles */
@media (max-width: 360px) {
  .blog-hero-featured-title {
    font-size: clamp(1.375rem, 6vw, 2rem);
    /* 22px min for tiny phones (320px) - prevents excessive line wrapping */
  }
}

.blog-hero-featured-title-link {
  color: inherit;
  text-decoration: none;
  /* Inherit text-shadow and other styles from parent */
}

/* Typography - Excerpt */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-excerpt {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
  /* Mobile: 16px → Desktop: 20px */
  line-height: 1.65;
  /* Consistent with article body - improved readability */
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: var(--reading-width);
  /* Optimal reading width: 65ch */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .blog-hero-featured-excerpt {
    line-height: 1.7;
    /* More breathing room on desktop - editorial gold standard */
  }
}

/* Conditional Excerpt - Hide for long titles */
.blog-hero-featured.is-long-title .blog-hero-featured-excerpt {
  display: none;
}

/* Legacy blog-featured styles removed - replaced with .blog-hero-featured */