/* ============================================
   GEN4TRAVEL — RESPONSIVE PATCHES
   Loaded LAST. Targets known device-specific issues.
   ============================================ */

/* ============================================
   GLOBAL — prevent horizontal scroll on mobile
   Some browsers (older Safari iOS) leak overflow
   from absolutely-positioned hero elements.
   ============================================ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;     /* Prevent iOS auto-zoom on landscape */
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-overflow-scrolling: touch;
}

/* iOS Safari — fix 100vh including the URL bar
   Use dvh (dynamic viewport height) where supported */
@supports (height: 100dvh) {
  .hero {
    min-height: 100dvh;
  }
}

/* ============================================
   TOUCH TARGETS — minimum 44×44px (Apple HIG)
   ============================================ */
.lang-btn,
.nav-cta,
.btn,
.proto-tab,
.suggest-chip,
.contact-submit,
.back-link,
button[type="submit"] {
  min-height: 44px;
}

/* Don't apply min-height to inline-block tags or chips that should stay small */
.tech,
.pub-tag {
  min-height: 0;
}

/* ============================================
   FORMS — prevent iOS zoom on focus
   iOS auto-zooms when font-size < 16px.
   ============================================ */
input,
textarea,
select {
  font-size: max(16px, 1rem);
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================
   IMAGES — never overflow
   ============================================ */
img,
video {
  max-width: 100%;
  height: auto;
}

/* SVG illustrations should never overflow their container */
.illustration-svg,
.hero-stream-svg {
  max-width: 100%;
}

/* ============================================
   NAV — collapse intelligently on small screens
   Default styles already hide nav-links < 900px.
   We tighten the right side too.
   ============================================ */
@media (max-width: 900px) {
  .nav-inner {
    gap: 12px;
    flex-wrap: wrap;
  }
  .nav-right {
    gap: 10px;
  }
  .nav-cta {
    padding: 9px 14px;
    font-size: 12px;
  }
  .nav-cta svg {
    display: none;  /* save horizontal space */
  }
  .lang-btn {
    padding: 6px 10px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .nav .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-logo-text {
    /* Brand text can hide on tiny screens, logo image is enough */
    display: none;
  }
}

/* ============================================
   HERO — title scales fluidly
   ============================================ */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(56px, 16vw, 84px) !important;
    line-height: 0.92;
  }
}

/* ============================================
   GOV BANNER — never bigger than the container
   On tablet/mobile, banner moves to flow position.
   ============================================ */
@media (max-width: 900px) {
  .france-2030-badge {
    position: static !important;
    margin: 16px 0 32px;
    align-self: flex-start;
  }
}

/* ============================================
   GRID FALLBACKS — collapse multi-col grids
   ============================================ */
@media (max-width: 768px) {
  .partners-grid,
  .arch-grid,
  .usecase-grid,
  .metrics-grid,
  .press-grid {
    grid-template-columns: 1fr !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   PROTOTYPE — chat usability on mobile
   ============================================ */
@media (max-width: 640px) {
  .chat-window {
    border-radius: 16px;
  }
  .chat-input-row {
    padding: 12px;
    gap: 8px;
  }
  .chat-input {
    font-size: 16px; /* prevent iOS zoom */
  }
  .chat-mic-btn,
  .chat-send-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .proto-tabs {
    gap: 6px;
    flex-wrap: wrap;
  }
  .proto-tab {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    text-align: center;
    padding: 10px 12px;
    font-size: 12px;
  }
  .action-card {
    padding: 18px;
  }
}

/* ============================================
   ARTICLES — readable line length on tablets
   ============================================ */
@media (max-width: 1024px) {
  .article-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .article-body {
    font-size: 16px;
    line-height: 1.7;
  }
  .article-body h2 {
    font-size: clamp(24px, 6vw, 32px);
    margin-top: 48px;
  }
  .article-body h3 {
    font-size: 18px;
  }
  .article-title {
    font-size: clamp(28px, 8vw, 42px);
  }
  .article-abstract {
    font-size: 17px;
    padding-left: 16px;
  }
  .illustration {
    padding: 16px;
    margin: 28px 0;
  }
  .illustration-table {
    font-size: 12px;
  }
  .illustration-table th,
  .illustration-table td {
    padding: 10px 8px;
  }
}

/* ============================================
   ARTICLE — hide overly small SVG text on mobile
   Some article SVGs use 9–10px text that becomes
   illegible below ~360px. We let the SVG scale
   while preserving aspect ratio.
   ============================================ */
.illustration {
  overflow-x: auto; /* if SVG is wider than container, allow scroll */
}

/* ============================================
   CONTACT FORM — comfortable on small screens
   ============================================ */
@media (max-width: 480px) {
  .contact {
    padding: 80px 0;
  }
  .contact-form {
    padding: 24px 18px;
  }
  .contact-meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================
   PRESS — single column on small screens
   ============================================ */
@media (max-width: 640px) {
  .press-card {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .press-logo-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 70px;
  }
  .press-headline {
    font-size: 16px;
  }
}

/* ============================================
   PUBLICATIONS CARDS — comfortable padding
   ============================================ */
@media (max-width: 480px) {
  .pub-card {
    padding: 24px 20px;
  }
  .pub-card-title {
    font-size: 22px;
  }
  .pub-card-excerpt {
    font-size: 15px;
  }
}

/* ============================================
   FOOTER — stack neatly
   ============================================ */
@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-links {
    flex-wrap: wrap;
  }
}

/* ============================================
   GATE — comfortable on phones
   ============================================ */
@media (max-width: 540px) {
  .g4tg-form {
    flex-direction: column;
  }
  .g4tg-submit {
    width: 100%;
  }
}

/* ============================================
   ACCESSIBILITY — respect prefers-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;
  }
  /* Keep critical UX animations functional but instant */
  #g4tGate { animation: none !important; opacity: 1; }
  .hero-stream-svg circle { animation: none; }
}

/* ============================================
   LANDSCAPE PHONES — adjust hero
   When phone is in landscape mode, vertical space is tight.
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .hero-title {
    font-size: clamp(48px, 12vw, 72px) !important;
  }
}

/* ============================================
   PRINT — give a clean printed version
   ============================================ */
@media print {
  .nav,
  .back-bar,
  .back-bottom,
  .lang-switch,
  .nav-cta,
  #g4tGate,
  .hero-streams,
  .hero-canvas {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
  .article-body {
    max-width: none;
    padding: 0;
  }
  a {
    text-decoration: underline;
    color: black;
  }
}

/* ============================================
   HIGH-DPI SCREENS (Retina, etc.)
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Sharper image rendering hint where applicable */
  .nav-logo-img,
  .gov-banner-img,
  .press-logo-wrap img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ============================================
   DARK MODE PREFERENCE — site is already dark-themed,
   just ensure form inputs read well.
   ============================================ */
@media (prefers-color-scheme: dark) {
  .contact-form input,
  .contact-form textarea {
    color-scheme: dark;
  }
}

/* ============================================
   SAFE AREAS — iPhone notch / Dynamic Island
   ============================================ */
@supports (padding: max(0px)) {
  .nav .wrap {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
  .footer .wrap {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}