/**
 * CUTIS Theme — Service "From the CUTIS journal" blog section
 * Classes kept identical to _design-reference/style.css (blog-card,
 * blog-media, blog-body, blog-meta, blog-read) since none of them collide
 * with anything in header.css/layout.css. Static 3-across grid, matching
 * the reference exactly — no carousel deviation here (unlike Testimonials).
 *
 * .container-cutis, .eyebrow, .section-head, .row/.g-4 are already defined
 * in single-service-types.css. .col-lg-4 is also already defined there
 * (min-width:992px, 33.3333%) — happens to match this section's own 3-up
 * breakpoint exactly. .col-md-6 is already defined in
 * single-service-comparison.css (min-width:768px, 50%) and matches this
 * section's 2-up breakpoint too. Both are enqueued alongside this file on
 * every service singular page. Note this section's breakpoints
 * (768px/992px) are intentionally different from Types' (576px/992px) —
 * that's the reference's own distinction between the two grids, not a
 * mismatch to fix.
 *
 * BUT: .col-lg-4's min-width:992px rule is re-asserted below rather than
 * left to the types.css original. Reason: cutis-single-service-types-css
 * loads before cutis-single-service-comparison-css (see functions.php's
 * enqueue order), so at >=992px — where both col-md-6's and col-lg-4's
 * media queries are simultaneously true — comparison.css's later-loaded
 * .col-md-6 { width:50% } cascades over types.css's earlier .col-lg-4 {
 * width:33.3333% } for any element carrying both classes (equal
 * specificity, source order decides). That silently capped this section at
 * 2-up all the way from 768px to at least 1920px — verified live, exact
 * same root cause as the .col-6/.col-lg-3 bug fixed earlier in
 * single-service-awards.css, and the same fix: reassert the narrower rule
 * after the wider one, in this file, so cascade order is correct
 * regardless of enqueue order.
 *
 * No section-shell background rule — the reference has no bg-cream/bg-grey
 * class on this section (plain white, matching the page default), unlike
 * Testimonials/Types.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). Values with no
 * matching token (card radius/shadow) are hardcoded, same as
 * single-service-why.css / single-service-doctor-video.css. The reference's
 * --font-mono is dropped for .blog-meta, same reasoning as
 * single-service-cost.css / single-service-awards.css — no monospace token
 * exists in the theme.
 */

/* ------------------------------------------------------------------ */
/* Grid override — see file header. Identical to single-service-types.css's
   own .col-lg-4 rule; re-asserted here purely for cascade order so it wins
   over single-service-comparison.css's .col-md-6 at >=992px. */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33.3333%;
  }
}

/* ------------------------------------------------------------------ */
/* Blog card */
/* ------------------------------------------------------------------ */
.blog-card {
  display: block;
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 50px rgba(15, 43, 61, 0.12),
    0 4px 10px rgba(15, 43, 61, 0.06);
}

.blog-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: color-mix(in srgb, var(--cutis-color-border) 30%, white);
}
.blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-media img {
  transform: scale(1.06);
}

.blog-body {
  padding: 22px 22px 24px;
}
.blog-meta {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cutis-color-primary);
  margin-bottom: 10px;
}
.blog-body h4 {
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--cutis-color-heading);
  margin: 0 0 10px;
}
.blog-read {
  font-size: 13px;
  font-weight: 700;
  color: var(--cutis-color-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.blog-read svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.blog-card:hover .blog-read svg {
  transform: translateX(4px);
}