/* ========================================
   Responsive Design Enhancement
   สำหรับทุกขนาดหน้าจอ
   ======================================== */

/* Mobile First - Extra Small (< 576px) */
@media (max-width: 575.98px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    #heroCarousel { height: 250px !important; }
    .card-body { padding: 1rem !important; }
    .btn { padding: 0.5rem 1rem !important; font-size: 0.875rem !important; }
    .modal-content { width: 95% !important; margin: 1rem !important; }
    footer .grid { grid-template-columns: 1fr !important; }
}

/* Small (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #heroCarousel { height: 350px !important; }
    .container { max-width: 540px; }
}

/* Medium (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #heroCarousel { height: 450px !important; }
    .container { max-width: 720px; }
}

/* Large (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container { max-width: 960px; }
}

/* Extra Large (>= 1200px) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* Landscape */
@media (orientation: landscape) and (max-height: 500px) {
    .navbar { padding: 0.5rem 0 !important; }
    .top-bar { display: none !important; }
}

/* Print */
@media print {
    .navbar, .top-bar, footer, #backToTop, .navbar-toggle { display: none !important; }
}