/* ============================================================
   HOMEPAGE FIXES — Mobile Responsive
   /assets/css/homepage-fix.css
   ============================================================ */

/* ─── Ensure all grid cards take full width on mobile ─── */
@media (max-width: 768px) {
    .pillar-card,
    .routing-card,
    .sustainability-card,
    .purity-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix pillar card button stacking */
    .pillar-card .btn {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Ensure brand names are readable */
    .brand-name {
        font-size: 24px !important;
    }
    
    /* Fix hero image overlay for mobile */
    .hero-background .hero-image {
        object-position: center 30%;
    }
    
    /* Fix hero text contrast */
    .hero-headline {
        font-size: 30px !important;
    }
    .hero-subheadline {
        font-size: 16px !important;
        color: rgba(255,255,255,0.95) !important;
    }
    
    /* Fix professional tooltip on mobile */
    .professional-tooltip-text {
        width: 200px !important;
        font-size: 12px !important;
    }
}

/* ─── Extra small screens ─── */
@media (max-width: 480px) {
    .hero-headline {
        font-size: 26px !important;
    }
    .hero-subheadline {
        font-size: 14px !important;
    }
    .brand-name {
        font-size: 20px !important;
    }
    .pillar-card .card-description {
        font-size: 13px !important;
    }
    .section-headline {
        font-size: 22px !important;
    }
    .section-subheadline {
        font-size: 14px !important;
    }
}