/* Archive Content Styles */

/* Ensure container allows absolute positioning if needed */
.template-container {
  position: relative;
  padding: 20px;
  box-sizing: content-box;
}

/* Blog Archive Section */
.archive-content.blog-archive {
  margin-bottom: 48px;
}

.archive-content.akcije-archive {
  margin-bottom: 80px;
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* Space between posts as in design */
}

/* Individual Blog Item */
.blog-item {
  // background-color: #ffffff; /* White background, no shadow/border for clean look */
  overflow: hidden;
  // border: 1px solid red;
  width: 100%;
}

/* Thumbnail */
.blog-thumb {
  display: block;
  width: 100%;
  // height: 200px; /* Uniform height to match design's consistent image sizes */
  overflow: hidden;

  height: 280px;
  flex-shrink: 0;
}

.akcije-thumb img {
  border-radius: 10px;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Stretch and center to fill, cropping if needed */
  object-position: center;
  display: block;
  border-radius: 10px;
}

/* Blog Meta */
.blog-meta {
  padding-top: 20px;
  max-height: 154px;
  overflow: hidden;
}

.blog-meta time {
  font-size: var(--fs-small); /* 14px */
  color: #666666; /* Gray for dates */
  display: block;
  margin-bottom: ;
}

.blog-title {
  font-size: var(--fs-subsection); /* 32px */
  line-height: var(--lh-subsection);
  margin: 0 0 10px;
  font-weight: 700;
}

.blog-title a {
  color: var(--e-global-color-primary); /* Kielo Blue */
  text-decoration: none;
  display: -webkit-box; /* required */
  -webkit-box-orient: vertical; /* required */
  -webkit-line-clamp: 2; /* limit to 2 lines */
  overflow: hidden; /* hide overflow */
  text-overflow: ellipsis; /* add "…" if needed */
  white-space: normal; /* allow wrapping */
}

.blog-title a:hover {
  text-decoration: underline;
}

.blog-subtitle {
  font-size: var(--fs-body); /* 16px */
  line-height: var(--lh-body);
  color: var(--e-global-color-text); /* Default text color, grayish */
  margin: 0;
  white-space: normal; /* Allow multiline wrapping */
  font-weight: 400; /* Regular font */
}

/* Mobile view */
@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 30px; /* Optional: smaller gap on mobile */
  }

  .blog-item {
    width: 100%; /* Full width on mobile */
  }

  .blog-title {
    font-size: 24px;
  }
  .blog-meta {
    max-height: 150px;
	/*
	max-height: none;
    overflow: visible;
	*/
  }
}
/* Tablet and Mobile from style.css will handle reductions */

@media (min-width: 769px) {
  body {
    /*padding: 0 20px !important;*/
  }
}