/* Leatherneck Archive sitewide phone layout */
@media (max-width: 768px) {
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{font-size:16px;-webkit-text-size-adjust:100%}
  .page,.homepage-wrap,.submit-page{width:100%!important;max-width:100%!important;margin:0!important}

  /* Public page button bars stay in normal flow and never cover content. */
  .hero-navigation,.sticky-page-nav,.nav{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;transform:none!important;
    z-index:1200!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px!important;
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;gap:6px!important;
    overflow:visible!important;background:rgba(5,5,5,.97)!important;border-bottom:1px solid #665536!important;
  }
  .hero-navigation a,.sticky-page-nav a,.nav a{
    width:auto!important;min-width:0!important;height:44px!important;min-height:44px!important;flex:none!important;
    padding:0 5px!important;font-size:.65rem!important;letter-spacing:.035em!important;white-space:nowrap!important;
    box-shadow:none!important;
  }
  .hero-navigation a.news-beta,.nav a.news{font-size:.58rem!important}

  /* Full header pages use a compact menu. */
  .cinematic-header{position:sticky!important;top:0!important;z-index:1200!important;min-height:64px!important}
  .cinematic-nav{min-height:64px!important;padding:8px 14px!important;display:flex!important;gap:12px!important}
  .cinematic-logo{width:190px!important;max-width:58vw!important}
  .cinematic-menu{display:block!important;margin-left:auto!important;min-height:42px!important}
  .cinematic-links{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;
    padding:10px!important;background:#080908!important;border-bottom:1px solid #665536!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .cinematic-links.open{display:grid!important}.cinematic-links a{padding:13px 10px!important;border:1px solid #3f3728!important;text-align:center!important}

  /* Banners remain wide without generating massive vertical sections. */
  .cinematic-hero{height:auto!important;min-height:0!important}.cinematic-hero-image{width:100%!important;height:auto!important;min-height:0!important;object-fit:contain!important}
  .archive-approved-hero{height:240px!important;min-height:0!important;overflow:hidden!important}
  .archive-approved-hero img{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important}
  .page-hero,.submit-hero{min-height:220px!important;height:220px!important;padding:0!important;background-position:center!important}
  .page-intro,.submit-intro{padding:20px 18px 22px!important}.page-intro p,.submit-intro p{font-size:.96rem!important;line-height:1.55!important}

  /* Content and typography. */
  .content-section,.submit-section,.live-photos-section{padding:24px 14px 38px!important}
  .text-panel,.submit-panel,.browse-tools{width:100%!important;max-width:100%!important;padding:20px 16px!important;margin:0!important}
  .text-panel h1,.text-panel h2,.submit-panel h2{font-size:clamp(1.8rem,9vw,2.7rem)!important;line-height:1.05!important;overflow-wrap:anywhere}
  .text-panel p,.text-panel li,.submit-panel p{font-size:.98rem!important;line-height:1.62!important}
  .field-grid,.text-layout{grid-template-columns:1fr!important;gap:15px!important}
  input,select,textarea,button{max-width:100%!important;font-size:16px!important}
  input,select,button{min-height:48px!important}textarea{min-height:130px!important}

  /* Archive/category cards and controls. */
  .browse-tools{padding:18px 14px!important}.browse-search-row,.category-toolbar{grid-template-columns:1fr!important;gap:10px!important}
  .category-filters{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:8px!important}
  .category-btn{flex:0 0 auto!important;min-height:42px!important}
  .browse-grid,.photo-grid,.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .browse-card-body,.card-body{padding:10px!important}.browse-card-title,.card-title{font-size:.9rem!important;line-height:1.2!important}
  .archive-pagination{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important}

  /* Dialogs fit inside the phone viewport. */
  .photo-modal{padding:10px!important;align-items:flex-start!important;overflow-y:auto!important}
  .modal-box{width:100%!important;max-width:100%!important;max-height:none!important;margin:52px 0 10px!important;display:block!important}
  .modal-image-wrap img{width:100%!important;height:auto!important;max-height:48vh!important;object-fit:contain!important}
  .modal-info{padding:18px 15px!important}.modal-info h2{font-size:1.65rem!important;line-height:1.05!important}
  .modal-close{position:fixed!important;top:8px!important;right:8px!important;z-index:1500!important;min-height:42px!important}

  /* Footer becomes a clean vertical stack. */
  .footer,.home-footer{padding:32px 18px 24px!important}.footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .footer-brand{display:block!important}.footer-brand img{width:72px!important;height:72px!important;margin:0 0 12px!important}.quote-box,.quote{padding:18px!important}
}
@media (max-width: 430px) {
  .browse-grid,.photo-grid,.category-grid{grid-template-columns:1fr!important}
  .archive-approved-hero{height:210px!important}
}

/* Approved compact phone layout */
@media (max-width: 768px) {
  .hero-navigation,.sticky-page-nav,.nav{
    padding:6px!important;gap:5px!important;background:#050505!important;
  }
  .hero-navigation a,.sticky-page-nav a,.nav a{
    height:38px!important;min-height:38px!important;padding:0 3px!important;
    font-size:.60rem!important;letter-spacing:.025em!important;border-width:1px!important;
  }

  /* Archive poster must be entirely visible, never cropped. */
  .archive-page-mobile .archive-approved-hero{
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;
    overflow:visible!important;background:#e9dfcb!important;
  }
  .archive-page-mobile .archive-approved-hero img{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    max-width:100%!important;object-fit:contain!important;object-position:center!important;
  }

  /* Interior poster artwork must remain fully visible and centered on phones. */
  .submit-page-mobile .archive-approved-hero{
    width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;
    background:#e9dfcb!important;
  }
  .submit-page-mobile .archive-approved-hero img{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    max-width:100%!important;object-fit:contain!important;object-position:center center!important;
  }

  /* Submit form: prevent file inputs, long labels, and actions from widening the page. */
  .submit-page-mobile .submit-section{width:100%!important;overflow:hidden!important}
  .submit-page-mobile .submit-panel form,
  .submit-page-mobile .field-grid,
  .submit-page-mobile .form-field{width:100%!important;min-width:0!important}
  .submit-page-mobile input[type="file"]{width:100%!important;min-width:0!important;padding:10px 8px!important}
  .submit-page-mobile .permission-box{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
  .submit-page-mobile .permission-box input{width:20px!important;height:20px!important;min-height:0!important;margin:2px 0 0!important}
  .submit-page-mobile .submit-actions,.submit-page-mobile .submit-btn{width:100%!important}

  .archive-page-mobile .browse-tools{padding:14px 12px 12px!important}
  .archive-page-mobile .browse-search-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-bottom:12px!important}
  .archive-page-mobile #browseSearch{height:44px!important;min-height:44px!important;padding:9px 12px!important;font-size:16px!important}
  .archive-page-mobile .photo-count{font-size:.68rem!important;letter-spacing:.055em!important;white-space:normal!important}
  .archive-page-mobile .category-filters{
    display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:6px!important;padding:0!important;
  }
  .archive-page-mobile .filter-btn{
    flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:34px!important;
    padding:6px 8px!important;font-size:.60rem!important;letter-spacing:.035em!important;white-space:normal!important;
  }
  .archive-page-mobile .content-section{padding:18px 10px 34px!important}
  .archive-page-mobile .browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .archive-page-mobile .browse-card img{width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important}
  .archive-page-mobile .browse-card-body{min-height:0!important;padding:8px!important}
  .archive-page-mobile .browse-card-title{font-size:.76rem!important;line-height:1.18!important;margin:0!important}
  .archive-page-mobile .browse-card-desc,.archive-page-mobile .browse-card-tags{display:none!important}
}

/* The news page uses its own hero class; match the uncropped poster behavior. */
@media (max-width:768px){
  body.news-page-mobile .hero{
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;
    overflow:visible!important;background:#e9dfcb!important;
  }
  body.news-page-mobile .hero img{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    max-width:100%!important;object-fit:contain!important;object-position:center center!important;
  }
  body.news-page-mobile .section{width:100%!important;padding:18px 10px 34px!important}
  body.news-page-mobile .news-search{width:100%!important;margin:0 0 18px!important;padding:12px!important;gap:8px!important}
  body.news-page-mobile .grid{width:100%!important;gap:12px!important}
}

@media (max-width: 430px) {
  .archive-page-mobile .browse-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}