{% extends "base.html" %}

{% block title %}Blog — T & S Contractors Ltd{% endblock %}
{% block description %}Construction insights, budgeting guides, and engineering tips from T & S Contractors Ltd.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <h1>Blog & Guides</h1>
        <p>Construction insights, budgeting tips, and engineering expertise from our team.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="portfolio-grid" style="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));">
            <div class="portfolio-item">
                <a href="/blog/how-to-plan-your-construction-budget" class="portfolio-thumb" style="padding: 0; overflow: hidden; display: block; text-decoration: none; height: 200px;">
                    <img src="{{ url_for('static', path='edge.jpg') }}" alt="Construction Budget Guide" style="width: 100%; height: 100%; object-fit: cover;">
                </a>
                <div class="portfolio-info">
                    <span class="section-label" style="font-size: 0.7rem; margin-bottom: 0.5rem;">Budgeting Guide</span>
                    <h3><a href="/blog/how-to-plan-your-construction-budget" style="color: inherit; text-decoration: none;">How to Plan Your Construction Budget: A Guide to Building in Kenya</a></h3>
                    <p>A practical breakdown of the key structural phases of a professional build and how to accurately plan your budget.</p>
                    <a href="/blog/how-to-plan-your-construction-budget" style="display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent); font-size: 0.85rem; font-weight: 500; margin-top: 0.75rem;">
                        Read Article
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}