/* ============================================
   BRAINSTORMEN — UNIVERSAL MOBILE STYLESHEET
   Loaded LAST on every page; overrides common
   patterns that break on small screens.
   ============================================ */

/* Universal guard against horizontal overflow */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  * {
    max-width: 100vw;
  }
  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }
}

/* ============ TABLET (≤ 900px) ============ */
@media (max-width: 900px) {

  /* Nav: reduce padding, allow wrapping */
  nav,
  .site-header,
  .nav {
    padding: 1rem 1.25rem !important;
    gap: 0.75rem !important;
  }

  /* Nav links: shrink font, reduce gap, wrap */
  .nav-links,
  nav .nav-links,
  .site-header .nav-links {
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
  .nav-links a,
  nav .nav-links a {
    margin-left: 0 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Container padding shrink */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Heroes: normalize height + padding */
  .hero,
  .main-header,
  .blog-header {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Sections: reduce vertical padding */
  section,
  .section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Collapse all multi-column grids to single column */
  .services-grid,
  .protocol-grid,
  .partners-group,
  .menu-grid,
  .gap-grid,
  .zen-grid,
  .chalk-grid,
  .golden-grid,
  .exhibition-grid,
  .guestbook-grid,
  .journal-grid,
  .mosaic-grid,
  .atmosphere-grid,
  .philosophy-grid,
  .ledger-grid,
  .serenity-stories .stories-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Two-column feature blocks → stack */
  .dish-feature {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Lang switcher smaller */
  .lang-switcher {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.65rem !important;
    gap: 0.4rem !important;
  }
}

/* ============ PHONE (≤ 600px) ============ */
@media (max-width: 600px) {

  /* Base font floor for readability */
  html { font-size: 15px; }
  body { line-height: 1.6; }

  /* Nav: stack logo + links on phone */
  nav,
  .site-header {
    padding: 0.8rem 1rem !important;
    flex-wrap: wrap !important;
  }

  /* Logo smaller */
  .logo,
  nav .logo,
  .site-header .logo {
    font-size: 1rem !important;
    letter-spacing: 0.15em !important;
  }

  /* Nav links: even tighter */
  .nav-links {
    gap: 0.75rem !important;
    font-size: 0.6rem !important;
  }
  .nav-links a {
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
  }

  /* Hide less-essential nav items on phone if there are 4+ */
  .nav-links a.back-link,
  .nav-links a.ecosystem-link {
    display: none !important;
  }

  /* Heroes: reduce height, shrink text dramatically */
  .hero,
  .main-header {
    height: auto !important;
    min-height: 70vh !important;
    padding: 8rem 1.25rem 4rem !important;
  }

  .hero h1,
  .main-header h1,
  .header-content h1,
  .hero-content h1,
  .blog-header h1,
  .hero-title {
    font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  .hero p,
  .hero-content p,
  .header-content p,
  .hero-description {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  /* H2s everywhere shrink */
  h2 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-size: 1.15rem !important;
  }

  /* Section padding shrink */
  section,
  .section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Large pixel paddings → rem */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Footer: center and reduce padding */
  footer {
    padding: 3rem 1.25rem !important;
    text-align: center !important;
  }

  /* Mission section: shrink dramatic padding */
  .mission-section {
    padding: 5rem 1.25rem !important;
  }
  .mission-beliefs h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .newspaper-layout {
    margin: 2rem 0 !important;
  }
  .newspaper-layout p {
    font-size: 1rem !important;
  }
  .mission-footer {
    margin-top: 3rem !important;
  }

  /* Portal grid on index: already handles mobile, but reinforce */
  .portal-grid {
    grid-template-columns: 1fr !important;
  }
  .portal-item {
    padding: 3rem 1.5rem !important;
    min-height: 60vh !important;
  }
  .portal-item h2 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }

  /* Menu cards / flip cards — disable fixed heights */
  .menu-card-wrap {
    width: 100% !important;
    max-width: 360px !important;
    height: 500px !important;
    margin: 0 auto !important;
  }
  .partner-block {
    height: 400px !important;
  }

  /* Long padding values on menu sections */
  .menu-section {
    padding: 4rem 1rem !important;
    height: auto !important;
    min-height: auto !important;
  }
  .menu-container {
    width: 100% !important;
    padding: 3rem 1.25rem !important;
    transform: none !important;
    border-left: none !important;
  }

  /* Partners / flip cards — disable hover flip on touch */
  .partner-block:hover .partner-card-inner {
    transform: none !important;
  }

  /* Gallery horizontal scroll → disable on mobile */
  .gallery-track {
    flex-direction: column !important;
    padding: 0 1.25rem !important;
    gap: 2rem !important;
  }
  .artwork-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
  }

  /* Statement big typography */
  .statement p {
    font-size: 1.15rem !important;
  }

  /* Silk-steam stats row */
  .stats {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* Service-item 3-column grid → stack */
  .service-item {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    padding: 1.5rem 0 !important;
    text-align: center !important;
  }

  /* Gilded Palate hero oversized type */
  .hero h1 {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
  }

  /* Text readability improvements */
  p, li {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* Fix any inline padding styles using huge rem */
  [style*="padding: 10rem"],
  [style*="padding: 15rem"],
  [style*="padding: 12rem"],
  [style*="padding: 8rem"] {
    padding: 3rem 1.25rem !important;
  }

  /* Form inputs readable */
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 0.75rem !important;
    width: 100% !important;
  }

  /* Buttons comfortable tap targets */
  button,
  .btn,
  .btn-primary,
  .cta-btn,
  .btn-artisan,
  .btn-cyber,
  .btn-nomad,
  .explore-btn,
  a.btn {
    min-height: 44px !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.85rem !important;
  }

  /* Hero images in some designs are absolutely positioned — push them below text */
  .hero-image,
  .hero-img-container,
  .hero-visual {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 50vh !important;
    clip-path: none !important;
  }

  /* Process / sticky scroll: disable sticky on mobile */
  .process,
  [class*="sticky"] {
    position: relative !important;
  }

  /* Related-brand ecosystem block */
  section[style*="VERKEN"] + footer,
  section[style*="padding: 5rem 2rem"] {
    padding: 3rem 1rem !important;
  }
}

/* ============ SMALL PHONE (≤ 400px) ============ */
@media (max-width: 400px) {
  .hero h1,
  .header-content h1,
  .hero-content h1,
  .hero-title {
    font-size: 2rem !important;
  }
  .logo {
    font-size: 0.9rem !important;
  }
  .nav-links {
    gap: 0.5rem !important;
  }
  .nav-links a {
    font-size: 0.55rem !important;
  }
}

/* ============ TOUCH-DEVICE OVERRIDES ============ */
@media (hover: none) and (pointer: coarse) {
  /* Replace hover reveals with always-visible on touch */
  .portal-item:hover .portal-bg,
  .portal-bg {
    opacity: 0.5 !important;
  }
}