/* =========================================================
   SHRED.SAFE GLOBAL DESKTOP WIDTH + MOBILE OPTIMISATION
   v4.0
   ========================================================= */

/* Desktop: stop pages feeling like narrow mobile screens */
@media (min-width: 1180px){
  body:not(.premium-home) .wrap,
  body:not(.premium-home) main.wrap,
  body:not(.premium-home) .container,
  body:not(.premium-home) .page-wrap,
  body:not(.premium-home) .content-wrap,
  body:not(.premium-home) .app-wrap,
  body:not(.premium-home) .filters-wrap,
  body:not(.premium-home) .hero-grid,
  body:not(.premium-home) .dashboard,
  body:not(.premium-home) .tools{
    width: min(1600px, calc(100vw - 72px)) !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.premium-home) .hero{
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  body:not(.premium-home) .field-grid,
  body:not(.premium-home) .fg,
  body:not(.premium-home) .tool-grid,
  body:not(.premium-home) .card-grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }

  /* Form/calculator pages get wider, but not stupid-wide */
  body:has(#gen-btn) .wrap,
  body:has(#results) .wrap,
  body:has(input.fi) .wrap{
    width: min(1120px, calc(100vw - 72px)) !important;
    max-width: 1120px !important;
  }

  /* Directory/gallery pages can use the full desktop width */
  body:has(#list) .wrap,
  body:has(.venue-grid) .wrap,
  body:has(.country-section) .wrap{
    width: min(1600px, calc(100vw - 72px)) !important;
    max-width: 1600px !important;
  }
}

/* Tablet: two-column where sensible */
@media (max-width: 1179px){
  body{
    overflow-x: hidden !important;
  }

  .wrap,
  main.wrap,
  .container,
  .page-wrap,
  .content-wrap,
  .app-wrap,
  .filters-wrap,
  .hero-grid,
  .dashboard,
  .tools{
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .venue-grid,
  .trail-grid,
  .home-directory-grid,
  .tools,
  .dashboard,
  .field-grid,
  .fg,
  .tool-grid,
  .card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .filters{
    grid-template-columns: 1fr !important;
  }

  .stats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: make the app actually usable */
@media (max-width: 760px){
  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body{
    padding-bottom: 76px !important;
  }

  .wrap,
  main.wrap,
  .container,
  .page-wrap,
  .content-wrap,
  .app-wrap,
  .filters-wrap,
  .hero-grid,
  .dashboard,
  .tools{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .topbar{
    height: auto !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .brand img,
  .mobile-logo img{
    width: 40px !important;
    height: 40px !important;
  }

  .brand-word,
  .wordmark{
    font-size: 22px !important;
    letter-spacing: .08em !important;
  }

  .nav{
    display: none !important;
  }

  .hero{
    padding: 32px 12px 22px !important;
    min-height: auto !important;
  }

  .hero h1,
  .hero-h1{
    font-size: clamp(48px, 16vw, 68px) !important;
    line-height: .88 !important;
  }

  .hero p,
  .hero-sub{
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .hero-card{
    padding: 18px !important;
  }

  .hero-card h2{
    font-size: 36px !important;
  }

  .filters{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .country-tabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }

  .ctab{
    flex: 0 0 auto !important;
    padding: 10px 13px !important;
    font-size: 13px !important;
  }

  .stats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .stat{
    min-width: 0 !important;
    padding: 10px !important;
  }

  .stat strong{
    font-size: 30px !important;
  }

  .country-section{
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .country-head{
    display: block !important;
  }

  .country-head h2{
    font-size: 42px !important;
  }

  .ccount{
    margin-top: 8px !important;
    display: block !important;
  }

  .venue-grid,
  .trail-grid,
  .home-directory-grid,
  .tools,
  .dashboard,
  .field-grid,
  .fg,
  .tool-grid,
  .card-grid,
  .mini-stats,
  .pill-row{
    grid-template-columns: 1fr !important;
  }

  .vcard,
  .home-vcard,
  .trail-card,
  .tool,
  .panel,
  .fuel-panel,
  .submit-section,
  .card,
  .field{
    width: 100% !important;
    min-width: 0 !important;
  }

  .vcard-media,
  .home-card-media,
  .trail-img{
    height: 122px !important;
  }

  .vcard h3,
  .home-vcard .trail-body h3,
  .trail-body h3{
    font-size: 30px !important;
  }

  .vcard-footer{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .submit-section{
    padding: 18px !important;
  }

  .submit-title{
    font-size: 34px !important;
  }

  input,
  select,
  textarea,
  .fi{
    width: 100% !important;
    font-size: 16px !important; /* stops iPhone zoom */
  }

  .bottom-nav{
    height: 66px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 20px !important;
    padding: 0 14px !important;
  }

  .bottom-nav a{
    flex: 0 0 auto !important;
    font-size: 12px !important;
  }

  .modal{
    padding: 10px !important;
  }

  .modal-card{
    border-radius: 16px !important;
  }

  .modal-title{
    font-size: 48px !important;
  }
}

/* Small phones */
@media (max-width: 420px){
  .hero h1,
  .hero-h1{
    font-size: 48px !important;
  }

  .stats{
    grid-template-columns: 1fr 1fr !important;
  }

  .vcard-media:before,
  .home-card-media:before{
    width: 70px !important;
    height: 70px !important;
  }
}