/* ============================================
   RESPONSIVE STYLES
   Mobile-First Media Queries
   ============================================ */

/* -------------------- Extra Large Screens (1400px+) -------------------- */
@media (min-width: 1400px) {
  :root {
    --container-max: 1400px;
  }
}

/* -------------------- Large Screens (1200px - 1399px) -------------------- */
@media (max-width: 1399px) {
  :root {
    --container-max: 1200px;
  }
}

/* -------------------- Medium-Large Screens (992px - 1199px) -------------------- */
@media (max-width: 1199px) {
  :root {
    --fs-hero: clamp(2.5rem, 6vw, 5rem);
    --fs-h1: clamp(2rem, 4vw, 3.5rem);
    --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  }
}

/* -------------------- Tablets (768px - 991px) -------------------- */
@media (max-width: 991px) {
  :root {
    --space-3xl: 5rem;
    --space-2xl: 3.5rem;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  /* Hide desktop elements */
  .desktop-only {
    display: none !important;
  }

  /* Show tablet elements */
  .tablet-up {
    display: block;
  }
}

/* -------------------- Mobile Landscape / Small Tablets (576px - 767px) -------------------- */
@media (max-width: 767px) {
  :root {
    --fs-hero: clamp(2rem, 8vw, 3.5rem);
    --fs-h1: clamp(1.75rem, 5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 4vw, 2rem);
    --fs-h3: clamp(1.25rem, 3vw, 1.5rem);
    --space-3xl: 4rem;
    --space-2xl: 3rem;
    --container-padding: 1.25rem;
  }

  /* Typography adjustments */
  body {
    font-size: 15px;
  }

  /* Section spacing */
  .section {
    padding: var(--space-2xl) 0;
  }

  .section-header {
    margin-bottom: var(--space-xl);
  }

  /* Button adjustments */
  .btn {
    padding: 0.875rem 2rem;
  }

  .btn-lg {
    padding: 1rem 2.5rem;
  }

  /* Hide tablet-up elements */
  .tablet-up {
    display: none !important;
  }

  /* Show mobile elements */
  .mobile-only {
    display: block;
  }

  /* Page Banner */
  .page-banner {
    height: 50vh;
    min-height: 350px;
  }

  .page-banner-title {
    font-size: var(--fs-h1);
  }

  /* Cards */
  .card-content {
    padding: var(--space-md);
  }

  /* Modal */
  .modal-container {
    max-width: 95%;
    max-height: 95vh;
  }

  .modal-close {
    width: 40px;
    height: 40px;
    top: var(--space-sm);
    right: var(--space-sm);
  }
}

/* -------------------- Mobile Portrait (up to 575px) -------------------- */
@media (max-width: 575px) {
  :root {
    --fs-hero: clamp(1.75rem, 10vw, 2.5rem);
    --fs-h1: clamp(1.5rem, 7vw, 2rem);
    --fs-h2: clamp(1.25rem, 5vw, 1.75rem);
    --fs-h3: clamp(1.125rem, 4vw, 1.375rem);
    --fs-h4: clamp(1rem, 3vw, 1.125rem);
    --space-3xl: 3rem;
    --space-2xl: 2.5rem;
    --space-xl: 2rem;
    --container-padding: 1rem;
  }

  /* Section subtitle */
  .section-subtitle {
    font-size: var(--fs-tiny);
  }

  .section-subtitle::before,
  .section-subtitle::after {
    width: 20px;
  }

  /* Buttons */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-tiny);
  }

  /* Hero specific */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero-subtitle::before,
  .hero-subtitle::after {
    display: none;
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* Cards */
  .card-meta {
    flex-wrap: wrap;
  }

  /* Forms */
  .form-input,
  .form-textarea,
  .form-select {
    padding: 0.875rem 1rem;
  }

  /* Social Links */
  .social-link {
    width: 40px;
    height: 40px;
  }

  /* Page Banner */
  .page-banner {
    height: 45vh;
    min-height: 300px;
  }

  /* Footer */
  .footer-newsletter-form {
    flex-direction: column;
  }

  .footer-bottom-links {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* -------------------- Extra Small Screens (up to 380px) -------------------- */
@media (max-width: 380px) {
  :root {
    --container-padding: 0.875rem;
  }

  .logo-text {
    font-size: 1.25rem;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .btn {
    padding: 0.625rem 1.25rem;
  }
}

/* -------------------- Touch Device Optimizations -------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that don't work on touch */
  .card:hover {
    transform: none;
  }

  .destination-card:hover .destination-card-image img,
  .package-card:hover .package-card-image img {
    transform: none;
  }

  .destination-card:hover .destination-card-meta {
    opacity: 1;
    transform: translateY(0);
  }

  .destination-card:hover .destination-card-btn {
    opacity: 1;
    transform: scale(1);
  }

  /* Make interactive elements bigger */
  .btn {
    min-height: 48px;
  }

  .form-input,
  .form-textarea,
  .form-select {
    min-height: 48px;
  }

  /* Disable custom cursor */
  .cursor,
  .cursor-follower,
  .cursor-text {
    display: none !important;
  }

  body,
  a,
  button {
    cursor: auto !important;
  }
}

/* -------------------- Reduced Motion -------------------- */
@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;
  }

  .hero-video {
    display: none;
  }

  .hero-image {
    display: block;
  }

  .cursor,
  .cursor-follower {
    display: none;
  }
}

/* -------------------- Dark Mode Support -------------------- */
@media (prefers-color-scheme: dark) {
  /* Optional: Auto dark mode based on system preference */
  /* Uncomment if you want automatic dark mode
  :root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
  }
  */
}

/* -------------------- Print Styles -------------------- */
@media print {
  /* Hide non-essential elements */
  .header,
  .footer,
  .back-to-top,
  .whatsapp-float,
  .cursor,
  .cursor-follower,
  .hero-video,
  .modal,
  .scroll-indicator {
    display: none !important;
  }

  /* Reset backgrounds and colors */
  body {
    background: white;
    color: black;
  }

  .page-banner {
    height: auto;
    min-height: auto;
    padding: 2rem;
    background: #f5f5f5;
  }

  .page-banner-overlay {
    display: none;
  }

  .page-banner-title {
    color: black;
    text-shadow: none;
  }

  /* Ensure content is visible */
  .section {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* -------------------- High Contrast Mode -------------------- */
@media (prefers-contrast: high) {
  :root {
    --primary: #004d4a;
    --accent: #c4982f;
    --text-primary: #000000;
    --text-secondary: #333333;
  }

  .btn {
    border-width: 3px;
  }

  .form-input,
  .form-textarea,
  .form-select {
    border-width: 3px;
  }
}

/* -------------------- Landscape Mode (Mobile) -------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    padding-top: 80px;
  }

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

  .hero-description {
    display: none;
  }

  .scroll-indicator {
    display: none;
  }
}

/* -------------------- Safe Area Insets (Notched Devices) -------------------- */
@supports (padding: max(0px)) {
  .header {
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
  }

  .footer {
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .whatsapp-float {
    left: max(var(--space-lg), env(safe-area-inset-left));
    bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .back-to-top {
    right: max(var(--space-lg), env(safe-area-inset-right));
    bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }
}
/* Tablets and small laptops */
@media (max-width: 1024px) {
  .section .container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-md);
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  .section .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }

  .feature-card {
    text-align: center;
  }

  .feature-icon {
    margin: 0 auto var(--space-sm);
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .section-title {
    font-size: 1.5rem;
  }

  .feature-title {
    font-size: 1.1rem;
  }

  .feature-text {
    font-size: 0.95rem;
  }
}