/* =========================================
   MODULE: BLOG GRID — light theme
   ========================================= */
.blog-grid {
  /* Your Care Solutions brand override — scoped here so the rest of the
     theme (nav, footer, buttons) keeps its existing tokens untouched. */
  --clr-black:     #1f2a30;
  --clr-accent:    #29AAE2;
  --clr-accent-dk: #1f7faa;
  --clr-teal:      #0c6e62;
  --clr-teal-dk:   #084a42;
  --clr-mid:       #f7f5f0;
  --clr-mid-dk:    #e3e8e9;
  --clr-muted:     #59666d;
  --clr-border:    #e3e8e9;
  --font-display:  "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:     "Inter", "Segoe UI", system-ui, sans-serif;
}
.blog-grid { background: var(--clr-white); padding-block: clamp(3rem, 6vh, 5rem) clamp(5rem, 10vh, 9rem); }

/* Featured card */
.blog-card--featured { display: block; margin-bottom: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid var(--clr-border); }
.blog-card--featured .blog-card__link { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.blog-card--featured .blog-card__media { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--clr-mid); }
.blog-card--featured .blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out-expo); }
.blog-card--featured .blog-card__link:hover .blog-card__img { transform: scale(1.04); }
.blog-card--featured .blog-card__body { display: flex; flex-direction: column; gap: 1.25rem; }
.blog-card--featured .blog-card__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: 0.02em; line-height: 1.05; color: var(--clr-black); transition: color var(--duration-fast); }
.blog-card--featured .blog-card__link:hover .blog-card__title { color: var(--clr-accent); }
.blog-card--featured .blog-card__excerpt { font-size: clamp(0.9rem, 1.3vw, 1rem); color: var(--clr-muted); line-height: 1.75; font-weight: 300; max-width: 52ch; }

/* Category badge */
.blog-card__category-badge { position: absolute; top: 1rem; left: 1rem; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background: var(--clr-accent); padding: 0.3rem 0.7rem; z-index: 1; }

/* Meta */
.blog-card__meta { display: flex; align-items: center; gap: 1rem; }
.blog-card__date, .blog-card__read-time { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted); }
.blog-card__date::after { content: '·'; margin-left: 1rem; color: var(--clr-border); }

/* CTA */
.blog-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted); transition: color var(--duration-fast), gap var(--duration-fast); }
.blog-card__link:hover .blog-card__cta { color: var(--clr-accent); gap: 0.85rem; }

/* Card grid */
.blog-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-left: 1px solid var(--clr-border); }
.blog-card { border-right: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.blog-card.is-visible { opacity: 1; transform: translateY(0); }
.blog-card--featured { opacity: 1; transform: none; border: none; }
.blog-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; transition: background var(--duration-fast); }
.blog-card:not(.blog-card--featured) .blog-card__link:hover { background: var(--clr-mid); }
.blog-card__media { position: relative; overflow: hidden; }
.blog-card__media--short { aspect-ratio: 16/9; background: var(--clr-mid); }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-out-expo); }
.blog-card__link:hover .blog-card__img { transform: scale(1.05); }

/* Placeholder colours */
.blog-card__media-placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 1rem; }
.blog-card__media-placeholder span { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; letter-spacing: 0.04em; opacity: 0.12; color: var(--clr-black); }
.blog-card__media-placeholder--dm { background: #d8e8f0; }
.blog-card__media-placeholder--br { background: #f0e0d8; }
.blog-card__media-placeholder--in { background: #e0d8f0; }
.blog-card__media-placeholder--wd { background: #d8f0e4; }

.blog-card:not(.blog-card--featured) .blog-card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; flex: 1; }
.blog-card:not(.blog-card--featured) .blog-card__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: 0.02em; line-height: 1.1; color: var(--clr-black); transition: color var(--duration-fast); }
.blog-card:not(.blog-card--featured) .blog-card__link:hover .blog-card__title { color: var(--clr-accent); }
.blog-card:not(.blog-card--featured) .blog-card__excerpt { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.65; font-weight: 300; flex: 1; }
.blog-card:not(.blog-card--featured) .blog-card__cta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--clr-border); }
.blog-grid__no-results { padding-block: 3rem; font-size: 0.9rem; color: var(--clr-muted); letter-spacing: 0.05em; text-align: center; border-top: 1px solid var(--clr-border); }

@media (max-width: 900px) { .blog-card--featured .blog-card__link { grid-template-columns: 1fr; } .blog-grid__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid__cards { grid-template-columns: 1fr; border-left: none; } .blog-card { border-left: none; border-right: none; } }