/**
 * Mobile Design System — Dynamic, beautiful, harmonious
 * Single source of truth for all breakpoints, spacing, and motion.
 * Load after base.css on all pages.
 */

/* ========== DESIGN TOKENS ========== */
:root {
  /* Breakpoints (use in media queries only; min-width for mobile-first) */
  --bp-xs: 380px;
  --bp-sm: 480px;
  --bp-md: 600px;
  --bp-lg: 768px;
  --bp-xl: 900px;
  --bp-2xl: 1024px;
  --bp-3xl: 1280px;

  /* Mobile-first spacing scale — fluid, harmonious */
  --mobile-space-xs: clamp(0.25rem, 1.2vw, 0.5rem);
  --mobile-space-sm: clamp(0.5rem, 2vw, 0.75rem);
  --mobile-space-md: clamp(0.75rem, 3vw, 1.25rem);
  --mobile-space-lg: clamp(1rem, 4vw, 1.5rem);
  --mobile-space-xl: clamp(1.25rem, 5vw, 2rem);
  --mobile-space-2xl: clamp(1.5rem, 6vw, 2.5rem);
  --mobile-space-3xl: clamp(2rem, 8vw, 3rem);
  --mobile-space-4xl: clamp(2.5rem, 10vw, 4rem);

  /* Touch targets — minimum 44px for accessibility */
  --touch-min: 44px;
  --touch-comfortable: 48px;

  /* Safe area for notched devices */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);

  /* Motion — smooth, intentional */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.5s;

  /* Section reveal (optional use) */
  --reveal-duration: 0.6s;
  --reveal-delay-step: 0.06s;
}

/* ========== GLOBAL MOBILE ENHANCEMENTS ========== */
@media (max-width: 1024px) {
  html {
    -webkit-tap-highlight-color: transparent;
  }

  /* Slightly increase base font on very small screens for readability */
  @media (max-width: 480px) {
    html {
      font-size: clamp(15px, 4vw, 16px);
    }
  }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
    --reveal-duration: 0.01ms;
    --reveal-delay-step: 0;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== CONTAINER HARMONY ========== */
@media (max-width: 768px) {
  .container-base,
  .container,
  .container1,
  .continer {
    padding-left: var(--mobile-space-lg);
    padding-right: var(--mobile-space-lg);
  }

  #main-content {
    padding-bottom: var(--safe-bottom);
  }
}

@media (max-width: 480px) {
  .container-base,
  .container,
  .container1,
  .continer {
    padding-left: var(--mobile-space-md);
    padding-right: var(--mobile-space-md);
  }
}

/* ========== HERO BLOCKS — UNIFIED MOBILE ========== */
@media (max-width: 768px) {
  .block-main,
  .blog-hero,
  .magazine-hero,
  .partners-hero,
  .voyages-page-hero,
  .voyage-mesure-hero,
  .frst-block {
    min-height: clamp(200px, 50vh, 280px);
    padding: var(--mobile-space-2xl) var(--mobile-space-lg);
    margin-bottom: var(--mobile-space-lg);
  }

  .block-main h1,
  .blog-hero__title,
  .magazine-hero__title,
  .partners-hero h1,
  .voyages-page-hero h1,
  .voyage-mesure-hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  .block-main,
  .blog-hero,
  .magazine-hero,
  .partners-hero,
  .voyages-page-hero,
  .voyage-mesure-hero {
    min-height: clamp(180px, 45vh, 240px);
    padding: var(--mobile-space-xl) var(--mobile-space-md);
  }

  .block-main h1,
  .blog-hero__title,
  .magazine-hero__title,
  .partners-hero h1,
  .voyages-page-hero h1,
  .voyage-mesure-hero__title {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
  }
}

/* ========== SECTION SPACING — RHYTHM ========== */
@media (max-width: 768px) {
  .section--two {
    padding-top: var(--mobile-space-3xl);
    padding-bottom: var(--mobile-space-3xl);
    gap: var(--mobile-space-2xl);
  }

  section.block-main + section,
  section[class*="block-"] + section {
    margin-top: 0;
  }
}

/* ========== CARDS & TILES — TOUCH FRIENDLY ========== */
@media (max-width: 768px) {
  [class*="card"],
  [class*="flip-card"],
  .slider-item,
  .block-news-one,
  .block-news-two {
    border-radius: clamp(10px, 2.5vw, 14px);
  }

  /* Buttons and links: minimum touch target */
  a[class*="btn"],
  button:not(.mobile__btn):not([aria-label]),
  .header__btn a,
  .footer__btn,
  .slider-button {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-sm) var(--mobile-space-lg);
  }
}

/* ========== TYPOGRAPHY ON SMALL SCREENS ========== */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 4vw, 1.75rem); }
  h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
  h4 { font-size: clamp(1rem, 3vw, 1.25rem); }

  .section__title,
  .section__title1,
  .section__title-two,
  .section__title2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }
  h2 { font-size: clamp(1.125rem, 4.5vw, 1.5rem); }
}

/* ========== IMAGES & MEDIA ========== */
@media (max-width: 768px) {
  img,
  .slider-image,
  .flip-front-img {
    border-radius: clamp(8px, 2vw, 12px);
  }
}

/* ========== UTILITY: SECTION REVEAL (optional) ========== */
@media (max-width: 1024px) {
  .mobile-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: mobile-reveal-in var(--reveal-duration) var(--ease-out-expo) forwards;
  }

  .mobile-reveal:nth-child(1) { animation-delay: 0s; }
  .mobile-reveal:nth-child(2) { animation-delay: var(--reveal-delay-step); }
  .mobile-reveal:nth-child(3) { animation-delay: calc(var(--reveal-delay-step) * 2); }
  .mobile-reveal:nth-child(4) { animation-delay: calc(var(--reveal-delay-step) * 3); }
  .mobile-reveal:nth-child(5) { animation-delay: calc(var(--reveal-delay-step) * 4); }
}

@keyframes mobile-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}