/* --- URBANITSA BLOG: 2026 FLOATING TILE LAYOUT --- */

@layer page {
    .blog-page {
        padding: 160px 0 100px;
        background-color: #0a0f1c; /* Midnight Blue */
    }

    .blog-intro {
        text-align: center;
        margin-bottom: 60px;
    }

    /* SEO Intro Area */
    .seo-intro-text {
        max-width: 850px;
        margin: 30px auto 0;
        text-align: center;
    }

    .seo-intro-text p {
        color: #94a3b8;
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .seo-intro-text strong {
        color: #00d166; /* Brand Green */
        font-weight: 600;
    }

    .blog-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 50px;
    }

    /* --- THE MODERN TILE BASE --- */
    .blog-tile {
        background: rgba(22, 29, 47, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 32px;
        padding: 40px;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .blog-tile:hover {
        transform: translateY(-8px);
        border-color: rgba(0, 209, 102, 0.4);
        background: rgba(30, 41, 59, 0.8);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    }

    /* --- META (SPATIAL HIERARCHY) --- */
    .tile-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .source-badge {
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .source-badge.local-tech { background: rgba(0, 209, 102, 0.15); color: #00d166; }
    .source-badge.cyber-security { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

    .tile-date {
        font-size: 0.85rem;
        color: #64748b;
        font-weight: 500;
    }

    /* --- FEATURED HERO TILE --- */
    .blog-tile.featured {
        background: linear-gradient(135deg, rgba(22, 29, 47, 0.9) 0%, rgba(10, 15, 28, 0.9) 100%);
        min-height: 400px;
    }

    .blog-tile.featured h2 {
        font-size: clamp(1.8rem, 4vw, 3rem);
        font-weight: 800;
        color: white;
        line-height: 1.1;
        margin-bottom: 20px;
        letter-spacing: -1px;
    }

    .blog-tile.featured p {
        color: #94a3b8;
        font-size: 1.2rem;
        line-height: 1.7;
        max-width: 850px;
        margin-bottom: 35px;
    }

    /* --- THE GRID (3-Columns) --- */
    .tile-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .blog-tile.mini {
        min-height: 280px;
        padding: 35px;
    }

    .blog-tile.mini h3 {
        font-size: 1.35rem;
        color: white;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    /* --- BUTTONS & LINKS (GREEN BRANDING) --- */
    .tile-btn {
        display: inline-block;
        background: #00d166;
        color: #0a0f1c;
        padding: 16px 36px;
        border-radius: 100px;
        text-decoration: none;
        font-weight: 800;
        transition: 0.3s;
        width: fit-content;
    }

    .tile-btn:hover {
        background: #00ff7c;
        box-shadow: 0 10px 25px rgba(0, 209, 102, 0.3);
        transform: scale(1.05);
    }

    .tile-link {
        color: #00d166 !important;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        margin-top: auto;
        transition: 0.2s;
    }

    .tile-link:hover {
        text-decoration: underline;
        letter-spacing: 0.5px;
    }

    /* --- ERROR BOX --- */
    .error-box {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #ef4444;
        padding: 30px;
        border-radius: 20px;
        text-align: center;
    }

    /* --- RESPONSIVE FIXES --- */
    @media (max-width: 1100px) {
        .tile-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
        .tile-grid { grid-template-columns: 1fr; }
        .blog-tile { padding: 30px; }
        .blog-tile.featured h2 { font-size: 2.2rem; }
        .blog-page { padding-top: 130px; }
    }
}