/* ADITHAN REAL ESTATE — Blog / Insights listing page styles */

.bl-hero { height: 42vh; min-height: 300px; max-height: 440px; }
@media (min-width: 640px) { .bl-hero { height: 48vh; } }
.bl-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(15.5% .007 261.7 / 88%), oklch(15.5% .007 261.7 / 35%) 55%, oklch(15.5% .007 261.7 / 25%)); }
.bl-hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 1.25rem; }
@media (min-width: 640px) { .bl-hero__inner { padding: 3rem 2.5rem; } }
.bl-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,.7); margin-bottom: 0.75rem; }
.bl-crumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.bl-crumb a:hover { color: #fff; }
.bl-crumb span:last-child { color: #fff; font-weight: 600; }
.bl-hero__title { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.08; }
@media (min-width: 640px) { .bl-hero__title { font-size: 3rem; } }
.bl-hero__tagline { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bl-hero__tagline span { font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 0.35rem 0.85rem; }

.bl-section { padding: 3.5rem 1.25rem; }
@media (min-width: 640px) { .bl-section { padding: 5rem 2.5rem; } }
@media (min-width: 1024px) { .bl-section { padding: 5.5rem 3.5rem; } }
.bl-heading { margin-top: 0.6rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); }
@media (min-width: 640px) { .bl-heading { font-size: 2.5rem; } }
.bl-lede { margin-top: 0.75rem; max-width: 40rem; color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.6; }

.bl-filters { margin-top: 2rem; }

.bl-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }