/* mobile.css — ONLY background + title/logo (+ nav buttons). Nothing else. */
@media (max-width:700px){
  header nav{ display:flex !important; gap:12px; flex-wrap:wrap; margin-top: 35px !important; margin-left: 3px !important;}
  header nav .nav-btn{ flex:1 1 auto; text-align:center; }
/* Hide sections you don't want on mobile (keep header, about, showcase) */
.grid, .split, .panel, .modal, .site-footer { display:none !important; }


  /* …then explicitly show just the brand/title so it renders over your background */
  .wrap{ display:block !important; padding:14px 14px 14px 10px !important; }
  header{ display:block !important; }
  .title-band{ display:block !important; }          /* keeps the black/orange bar via ::before */
  .brand{ display:block !important; }
  .brand-link{
    display:inline-flex !important;
    align-items:center; gap:10px;
    text-decoration:none;
    margin-left:40px !important;        /* nudge the logo+title to the right */
  }

  /* Popular Maps image + subtitle ONLY (no carousel) */
.map-showcase{
  display:block !important;
  margin:16px 0 0 70px !important;   /* aligns with your title; tweak left (40px) if needed */
}

.map-title-img{
  display:block !important;
  width: clamp(300px, 58vw, 300px) !important;
  margin: -20px 0 25px -20px !important;   /* ← GAP between image and text = this 14px */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18)) !important;
}

.map-sub{
  display:block !important;
  font-size:14px !important;
  color:#000000 !important;
  margin: 0 70px 120px 0 !important; /* ↑ bottom spacing only */
  font-size: clamp(12px, 3.6vw, 14px); /* shrink a touch so it fits */
  margin: 16px 0 8px -65px !important; /* keep your current offsets */
  white-space: nowrap;                 /* no wrapping */
}


  .logo-img{ display:block !important; height:48px; width:auto; border-radius:4px; }
  .brand-name{ display:inline-block !important; font-size:26px; line-height:1; color:#fff; }

  /* shrink the black bar under the title */
  .title-band::before{
    height: 130px !important;          /* smaller number = shorter bar */
    top: -35px !important;             /* move the bar up/down to hug the title */
  }

  /* Show the nav under the title, one line */
  nav{
    display:flex !important;
    gap:6px;
    flex-wrap:nowrap;                  /* stay on one line */
    white-space:nowrap;                /* prevent wrapping */
    margin:8px 0 0 40px !important;    /* align with brand-link left margin */
  }
  nav a{ margin:0 !important; }        /* kill any desktop left-margin */
  nav .nav-btn{
    display:inline-block !important;
    padding:12px 14px !important;
    font-size:clamp(13px, 4vw, 14px) !important;
    border-radius:12px !important;
    line-height:1 !important;
  }

  /* === ADDED: About section under the buttons === */
  .about-slab{
    display:block !important;
    position:static !important;
    margin:14px 16px 0 0px !important;    /* spacing under nav; aligns with title */
    width:calc(100% - 0px) !important;    /* 40px left + 16px right */
    padding:14px !important;
    background:#0f1013 !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:12px !important;
    clip-path:none !important;             /* remove desktop slant on mobile */
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  }
  .about-slab::before,
  .about-slab::after{ display:none !important; }    /* hide orange stripe/gloss */
  .about-slab h2{ display:block !important; margin:0 0 6px !important; font-size:18px !important; }
  .about-slab p{ display:block !important; margin:0 !important; font-size:14px !important; line-height:1.45 !important; }
  .about-slab__cta{ display:inline-block !important; margin-top:10px !important; }
}

@media (max-width:360px){
  nav .nav-btn{
    padding:8px 10px !important;
    font-size:12px !important;
  }
  
}
@media (max-width:700px){
  /* show + shrink + lower the carousel */
  .map-carousel{
    display:block !important;
    transform: scale(.70) !important;     /* smaller overall – tweak this */
    transform-origin: center top !important;
    margin-top: 48px !important;          /* lower it under the subtitle */
    margin-left: -50px !important; 
    
  }

  /* show more of the side cards */
  .map-showcase{ --peek: 65px !important; }
  .map-card{ margin-inline: calc(-1 * var(--peek)) !important; }

  /* arrow placement after scaling */
  .map-nav{ top:48% !important; }
  .map-nav.prev{ left:-100px !important; }
  .map-nav.next{ right:-85px !important; }

  /* spacer so the scaled carousel doesn't overlap above */
  .map-carousel::after{
    content:""; display:block; height:40px;
  }
}

@media (max-width:700px){
  .map-showcase .map-carousel{
    margin-top: 60px !important;  /* ↑ increase to go lower */
  }
}
/* MOBILE: edge fade for the carousel */
@media (max-width:700px){
  /* how far the fade reaches in from each side */
  .map-showcase{ --fade: 10px; }   /* ↑ increase to push the fade further in */

  /* apply the fade to the viewport edges */
  .map-viewport{
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%);
  }
}
/* Cut off overflow + remove decorative layers on phones */
@media (max-width:700px){
  /* 1) No horizontal spill */
  html, body { overflow-x: clip; }      /* fallback: hidden */

  /* 2) Flatten the background and kill extra decorations */
  html{ background:#fff !important; }   /* removes big gradient */
  .title-band::before,                  /* top black/orange slab */
  body::before,                         /* any diagonal beam */
  body::after,                          /* bottom black bar */
  .map-showcase::after {                /* paint splatter */
    content:none !important;
    display:none !important;
  }

  /* 3) If you still see extra space below the carousel, shrink the spacer */
  .map-showcase .map-carousel::after{ height: 0 !important; }
}
/* MOBILE: show more of side cards without scrunching the center */
@media (max-width:700px){
  /* 1) How far neighbors peek in */
  .map-showcase{ --peek: 65px !important; }   /* try 96 → 112 if you want even more */

  /* 2) Card width: lower a little = more room for the peeks (center still looks normal) */
  .map-card{
    flex: 0 0 60% !important;                 /* 88% is a good balance; try 86–90% */
    margin-inline: calc(-1 * var(--peek)) !important; /* match the peek */
  }

  /* 3) Stop side cards’ labels/buttons from overlapping when they peek */
  .map-card:not(.is-active) .map-meta{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}