| /** |
| * BlogHero Component Styles |
| * Minimal hero section for blog listing page. |
| */ |
| |
| .blogHero { |
| padding-top: var(--section-spacing-md); |
| padding-bottom: var(--section-spacing-xs); |
| background: var(--ai-bg-primary); |
| } |
| |
| .blogHero__title { |
| font-size: clamp(3.2rem, 2.5rem + 2vw, 4.8rem); |
| font-weight: 700; |
| line-height: 1.2; |
| color: var(--ai-text-primary); |
| margin: 0 0 var(--ai-spacing-md) 0; |
| } |
| |
| .blogHero__description { |
| font-size: clamp(1.6rem, 1.4rem + 0.5vw, 2rem); |
| line-height: 1.6; |
| color: var(--ai-text-secondary); |
| margin: 0; |
| max-width: 720px; |
| } |
| |
| @media (max-width: 768px) { |
| .blogHero { |
| padding-top: var(--section-spacing-sm); |
| padding-bottom: var(--ai-spacing-xl); |
| } |
| } |
