/* ================================================================
   RUMDIGI v2 — Responsive (Mobile-first breakpoints)
   ================================================================ */

/* ---------------------------------------------------------------
   Tablet — max 1024px
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --rd-section-py: 4rem; }

  /* Header nav */
  .rd-nav, .rd-header-actions .rd-btn-zalo { display: none; }
  .rd-hamburger { display: flex; }

  /* Footer grid */
  .rd-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--rd-space-8);
  }
  .rd-footer-brand { grid-column: 1 / -1; }

  /* Layout  */
  .rd-layout-with-sidebar { grid-template-columns: 1fr; }
  .rd-sidebar { position: static; }

  /* Grids */
  .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .rd-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Blog list view */
  .rd-blog-card.list-view { flex-direction: column; }
  .rd-blog-card.list-view .rd-blog-card-img { width: 100%; aspect-ratio: 16/9; }

  /* Hero */
  .rd-hero-inner { grid-template-columns: 1fr !important; text-align: center; gap: 40px; }
  .rd-hero-actions { justify-content: center; }
  .rd-hero-visual { display: none; }
  .rd-hero-eyebrow { justify-content: center; }
  .rd-hero-clients { justify-content: center; }
}

/* ---------------------------------------------------------------
   Mobile — max 768px
--------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --rd-section-py: 3rem;
    --rd-header-h: 60px;
  }

  /* Container */
  .rd-container { padding: 0 var(--rd-space-4); }

  /* Typography scale down */
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h3 { font-size: 1.25rem; }

  /* Grids */
  .rd-grid-2, .rd-grid-3, .rd-grid-4 { grid-template-columns: 1fr; }
  .rd-grid-auto { grid-template-columns: 1fr; }

  /* Footer */
  .rd-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--rd-space-6); }
  .rd-footer-brand { grid-column: 1 / -1; }
  .rd-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--rd-space-3); }
  .rd-footer-bottom-links { flex-wrap: wrap; gap: var(--rd-space-3); }

  /* Toast */
  #rd-toast-container { left: var(--rd-space-4); right: var(--rd-space-4); bottom: var(--rd-space-4); }
  .rd-toast { max-width: 100%; min-width: unset; }

  /* Back to top / toast positioning */
  #rd-back-top { bottom: 70px; }

  /* Stats bar */
  .rd-stats-inner { grid-template-columns: repeat(2, 1fr); gap: var(--rd-space-6); }

  /* Page header */
  .rd-page-header { padding: calc(var(--rd-header-h) + 2rem) 0 2rem; }

  /* CTA section */
  .rd-cta-section { padding: var(--rd-space-10) var(--rd-space-6); border-radius: var(--rd-radius-xl); }
  .rd-cta-actions { flex-direction: column; align-items: stretch; }
  .rd-cta-contact { flex-direction: column; gap: var(--rd-space-3); }

  /* Blog card list → always column on mobile */
  .rd-blog-card.list-view { flex-direction: column; }
  .rd-blog-card.list-view .rd-blog-card-img { width: 100%; }

  /* Product card footer stack */
  .rd-product-card-footer { flex-direction: column; align-items: flex-start; gap: var(--rd-space-3); }

  /* Touch targets */
  .rd-btn { height: 48px; }
  .rd-btn-sm { height: 38px; }
  
  /* Header spacing */
  .rd-hamburger { margin-left: var(--rd-space-4); }

  /* Single Product Hero breaks */
  .rd-product-hero-left-top { flex-direction: column; align-items: stretch; text-align: center; }
  .rd-product-hero-media { display: flex; justify-content: center; }
  .rd-product-hero-title-row, .rd-product-hero-tags { justify-content: center; }
  
  /* Home Hero breaks and padding fix */
  .rd-hero-section { min-height: auto; padding: calc(var(--rd-header-h) + 2rem) 0 3rem; }

  /* Product Card Buttons Stack */
  .rd-product-card-footer .rd-btn { width: 100% !important; flex: none !important; }

  /* Share links and Word breaks */
  .rd-share-links { flex-wrap: wrap; }
  .rd-page-header h1, .rd-banner-text, .rd-post-title { word-break: break-word; }

  /* Comment Form Submit & WP Search Wrap */
  .rd-comments input[type="submit"], #submit { width: 100%; border-radius: var(--rd-radius-md); }
  .wp-block-search__inside-wrapper { display: flex; flex-direction: column; gap: 8px; }

  /* Nav mobile full width */
  #rd-mobile-menu { padding-top: calc(var(--rd-header-h) + 1rem); }

  /* Breadcrumb */
  .rd-breadcrumb { display: none; }

  /* TOC */
  .rd-toc { margin: var(--rd-space-5) 0; }
}

/* ---------------------------------------------------------------
   Small mobile — max 480px
--------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --rd-section-py: 2.5rem; }

  .rd-footer-grid { grid-template-columns: 1fr; }
  .rd-stats-inner { grid-template-columns: 1fr; }

  /* Newsletter stack */
  .rd-newsletter-form { flex-direction: column; }
  .rd-newsletter-form button { width: 100%; border-radius: var(--rd-radius-md); }

  /* Blog Title smaller */
  .rd-page-header h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }

  /* Section header */
  .rd-section-title { font-size: 1.5rem; }
  .rd-section-subtitle { font-size: 0.9rem; }

  /* Product card */
  .rd-product-card-header { flex-direction: column; gap: var(--rd-space-3); }
}

/* ---------------------------------------------------------------
   Reduced motion accessibility
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Print
--------------------------------------------------------------- */
@media print {
  #rd-header, #rd-footer, #rd-back-top, #rd-toast-container, #rd-read-progress { display: none !important; }
  body { padding-top: 0; background: white; color: black; }
  .rd-card, .rd-product-card, .rd-blog-card { border: 1px solid #ddd; box-shadow: none; }
  a { color: inherit; }
}