:root {
  --pages-blog-tone-01: transparent;
}
/* ===========================
   BLOG PAGE STYLES
   Modern redesign using app CSS variables
   =========================== */

/* SIDEBAR STYLES */
.sidebar {
  position: sticky;
  top: 10px;
  z-index: 10;
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  justify-self: start;
  align-self: flex-start;
}

.sidebar-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "popular"
    "most-liked"
    "blog-pagination";
  gap: 20px;
}

.popular {
  grid-area: popular;
}

.most-liked {
  grid-area: most-liked;
}

.blog-pagination {
  grid-area: blog-pagination;
}

/* LAYOUT GRID */
.blog {
  padding: 50px 0;
}

.blog-wrapper {
  position: relative;
  margin-inline: auto;
  min-height: 100%;
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "sidebar filter"
    "sidebar info"
    "sidebar posts";
  gap: 20px;
}

.sections.blog {
  width: 100%;
  margin-inline: auto;
  padding: 0px;
  align-items: start;
}

/* INFO BAR (Prikazano + Layout Select) */
.blog-info-bar {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.blog-info-bar .pagination-info {
  justify-self: flex-start;
}
.blog-info-bar .layout-select {
  flex-shrink: 0;
}

/* POST CARDS */
.posts-wrapper {
  position: relative;
  grid-area: posts;
  height: 100%;
}

.sections.blog .posts {
  display: grid;
  position: relative;
  gap: 24px;
  height: 100%;
}

.sections.blog .posts .blog-post-card {
  width: 100%;
  background: var(--app);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow-black-06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  justify-self: flex-start;
  align-self: flex-start;

}

.sections.blog .posts .blog-post-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sections.blog .posts .blog-post-card:hover::before {
  transform: scaleY(1);
}

.sections.blog .posts .blog-post-card:hover {
  box-shadow: 0 12px 32px var(--shadow-primary-20);
  transform: translateY(-8px);
  border-color: var(--border-primary-alpha-35);
}

.sections.blog .posts .blog-post-article {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 220px;
  grid-template-rows: .1fr auto auto;
  grid-template-areas:
    "heading img"
    "content img"
    "aside img";
  gap: 0;
  padding: 0;
}

.blog-post-article.noimg {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "heading"
    "content"
    "aside";
}

.sections.blog .posts .blog-post-content {
  grid-area: content;
}

.sections.blog .posts .blog-post-image {
  grid-area: img;
  position: relative;
}

/* POST COMPONENTS */
.blog-post-heading,
.blog-post-content,
.blog-post-footer {
  padding: 20px;
}

.blog-post-heading {
  grid-area: heading;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-post-heading h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--font);
  line-height: 1.3;
  margin: 0;
  transition: color 0.3s ease;
}

.blog-post-card:hover h2 {
  color: var(--primary-teal);
}

.flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-date {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-category {
  background: var(--gold);
  padding: 4px 12px;
  color: var(--font-sec);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 2px 8px var(--shadow-primary-20);
}

.date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--font-four);
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1;
}

.date svg {
  fill: var(--font-four);
  width: 16px;
  height: 16px;
}

.date p {
  margin: 0;
  line-height: 1;
}

.blog-post-content {
  grid-area: content;
  padding: 0 20px;
}

.blog-post-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--font-four);
  margin: 0;
}

.blog-stats {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 24px;
  background: var(--app);
  box-shadow: 0 4px 12px var(--shadow-black-12);
  backdrop-filter: blur(8px);
}

.blog-stats span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--font-four);
  font-size: 0.9rem;
  font-weight: 500;
}

.blog-stats svg {
  width: 18px;
  height: 18px;
  fill: var(--font-four);
}

.blog-post-image {
  grid-area: img;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
}

.blog-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.blog-post-footer {
  grid-area: aside;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-top: 20px;
}

/* BUTTON STYLES */
.read-more,
.visit-page {
  background: none;
  color: var(--font);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.read-more svg,
.visit-page svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
}
.read-more #fill,
.visit-page #fill {
  color: var(--font-four);
  transition: color 0.3s ease;
}

