/* ======================================================
   BASE CARD SYSTEM (GUTENBERG + KADENCE SAFE)
====================================================== */

.main-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.entry-content .wp-block-group.card {
  width: 100%;
  max-width: 850px;
  margin: 20px auto !important;
  box-sizing: border-box;
}

/* actual card styling */
.card {
  background: linear-gradient(215deg, #95E69F, #1FBF27);
  border-radius: 8px;
  padding: 18px;
  align-self: start;

  color: #ffffff !important;

  font-size: 1.05rem;
  line-height: 1.6;
}

/* ======================================================
   FORCE TEXT COLOR CONSISTENCY (IMPORTANT)
====================================================== */

.card,
.card * {
  color: #ffffff !important;
}

/* ======================================================
   TYPOGRAPHY CONTROL (NO GUTENBERG DEPENDENCY)
====================================================== */

.card p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

/* If you ever reintroduce headings */
.card h1,
.card h2,
.card h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 10px 0;
}

/* ======================================================
   GUTENBERG GROUP FIX (INNER WRAPPER)
====================================================== */

.card > .wp-block-group__inner-container {
  display: block;
}

/* ======================================================
   COLUMNS INSIDE CARD
====================================================== */

.card .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  align-items: stretch;
}

/* 50/50 columns */
.card .wp-block-columns > .wp-block-column {
  flex: 1 1 50% !important;
  min-width: 0;
}

/* images */
.card .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ======================================================
   QUERY LOOP (UNCHANGED BUT CLEAN)
====================================================== */

.wp-block-query {
  max-width: 100% !important;
  width: 100% !important;
}

.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.wp-block-post-template li {
  background: linear-gradient(215deg, #95E69F, #1FBF27);
  border-radius: 6px;
  padding: 12px;
  transition: 0.2s ease;
  color: white;
}

.wp-block-post-template li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* featured image */
.wp-block-post-featured-image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* title */
.wp-block-post-title a {
  color: white !important;
  font-weight: 600;
  font-size: 18px;
}

/* excerpt */
.wp-block-post-excerpt {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* hide read more */
.wp-block-post-excerpt__more-link {
  display: none;
}

/* ======================================================
   SEARCH
====================================================== */

.search-results-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
}

.search-results-grid .card {
    width: 100% !important;
    margin: 0 !important;
}

.search-title {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.no-results {
    margin-top: 10px;
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 768px) { /* 700px */
  .wp-block-post-template {
    grid-template-columns: 1fr;
  }

  .card .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .card .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .card .wp-block-image img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1024px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}