/* ========================================
   Responsive Design
   Mobile-first responsive styles for InvitAI
   ======================================== */

/* ==================== MOBILE STYLES (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Slideshow - maximize image size on mobile */
    .slideshow-container {
        height: 450px;  /* Taller for better visibility */
        padding: var(--space-2);  /* Minimal padding on mobile */
    }
    .slideshow-dot.active {
        width: 20px;
        border-radius:10px}
        
    .slideshow-slide img {
        width: auto;
        height: calc(100% - var(--space-2));  /* Almost full height */
        max-width: calc(100% - var(--space-2));  /* Don't exceed width */
    }
    .footer-brand img {align-self: center;margin-bottom:1.5rem;}
    
    .share-button-icon {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }
    .slideshow-cta-button {width: 95%;
        margin-bottom: 1rem;}

    .slideshow-section{padding:0;}

    .slideshow-title {
        font-size: var(--text-2xl);
    }
    
    .slideshow-arrow-btn {
        width: 40px;
        height: 40px;
    }
    
    /* Header */
    h1 {
        font-size: var(--text-3xl);
    }
    
    .header {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo lang"
            "tagline tagline";
        row-gap: var(--space-2);
        padding: 0;
        margin-bottom: var(--space-6);
    }
    
    .tagline {
        font-size: var(--text-base);
        margin-top: var(--space-1);
        max-width: 90vw;
    }
    
    .logo img {
        height: 35px;
    }
    
    /* Language Switcher */
    .language-switcher {
        gap: var(--space-2);
        padding: var(--space-1);
    }
    
    .language-trigger {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
    
    .current-lang img,
    .lang-option img {
        width: 18px;
        height: 13px;
    }
    
    .lang-option {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
    
    .globe-icon {
        width: 18px;
        height: 18px;
    }
    
    .language-dropdown {
        right: 0;
        left: auto;
    }
    
    /* Main Card */
    .main-card {
        padding: var(--space-6);
    }
    
    /* Fields Grid */
    .fields-grid {
        grid-template-columns: 1fr;
    }
    
    /* Steps */
    .steps {
        gap: var(--space-4);
    }
    
    .step-icon {
        width: 40px;
        height: 40px;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        align-items: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    /* Share Options */
    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== SMALL MOBILE (max-width: 500px) ==================== */
@media (max-width: 500px) {
    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== TABLET STYLES (769px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .tagline {
        font-size: var(--text-base);
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    /* Hide unnecessary elements */
    .no-print,
    .header,
    .footer,
    .language-switcher,
    .mic-button,
    .processing-overlay,
    .toast,
    .share-modal {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        background: white;
        color: black;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .main-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ==================== HIGH CONTRAST MODE ==================== */
@media (prefers-contrast: high) {
    :root {
        --primary: #8b5cf6;
        --primary-light: #a78bfa;
        --bg-dark: #000000;
        --bg-card: #1a1a1a;
        --text-primary: #ffffff;
        --text-secondary: #e5e5e5;
    }
}

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

/* ==================== HOVER SUPPORT ==================== */
@media (hover: hover) and (pointer: fine) {
    /* Enhanced hover effects for devices with precise pointers */
    .btn:hover {
        transform: translateY(-2px);
    }
    
    .mic-button:hover {
        transform: scale(1.1);
    }
    
    .share-option:hover {
        transform: scale(1.05);
    }
}

/* ==================== TOUCH DEVICES ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch devices */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .language-trigger {
        min-height: 44px;
    }
    
    .field-input {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Perfect circle mic button on mobile */
    .mic-container {
        width: 110px !important;
        height: 110px !important;
    }
    
    .mic-button {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
    }
    
    .mic-button img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .main-card {
        padding: var(--space-4);
    }
    
    .slideshow-container {
        height: 300px;  /* Better height for landscape */
    }
    
    .slideshow-slide img {
        height: calc(100% - var(--space-2));
    }
    
    h1 {
        font-size: var(--text-2xl);
    }
}

/* ==================== DESKTOP (min-width: 1024px) ==================== */
@media (min-width: 1024px) {
  /* Header: crisper spacing & stronger right-aligned language control */
  .header {
    grid-template-columns: auto 1fr auto;   /* logo | spacer | lang */
    grid-template-areas:
      "logo . lang"
      "tagline tagline tagline";
    align-items: center;
    column-gap: var(--space-8);
    margin-bottom: var(--space-10);
  }

  .logo img { height: 56px; }              /* a touch larger on desktop */
  
  /* Tagline centered & nicely constrained */
  .tagline {
    font-size: var(--text-lg);
    max-width: 980px;
    margin: 0 auto;
    text-align: center;           /* explicit for safety */
  }

  /* Language dropdown: ensure it always floats above hero/slideshow */
  .language-wrapper { position: relative; z-index: var(--z-sticky); }

  /* Main container widths */
  .container,
  .slideshow-section,
  .hero,
  .main-card {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Main card: breathe a little on desktop */
  .main-card {
    padding: var(--space-10);
    border-radius: var(--radius-3xl);
  }

  /* Steps: show a stronger line and bigger targets on desktop when visible */
  .steps {
    gap: var(--space-16);
    max-width: 700px;
  }
  .step {
    width: 48px;
    height: 48px;
    font-size: var(--text-sm);
  }
  .steps::before {
    top: 24px;
    left: calc(33.33% - 24px);
    right: calc(33.33% - 24px);
  }

  /* Slideshow: maximize image visibility on desktop */
  .slideshow-container {
    height: 650px;                          /* Taller for better image display */
    padding: var(--space-6);                /* Reasonable padding on desktop */
  }
  
  .slideshow-slide img {
    height: calc(100% - var(--space-8));    /* Fill container height */
    width: auto;
    max-width: calc(100% - var(--space-8)); /* Don't exceed container width */
  }
  .slideshow-title    { font-size: var(--text-4xl); }
  .slideshow-subtitle { font-size: var(--text-xl);  }

  /* Slideshow arrows: larger + farther from edges */
  .slideshow-arrow-btn {
    width: 56px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--shadow-lg);
  }
  .slideshow-arrow-left  { left: 24px; }
  .slideshow-arrow-right { right: 24px; }

  /* Slideshow dots: bigger targets on desktop without affecting mobile */
  .slideshow-controls { gap: var(--space-3); padding: var(--space-2) var(--space-4); }
  .slideshow-dot {
    width: 14px;
    height: 14px;
  }
  .slideshow-dot.active {
    width: 36px;
    border-radius: 7px;
  }

  /* Forms & buttons in the main card */
  .input,
  .textarea {
    font-size: var(--text-base);
  }
  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }

  /* Footer layout */
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8);
  }

  /* Helper text under the big title */
  .voice-section .section-subtitle,
  .voice-section .helper-text {
    max-width: 860px;
    margin: 0 auto 2rem auto;       /* top spacing, centered */
    text-align: center;
    line-height: var(--leading-relaxed);
  }
  

  /* Mic button & icon sizing (keeps circle perfect on desktop) */
  .mic-container {
    width: 170px;                 /* container that centers the button */
    height: 170px;
  }
  .mic-button {
    width: 160px !important;      /* the actual round button - force override duplicates */
    height: 160px !important;
    border-radius: 50% !important;
  }
  .mic-button img,
  #micIcon {
    width: 64px !important;       /* visually balanced inside 160px circle */
    height: 64px !important;      /* FIXED height so it never stretches */
    display: block;
    pointer-events: none;
    object-fit: contain;          /* prevent distortion */
  }
  .ripple {
    width: 160px;                 /* ring matches button diameter */
    height: 160px;
    border-radius: 50%;
  }

  /* Remove only decorative arrow, keep nav buttons for accessibility */
  .slideshow-header .slideshow-arrow { display: none !important; } /* hides the "↓" row */
  /* Keep nav buttons visible for keyboard users */
  .slideshow-arrow-btn { 
    display: flex !important;        /* keep visible for accessibility */
  }

  /* Slideshow CTA: icon sizing + single-line label */
  .slideshow-cta-button .share-button-icon {
    width: 24px;               /* sweet spot for this button height */
    height: 24px;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;       /* prevent cropping */
  }

  .slideshow-cta-button span {
    white-space: nowrap;       /* keep text on one line */
  }

  /* tighten vertical rhythm a touch */
  .slideshow-cta-text {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3); /* sits just above the button */
    text-align: center;            /* explicit */
  }
  
  /* Ensure perfect circles for steps on desktop */
  :root {
    --step-size: 54px; /* Slightly larger on desktop */
  }
  
  .step-icon {
    width: var(--step-size);
    height: var(--step-size);
    min-width: var(--step-size);
    min-height: var(--step-size);
  }
}