/* Shared responsive utilities for blog posts and cv-voorbeeld pages */
/* Adds the missing 480px (small phone) breakpoint */

/* Blog posts - 480px breakpoint */
@media (max-width: 480px) {
    .article-hero {
        padding: 110px 20px 50px;
    }

    .article-hero h1 {
        font-size: 22px;
    }

    .article-content {
        padding: 24px 16px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 18px;
    }

    .article-content p,
    .article-content li {
        font-size: 15px;
    }

    .cta-box {
        padding: 24px 16px;
    }

    .cta-box h3 {
        font-size: 20px;
    }

    .related-grid {
        grid-template-columns: 1fr !important;
    }
}

/* CV voorbeeld pages - 480px breakpoint */
@media (max-width: 480px) {
    .tips-header h1 {
        font-size: 20px;
    }

    .tips-column {
        padding: 16px 12px;
    }

    .cv-column {
        padding: 12px;
    }

    .related-cv-section {
        padding: 24px 12px;
    }

    .related-cv-grid {
        grid-template-columns: 1fr !important;
    }
}