/**
 * Inle Resources Center (IRC) - Responsive Stylesheet
 * Breakpoints: 1024px (Tablet Landscape), 768px (Tablet Portrait), 576px (Mobile)
 */

/* ==========================================================================
   Tablet Landscape (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  h1 { font-size: 2.35rem; }
  h2 { font-size: 2rem; }
  
  .slide-title {
    font-size: 2.5rem;
  }

  .who-grid {
    gap: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .detail-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Tablet Portrait (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }

  /* Top Bar */
  .top-bar-content {
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .top-bar {
    height: auto;
    padding: 0;
  }

  .top-contact-info {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8rem;
  }

  /* Header & Mobile Navigation */
  .mobile-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--bg-white);
    border-bottom: 2px solid var(--primary);
    box-shadow: var(--shadow-xl);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }

  .main-nav.open {
    max-height: 480px;
    padding: 1.5rem 0;
    overflow-y: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 1.5rem;
    gap: 1rem;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.05rem;
  }

  .nav-btn-item {
    margin-top: 0.5rem;
  }

  .nav-donate-btn {
    width: 100%;
    text-align: center;
  }

  /* Hero Slider */
  .hero-slider-section {
    min-height: 440px;
  }

  .slide-title {
    font-size: 2.1rem;
  }

  .slide-desc {
    font-size: 1rem;
  }

  .slider-arrow {
    display: none; /* Rely on dots and touch for mobile */
  }

  /* Who We Are */
  .who-grid {
    grid-template-columns: 1fr;
  }

  .who-stat-card {
    right: 1rem;
    bottom: -1rem;
    padding: 1rem 1.25rem;
  }

  .who-stat-num {
    font-size: 1.75rem;
  }

  /* Timeline */
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 0;
    text-align: left !important;
  }

  .timeline-item.right {
    left: 0;
  }

  .timeline-dot {
    left: 11px !important;
    right: auto !important;
  }

  /* Grids */
  .project-grid,
  .events-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Fixed Action */
  .fixed-action-widget {
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .fixed-donate-btn span {
    display: none; /* Icon only on mobile */
  }

  .fixed-donate-btn {
    padding: 0.75rem;
    border-radius: 0px;
  }
}

/* ==========================================================================
   Mobile Small (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .site-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.6rem; }

  .slide-title {
    font-size: 1.75rem;
  }

  .slide-actions {
    flex-direction: column;
    width: 100%;
  }

  .slide-actions .btn {
    width: 100%;
  }

  .who-features {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 1.5rem 1.25rem;
  }
}