/**
 * SmartMag Responsive CSS
 * Mobile-first responsive design with breakpoints
 *
 * Breakpoints:
 * - Mobile: < 768px
 * - Tablet: 768px - 1024px
 * - Desktop: > 1024px
 */

/* ============================================================================
   TABLET & BELOW (max-width: 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
  :root {
    --wrap-padding: 20px;
    --grid-gutter: 24px;
    --sidebar-width: 40%;
  }

  .grid-3col,
  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-title {
    font-size: 28px;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   MOBILE (max-width: 768px)
   ========================================================================= */

@media (max-width: 768px) {
  :root {
    --wrap-padding: 15px;
    --grid-gutter: 20px;
    --post-content-size: 1.1rem;
  }

  /* Layout: Full Width on Mobile */
  .ts-row {
    flex-direction: column;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Grids: Single Column */
  .grid-2col,
  .grid-3col,
  .grid-4col,
  .related-grid {
    grid-template-columns: 1fr;
  }

  /* Header: Show Mobile Header */
  #smart-head {
    display: none !important;
  }

  #smart-head-mobile {
    display: block;
  }

  .hamburger {
    display: flex;
  }

  /* Typography: Smaller Sizes */
  .post-title {
    font-size: 24px;
  }

  .archive-title {
    font-size: 28px;
  }

  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  /* Sidebar: Below Content */
  .sidebar {
    margin-top: 40px;
    position: relative !important;
    top: auto !important;
  }

  .sticky-sidebar {
    position: relative;
  }

  /* Post Card: Full Width */
  .post-card-list {
    flex-direction: column;
  }

  .post-card .post-thumb {
    padding-top: 56.25%; /* 16:9 aspect ratio */
  }

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

  /* Social Share: Smaller Buttons */
  .social-share-top {
    flex-wrap: wrap;
  }

  .social-share-top a {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Footer: Stack Elements */
  .footer-nav ul {
    flex-direction: column;
    gap: 10px;
  }

  /* Search Modal: Full Screen */
  .search-modal-content {
    width: 95%;
    max-width: none;
  }

  /* Pagination: Smaller */
  .pagination a,
  .pagination span {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  /* Hero Section: Adjust Padding */
  .hero-banner {
    padding: 40px 20px;
  }

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

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

  .error-404-actions {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================= */

@media (max-width: 480px) {
  :root {
    --wrap-padding: 12px;
    --grid-gutter: 15px;
  }

  .post-title {
    font-size: 20px;
  }

  .archive-title {
    font-size: 24px;
  }

  .post-card-content {
    padding: 15px;
  }

  .widget {
    padding: 20px 15px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .main-footer {
    padding: 30px 0 15px;
  }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
  .smart-head,
  .main-footer,
  .sidebar,
  .social-share-top,
  .related-posts,
  .author-box,
  .post-tags,
  .navigation,
  .header-actions,
  .breadcrumbs,
  .pagination,
  [class*="ad-"],
  [class*="gam-"],
  [class*="adsense-"],
  [id*="afs"] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .post-content,
  .entry-content {
    max-width: 100%;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}