/* =========================================================
   responsive.css
   ---------------------------------------------------------
   ALL mobile / tablet styles live in this file ONLY.

   Why separate?
   - style.css = how the site looks on DESKTOP/laptop
   - responsive.css = adjustments for PHONES & TABLETS

   If your mobile view ever looks broken after editing
   style.css, check THIS file - you probably just need
   to add/adjust a rule here for the part you changed.

   This file must be loaded AFTER style.css in index.html
   (it already is - don't change the order).
   ========================================================= */


/* ---------------------------------------------------------
   TABLETS (between 521px and 700px wide)
   --------------------------------------------------------- */
@media (max-width: 700px) and (min-width: 521px){
  .region-grid{ grid-template-columns: repeat(2,1fr) !important; }
  .region-item:nth-child(3n),
  .region-item:nth-last-child(-n+3){
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .region-item:nth-child(2n){ border-right:none; }
  .region-item:nth-last-child(-n+1){ border-bottom:none; }
  .region-item:nth-last-child(2):nth-child(odd){ border-bottom:none; }
}


/* ---------------------------------------------------------
   PHONES & SMALL TABLETS (900px and below)
   --------------------------------------------------------- */
@media (max-width: 900px){

  /* Hero section stacks into one column */
  .hero{ grid-template-columns: 1fr; padding-top:50px; }
  .hero h1{ font-size:38px; }

  /* All grid sections become single column */
  .stats .container,
  .grid-3,
  .region-grid,
  .why-grid,
  .process-row,
  .contact-grid{
    grid-template-columns: 1fr !important;
  }

  /* Remove side borders, keep only bottom borders */
  .region-item,
  .process-step{
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  /* Mobile menu: show hamburger, hide horizontal menu */
  .menu-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--cream);
    border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 0;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 32px; border-top:1px solid var(--line); }
}