/**
 * Responsive Stylesheet
 * รองรับการแสดงผลทุกอุปกรณ์: มือถือ, แท็บเล็ต, แล็ปท็อป และเดสก์ท็อป
 */

@media (max-width: 1024px) {
  .hero-title {
    font-size: 2.3rem;
  }
  .hero-subtitle {
    font-size: 1.5rem;
  }
  .achievements-grid,
  .awards-grid {
    gap: 20px;
  }
}

@media (max-width: 868px) {
  /* Header & Navigation */
  .main-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    gap: 12px;
  }

  .main-nav.active {
    display: flex;
  }

  .mobile-toggle {
    display: block;
  }

  .search-input {
    width: 130px;
  }
  .search-input:focus {
    width: 160px;
  }

  /* Hero Section */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-content {
    padding-right: 0;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .shape-dots {
    display: none;
  }

  .executive-portrait-wrap {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Grid adaptations */
  .achievements-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .awards-grid {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
    gap: 45px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .vision-card {
    padding: 35px 25px;
  }
}

@media (max-width: 868px) {
  .filter-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    padding-bottom: 4px;
  }
  .filter-tabs::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
  }
  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 1.85rem;
  }
  .hero-subtitle {
    font-size: 1.3rem;
  }
  .section-title,
  .awards-title {
    font-size: 1.75rem;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .header-actions .search-box {
    display: none; /* ซ่อนช่องค้นหาบนจอมือถือขนาดเล็กมาก */
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .lightbox-dialog {
    margin: 10px;
  }

  .lightbox-details {
    padding: 16px;
  }
}