/* Trip Header Readability Enhancements
 * Glassmorphic containers for readable text over any background image
 */

/* ===================================
   Glassmorphic Container (Reusable)
   =================================== */

.glass-container {
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    border-radius: 16px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Light variant for less dramatic backgrounds */
.glass-container-light {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ===================================
   Trip Detail Header Enhancements
   =================================== */

.trip-detail-header {
    /* Stronger gradient overlay for better contrast */
    background: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.5)
        ),
        var(--trip-cover-image, url('/static/tripgogo/images/hero-bg.jpg'))
        center/cover no-repeat;
}

/* Enhanced text shadows for main title */
.trip-detail-header .trip-title {
    text-shadow:
        0 0 20px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Enhanced description readability */
.trip-detail-header .trip-description {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Keep existing meta-items and stat styles - they're perfect! */
/* No changes needed for .trip-meta-item and .trip-stat */

/* ===================================
   Trip Builder Header Enhancements
   =================================== */

.trip-view-header {
    /* Stronger gradient for trip builder */
    background: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.4)
        ),
        url('/static/tripgogo/images/hero-bg.jpg') center/cover no-repeat;
}

/* Enhanced title visibility */
.trip-view-header h1 {
    text-shadow:
        0 0 20px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Enhanced creator badge */
.trip-view-creator {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced description */
.trip-view-header .trip-description {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Enhanced date badge */
.trip-date {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===================================
   Responsive Adjustments
   =================================== */

@media (max-width: 768px) {
    .glass-container {
        padding: 1rem;
        border-radius: 12px;
    }

    .glass-container-light {
        padding: 1rem;
    }

    /* Ensure readability on mobile */
    .trip-detail-header .trip-title,
    .trip-view-header h1 {
        text-shadow:
            0 0 30px rgba(0, 0, 0, 1),
            0 2px 6px rgba(0, 0, 0, 0.9),
            0 4px 12px rgba(0, 0, 0, 0.7);
    }
}

/* ===================================
   Fallback for browsers without backdrop-filter support
   =================================== */

@supports not (backdrop-filter: blur(12px)) {

    .trip-view-creator,
    .trip-date {
        background: rgba(0, 0, 0, 0.75);
    }
}