.read-more::after,
.visit-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.read-more:hover,
.visit-page:hover {
  color: var(--font-sec);
  box-shadow: 0 4px 16px var(--shadow-primary-25);
}

.read-more:hover::after,
.visit-page:hover::after {
  left: 0;
}

.read-more:hover #fill,
.visit-page:hover #fill {
  color: var(--font-sec);
}

.read-more span,
.visit-page span {
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* ANIMATIONS */
@keyframes heartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

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

/* POPULAR POSTS */
.popular {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--app);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px var(--shadow-black-08);
  transition: all 0.3s ease;
}

.popular:hover {
  box-shadow: 0 8px 24px var(--shadow-primary-20);
  transform: translateY(-2px);
  border-color: var(--border-primary-alpha-20);
}

.popular-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--bg-primary-alpha-08);
}

.popular-header svg {
  min-width: 24px;
  max-width: 24px;
  max-height: 24px;
  min-height: 24px;
  fill: var(--primary-teal);
}

.popular-header #heart-svg #heart {
  fill: var(--red-solid);
}

.popular-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--font);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--pages-blog-tone-01);
  background-clip: text;
}

.popular-posts {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.popular-posts-scroll {
  overflow-y: auto;
  max-height: 220px;
  width: 100%;
  min-height: 220px;
  padding-right: 5px;
}

.popular-posts-scroll::-webkit-scrollbar {
  width: 5px;
}

.popular-posts-scroll::-webkit-scrollbar-track {
  background: var(--bg-primary-alpha-03);
  border-radius: 10px;
}

.popular-posts-scroll::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 10px;
}

.popular-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.popular-posts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popular-post {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-primary-alpha-03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.popular-post:hover {
  background: var(--bg-primary-alpha-08);
  transform: translateX(5px);
  box-shadow: 0 4px 12px var(--shadow-primary-15);
}

.popular-post h4 {
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  color: var(--font);
  transition: color 0.3s ease;
  font-weight: 500;
}

.popular-post h4:hover {
  color: var(--primary-teal);
}

.popular-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--font-four);
  white-space: nowrap;
}

.popular-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.popular-meta svg {
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  fill: var(--font-four);
}

