/* full-width background wrapper for the controls */
.spg-controls-wrapper {
	width: 100%;
    border-radius: 10px;
    background: #26313b;
    padding: 30px;
    margin-bottom: 30px;
}

/* inner container to center and constrain width */
.spg-controls {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 1rem;               /* space between the two controls */
}

/* make each control take up half of the inner width */
.spg-category-filter,
.spg-search {
  width: calc(50% - 0.5rem);  /* subtract half the gap so total is 100% */
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}

/* optional: style inputs to look good on that dark bg */
.spg-category-filter,
.spg-search {
  background: #fff;
  border: 1px solid #ccc;
  /* Round the corners of the controls a bit more */
  border-radius: 8px;
}

/* Base: 4 columns */
.spg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;

  /* Ensure grid items fill the earliest available slot when some are hidden.
     This enables the layout to reorder items to the top after filtering so there
     are no empty gaps. */
  grid-auto-flow: row dense;

  /* Make all rows equal height so cards line up neatly.  When combined with
     height:100% on .spg-item (below), this helps the grid reflow smoothly
     after items are hidden or shown. */

}

/* List layout overrides */
.spg-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100%; /* match filter width */
  margin: 0 auto;
}

.spg-list .spg-item {
  border: 1px solid #F4F4F4;
  border-radius: 10px;
  padding: 1rem;
  background: #F4F4F4;
}

/* Use theme styles for post titles; do not override font size */
.spg-list .spg-item .spg-title {
  margin: 0 0 0.5rem;
}

/* Category links */
.spg-category-link {
  color: #26313b;
  text-decoration: underline;
  cursor: pointer;
  text-align:left;
}

.spg-categories {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: #666;
  text-align:left;
}

.spg-excerpt {
  margin-bottom: 0.5rem;
  text-align:left;

  /* Limit the number of lines shown in the excerpt to keep card heights
     consistent.  The line clamp technique hides overflow after 3 lines. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.spg-read-more {
  color: #26313b;
  text-decoration: underline;
  text-align:right;
  display: block;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .spg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phone: 2 columns */
@media (max-width: 600px) {
  .spg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.spg-item {
  border: 1px solid #eee;
  padding: 1rem;
  text-align: center;
      background: #fff;
  /* Allow this item to grow to fill its assigned row height in the grid.
     Without this, variable content heights can leave empty space when filtering. */
  /* height removed to avoid fixed row artifacts during filtering */}
.spg-thumb {
  /* keep the aspect ratio you like, or set a fixed height */
  padding-bottom: 75%;    /* 4:3 ratio */
  position: relative;     /* if you still want overlay text/labels later */
  overflow: hidden;
  /* Remove flex layout so the image can stretch to full width */
}

/* Style images inside thumbs to fill the container completely.  Use a single
   rule instead of duplicate definitions. */
.spg-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Fill the container without leaving white space.  Cover crops the image nicely. */
  object-fit: cover;
  object-position: center center;
}
.spg-title {
  text-align: left;
  margin: 0.5rem 0 0;
  /* Increase the font size and set a primary color for titles */
  font-size: 28px !important;
  color: #26313b;
}

/* base state */
.spg-item {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
}

/* “hidden” state */
.spg-item.is-hidden {
  opacity: 0;
  transform: scale(0.5);
}

/* once we’re fully hidden, this class will knock it out of layout */
.spg-item.out-of-flow {
  display: none;
}

/* Card and list item aesthetics: rounded corners and a soft background */
.spg-grid .spg-item,
.spg-list .spg-item {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #f5f5f5;
}

/* Peg the read-more link to the bottom of each card/list item using flexbox */
/*
 * For the card layout (.spg-grid), we wrap the content inside .spg-card-inner
 * so that each item (.spg-item) itself remains a block/grid element.  This
 * wrapper uses flexbox to push the read‑more link to the bottom without
 * breaking the grid flow.  See .spg-card-inner definitions below.
 */
.spg-list .spg-item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.spg-list .spg-read-more {
  margin-top: auto;
}

/*
 * Card layout flexbox container
 *
 * In the card layout (.spg-grid), each .spg-item contains a .spg-card-inner
 * wrapper.  This wrapper is a flex column that allows the read‑more link to
 * stick to the bottom of the card while leaving .spg-item as a regular grid
 * element.  Nested links inside .spg-card-inner (like .spg-item-link) also
 * use flexbox to allow content to stretch.
 */
.spg-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.spg-card-inner .spg-item-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.spg-card-inner .spg-read-more {
  margin-top: auto;
}

/* Style the read-more links to look like buttons */
.spg-read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #26313b;
  border-radius: 8px;
  text-decoration: none;
}

/*
 * Card view adjustments for blog post grid
 * When rendering posts in a card layout (.spg-grid), we need to
 * provide sensible spacing and alignment for categories, excerpts and
 * read more links.  These rules mirror the list view styles while
 * respecting the grid layout and card card aesthetic.
 */
.spg-grid .spg-title {
  text-align: left;
  margin: 0.5rem 0;
}
.spg-grid .spg-categories {
  font-size: 0.875rem;
  margin: 0.5rem 0;
  color: #666;
  text-align: left;
}
.spg-grid .spg-excerpt {
  margin: 0.5rem 0;
  text-align: left;
}
.spg-grid .spg-read-more {
  color: #26313b;
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.5rem;
  text-align: left;
}