/* Shared mobile layout rules for every public page. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
img, picture, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; font-size: 16px; }

@media (max-width: 768px) {
  body { min-width: 0; }
  main, header, footer, section { min-width: 0; }
  .flags-header, .flags-header nav, .brand, .login-logo,
  .atlas-logo-image, [class*="header"], [class*="nav"] {
    min-width: 0;
  }
  .flags-header, .flags-header nav, [class*="header"], [class*="nav"] {
    flex-wrap: wrap;
    gap: .75rem;
  }
  [class*="grid"], [class*="columns"], [class*="layout"],
  [class*="row"], [class*="split"], [class*="hero"], [class*="panels"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [class*="row"], [class*="columns"], [class*="layout"],
  [class*="split"], [class*="hero"], [class*="panels"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [class*="sidebar"], [class*="panel"], [class*="card"], [class*="content"] {
    max-width: 100%;
  }
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
  pre, code { max-width: 100%; overflow-x: auto; }
  .atlas-logo-image, .login-logo img, .flags-brand img { max-width: 180px; }

  /* Atlas cinema / map experience */
  .cinema .entry, .cinema .story-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
    padding-inline: 1rem !important;
  }
  .cinema .entry { padding-top: 1.5rem !important; }
  .cinema .journey-search, .cinema .chapter-meta,
  .cinema .chapter-controls, .cinema footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cinema .journey-search button { width: 100%; }
  .cinema .map-stage, .cinema .map-scene, .cinema .map-container,
  .cinema [class*="map-stage"], .cinema [class*="map-scene"] {
    min-height: 420px !important;
    height: 420px !important;
  }
  .cinema .map-topline {
    top: 1rem !important;
    inset-inline: 1rem !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
  }
  .cinema .idle-title {
    width: calc(100% - 2rem) !important;
    top: 48% !important;
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
  }
  .cinema .location-caption {
    bottom: 1rem !important;
    inset-inline-start: 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
  .cinema .map-toolbar {
    inset-inline-end: .75rem !important;
    top: 5.5rem !important;
    transform: scale(.84);
    transform-origin: top right;
  }
  .cinema .chapter-rail { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  button, input, select, textarea { width: 100%; }
  .flags-header nav { width: 100%; }
}