/* ===========================================
   mobile.css — Mobile-specific overrides
   Imported by main.css or linked separately
   =========================================== */

/* ============ MOBILE CAPTION CARDS ============ */
@media (max-width: 480px) {
  .caption-card { padding: 14px 12px; }
  .caption-text { font-size: 0.88rem; min-height: auto; }
  .btn-copy { font-size: 0.78rem; padding: 7px 10px; }
  .btn-share-wa, .btn-like { padding: 7px 8px; font-size: 0.8rem; }

  /* Stack action buttons on tiny screens */
  .caption-actions {
    gap: 6px;
  }
}

/* ============ MOBILE HERO ============ */
@media (max-width: 480px) {
  .hero h1 { font-size: 2.2rem; }
  .hero-stats { gap: 16px; }
  .stat-number { font-size: 1.4rem; }
  .stat-label { font-size: 0.72rem; }
}

/* ============ MOBILE CATEGORY GRID ============ */
@media (max-width: 360px) {
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .category-icon { font-size: 1.6rem; }
  .category-name { font-size: 0.78rem; }
}

/* ============ MOBILE FILTER BAR ============ */
@media (max-width: 640px) {
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }
  .filter-label { display: none; }
}

/* ============ MOBILE BREADCRUMB ============ */
@media (max-width: 480px) {
  .breadcrumb { font-size: 0.78rem; }
  .breadcrumb .current { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============ MOBILE CAT HERO ============ */
@media (max-width: 640px) {
  .cat-hero { padding: 20px 16px; }
  .cat-hero h1 { font-size: 1.4rem; }
  .cat-hero-meta { font-size: 0.78rem; gap: 10px; }
}

/* ============ MOBILE PAGINATION ============ */
@media (max-width: 480px) {
  .pagination { gap: 4px; }
  .page-btn { min-width: 34px; height: 34px; font-size: 0.82rem; }
}

/* ============ MOBILE FOOTER ============ */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand p { font-size: 0.82rem; }
  .site-footer { margin-top: 48px; padding: 40px 0 0; }
}

/* ============ MOBILE SEARCH ============ */
@media (max-width: 480px) {
  .search-box { margin: 0 8px; border-radius: var(--radius-lg); }
  .search-input-wrap { padding: 12px 14px; }
  #globalSearch { font-size: 1rem; }
  .search-esc { display: none; }
  .search-trending { display: none; }
}

/* ============ MOBILE BLOG GRID ============ */
@media (max-width: 480px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-img { height: 140px; }
}

/* ============ MOBILE RELATED ============ */
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ TOUCH OPTIMIZATIONS ============ */
@media (hover: none) {
  /* Larger tap targets on touch devices */
  .btn-copy, .btn-share-wa, .btn-like {
    min-height: 40px;
  }
  .category-card {
    min-height: 90px;
  }
  /* Remove hover effects on touch */
  .caption-card:hover {
    transform: none;
  }
  .category-card:hover {
    transform: none;
  }
}

/* ============ SAFE AREA (iPhone notch) ============ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .back-to-top {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ============ HIGH CONTRAST MODE ============ */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255,255,255,0.25);
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
  }
  .caption-card {
    border-width: 2px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ LANDSCAPE PHONE ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 20px 0; }
  .hero h1 { font-size: 2rem; }
  .hero-stats { display: none; }
}