/* 
   Overrides for inner page specific styling.
   This ensures the red backgrounds hardcoded in inner css files (tyres.css, services.css, etc.)
   are overridden by the new Premium Navy luxury layout. 
*/

.page-header,
.booking-hero {
    background: linear-gradient(to right, rgba(11, 14, 20, 0.95) 0%, rgba(11, 14, 20, 0.6) 100%), url('../assets/homepage_hero_background_pic.png') center/cover no-repeat !important;
    background-color: #0b0e14 !important; /* Fallback */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #F3F4F6 !important;
    padding: 6rem 0 3rem !important;
    text-align: center;
}

.page-header h1,
.booking-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
    margin-bottom: 0.7rem !important;
    background: linear-gradient(to right, #ffffff, #D4AF37) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Also ensure inner navigation isn't broken */
.page-header p,
.booking-hero p {
    color: #9CA3AF !important;
}

/* Red button overrides in specific pages */
.btn-primary {
    background: linear-gradient(135deg, #D4AF37, #B48E25) !important;
    color: #0B0E14 !important; 
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2) !important;
    border-color: #D4AF37 !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FDE047, #D4AF37) !important;
}

@media (max-width: 1024px) {
    .page-header,
    .booking-hero {
        margin-top: 88px !important;
        padding: 5rem 0 3rem !important;
    }

    .story-highlights,
    .overview-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }

    .team-member.featured,
    .book-now-content {
        grid-template-columns: 1fr !important;
    }

    .team-member.featured {
        grid-column: span 1 !important;
    }
}

@media (max-width: 768px) {
    .page-header,
    .booking-hero {
        margin-top: 82px !important;
        padding: 4.5rem 0 2.5rem !important;
    }

    .page-header h1,
    .booking-hero h1 {
        font-size: clamp(2rem, 8vw, 2.6rem) !important;
    }

    .page-header p,
    .booking-hero p {
        font-size: 1rem !important;
    }

    .highlight,
    .guarantee-item,
    .hour-item {
        gap: 0.75rem !important;
    }

    .highlight {
        flex-direction: column !important;
        text-align: center !important;
    }

    .service-item,
    .selected-item {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .selected-item {
        display: flex !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .service-item .service-price {
        text-align: center !important;
    }

    .basket-actions,
    .form-actions,
    .cta-buttons {
        width: 100%;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .basket-actions .btn,
    .form-actions .btn,
    .cta-buttons .btn,
    .book-now-btn {
        width: 100%;
        max-width: none !important;
    }

    .modal-content {
        width: calc(100% - 1rem) !important;
        margin: 1rem auto !important;
        max-height: calc(100vh - 2rem) !important;
    }

    .modal-header,
    .quote-form,
    .service-form,
    .contact-form,
    .booking-form-container,
    .status-form,
    .status-result {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .quote-basket {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .page-header,
    .booking-hero {
        padding: 4rem 0 2rem !important;
    }

    .highlight,
    .reason-card,
    .community-item,
    .service-item,
    .hours-card,
    .contact-card {
        padding: 1.25rem !important;
    }

    .book-now-features {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .feature {
        justify-content: center;
    }
}