/* Custom theme styles */


/* ========== Stecaverse "Pinterest-style" masonry grid ==========
   Uses CSS columns for broad compatibility.
   Cards are column-balanced like a Pinterest feed.
*/

.stecaverse-masonry {
  column-gap: 1rem;
}

/* 1 column on small screens */
@media (max-width: 575.98px) {
  .stecaverse-masonry { column-count: 1; }
}

/* 2 columns on small/medium */
@media (min-width: 576px) and (max-width: 991.98px) {
  .stecaverse-masonry { column-count: 2; }
}

/* 3 columns on large screens inside the main content column */
@media (min-width: 992px) {
  .stecaverse-masonry { column-count: 3; }
}

.stecaverse-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1rem;
}

.stecaverse-card .card {
  border-radius: 1rem;
  overflow: hidden;
}

.stecaverse-card .card-img-top {
  display: block;
  width: 100%;
  height: auto;
}

.stecaverse-card-thumb {
  background: #f8f9fa;
}

/* Slightly tighter type for cards */
.stecaverse-card .card-title a {
  color: inherit;
}

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


/* Whole-card click affordance */
.stecaverse-card-clickable {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stecaverse-card-clickable:hover {
  transform: translateY(-1px);
}

/* Ensure category badge remains easily clickable */
.stecaverse-card-category {
  position: relative;
  z-index: 2;
}


/* ===== Stecaverse grid cards (horizontal rows) ===== */

/* Disable older masonry column styles if present */
.stecaverse-masonry { column-count: initial !important; column-gap: initial !important; }

/* Keep category badge + button clickable above stretched-link */
.stecaverse-no-stretch { position: relative; z-index: 2; }

/* Card polish */
.stecaverse-card .card {
  border-radius: 1rem;
  overflow: hidden;
}
.stecaverse-card .card-img-top {
  width: 100%;
  height: auto;
  display: block;
}
.stecaverse-card .card:hover {
  transform: translateY(-1px);
  transition: transform .12s ease;
}


/* Page template */
.page .page-content img,
.page .post-content img {
  max-width: 100%;
  height: auto;
}