/* ============================================================
   Block: hero  (sections/block_hero.php)
   Page hero — eyebrow, title (+accent), subtitle, 2 buttons, optional image.
   Loaded only on pages that contain a "hero" block.
   Note: .hero, .hero-grid, .hero-title etc. live in style.css (shared layout).
   ============================================================ */

.block-hero {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

/* Each title part on its own line so each colour stays on a single line */
.block-hero .hero-title__main,
.block-hero .hero-title__accent {
    display: block;
}

.block-hero .hero-title em {
    font-style: normal;
    color: var(--accent);
}

.block-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.block-hero__media img {
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

/* ── Mobile: stacked, full-width, equal-size, centered buttons ── */
@media (max-width: 767px) {
    .block-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .block-hero__actions > a {
        width: 100%;
        text-align: center;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 0.9rem;
    }
}