/* styles.css - Boreal Non-Fiction Film Institute (Newspaper Editorial Style) */

:root {
    --boreal-green: #2c402e;
    --boreal-clay: #fef3c7;
    --boreal-white: #fbfbf9;
    --boreal-black: #1c1917;
    --boreal-border: #d6d3d1;
    
    --font-heading: 'Lora', serif;
    --font-body: 'Merriweather', serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--boreal-white);
    color: var(--boreal-black);
    font-family: var(--font-body);
    line-height: 1.8;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--boreal-green);
}

/* Masthead */
.masthead {
    max-width: 1000px;
    margin: 40px auto 20px auto;
    text-align: center;
    padding: 0 20px;
}

.masthead-logo {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--boreal-black);
    text-decoration: none;
    letter-spacing: 2px;
    display: block;
}

.masthead-subtitle {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--boreal-green);
    margin-top: 10px;
    display: block;
}

.masthead-divider {
    border: none;
    border-top: 1px solid var(--boreal-black);
    margin: 15px 0;
}

.masthead-divider.double {
    border-top: 4px double var(--boreal-black);
}

.masthead-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.masthead-nav a {
    color: var(--boreal-black);
    margin: 0 20px;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.masthead-nav a:hover {
    color: var(--boreal-green);
}

.masthead-btn {
    border: 1px solid var(--boreal-black);
    padding: 6px 18px;
}

/* News Layout Container */
.news-layout {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero */
.news-hero {
    padding: 60px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    color: var(--boreal-black);
    margin-bottom: 20px;
    text-align: center;
}

.byline {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--boreal-green);
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.hero-image-wrap {
    margin-bottom: 40px;
    border: 1px solid var(--boreal-border);
    padding: 10px;
    background-color: #ffffff;
}

.hero-image-wrap img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.photo-caption {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-style: italic;
    color: #666;
    display: block;
    margin-top: 8px;
    text-align: center;
}

.hero-paragraph {
    font-size: 1.25rem;
    margin-bottom: 40px;
    text-align: justify;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-news {
    background-color: var(--boreal-black);
    color: var(--boreal-white);
    padding: 15px 35px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
}

.link-news {
    font-family: var(--font-heading);
    color: var(--boreal-black);
    font-weight: 700;
    margin-left: 20px;
    text-decoration: none;
}

/* About Section */
.news-about {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.about-article h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.article-split-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
}

.article-columns {
    text-align: justify;
}

.article-columns p {
    margin-bottom: 20px;
}

.about-side-img {
    border: 1px solid var(--boreal-border);
    padding: 10px;
    background-color: #ffffff;
}

.about-side-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Instructor Section */
.news-instructor {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.instructor-article h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.instructor-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
}

.instructor-mugshot {
    border: 1px solid var(--boreal-border);
    padding: 8px;
    background-color: #ffffff;
}

.instructor-mugshot img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.instructor-bio-text h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

/* Benefits Section */
.news-benefits {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-benefits h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.benefit-box h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* Curriculum Section */
.news-curriculum {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-curriculum h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.syll-list {
    max-width: 800px;
    margin: 0 auto;
}

.syll-item {
    border-bottom: 1px dashed var(--boreal-border);
    padding: 25px 0;
}

.syll-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Gallery Section */
.news-gallery {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-gallery h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.gallery-photo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.gallery-photo-item {
    border: 1px solid var(--boreal-border);
    padding: 10px;
    background-color: #ffffff;
}

.gallery-photo-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* Pricing Section */
.news-pricing {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-pricing h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.rates-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.rate-card {
    border: 1px solid var(--boreal-border);
    padding: 40px 30px;
    text-align: center;
    background-color: var(--boreal-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rate-card.featured {
    border: 2px solid var(--boreal-black);
    background-color: var(--boreal-clay);
}

.rate-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.price {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--boreal-green);
    margin-bottom: 20px;
    display: block;
}

.btn-card-news {
    border: 1px solid var(--boreal-black);
    color: var(--boreal-black);
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.btn-card-news-invert {
    background-color: var(--boreal-black);
    color: var(--boreal-white);
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

/* Testimonials */
.news-testimonials {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-testimonials h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.testimonials-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.quote p {
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 15px;
}

.quote span {
    font-family: var(--font-heading);
    color: var(--boreal-green);
    font-weight: 700;
}

/* FAQ */
.news-faq {
    padding: 80px 0;
    border-bottom: 1px solid var(--boreal-border);
}

.news-faq h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.faq-box h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

/* Contact */
.news-contact {
    padding: 80px 0;
}

.news-contact h2 {
    text-align: center;
    margin-bottom: 40px;
}

.contact-box {
    border: 1px solid var(--boreal-border);
    padding: 50px;
    max-width: 700px;
    margin: 0 auto;
}

.contact-box input, .contact-box select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--boreal-border);
    margin-bottom: 20px;
    font-family: var(--font-body);
    background-color: var(--boreal-white);
    outline: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.check-box-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.check-box-wrap input {
    width: auto;
    margin-right: 15px;
    margin-bottom: 0;
}

.submit-news {
    background-color: var(--boreal-black);
    color: var(--boreal-white);
    padding: 15px;
    width: 100%;
    border: none;
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
}

/* Footer */
.news-footer {
    padding: 60px 20px;
    background-color: var(--boreal-black);
    color: var(--boreal-white);
    font-size: 0.85rem;
}

.footer-wrap {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.footer-links a {
    color: var(--boreal-white);
    margin-left: 20px;
}

@media (max-width: 968px) {
    .masthead-nav, .article-split-container, .instructor-split, .benefits-grid, .rates-flex, .gallery-photo-row, .testimonials-row, .faq-grid, .footer-wrap {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 30px;
    }
    .masthead-nav {
        margin-top: 15px;
    }
    .masthead-nav a {
        margin: 5px 0;
    }
    .news-hero h1 {
        font-size: 2.8rem;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}