/* mobile.css - POSH-INTENT Mobile CSS Optimization */

@media (max-width: 768px) {
  /* ==========================================================================
     SECTION 14: GENERAL TYPOGRAPHY & SPACING
     ========================================================================== */
  :root {
    --mobile-padding-x: 16px;
    --mobile-section-py: 40px;
    --touch-target: 44px;
  }

  html, body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  h1, .page-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }

  h2, .section-title {
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
  }

  h3, .card-title {
    font-size: clamp(16px, 5vw, 18px) !important;
    line-height: 1.3 !important;
  }

  p, .body-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  small, .caption-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  section {
    padding-top: var(--mobile-section-py) !important;
    padding-bottom: var(--mobile-section-py) !important;
    padding-left: var(--mobile-padding-x) !important;
    padding-right: var(--mobile-padding-x) !important;
  }

  a, button {
    min-height: var(--touch-target) !important;
    touch-action: manipulation;
  }

  /* ==========================================================================
     SECTION 1: HEADER & NAVIGATION
     ========================================================================== */
  nav, .header {
    height: 60px !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(2, 6, 23, 0.95) !important;
  }

  .logo {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }

  .logo .brand-icon, 
  .logo .bur-icon {
    width: auto !important;
    height: 48px !important;
    margin-right: 8px !important;
    object-fit: contain !important;
  }

  /* Hamburger Toggle */
  .nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 28px !important;
    height: 24px !important;
    position: relative !important;
    z-index: 1001 !important;
  }

  /* Nav Menu Container */
  nav ul {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important; /* Hidden by default */
    width: 100% !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 80px 20px 40px !important;
    transition: right 0.3s ease-in-out !important;
    border-radius: 0 !important;
    z-index: 1000 !important;
  }

  nav.mobile-open ul {
    right: 0 !important; /* Show when active */
  }

  nav ul li {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  nav ul a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .nav-cta {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  /* ==========================================================================
     SECTION 2: HERO SECTION WITH VIDEO BACKGROUND
     ========================================================================== */
  .hero-video-bg, .reel-bg-video {
    display: none !important; /* Hide video on mobile */
  }

  .hero, .reel-hero {
    min-height: 50vh !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    background: var(--bg-main) !important;
    background-image: linear-gradient(to bottom, var(--bg-main), var(--bg-alt)) !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-text-overlay {
    padding: 16px !important;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .hero .btn-primary,
  .hero .btn-ghost {
    width: 90% !important;
    max-width: 320px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
  }

  /* ==========================================================================
     SECTION 3: RESULTS/ANALYTICS DASHBOARD
     ========================================================================== */
  .analytics-section {
    padding: 32px 16px !important;
  }

  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .stat-card {
    padding: 16px !important;
    width: 100% !important;
  }

  .stat-num {
    font-size: clamp(28px, 6vw, 32px) !important;
    font-weight: 700 !important;
    word-break: break-word !important;
  }

  .stat-label {
    font-size: 12px !important;
    margin-top: 8px !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .chart-container {
    width: 100% !important;
    height: 200px !important;
    margin-top: 20px !important;
  }

  .chart-legend {
    flex-direction: column !important;
    gap: 8px !important;
  }

  @media (max-width: 480px) {
    .stats-grid {
      grid-template-columns: 1fr !important; /* Stack on very small screens */
    }
  }

  /* ==========================================================================
     SECTION 4: CONTENT PLANNER CALENDAR
     ========================================================================== */
  .calendar-section {
    padding: 32px 16px !important;
  }

  .calendar-section h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  .calendar-card {
    padding: 16px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
  }

  .calendar-grid-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
  }

  .calendar-grid {
    display: inline-flex !important;
    gap: 8px !important;
    min-width: 100% !important;
  }

  .day-cell {
    width: 80px !important;
    min-height: 80px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
  }

  .day-label {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .content-indicator {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    margin: 2px 0 !important;
  }

  .calendar-nav {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }

  .calendar-arrow {
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
  }

  /* ==========================================================================
     SECTION 5: "OUR WORK" CAROUSEL/SLIDER
     ========================================================================== */
  .work-carousel {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .carousel-item {
    width: 100% !important;
    padding: 0 !important;
  }

  .carousel-image {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
  }

  .carousel-nav-arrow {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 4px !important;
    z-index: 10 !important;
  }

  .carousel-pagination {
    display: flex !important;
    justify-content: center !important;
    margin-top: 12px !important;
    gap: 8px !important;
  }

  .pagination-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    min-height: 8px !important; /* override global min-height */
  }

  .carousel-text-overlay {
    padding: 16px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
  }

  .carousel-title {
    font-size: 16px !important;
  }

  .carousel-desc {
    font-size: 12px !important;
  }

  /* ==========================================================================
     SECTION 6: MAIN HERO/TAGLINE SECTION
     ========================================================================== */
  .tagline-section {
    padding: 48px 16px !important;
    max-width: 100% !important;
  }

  .tagline-headline {
    font-size: clamp(32px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
  }

  .tagline-sub {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  .tagline-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .tagline-actions .btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
    justify-content: center !important;
  }

  .animated-text-loop {
    display: none !important;
  }

  /* ==========================================================================
     SECTION 7: SERVICES SECTION (4 CARDS)
     ========================================================================== */
  .services-section {
    padding: 40px 16px !important;
  }

  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  @media (max-width: 480px) {
    .services-grid {
      grid-template-columns: 1fr !important;
    }
  }

  .service-card {
    padding: 20px !important;
    border-radius: 8px !important;
    min-height: auto !important;
  }

  .service-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 12px !important;
  }

  .service-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }

  .service-desc {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  .service-list {
    display: block !important;
  }

  .service-list li {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  .service-cta-arrow {
    width: 20px !important;
    height: 20px !important;
    margin-top: 16px !important;
  }

  /* ==========================================================================
     SECTION 8: WHY POSH-INTENT (FEATURES SECTION)
     ========================================================================== */
  .why-section {
    padding: 40px 16px !important;
  }

  .why-section h2 {
    font-size: 24px !important;
    margin-bottom: 24px !important;
  }

  .features-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .feature-card {
    width: 100% !important;
    padding: 20px !important;
    border-radius: 8px !important;
  }

  .feature-icon {
    font-size: 32px !important;
    margin-bottom: 12px !important;
    display: block !important;
  }

  .feature-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  .feature-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ==========================================================================
     SECTION 9: TESTIMONIALS/SOCIAL PROOF
     ========================================================================== */
  .testimonials-section {
    padding: 40px 16px !important;
  }

  .testimonials-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    scrollbar-width: none !important;
  }

  .testimonials-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .testimonial-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: center !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  .star-rating {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .quote-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  .author-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  .author-initials {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .author-name {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .author-title {
    font-size: 12px !important;
  }

  /* ==========================================================================
     SECTION 10: PRICING TABLE (3 COLUMNS)
     ========================================================================== */
  .pricing-section {
    padding: 40px 16px !important;
  }

  .pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .pricing-card {
    width: 100% !important;
    padding: 24px !important;
    border-radius: 8px !important;
    min-height: auto !important;
    position: relative !important;
  }

  .popular-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
  }

  .plan-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  .plan-price {
    font-size: clamp(32px, 8vw, 36px) !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  .plan-price .currency {
    font-size: 20px !important;
  }

  .billing-period {
    font-size: 12px !important;
    margin-bottom: 20px !important;
  }

  .plan-features {
    padding-left: 0 !important;
  }

  .plan-features li {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .pricing-card .btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    margin-top: 24px !important;
    border-radius: 6px !important;
    justify-content: center !important;
  }

  .compare-link {
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 24px !important;
    display: block !important;
  }

  /* ==========================================================================
     SECTION 11: HOW IT WORKS PROCESS SECTION
     ========================================================================== */
  .process-section {
    padding: 40px 16px !important;
  }

  .process-section h2 {
    font-size: 24px !important;
    margin-bottom: 32px !important;
  }

  .process-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .process-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    position: relative !important;
  }

  .step-number {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .step-content {
    flex: 1 !important;
    margin-top: 0 !important;
  }

  .step-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  .step-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .step-connector {
    display: none !important; /* Hide horizontal connectors */
  }

  /* Add vertical connector line */
  .process-steps {
    position: relative !important;
  }

  .process-steps::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 22px !important; /* center of 44px circle */
    width: 2px !important;
    background: rgba(255,255,255,0.2) !important;
    z-index: 1 !important;
  }

  /* ==========================================================================
     SECTION 12: FOOTER
     ========================================================================== */
  footer {
    padding: 40px 16px !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .footer-logo img {
    height: 40px !important;
    margin-bottom: 20px !important;
  }

  .footer-tagline {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .footer-links a {
    display: block !important;
    font-size: 14px !important;
    padding: 12px 0 !important;
    min-height: 44px !important;
  }

  .footer-heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
  }

  .newsletter-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .newsletter-input {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .newsletter-btn {
    width: 100% !important;
    padding: 12px 16px !important;
  }

  .contact-info-block {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
  }

  .contact-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .social-links {
    display: flex !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }

  .social-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .footer-bottom {
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
  }

  .copyright {
    font-size: 12px !important;
    color: rgba(255,255,255,0.5) !important;
  }

  /* ==========================================================================
     SECTION 13: MODAL/POPUP WINDOWS
     ========================================================================== */
  .modal-overlay {
    padding: 16px !important;
    background: rgba(0,0,0,0.8) !important;
  }

  .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    padding: 20px !important;
    border-radius: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: modalSlideUp 0.3s ease-out forwards !important;
  }

  @keyframes modalSlideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .modal-header {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
  }

  .modal-close {
    width: 32px !important;
    height: 32px !important;
    top: 16px !important;
    right: 16px !important;
    padding: 8px !important;
    font-size: 24px !important;
  }

  .modal-video-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    height: 0 !important;
  }

  .modal-video-wrapper iframe,
  .modal-video-wrapper video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .modal-content {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .modal-form input,
  .modal-form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    margin-bottom: 16px !important;
  }

  .modal-form button {
    width: 100% !important;
    padding: 14px 24px !important;
    min-height: 44px !important;
  }

  /* ==========================================================================
     SECTION 15: PERFORMANCE & LOADING (CSS ONLY)
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Optimize active states for touch */
  a:active, button:active {
    opacity: 0.7 !important;
  }

  /* ==========================================================================
     SECTION 16: REEL SECTION MOBILE RESPONSIVENESS
     ========================================================================== */
  .reel-scroll-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }

  .reel-track {
    padding: 16px 20px !important;
    gap: 16px !important;
    scroll-padding-left: 20px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .reel-card {
    flex: 0 0 85vw !important;
    scroll-snap-align: center !important;
  }

  .reel-card-overlay {
    padding: 24px !important;
  }

  .reel-btn-overlay {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
  }

  /* ==========================================================================
     SECTION 17: DASHBOARD (GRAPH & PLANNER) MOBILE OPTIMIZATION
     ========================================================================== */
  .dashboard-section {
    padding: 30px 10px !important;
  }

  .dashboard-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .dashboard-box {
    padding: 15px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .dashboard-box-subtitle {
    font-size: 0.75rem !important;
    margin-bottom: 10px !important;
  }

  .results-legend {
    gap: 8px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
  }

  .legend-item {
    font-size: 0.6rem !important;
  }

  .graph-chart {
    height: 160px !important;
    padding-bottom: 20px !important;
    gap: 4px !important;
  }

  .graph-y-labels {
    height: 140px !important;
    width: 25px !important;
    padding-right: 4px !important;
  }

  .graph-grid-lines {
    left: 25px !important;
    height: 140px !important;
  }

  .graph-bars-area {
    height: 140px !important;
    gap: 3px !important;
  }

  .bar-group {
    gap: 1px !important;
  }

  .bar {
    min-width: 2px !important;
  }

  .graph-x-labels {
    padding-left: 25px !important;
    gap: 2px !important;
  }

  .graph-x-label {
    font-size: 0.7rem !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Calendar Optimization */
  .calendar-wrapper {
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .calendar-weekdays, .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
  }

  .calendar-weekday {
    font-size: 0.5rem !important;
    padding: 4px 0 !important;
  }

  .cal-day {
    padding: 2px !important;
    aspect-ratio: 1 / 1.1 !important;
  }

  .day-num {
    font-size: 0.6rem !important;
    width: 18px !important;
    height: 18px !important;
  }

  .cal-dot {
    width: 2px !important;
    height: 2px !important;
  }

  .planner-legend {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .results-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .kpi-card {
    padding: 10px !important;
  }

  .kpi-value {
    font-size: 1rem !important;
  }
}