/* ==========================================
   UFUMBUZI BLOG
   blog.css
========================================== */

:root {

    /* Colors */

    --primary: #0f4c81;
    --primary-hover: #2563eb;

    --background: #ffffff;

    --surface: #f8fafc;

    --surface-hover: #f1f5f9;

    --border: #e5e7eb;

    --text: #1f2937;

    --text-light: #6b7280;

    --success: #16a34a;

    /* Layout */

    --max-width: 1200px;

    --radius: 14px;

    --radius-sm: 8px;

    /* Effects */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow:
        0 4px 16px rgba(0,0,0,.08);

    --transition:
        .25s ease;

}


/* ==========================================
   RESET
========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family:
        Inter,
        "Segoe UI",
        sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.7;

}

img {
    max-width: 100%;
    height: auto;
}

a {

    text-decoration: none;

    color: var(--primary);

}

a:hover {

    color: var(--primary-hover);

}

button,
input {

    font: inherit;

}


/* ==========================================
   GLOBAL
========================================== */

.container {

    width:
        min(
            100% - 2rem,
            var(--max-width)
        );

    margin-inline: auto;

}

section {

    margin-bottom: 5rem;

}

.section-title {

    font-size: 2rem;

    margin-bottom: 1.5rem;

}


/* ==========================================
   HEADER
========================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 999;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid var(--border);

}

.site-header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1rem 0;

}

.logo {

    display: flex;

    align-items: center;

}

.logo img {

    height: 48px;

    width: auto;

}

.main-nav {

    display: flex;

    align-items: center;

    gap: 2rem;

}

.main-nav a {

    font-weight: 600;

    color: var(--text);

}

.main-nav a:hover {

    color: var(--primary);

}


/* ==========================================
   HERO
========================================== */

.hero {

    padding:
        5rem 0
        4rem;

}

.hero h1 {

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.5rem
        );

    line-height: 1.15;

    margin-bottom: 1rem;

}

.hero p {

    max-width: 700px;

    color: var(--text-light);

    margin-bottom: 2rem;

    font-size: 1.05rem;

}


/* ==========================================
   SEARCH
========================================== */

.search-form {

    max-width: 650px;

}

.search-form input {

    width: 100%;

    padding:
        1rem
        1.2rem;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background: white;

}

.search-form input:focus {

    outline: none;

    border-color:
        var(--primary);

}


/* ==========================================
   FEATURED ARTICLE
========================================== */

.featured-article {

    display: grid;

    grid-template-columns:
        1.2fr
        1fr;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background: white;

    box-shadow:
        var(--shadow-sm);

}

.featured-image {

    height: 100%;

}

.featured-image img {

    height: 100%;

    object-fit: cover;

}

.featured-content {

    padding: 2rem;

}

.featured-category {

    display: inline-block;

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--primary);

    margin-bottom: 1rem;

}

.featured-content h3 {

    font-size: 1.8rem;

    line-height: 1.3;

    margin-bottom: 1rem;

}

.featured-description {

    color: var(--text-light);

    margin-bottom: 1.5rem;

}

.featured-meta {

    font-size: .9rem;

    color: var(--text-light);

}


/* ==========================================
   ARTICLES GRID
========================================== */

.articles-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(340px,1fr)
        );

    gap: 2rem;

}


/* ==========================================
   ARTICLE CARD
========================================== */

.article-card {

    overflow: hidden;

    background: white;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    transition:
        var(--transition);

}

.article-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}

.article-card-image {
    width: 100%;
    height: 400px; /* controla el tamaño real */
    overflow: hidden;
}

.article-card-image img {
    height: 400px;
    object-fit: cover;
}

.article-card:hover img {

    transform:
        scale(1.03);

}

.article-card-content {

    padding: 1.25rem;

}

.article-card-category {

    display: inline-block;

    font-size: .8rem;

    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    margin-bottom: .75rem;

}

.article-card h3 {

    font-size: 1.2rem;

    line-height: 1.4;

    margin-bottom: .75rem;

}

.article-description {

    color: var(--text-light);

    margin-bottom: 1rem;

}

.article-meta {

    font-size: .9rem;

    color: var(--text-light);

}


/* ==========================================
   TOOLS
========================================== */

.tools-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap: 1.5rem;

}

.tool-card {

    padding: 1.5rem;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background: white;

    transition:
        var(--transition);

}

.tool-card:hover {

    border-color:
        var(--primary);

    transform:
        translateY(-3px);

}

.tool-card h3 {

    margin-bottom: .75rem;

}

.tool-card p {

    color: var(--text-light);

    margin-bottom: 1rem;

}

.tool-card a {

    font-weight: 600;

}


/* ==========================================
   FOOTER
========================================== */

.site-footer {

    margin-top: 6rem;

    border-top:
        1px solid var(--border);

    background:
        var(--surface);

}

.site-footer .container {

    padding:
        2rem 0;

}

.site-footer p {

    color: var(--text-light);

}

.site-footer p + p {

    margin-top: .5rem;

}


/* ==========================================
   UTILITIES
========================================== */

.hidden {

    display: none !important;

}

.text-center {

    text-align: center;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .featured-article {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 768px) {

    .site-header .container {

        flex-direction: column;

        gap: 1rem;

    }

    .main-nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 1rem;

    }

    .hero {

        padding:
            3rem 0;

    }

    .hero h1 {

        font-size: 2.2rem;

    }

    .articles-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 480px) {

    .container {

        width:
            min(
                100% - 1rem,
                var(--max-width)
            );

    }

    .featured-content {

        padding: 1.25rem;

    }

}