/*
 * Dcode shared "card" component - the white rounded post card (image,
 * category badge, title, excerpt, Read More) used on both the homepage
 * (assets/css/homepage.css) and category archive pages
 * (assets/css/category.css). Kept in one file so both pages always
 * look identical instead of drifting apart when one gets edited and
 * not the other.
 *
 * Built by dcode_render_home_card() in functions.php.
 */

.dcode-card {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(21, 42, 80, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*
 * Shown only when a post has no featured image set (e.g. the default
 * "Hello world!" post) - a soft brand-tan placeholder instead of flat
 * gray. Every post that DOES have a featured image just shows that
 * image here instead, automatically, no per-post action needed.
 */
.dcode-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background-color: #EDE0C8;
}

.dcode-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dcode-card .dcode-category-tag {
  display: inline-block;
  align-self: flex-start;
  background-color: #F7E4C2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #152A50;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.dcode-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #152A50;
  line-height: 1.35;
  margin-bottom: 10px;
}

/*
 * The title text is wrapped in a real <a> link (so the whole headline is
 * clickable). Astra's own theme CSS sets a color directly on <a> tags,
 * and an explicit rule on the element itself always beats an inherited
 * color from a parent (like .dcode-card-title above), regardless of
 * specificity - hence this was rendering as default link-blue instead
 * of navy. This rule targets the link directly to fix that.
 */
.dcode-card-title a,
.dcode-card-title a:visited {
  color: #152A50 !important;
}

.dcode-card-title a:hover {
  color: #152A50 !important;
  text-decoration: underline;
}

.dcode-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #748189;
  margin-bottom: 14px;
  flex: 1;
}

.dcode-read-more {
  font-size: 13px;
  font-weight: 700;
  color: #F0B24A !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
  display: inline-block;
}

/* A grid of .dcode-card items, 3 across on desktop. Used for the
   homepage's per-category sections and the full category archive grid. */
.dcode-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1200px) {
  .dcode-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 768px) {
  .dcode-category-grid {
    grid-template-columns: 1fr;
  }
}