/* ====================================
   LAYOUT STYLES
   ==================================== */

.hero {
    /* Aplica a imagem de fundo com um gradiente preto translúcido por cima */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('https://portaldalapinha.com.br/wp-content/uploads/2019/09/sitio-jatoba.jpg');
    background-size: cover;      /* Garante que a imagem cubra toda a área */
    background-position: center; /* Centraliza a imagem */
    min-height: 95vh;
    display: flex;
    align-items: center;
    color: white;
}

.services {
    padding: 6rem 0;
    background-color: var(--bg-light);
}

.featured {
    padding: 6rem 0;
}

.cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.footer {
    background-color: var(--text-dark);
    color: white;
    padding: 3rem 0 2rem;
}

/* Design Hero Section - LAYOUT */
.design-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 8rem 0 6rem;
    margin-top: 4rem;
}

/* Design Sections - LAYOUT */
.design-section {
    padding: 6rem 0;
}

.design-section:nth-child(even) {
    background-color: var(--bg-light);
}

/* Blog Hero Section - LAYOUT */
.blog-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 8rem 0 4rem;
    margin-top: 4rem;
    text-align: center;
}

/* Blog Content Section - LAYOUT */
.blog-content {
    padding: 6rem 0;
}

/* Single Post Layout Sections */
.single-breadcrumb {
    background: var(--bg-light);
    padding: 2rem 0 1rem;
    margin-top: 6rem;
}

.single-content {
    padding: 3rem 0 6rem;
    background: var(--bg-white);
}

/* Blog Sidebar Layout */
.blog-sidebar {
    padding-left: 2rem;
}

/* Reading Progress Bar - LAYOUT */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.1);
}

/* Blog Posts Container */
.blog-posts {
    min-height: 500px;
}

/* ====================================
   RESPONSIVE DESIGN - LAYOUT
   ==================================== */
@media (max-width: 1200px) {
    .blog-sidebar {
        padding-left: 1rem;
    }
}

@media (max-width: 992px) {
    .blog-sidebar {
        padding-left: 0;
        margin-top: 3rem;
    }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .hero .lead { font-size: 1.1rem; }
    .btn-hero { display: block; margin-bottom: 1rem; }
    .cta h2 { font-size: 2rem; }
    .service-card { margin-bottom: 2rem; }
    .blog-hero { padding: 6rem 0 3rem; }
    .blog-content { padding: 4rem 0; }
    .design-hero { padding: 6rem 0 4rem; }
    .design-section { padding: 4rem 0; }
    .single-breadcrumb { padding: 1.5rem 0 0.5rem; }
    .single-content { padding: 2rem 0 4rem; }
}

@media (max-width: 576px) {
    .filter-btn { flex: 1; min-width: 120px; }
    .blog-filters { justify-content: stretch; }
}