/**
 * Livro - Page Banner Component Styles
 */

/* Base page banner styling */
.page-banner {
    padding: 8rem 0 4rem;
    text-align: center;
    background-color: var(--livro-cerulean);
    margin-top: 0;
    position: relative;
}

.page-banner h1, 
.page-banner p {
    color: white;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.page-banner h1 {
    margin-bottom: 1rem;
}

.page-banner p {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* Background color variations */
.page-banner.white-bg {
    background-color: white;
}

.page-banner.white-bg h1,
.page-banner.white-bg p {
    color: var(--livro-dark);
}

.page-banner.cyan-bg {
    background-color: var(--livro-cyan);
}

.page-banner.red-bg {
    background-color: var(--livro-red);
}

.page-banner.yellow-bg {
    background-color: var(--livro-yellow);
}

.page-banner.yellow-bg h1,
.page-banner.yellow-bg p {
    color: var(--livro-dark);
}

/* Responsive styles */
@media (max-width: 992px) {
    .page-banner {
        padding: 7rem 0 3.5rem;
    }
    
    .page-banner p {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .page-banner {
        padding: 6rem 0 3rem;
    }
    
    .page-banner p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .page-banner {
        padding: 5rem 0 2.5rem;
    }
    
    .page-banner h1 {
        /* Add hyphenation for small screens */
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        word-break: break-word;
    }
    
    .page-banner p {
        font-size: 1rem;
    }
}