/**
 * Capabilities Page Specific Styling
 * 
 * Uses stable selectors that won't break when images change
 * Targets tiles using the no-mobile-gap class for reliability
 */

/* Desktop-specific styles for capability tiles */
@media screen and (min-width: 768px) {
    /* Capability tile headings - target all tiles in the grid */
    .page-id-316 .vc_col-lg-4 .vc_column-inner h6,
    .page-id-316 .vc_col-lg-4 .wpb_text_column h6 {
        font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 34px !important;
        color: #ffffff !important;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5) !important;
        margin-bottom: 20px !important;
    }
    
    /* Capability tile paragraphs - target all tiles in the grid */
    .page-id-316 .vc_col-lg-4 .vc_column-inner p,
    .page-id-316 .vc_col-lg-4 .wpb_text_column p {
        font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 27px !important;
        color: #ffffff !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Tablet Responsive (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .page-id-316 .vc_col-lg-4 .vc_column-inner h6,
    .page-id-316 .vc_col-md-4 .vc_column-inner h6,
    .page-id-316 .vc_col-lg-4 .wpb_text_column h6,
    .page-id-316 .vc_col-md-4 .wpb_text_column h6 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    .page-id-316 .vc_col-lg-4 .vc_column-inner p,
    .page-id-316 .vc_col-md-4 .vc_column-inner p,
    .page-id-316 .vc_col-lg-4 .wpb_text_column p,
    .page-id-316 .vc_col-md-4 .wpb_text_column p {
        font-size: 16px !important;
        line-height: 26px !important;
    }
}

/* Mobile styles - maintain readability on small screens */
@media screen and (max-width: 767px) {
    .page-id-316 .vc_col-lg-4 .vc_column-inner h6,
    .page-id-316 .vc_col-md-4 .vc_column-inner h6,
    .page-id-316 .vc_col-lg-4 .wpb_text_column h6,
    .page-id-316 .vc_col-md-4 .wpb_text_column h6 {
        font-size: 22px !important;
        line-height: 30px !important;
        margin-bottom: 15px !important;
        /* Ensure text is readable on mobile with different backgrounds */
        color: #ffffff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    }
    
    .page-id-316 .vc_col-lg-4 .vc_column-inner p,
    .page-id-316 .vc_col-md-4 .vc_column-inner p,
    .page-id-316 .vc_col-lg-4 .wpb_text_column p,
    .page-id-316 .vc_col-md-4 .wpb_text_column p {
        font-size: 15px !important;
        line-height: 24px !important;
        /* Ensure text is readable on mobile with different backgrounds */
        color: #ffffff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    }
}

/* Additional specificity for tiles with background images */
.page-id-316 .vc_col-lg-4 .vc_column-inner[style*="background"] h6,
.page-id-316 .vc_col-lg-4 .vc_column-inner[style*="background"] p {
    /* Ensures text remains visible over any background image */
    position: relative;
    z-index: 2;
}