/* mri-latest-posts/css/mri-latest-posts.css */

/* --- General Container Styles (for both default and grid layouts) --- */
.mri-latest-posts-container {
  display: grid;               /* Enables grid layout */
  gap: 1.5em;                  /* Space between grid items */
  align-items: stretch;        /* Stretch each grid-cell to match the tallest in the row */
  grid-auto-rows: 1fr;         /* Make every row the same height */
  margin-bottom: 0.3em;        /* Adds space below the container */
}

/* --- Specific Grid Columns (from shortcode attribute) --- */
/* For auto-fit columns (default) */
.mri-latest-posts-container.mri-grid-auto-columns {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* For 1 column */
.mri-latest-posts-container.mri-grid-1-columns {
  grid-template-columns: repeat(1, 1fr);
}
/* For 2 columns */
.mri-latest-posts-container.mri-grid-2-columns {
  grid-template-columns: repeat(2, 1fr);
}
/* For 3 columns */
.mri-latest-posts-container.mri-grid-3-columns {
  grid-template-columns: repeat(3, 1fr);
}
/* For 4 columns */
.mri-latest-posts-container.mri-grid-4-columns {
  grid-template-columns: repeat(4, 1fr);
}
/* For 5 columns */
.mri-latest-posts-container.mri-grid-5-columns {
  grid-template-columns: repeat(5, 1fr);
}
/* For 6 columns */
.mri-latest-posts-container.mri-grid-6-columns {
  grid-template-columns: repeat(6, 1fr);
}

/* --- Individual Post Item Styles --- */
.mri-latest-post-item {
  display: flex;
  flex-direction: column;  /* Stack content vertically */
  height: 100%;            /* Fill its grid-cell */
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  padding: 1em;
  box-sizing: border-box;
  margin: 0;
}

/* --- Post Title Styles --- */
.mri-latest-post-item .mri-latest-post-title {
  margin: 0 0 0.5em;
  font-size: 1em;
  font-weight: 600;
}

.mri-latest-post-item .mri-latest-post-title a {
  text-decoration: none;
  color: #333;
}

.mri-latest-post-item .mri-latest-post-title a:hover {
  color: #0073aa; /* WordPress blue */
}

/* --- Excerpt Styles --- */
.mri-latest-post-item .mri-latest-post-excerpt {
  margin-bottom: 0.5em;
  flex-grow: 1; /* Take up available space before bottom‐aligned elements */
}

/* --- Meta Information (Date & Categories) Styles --- */
.mri-latest-post-item .mri-latest-post-meta {
  font-size: 0.95em;
  color: #666;
  margin-top: auto;        /* Push this to the bottom of the flex column */
  padding-top: 0.5em;
  border-top: 1px dashed #eee;
}

.mri-latest-post-item .mri-latest-post-meta span:not(:last-child)::after {
  content: " | ";
  color: #ccc;
}

/* --- Image Styles --- */
.mri-latest-post-item .mri-latest-post-image {
  /* Make the image container bottom-align itself */
  order: 99;             /* Ensure it comes after title/excerpt/meta */
  margin-top: auto;      /* Push itself to the bottom of the card */
  margin-bottom: 0;      /* Remove default bottom margin */
}

.mri-latest-post-item .mri-latest-post-image img {
  display: block;
  border: 1px solid #ddd;
  padding: 2px;
  height: auto;
  max-width: 100%;
}

/* Alignment helpers for image inside the card */
.mri-latest-post-item .mri-latest-post-image-align-center img {
  margin-left: auto;
  margin-right: auto;
}

.mri-latest-post-item .mri-latest-post-image-align-right img {
  margin-left: auto;
  margin-right: 0;
}

/* Default (left align) needs no extra margin rules */

/* --- Layout Specific: title_image_below --- */
.mri-latest-posts-container.mri-layout-title_image_below .mri-row-content {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-image {
  flex-shrink: 0;
  margin-bottom: 0;
  /* bottom-align within this new column direction */
  order: 99;
  margin-top: auto;
}

.mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-content {
  flex-grow: 1;
}

/* Image order & content order for left/right */
.mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-image-align-left {
  order: 1;
}
.mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-image-align-right {
  order: 2;
}
.mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-image-align-right + .mri-latest-post-content {
  order: 1;
}

/* --- Read More Link Styles --- */
.mri-latest-post-read-more {
  display: inline-block;
  margin-top: 0.3em;
  font-size: 0.98em;
  font-weight: 500;
  color: #21759b;
  text-decoration: none;
}

.mri-latest-post-read-more:hover {
  color: #0073aa;
  text-decoration: none;
}

/* --- Pagination Styles --- */
.mri-pagination {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}

.mri-pagination .page-numbers {
  display: inline-block;
  padding: 0.3em 0.6em;
  margin: 0 0.2em;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #555;
}

.mri-pagination .page-numbers.current,
.mri-pagination .page-numbers:hover {
    background: #5799ec;
  color: #fff;
  border-color: #0073aa;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  /* Tweak spacing, font sizes, etc. as needed */
}

@media (max-width: 480px) {
  .mri-latest-posts-container.mri-layout-title_image_below .mri-row-content {
    flex-direction: column;  /* Stack image & text on small screens */
  }
  .mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-image,
  .mri-latest-posts-container.mri-layout-title_image_below .mri-latest-post-content {
    order: unset;            /* Remove forced ordering on mobile */
  }
  .mri-latest-post-item .mri-latest-post-image {
    /* Always center images on very small screens */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 1) Each card is a flex‐column that can grow to fill its grid cell */
.mri-latest-post-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) Remove any order rules you added */
/* .mri-latest-post-item .mri-latest-post-image { order: 99; } */
/* (we’ll let margin‐top: auto do the work instead) */

/* 3) Push only the image container to the bottom */
.mri-latest-post-item .mri-latest-post-image {
  margin-top: auto;
}

/* Make sure your meta or read‐more aren’t also using margin-top:auto. */
.mri-latest-post-item .mri-latest-post-meta,
.mri-latest-post-item .mri-latest-post-read-more {
  margin-top: 0; /* reset in case you had auto before */
}