/**
 * Destination Page Specific Styles
 * Hero backgrounds, page-specific layouts
 */

/* ========================================
   DESTINATION HERO with Background Image
   ======================================== */

.destination-hero {
    position: relative;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* Fallback gradient for failed image loads */
    background-color: #2563eb;
    background-image: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.destination-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Overlay is injected dynamically via inline <style> tag */
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(30, 64, 175, 0.7));
}

/* Ensure all content is above overlay */
.destination-hero > * {
    position: relative;
    z-index: 2;
}

.destination-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Enhanced text readability with text-shadow */
.destination-hero h1,
.destination-hero p,
.destination-hero nav {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Trust badges - enhanced contrast and backdrop */
.destination-hero .backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Desktop enhancements */
@media (min-width: 768px) {
    .destination-hero {
        min-height: 600px;
        background-attachment: fixed; /* Parallax effect */
    }

    .destination-hero h1 {
        font-size: 3.5rem; /* Between 3xl and 5xl for better balance */
    }

    .destination-hero p {
        max-width: 42rem; /* Prevent subtitle from being too wide */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .destination-hero {
        min-height: 480px; /* Increased from 400px for better content spacing */
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Darken overlay by 10% on mobile for better readability */
    .destination-hero::before {
        background: linear-gradient(135deg,
            rgba(37, 99, 235, 0.87),
            rgba(30, 64, 175, 0.80)
        ) !important;
    }

    /* Stronger text-shadow on mobile for sun glare conditions */
    .destination-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4),
                     0 2px 4px rgba(0, 0, 0, 0.6);
    }

    .destination-hero p {
        font-size: 1.125rem;
    }

    /* Tighter spacing for trust badges */
    .destination-hero .flex.flex-wrap {
        gap: 0.5rem !important;
    }

    .destination-hero .backdrop-blur-md {
        padding: 0.5rem 0.75rem;
        font-size: 0.813rem; /* 13px */
    }
}