/* ==================================================================
   MindBodyReveals.one — Blog styles (Phase 3)
   Cards, featured hero, and article imagery. Uses Phase 1 CSS vars.
   ================================================================== */

/* Featured post ---------------------------------------------------- */
.mbr-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  margin-bottom: 2rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mbr-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(76, 29, 149, .16); }
.mbr-feature__media { min-height: 100%; background: var(--bg-tint); }
.mbr-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbr-feature__body { padding: 1.9rem 2rem; display: flex; flex-direction: column; gap: .6rem; }
.mbr-feature__tag {
  align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); background: var(--bg-tint);
  padding: .3rem .7rem; border-radius: 999px;
}
.mbr-feature__title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; font-weight: 600; color: var(--ink); }
.mbr-feature__excerpt { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.mbr-feature__meta { margin-top: auto; font-weight: 600; color: var(--brand); font-size: .9rem; }

/* Post grid -------------------------------------------------------- */
.mbr-post-grid { display: grid; gap: 1.5rem; }
.mbr-post-grid--3 { grid-template-columns: repeat(3, 1fr); }

.mbr-post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mbr-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-3, #ddd6fe); }
.mbr-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--bg-tint); overflow: hidden; }
.mbr-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbr-post-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.mbr-post-card__tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); background: var(--bg-tint);
  padding: .26rem .6rem; border-radius: 999px;
}
.mbr-post-card__title { font-family: var(--serif); font-size: 1.14rem; line-height: 1.28; font-weight: 600; color: var(--ink); }
.mbr-post-card__excerpt { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.mbr-post-card__meta { margin-top: .2rem; font-size: .84rem; font-weight: 600; color: var(--brand); }

/* Article hero image ---------------------------------------------- */
.mbr-article__hero-img {
  margin: 0 0 1.6rem; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-tint);
}
.mbr-article__hero-img img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

.mbr-page-hero--article .mbr-page-hero__title { max-width: 22ch; }

/* Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .mbr-post-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mbr-feature { grid-template-columns: 1fr; }
  .mbr-feature__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .mbr-post-grid--3 { grid-template-columns: 1fr; }
  .mbr-feature__body { padding: 1.4rem 1.3rem; }
  .mbr-feature__title { font-size: 1.4rem; }
}