/* ==========================================================================
   ProHomes Responsive Styles
   Mobile-first approach with breakpoints
   ========================================================================== */

/* ==========================================================================
   MOBILE FIRST BASE (< 768px)
   ========================================================================== */

/* Hero adjustments */
.ph-hero {
    min-height: 80vh;
}

.ph-hero-content {
    padding: var(--ph-space-lg);
}

.ph-hero-title {
    font-size: 2rem;
}

.ph-hero-description {
    font-size: 1rem;
}

.ph-hero-ctas {
    flex-direction: column;
}

.ph-hero-ctas .wp-block-button,
.ph-hero-ctas .ph-btn {
    width: 100%;
}

/* About section */
.ph-about-section {
    grid-template-columns: 1fr;
}

.ph-about-content {
    padding: var(--ph-space-xl);
}

/* Solutions */
.ph-solutions-grid {
    grid-template-columns: 1fr;
}

/* Method section */
.ph-method-pillars {
    grid-template-columns: 1fr;
}

/* Statistics */
.ph-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--ph-space-lg);
}

.ph-stat-number,
.ph-counter-number {
    font-size: 2.5rem;
}

/* Projects */
.ph-projects-grid {
    grid-template-columns: 1fr;
}

.ph-projects-overlay {
    background: rgba(27, 43, 79, 0.85);
}

/* Team */
.ph-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ph-space-md);
}

/* Values */
.ph-values-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Contact */
.ph-contact-grid {
    grid-template-columns: 1fr;
}

/* Footer */
.ph-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
}

.ph-footer-brand p {
    max-width: none;
}

.ph-footer-bottom {
    flex-direction: column;
    gap: var(--ph-space-sm);
    text-align: center;
}

/* Testimonials */
.ph-testimonial-card {
    flex: 0 0 85%;
}

/* ==========================================================================
   TABLET PORTRAIT (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
    .ph-hero {
        min-height: 85vh;
    }
    
    .ph-hero-title {
        font-size: 2.5rem;
    }
    
    .ph-hero-ctas {
        flex-direction: row;
    }
    
    .ph-hero-ctas .wp-block-button,
    .ph-hero-ctas .ph-btn {
        width: auto;
    }
    
    /* About section */
    .ph-about-section {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Solutions */
    .ph-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Statistics */
    .ph-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Projects */
    .ph-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Team */
    .ph-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Values */
    .ph-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Footer */
    .ph-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }
    
    /* Testimonials */
    .ph-testimonial-card {
        flex: 0 0 45%;
    }
}

/* ==========================================================================
   TABLET LANDSCAPE / SMALL DESKTOP (>= 992px)
   ========================================================================== */

@media (min-width: 992px) {
    .ph-hero {
        min-height: 90vh;
    }
    
    .ph-hero-content {
        padding: var(--ph-space-2xl);
    }
    
    .ph-hero-title {
        font-size: 3rem;
    }
    
    /* Solutions */
    .ph-solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Method */
    .ph-method-pillars {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Statistics */
    .ph-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ph-stat-number,
    .ph-counter-number {
        font-size: 3rem;
    }
    
    /* Projects */
    .ph-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ph-projects-overlay {
        background: linear-gradient(
            to left,
            transparent 0%,
            rgba(27, 43, 79, 0.9) 50%
        );
    }
    
    /* Team */
    .ph-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Values */
    .ph-values-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Contact */
    .ph-contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Footer */
    .ph-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    
    .ph-footer-bottom {
        flex-direction: row;
    }
    
    /* Testimonials */
    .ph-testimonial-card {
        flex: 0 0 350px;
    }
}

/* ==========================================================================
   DESKTOP (>= 1200px)
   ========================================================================== */

@media (min-width: 1200px) {
    .ph-hero-title {
        font-size: 3.5rem;
    }
    
    .ph-hero-description {
        font-size: 1.125rem;
    }
    
    .ph-stat-number,
    .ph-counter-number {
        font-size: 3.5rem;
    }
    
    /* Increase section padding */
    .ph-section,
    .wp-block-group.ph-section-group {
        padding: var(--ph-space-4xl) var(--ph-space-md);
    }
}

/* ==========================================================================
   LARGE DESKTOP (>= 1400px)
   ========================================================================== */

@media (min-width: 1400px) {
    .ph-hero-title {
        font-size: 4rem;
    }
    
    .ph-stat-number,
    .ph-counter-number {
        font-size: 4rem;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE OVERRIDES
   ========================================================================== */

/* Mobile menu adjustments */
@media (max-width: 991px) {
    /* Ensure mobile menu trigger is visible on dark header */
    .ct-header-trigger {
        color: var(--ph-white);
    }
    
    /* Mobile menu panel - dark theme to match brand */
    #offcanvas {
        background: var(--ph-navy);
    }
    
    #offcanvas .ct-menu-link {
        font-family: var(--ph-font-heading);
        font-weight: 500;
        color: var(--ph-white);
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.9375rem;
    }
    
    #offcanvas .ct-menu-link:hover {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* Desktop header */
@media (min-width: 992px) {
    /* Navigation styling - ONLY typography, let Blocksy handle colors */
    .ct-header .ct-menu > li > a {
        font-family: var(--ph-font-heading);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 0.5rem 1rem;
        /* Color handled by Blocksy (transparent/default/sticky states) */
    }
    
    /* Hover and active styles are in fixes.css */
}

/* ==========================================================================
   UTILITY RESPONSIVE CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .ph-hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .ph-hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .ph-hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .ph-show-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   ANIMATION REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ph-solution-card:hover,
    .ph-team-card:hover .ph-team-photo img,
    .ph-project-card:hover img {
        transform: none;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .ph-hero {
        min-height: auto;
        page-break-after: always;
    }
    
    .ph-hero-overlay {
        background: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    
    .ph-btn,
    .wp-block-button,
    .ct-header,
    .ph-footer {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100%;
    }
}