/* ============================================
   MOBILE-FIXES.CSS - Mobile-specific optimizations
   ============================================ */

/* Prevent horizontal scroll on all devices */
* {
    -webkit-overflow-scrolling: touch;
}

/* Mobile font size minimum - improve readability */
@media (max-width: 640px) {
    /* Ensure minimum readable font sizes on mobile */
    .stats__context,
    .hero__trust-item,
    small,
    .text-xs,
    [class*="__label"],
    [class*="__badge"] {
        font-size: 0.75rem !important;
        min-font-size: 0.75rem !important;
    }
    
    /* Better spacing on mobile */
    .section {
        padding: var(--spacing-12) 0;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Better mobile table handling (portfolio only — blogs use blog.css) */
    body:not(.page-blog) table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile-friendly modal */
    .modal {
        padding: var(--spacing-4);
    }
    
    /* Improve click targets on mobile (portfolio only — blogs use blog.css) */
    body:not(.page-blog) a:not(.desktop-only),
    body:not(.page-blog) button,
    body:not(.page-blog) [role="button"],
    body:not(.page-blog) input[type="submit"],
    body:not(.page-blog) input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for cards */
    [class*="__card"],
    [class*="-card"] {
        margin-bottom: var(--spacing-4);
    }

    /* ─── FAQ Accordion — override touch-target center alignment ─── */
    /* The blanket button rule sets justify-content:center which breaks
       the FAQ button's space-between layout. This restores it. */
    .faq__question {
        display: flex !important;
        justify-content: space-between !important;
        text-align: left !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Stack flex items on mobile */
    .hero__socials,
    [class*="__actions"] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Hero socials on mobile */
    .hero__socials {
        gap: var(--spacing-4) !important;
        margin-top: var(--spacing-6) !important;
    }
    
    .hero__social-link {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hero__social-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* ===== FIX 1: Hero Section Mobile Layout ===== */
    
    /* Optimize hero section spacing for mobile */
    .hero {
        min-height: auto !important;
        padding-top: 5rem !important;
        padding-bottom: var(--spacing-8) !important;
    }
    
    /* Hero container - ensure proper spacing */
    .hero__container {
        gap: var(--spacing-8) !important;
        padding-top: var(--spacing-6);
    }
    
    /* Hero content section - better spacing */
    .hero__content {
        padding: 0 var(--spacing-2);
    }
    
    /* Hero title - ensure it fits well */
    .hero__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        margin-bottom: var(--spacing-4) !important;
        line-height: 1.2 !important;
    }
    
    /* Hero subtitle - better readability */
    .hero__subtitle {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: var(--spacing-5) !important;
    }
    
    /* Hero role wrapper */
    .hero__role-wrapper {
        margin-bottom: var(--spacing-6) !important;
        font-size: 1rem !important;
    }
    
    /* Hero CTA buttons */
    .hero__cta {
        margin-top: var(--spacing-5) !important;
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Image wrapper dimensions and overflow */
    .hero__image-wrapper {
        width: 240px !important;
        height: 240px !important;
        overflow: visible !important; /* Changed to visible to show the availability badge */
        margin-bottom: var(--spacing-6) !important; /* Space for the badge below */
    }
    
    /* Visual container - balanced spacing */
    .hero__visual {
        margin-top: 0 !important;
        margin-bottom: var(--spacing-10) !important;
        padding-top: 0;
    }
    
    /* Mobile-only hero photo framing — shift slightly down to avoid head clipping */
    .hero__image {
        object-position: 50% 26% !important;
        overflow: hidden !important;
    }
    
    /* Availability badge - ensure it displays correctly */
    .hero__availability-badge {
        bottom: -16px !important;
        font-size: 0.65rem !important;
        padding: 5px 12px !important;
        gap: 6px !important;
        white-space: nowrap;
    }
    
    /* Hero trust bar */
    .hero__trust-bar {
        margin-top: var(--spacing-5) !important;
    }
    
    /* ===== FIX 2: Improve About Section Cards ===== */
    
    /* About grid layout on mobile */
    #about .about__grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-5) !important;
    }
    
    /* Open To section improvements */
    #about .about__open-to {
        padding: var(--spacing-5) !important;
        margin-top: var(--spacing-5) !important;
    }
    
    #about .about__subsection-title {
        font-size: 0.8rem !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    #about .about__tags {
        gap: var(--spacing-2) !important;
        justify-content: flex-start;
    }
    
    #about .about__tag {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Status Card improvements */
    #about .status-card {
        padding: var(--spacing-5) !important;
        margin-top: var(--spacing-4);
    }
    
    #about .status-card__header {
        flex-direction: row;
        text-align: left;
        gap: var(--spacing-3) !important;
        margin-bottom: var(--spacing-5) !important;
        padding-bottom: var(--spacing-5) !important;
    }
    
    #about .status-card__avatar-wrapper {
        width: 52px !important;
        height: 52px !important;
        flex-shrink: 0;
    }
    
    #about .status-card__info {
        align-items: flex-start;
        flex: 1;
    }
    
    #about .status-card__label {
        font-size: 0.7rem !important;
    }
    
    #about .status-card__value {
        font-size: 0.85rem !important;
    }
    
    #about .status-card__details {
        gap: var(--spacing-2) !important;
    }
    
    /* Status card detail items — row layout (compact, not stacked) */
    #about .status-card__detail-item {
        padding: var(--spacing-3) !important;
        font-size: 0.75rem !important;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-2) !important;
    }

    #about .status-card__detail-item span {
        font-size: 0.75rem !important;
        line-height: 1.4;
        flex: 1;
        min-width: 0;
    }

    /* Social links div (WhatsApp, Gmail, Instagram) — stay inline */
    #about .status-card__detail-item > div {
        width: auto;
        justify-content: flex-start;
        margin-top: 0;
        margin-left: 0;
        gap: var(--spacing-2);
        flex-shrink: 0;
    }

    /* Social icon links — override the 44px blanket touch-target rule.
       These are small icon links inside a card, not primary CTAs. */
    #about .status-card__detail-item a {
        min-height: 24px !important;
        min-width: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        padding: var(--spacing-1) !important;
    }

    #about .status-card__detail-item img {
        width: 16px !important;
        height: 16px !important;
        opacity: 0.8;
    }
    
    #about .status-card__icon {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0;
    }

    /* Online indicator — correct size for 52px mobile avatar wrapper */
    #about .status-card__indicator {
        width: 12px !important;
        height: 12px !important;
        bottom: 2px !important;
        right: 2px !important;
        border-width: 2px !important;
    }
    
    /* Better bio section on mobile */
    #about .about__bio {
        padding: var(--spacing-6) !important;
    }
    
    #about .about__bio p {
        font-size: 0.9rem !important;
        line-height: 1.6;
    }
    
    #about .about__quote {
        font-size: 0.85rem !important;
        padding: var(--spacing-4) !important;
        margin-top: var(--spacing-5) !important;
    }
}

/* Extra small mobile devices (< 375px) */
@media (max-width: 374px) {
    .container {
        padding: 0 var(--spacing-3);
    }
    
    h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
    
    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .btn {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.875rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--spacing-8) 0;
    }
    
    .hero__image-wrapper {
        width: 200px;
        height: 200px;
    }
}

/* Touch-friendly hover states */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    *:hover {
        transition: none;
    }
    
    /* But keep active/focus states */
    *:active,
    *:focus {
        transition: all var(--transition-fast);
    }
}

/* Prevent zoom on form inputs (iOS) */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* iOS won't zoom if 16px or larger */
    }
}

/* Safe area insets for modern mobile devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .navbar,
    .footer {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
    
    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}