/* =============================================================================
   SarkariBlaze mobile.css — Mobile-specific overrides and enhancements
   Max-width: 767px (applied only on mobile)
   ============================================================================= */

@media (max-width: 767px) {

  /* Job card: thumbnail above content */
  .job-card-inner {
    flex-direction: column;
  }

  .job-card-thumb {
    width: 100%;
  }

  .job-card-thumb .card-img {
    width: 100%;
    height: 160px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  }

  /* Hero */
  .hero-section {
    padding: var(--spacing-xl) 0;
  }

  .hero-title {
    font-size: 22px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  /* Header: single row */
  .header-inner {
    gap: var(--spacing-sm);
    padding: 10px 0;
  }

  .site-logo .site-name {
    font-size: 18px;
  }

  /* Hide main desktop header elements */
  .header-topbar { display: none !important; }

  /* Mobile menu overlay full screen */
  .mobile-menu-overlay.open .mobile-menu-inner {
    width: 100vw;
    max-width: 100vw;
  }

  /* Web stories: horizontal scroll */
  .web-stories-grid {
    display: flex;
    overflow-x: auto;
  }

  /* Section headings smaller */
  .section-heading {
    font-size: 18px;
  }

  /* Social join: stacked */
  .social-join-section .social-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* Footer */
  .footer-widgets { padding: var(--spacing-xl) 0; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }

  /* Table of contents: collapsed on mobile by default */
  .toc-box {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Post utilities wrap */
  .post-utilities {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Sarkari table responsive */
  .sarkari-table,
  .sarkari-table thead,
  .sarkari-table tbody,
  .sarkari-table tr,
  .sarkari-table td {
    display: block;
    width: 100%;
  }

  .sarkari-table tr { margin-bottom: 4px; border-bottom: 2px solid var(--color-primary); }

  .sarkari-table .label-col {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    width: 100% !important;
  }

  .sarkari-table .value-col {
    background: var(--color-white) !important;
    padding: 8px 12px;
    width: 100% !important;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  }

  /* Important links table */
  .important-links-table td,
  .important-links-table th {
    padding: 8px 10px;
    font-size: 13px;
  }

  .link-btn-green {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Author box */
  .author-box {
    flex-direction: column;
    text-align: center;
  }

  .author-box .author-avatar img {
    margin: 0 auto;
  }

  /* Related posts: 1 column */
  .related-posts-grid {
    grid-template-columns: 1fr;
  }

  /* Category grid: 2 cols */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
  }

  .cat-grid-item {
    padding: var(--spacing-sm);
    min-height: 80px;
  }

  /* Bottom nav visible */
  .mobile-bottom-nav { display: flex; }

  /* FAB higher to clear nav */
  .fab-container { bottom: 74px; }

  /* Hide desktop 728x90 ads */
  .ad-slot-728x90 { display: none; }

  /* Social share: compact */
  .social-share {
    gap: 4px;
  }

  .share-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 36px;
  }

  /* Pagination */
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Trending tags */
  .trending-tags {
    gap: 6px;
  }

  .trending-tags a {
    font-size: 12px;
    padding: 3px 10px;
  }

  /* Comments */
  .comment-list .children {
    padding-left: var(--spacing-md);
  }

  /* Error 404 */
  .error-404-number { font-size: 80px; }
  .error-404-title  { font-size: 24px; }
}

/* =============================================================================
   SMALL PHONES (max-width: 375px)
   ============================================================================= */
@media (max-width: 375px) {
  .hero-title { font-size: 20px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid-name { font-size: 11px; }
}