/* =====================================================
   RESUME TARGET - SERVICE PAGES MOBILE CSS
   /asset/css/templates/service-pages-mobile.css
   v20260123b - Mobile optimizations for service pages
   
   IMPORTANT: All rules must be inside @media query!
   The media attribute on <link> only controls loading,
   not rule application.
   ===================================================== */

@media (max-width: 767px) {
    
    /* Hide blue top bar on mobile for service pages */
    .service-page-body .top-bar,
    .service-page-body .header-top,
    .site-header .top-bar {
        display: none !important;
    }
    
    /* Adjust header spacing when top bar is hidden */
    .service-page-body .site-header {
        /* No top bar, so header starts at top */
    }
    
    /* Adjust mobile menu position */
    .service-page-body .mobile-menu {
        top: 70px; /* Just main-nav height, no top-bar */
    }
    
    /* Hero section mobile adjustments */
    .hero-service {
        padding: 40px 0 60px;
    }
    
    .hero-service .container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-service h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    
    .hero-sub {
        font-size: 16px;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-cta .btn-service {
        width: 100%;
        justify-content: center;
    }
    
    .hero-visual {
        margin-top: 32px;
    }
    
    /* Feature rows stack on mobile */
    .feature-row-service .container {
        flex-direction: column;
    }
    
    .feature-row-service.alt .container,
    .feature-row-service.reversed .container {
        flex-direction: column;
    }
    
    .feature-text-service,
    .feature-visual {
        width: 100%;
        max-width: 100%;
    }
    
    .feature-visual {
        margin-top: 24px;
    }
    
    /* Section titles */
    .section-title-service {
        font-size: 24px;
    }
    
    .section-subtitle {
        font-size: 15px;
    }
    
    /* Checklist stacked */
    .checklist-stacked {
        gap: 12px;
    }
    
    .check-item {
        padding: 12px;
    }
    
    /* Cards and grids */
    .ps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .reason-cards,
    .trust-cards,
    .when-scenarios {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Competition math visual */
    .competition-math-visual {
        flex-direction: column;
        gap: 12px;
    }
    
    .math-operator {
        transform: rotate(90deg);
    }
    
    /* Process timeline */
    .process-timeline {
        flex-direction: column;
    }
    
    .process-step {
        flex-direction: row;
        text-align: left;
    }
    
    .step-line {
        display: none;
    }
    
    /* Service navigation */
    .service-nav .container {
        flex-direction: column;
        gap: 12px;
    }
    
    .service-nav-item {
        width: 100%;
        text-align: center;
    }
    
    /* CTA section */
    .cta-section-service {
        padding: 48px 20px;
    }
    
    .cta-section-service h2 {
        font-size: 24px;
    }
    
    /* Guarantee box */
    .guarantee-box {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    /* Breadcrumb adjustments */
    .breadcrumb {
        padding: 10px 0;
        font-size: 13px;
    }
    
    .breadcrumb .container {
        gap: 6px;
    }
    
    /* Stats visual */
    .stats-visual-row {
        flex-direction: column;
        gap: 16px;
    }
    
    /* LinkedIn before/after */
    .linkedin-before-after {
        flex-direction: column;
        gap: 16px;
    }
    
    .ba-arrow {
        transform: rotate(90deg);
    }
    
    /* Targeting comparison */
    .targeting-comparison-visual {
        flex-direction: column;
        gap: 16px;
    }
    
    /* Dual focus visual */
    .dual-focus-visual {
        flex-direction: column;
        gap: 16px;
    }
    
    /* Changes table scroll */
    .changes-table {
        overflow-x: auto;
    }
    
    .changes-row {
        min-width: 500px;
    }
    
}