/* zetta-seo-managed
 * Site fixes loaded AFTER style.css and zg-public.css (see templates/header.php).
 *
 * 1) Tours page hero (/destinations) was too dark. The overlay is now a gentle left-to-right fade:
 *    dark enough behind the headline to read it, light on the right so the photo shows.
 *    Tune the three numbers (0 = clear, 1 = black):
 */
:root {
    --zg-hero-left: .55;
    --zg-hero-mid: .28;
    --zg-hero-right: .08;
}

section.hero.tours-hero {
    background-size: cover;
    background-position: center;
    background-blend-mode: normal !important;
    filter: none !important;
}

section.hero.tours-hero .hero-overlay {
    background: linear-gradient(90deg,
        rgba(8, 30, 50, var(--zg-hero-left)) 0%,
        rgba(8, 30, 50, var(--zg-hero-mid)) 55%,
        rgba(8, 30, 50, var(--zg-hero-right)) 100%) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

section.hero.tours-hero h1,
section.hero.tours-hero p,
section.hero.tours-hero .stat-item,
section.hero.tours-hero .badge {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
section.hero.tours-hero .badge { text-shadow: none; }

/* On phones the text spans the full width, so use an even, lighter wash */
@media (max-width: 991.98px) {
    section.hero.tours-hero .hero-overlay {
        background: rgba(8, 30, 50, .42) !important;
    }
}