/* ==========================================================================
   Takin - Mobile Responsive Optimization Stylesheet
   Ensures 100% viewport compliance on smartphones (<=768px), zero overflow-x
   Strictly modular • <180 lines (Iron Rule 1)
   ========================================================================== */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .container {
    padding: 0 1rem !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Navigation Bar Mobile Layout (supports .site-nav and .navbar) */
  .site-nav, .navbar {
    padding: 0.5rem 0.85rem !important;
  }

  .site-nav .brand-block, .navbar .nav-brand {
    gap: 0.5rem !important;
  }

  .site-nav .brand-logo-img, .navbar .nav-logo-icon {
    width: 28px !important;
    height: 31px !important;
  }

  .site-nav .brand-name, .navbar .nav-brand-text {
    font-size: 1.05rem !important;
  }

  .site-nav .brand-sub {
    font-size: 0.6rem !important;
    letter-spacing: 0.5px !important;
  }

  .nav-brand-badge {
    display: none !important;
  }

  .nav-menu, .nav-links {
    gap: 0.4rem !important;
  }

  /* Hide lengthy desktop text links on mobile */
  .nav-menu .nav-link, .nav-links .nav-link {
    display: none !important;
  }

  .nav-controls {
    gap: 0.35rem !important;
  }

  .lang-btn {
    padding: 3px 6px !important;
    font-size: 0.68rem !important;
  }

  .theme-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }

  .site-nav .btn-pill-primary, .navbar .btn-cyber {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.75rem !important;
  }

  /* Reports Hero on Mobile */
  .reports-hero {
    padding: 80px 1rem 30px !important;
  }

  .reports-hero .reports-title {
    font-size: 1.75rem !important;
  }

  /* Top Archive Strip */
  .dossier-header-strip {
    flex-direction: column !important;
    gap: 0.35rem !important;
    text-align: center !important;
    font-size: 0.7rem !important;
    padding: 0.6rem 0.75rem !important;
  }

  /* Hero Section */
  .dossier-hero-card {
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1rem !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  .dossier-title {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }

  .dossier-lead {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 0.85rem auto 1.25rem !important;
  }

  .dossier-btn-group {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .dossier-btn-group a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .dossier-seal-box {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Metrics Strip */
  .metrics-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    padding: 1rem 0.75rem !important;
  }

  .metric-val {
    font-size: 1.4rem !important;
  }

  .metric-label {
    font-size: 0.75rem !important;
  }

  /* Dockets Grid */
  .dockets-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .docket-card {
    padding: 1.25rem !important;
  }

  /* Steps Grid */
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .step-card {
    padding: 1.25rem !important;
  }

  /* Contact & Form */
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .contact-form-panel, .contact-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reports Grid on Sample Reports Page */
  .reports-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0 1rem !important;
  }

  .report-card {
    padding: 1.25rem !important;
  }

  .report-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .report-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}