.popular-meta p {
  color: var(--font-four);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */
@media (max-width: 1366px) {
    .sections.blog {
        width: 95%;
        margin-inline: auto;
    }

    .sections.blog .blog-post-heading {
        justify-self: start;
    }

    .sections.blog .posts .blog-post-article {
        width: 100%;
    }

    .blog-wrapper {
        max-width: unset;
        width: 100%;
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "filter filter"
            "sidebar info"
            "sidebar posts";
        gap: 10px 25px;
    }

    .sidebar {
        top: 85px;
    }

    .posts-wrapper {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .sections.blog {
        width: 98%;
    }

    .sections.blog .blog-post-heading {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-top: 0;
    }

    .blog-wrapper {
        max-width: unset;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "sidebar"
            "filter"
            "info"
            "posts";
        gap: 10px;
    }

    .sidebar {
        position: relative;
        top: unset;
    }

    .search {
        min-width: 250px;
    }

    

    .sidebar-wrapper {
        flex-direction: row;
    }

    .sidebar-wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "popular most-liked"
            "blog-pagination blog-pagination";
        gap: 20px;
    }


}




@media (max-width: 768px) {
    .sidebar-wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "popular"
            "most-liked"
            "blog-pagination";
        gap: 20px;
    }

    .sections.blog .posts .blog-post-card .blog-post-article {
        grid-template-columns: 1fr;
        padding: 0;
        grid-template-rows: 240px auto auto auto;
        grid-template-areas:
            "img"
            "heading"
            "content"
            "aside";
    }

    .blog-post-image {
        max-height: 240px;
    }

    .blog-post-heading,
    .blog-post-content,
    .blog-post-footer {
        padding: 16px;
    }

    .blog-post-heading h2 {
        font-size: 1.3rem;
    }

    .blog-stats {
        right: 8px;
        bottom: 8px;
        padding: 6px 10px;
        gap: 8px;
    }

    .read-more,
    .visit-page {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .sections.blog {
        padding: 20px 0;
    }

    .blog-wrapper {
        gap: 16px;
    }

    .sections.blog .posts {
        gap: 16px;
    }

    .sections.blog .posts .blog-post-card {
        border-radius: 12px;
    }

    .blog-post-heading h2 {
        font-size: 1.2rem;
    }

    .post-category {
        font-size: 0.8rem;
        padding: 3px 10px;
    }

    .date {
        font-size: 0.85rem;
    }

    .popular-posts-scroll {
        max-height: 180px;
        min-height: 180px;
    }
}

/* ===========================
   SKELETON LOADING
   =========================== */
@keyframes skeletonShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.blog-skeleton-list {
  display: grid;
  gap: 24px;
  width: 100%;
}

.blog-skeleton-card {
  width: 100%;
  background: var(--app);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

/* Default card layout: image on right side */
.blog-skeleton-article {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 220px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "heading img"
    "content img"
    "aside img";
  gap: 0;
}

.blog-skeleton-heading {
  grid-area: heading;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-skeleton-content {
  grid-area: content;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-skeleton-footer {
  grid-area: aside;
  padding: 0 20px 20px;
  display: flex;
  gap: 16px;
}

.blog-skeleton-image {
  grid-area: img;
  width: 100%;
  min-height: 180px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-primary-alpha-08) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

/* Grid skeleton layouts: image on top, vertical stacking */
.blog-skeleton-list.layout-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.blog-skeleton-list.layout-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.blog-skeleton-list.layout-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid-4: compact cards — hide extra lines to keep proportions */
.blog-skeleton-list.layout-grid-4 .skel-title-2 {
  display: none;
}

.blog-skeleton-list.layout-grid-4 .blog-skeleton-content .skel-text:last-of-type,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-content .skel-text-short {
  display: none;
}

.blog-skeleton-list.layout-grid-2 .blog-skeleton-article,
.blog-skeleton-list.layout-grid-3 .blog-skeleton-article,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-article {
  grid-template-columns: 1fr;
  grid-template-rows: 180px auto auto auto;
  grid-template-areas:
    "img"
    "heading"
    "content"
    "aside";
}

.blog-skeleton-list.layout-grid-3 .blog-skeleton-article,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-article {
  grid-template-rows: 140px auto auto auto;
}

.blog-skeleton-list.layout-grid-3 .blog-skeleton-image,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-image {
  min-height: 140px;
}

.blog-skeleton-list.layout-grid-4 .blog-skeleton-heading,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-content,
.blog-skeleton-list.layout-grid-4 .blog-skeleton-footer {
  padding: 12px;
}

/* List skeleton layout: compact single row */
.blog-skeleton-list.layout-list {
  gap: 6px;
}

.blog-skeleton-list.layout-list .blog-skeleton-card {
  border-radius: 10px;
}

.blog-skeleton-list.layout-list .blog-skeleton-article {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "heading aside";
  align-items: center;
}

.blog-skeleton-list.layout-list .blog-skeleton-heading {
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-skeleton-list.layout-list .blog-skeleton-footer {
  padding: 8px 16px;
  gap: 8px;
}

.blog-skeleton-list.layout-list .skel-title {
  width: 40%;
  height: 18px;
}

/* Popular posts skeleton */
.popular-posts-wrapper.popular-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.popular-post-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.popular-post-skeleton:last-child {
  border-bottom: none;
}

.skel-line.skel-pop-title {
  height: 16px;
  width: 85%;
}

.skel-line.skel-pop-meta {
  height: 12px;
  width: 35%;
}

.skel-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-primary-alpha-08) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

.skel-line.skel-title {
  height: 22px;
  width: 70%;
}

.skel-line.skel-title-2 {
  height: 22px;
  width: 45%;
}

.skel-line.skel-category {
  height: 16px;
  width: 30%;
}

.skel-line.skel-date {
  height: 14px;
  width: 45%;
}

.skel-line.skel-text {
  height: 14px;
  width: 90%;
}

.skel-line.skel-text-short {
  height: 14px;
  width: 65%;
}

.skel-line.skel-btn {
  height: 36px;
  width: 120px;
  border-radius: 8px;
}

/* .skel-img no longer used — shimmer applied directly to .blog-skeleton-image */

/* Admin skeleton extra */
.skel-line.skel-status {
  height: 20px;
  width: 80px;
  border-radius: 20px;
}

.skel-line.skel-action {
  height: 32px;
  width: 80px;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .blog-skeleton-list.layout-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-skeleton-article {
    grid-template-columns: 1fr;
    grid-template-rows: 240px auto auto auto;
    grid-template-areas:
      "img"
      "heading"
      "content"
      "aside";
  }
  .blog-skeleton-image {
    min-height: 240px;
  }
  .blog-skeleton-list.layout-grid-2,
  .blog-skeleton-list.layout-grid-3,
  .blog-skeleton-list.layout-grid-4 {
    grid-template-columns: 1fr;
  }
  .blog-skeleton-list.layout-list .blog-skeleton-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-skeleton-list.layout-list .blog-skeleton-article {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "aside";
  }
}

@media (max-width: 480px) {
  .blog-skeleton-article {
    grid-template-rows: 200px auto auto auto;
  }
  .blog-skeleton-image {
    min-height: 200px;
  }
  .blog-skeleton-heading {
    padding: 16px;
    gap: 10px;
  }
  .blog-skeleton-content {
    padding: 0 16px 16px;
  }
  .blog-skeleton-footer {
    padding: 0 16px 16px;
  }
}

/* ===========================
   LAYOUT MODES
   =========================== */

/* Grid layouts */
.sections.blog .posts.layout-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.sections.blog .posts.layout-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.sections.blog .posts.layout-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid cards: stack vertically with image on top */
.sections.blog .posts.layout-grid-2 .blog-post-article,
.sections.blog .posts.layout-grid-3 .blog-post-article,
.sections.blog .posts.layout-grid-4 .blog-post-article {
  grid-template-columns: 1fr;
  grid-template-rows: 180px auto auto auto;
  grid-template-areas:
    "img"
    "heading"
    "content"
    "aside";
}

.sections.blog .posts.layout-grid-2 .blog-post-article.noimg,
.sections.blog .posts.layout-grid-3 .blog-post-article.noimg,
.sections.blog .posts.layout-grid-4 .blog-post-article.noimg {
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "heading"
    "content"
    "aside";
}

.sections.blog .posts.layout-grid-3 .blog-post-article,
.sections.blog .posts.layout-grid-4 .blog-post-article {
  grid-template-rows: 140px auto auto auto;
}

.sections.blog .posts.layout-grid-3 .blog-post-image,
.sections.blog .posts.layout-grid-4 .blog-post-image {
  max-height: 140px;
}

.sections.blog .posts.layout-grid-3 .blog-post-heading h2,
.sections.blog .posts.layout-grid-4 .blog-post-heading h2 {
  font-size: 1.1rem;
}

.sections.blog .posts.layout-grid-4 .blog-post-heading,
.sections.blog .posts.layout-grid-4 .blog-post-content,
.sections.blog .posts.layout-grid-4 .blog-post-footer {
  padding: 12px;
}

.sections.blog .posts.layout-grid-4 .blog-post-heading h2 {
  font-size: 1rem;
}

.sections.blog .posts.layout-grid-4 .blog-stats {
  padding: 4px 8px;
  gap: 6px;
}

.sections.blog .posts.layout-grid-4 .blog-stats span {
  font-size: 0.8rem;
}

/* List layout - compact, no images */
.sections.blog .posts.layout-list {
  gap: 8px;
}

.sections.blog .posts.layout-list .blog-post-card {
  border-radius: 10px;
}

.sections.blog .posts.layout-list .blog-post-card:hover {
  transform: translateY(-2px);
}

.sections.blog .posts.layout-list .blog-post-card::before {
  display: none;
}

.sections.blog .posts.layout-list .blog-post-article {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "heading aside";
  align-items: center;
  gap: 0;
}

.sections.blog .posts.layout-list .blog-post-heading {
  padding: 12px 16px;
  gap: 6px;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.sections.blog .posts.layout-list .blog-post-heading h2 {
  font-size: 1rem;
  margin-right: 8px;
}

.sections.blog .posts.layout-list .blog-post-content {
  display: none;
}

.sections.blog .posts.layout-list .blog-post-footer {
  padding: 8px 16px;
  grid-area: aside;
}

.sections.blog .posts.layout-list .blog-stats {
  position: static;
  display: inline-flex;
  flex-direction: row;
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: none;
  background: var(--bg-primary-alpha-03);
  gap: 8px;
}

.sections.blog .posts.layout-list .read-more span,
.sections.blog .posts.layout-list .visit-page span {
  display: none;
}

.sections.blog .posts.layout-list .read-more,
.sections.blog .posts.layout-list .visit-page {
  padding: 6px 8px;
}

@media (max-width: 1024px) {
  .sections.blog .posts.layout-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .sections.blog .posts.layout-grid-2,
  .sections.blog .posts.layout-grid-3,
  .sections.blog .posts.layout-grid-4 {
    grid-template-columns: 1fr;
  }

  .sections.blog .posts.layout-list .blog-post-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .sections.blog .posts.layout-list .blog-post-article {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "aside";
  }
}

/* ===========================
   BLOG FILTER - TWO ROW LAYOUT
   Row 1: Search + Status + Category
   Row 2: PerPage + SortBy + SortDir + Layout + Reset
   Responsive: collapses until only Search remains
   =========================== */
.blog-filter .blog-filter-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.blog-filter-primary .search {
  flex: 1 1 250px;
  min-width: 250px;
}
.blog-filter-primary .status {
  flex: 0 1 auto;
  min-width: 140px;
}
.blog-filter-primary .category {
  flex: 0 1 auto;
  min-width: 150px;
}
.blog-filter-secondary {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.blog-filter-secondary .perpage,
.blog-filter-secondary .filterby,
.blog-filter-secondary .layout-select {
  flex: 0 1 auto;
  min-width: 100px;
}

/* Mobile filter mode: single row, only search + status visible */
.blog-filter-rows.filter-mobile {
  flex-direction: row;
  flex-wrap: nowrap;
}
.blog-filter-rows.filter-mobile .blog-filter-primary {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
}
.blog-filter-rows.filter-mobile .blog-filter-primary .search {
  flex: 1 1 0;
  min-width: 0;
}
.blog-filter-rows.filter-mobile .blog-filter-primary .status {
  flex-shrink: 0;
  min-width: auto;
}
.blog-filter-rows.filter-mobile .blog-filter-secondary {
  display: none;
}

/* Responsive: hide category on row 1 at medium widths */
@media (max-width: 680px) {
  .blog-filter-primary .category {
    display: none;
  }
}

/* Responsive: hide status on row 1 at narrow widths (search only) */
@media (max-width: 480px) {
  .blog-filter-primary .status {
    display: none;
  }
}

/* Skeleton/inline styles */
/* Filter skeleton — renders before filter.css loads */
.filter-skel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.filter-skel-item {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 800px 100%;
  animation: filterSkelShimmer 1.6s ease-in-out infinite;
}
@keyframes filterSkelShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Empty state — no posts */
.no-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 16px;
}
.no-posts svg {
  color: var(--font-four, #9ca3af);
  opacity: 0.5;
}
.no-posts h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--font, #374151);
  margin: 0;
}
.no-posts p {
  font-size: 0.95rem;
  color: var(--font-four, #9ca3af);
  margin: 0;
  max-width: 360px;
  line-height: 1.6;
}