/* ================================================================
   JSCEC - Complete Mobile Responsive Fix
   Add to END of main.css
   ================================================================ */

/* ── Tablet (max 900px) ── */
@media (max-width: 900px) {
  .pkp_structure_content { grid-template-columns: 1fr !important; }
  #pkp_content_sidebar { border-top: 2px solid #dde6ef; padding-top: 20px !important; }
  .footer-grid, div[style*="grid-template-columns:2.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {

  /* === HEADER === */
  .jscec-topbar { display: none !important; }
  .pkp_head_wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    min-height: auto !important;
  }
  .pkp_site_name a, .pkp_site_name_title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .header-actions { width: 100% !important; }
  .header-submit-btn { font-size: 12px !important; padding: 7px 14px !important; }

  /* === NAVIGATION === */
  .pkp_navigation_primary > ul {
    flex-wrap: wrap !important;
    padding: 0 8px !important;
  }
  .pkp_navigation_primary > ul > li > a {
    font-size: 11px !important;
    padding: 10px 10px !important;
    letter-spacing: 0.03em !important;
  }
  .pkp_navigation_primary > ul > li > ul {
    position: absolute !important;
    left: 0 !important;
    min-width: 200px !important;
    z-index: 9999 !important;
  }

  /* === MAIN LAYOUT === */
  .pkp_structure_content {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .pkp_structure_main {
    padding: 0 14px !important;
    margin: 16px auto !important;
  }
  #pkp_content_main {
    padding: 16px 0 !important;
    border-right: none !important;
  }
  #pkp_content_sidebar {
    padding: 16px 0 !important;
    border-top: 2px solid #dde6ef !important;
    margin-top: 10px !important;
  }

  /* === CONTACT PAGE FIX === */
  div[style*="grid-template-columns:1fr 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1fr 1fr"] > div {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* === ABOUT PAGE TABS === */
  .jscec-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .jscec-tabs a { white-space: nowrap !important; padding: 8px 14px !important; }

  /* === INDEX PAGE GRIDS === */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  div[style*="grid-template-columns:2.5fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr 1fr"],
  div[style*="grid-template-columns:2.2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* === STATS BAR === */
  #statsBar { grid-template-columns: repeat(2,1fr) !important; }

  /* === HERO BANNER === */
  #heroWrapper { padding: 28px 14px 24px !important; }
  #heroWrapper h1 { font-size: 20px !important; line-height: 1.3 !important; }
  #heroWrapper p { font-size: 13px !important; }
  .hero-badges { gap: 6px !important; }
  .hero-badge { font-size: 10px !important; padding: 3px 10px !important; }

  /* === FOOTER === */
  .pkp_structure_footer { margin-top: 20px !important; }
  footer > div { padding: 28px 14px 16px !important; }
  div[style*="grid-template-columns:2.2fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }

  /* === ARTICLE CARDS === */
  .obj_article_summary .galleys_links { flex-wrap: wrap !important; }
  .obj_article_summary .pages { float: none !important; display: block !important; margin: 0 0 6px !important; }

  /* === FORMS === */
  input[type="text"], input[type="email"], input[type="password"], textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* === LOGIN PAGE === */
  div[style*="max-width:480px"] { max-width: 100% !important; }
  div[style*="padding:38px 40px"] { padding: 22px 16px !important; }
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* === PRIVACY / CONTENT PAGES === */
  .jscec-page-wrap { max-width: 100% !important; }
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: 1fr !important;
  }

  /* === ISSUE PAGES === */
  div[style*="display:flex;gap:20px"] { flex-direction: column !important; }
  div[style*="display:flex;gap:18px"] { flex-direction: column !important; }
  div[style*="display:flex;gap:22px"] { flex-direction: column !important; }
  div[style*="display:flex;gap:20px"] img { width: 100% !important; max-width: 200px !important; }

  /* === SIDEBAR BLOCKS === */
  .pkp_block { margin-bottom: 14px !important; }
  .btn-submit-sb { padding: 12px !important; font-size: 14px !important; }

  /* === TABLES === */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* === BADGES ROW === */
  div[style*="display:flex;flex-wrap:wrap;gap:8px"] { gap: 6px !important; }
  span[style*="border-radius:20px"] { font-size: 11px !important; padding: 4px 10px !important; }
}

/* ── Small phones (max 480px) ── */
@media (max-width: 480px) {
  .pkp_site_name_title { font-size: 14px !important; }
  #heroWrapper h1 { font-size: 18px !important; }
  #statsBar .stat-num { font-size: 17px !important; }
  #statsBar .stat-lbl { font-size: 9px !important; }
  .pkp_navigation_primary > ul > li > a { font-size: 10.5px !important; padding: 9px 8px !important; }
  div[style*="padding:38px 40px"], div[style*="padding:36px"] { padding: 18px 14px !important; }
  div[style*="width:60px;height:60px"] { width: 48px !important; height: 48px !important; font-size: 18px !important; }
}