/* Hero / Landing */
.hero-section {
    background: var(--primary-gradient);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

/* Plain variant: no background and reduced vertical spacing (top unchanged, bottom reduced by 30%) */
.hero-section.plain {
    background: transparent !important;
    color: var(--text) !important;
    padding: 1.5rem 0 1.05rem 0 !important; /* 1.05rem is ~30% less than 1.5rem */
}

/* Cover hero variant: uses bakerly cover page image */
.hero-section.cover {
    background-image: url('/baker_logo/bakerly%20cover%20page.png');
    background-size: cover;
    background-position: center center;
    color: white;
    /* Ensure hero is pushed below the sticky header using a CSS variable set by JS */
    /* Height reduced by 40%: smaller padding */
    padding: calc(var(--site-header-height, 72px) + 0.5rem) 0 0.5rem 0;
    min-height: 173px;
    position: relative;
}
.hero-section.cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}
.hero-section.cover .container { position: relative; z-index: 2; }

@media (max-width: 768px) {
    .hero-section.cover { padding: calc(var(--site-header-height, 64px) + 0.81rem) 0 1.08rem 0; min-height: 130px; }
} 

.hero-section.plain h1,
.hero-section.plain .lead {
    color: var(--text) !important;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-hero { padding: 0.9rem 1.8rem; border-radius: 40px; font-weight: 600; }
.btn-hero-primary { background: white; color: var(--brand-primary); }
.btn-hero-secondary { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.12); }

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.75rem; }
}