/**
 * Responsive Design Enhancements
 * Version 2.0 - Mobile-First Approach
 */

/* ========================================
   MOBILE FIRST BASE STYLES (320px+)
   ======================================== */

/* Container Improvements */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

/* Typography Responsive */
body {
    font-size: 16px;
    line-height: 1.6;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* ========================================
   NAVBAR RESPONSIVE
   ======================================== */

/* Mobile Navbar */
.navbar {
    padding: 0.75rem 1rem;
}

.navbar-brand img {
    max-height: 40px !important;
    height: 40px !important;
}

.navbar-toggler {
    padding: 0.5rem;
    font-size: 1.25rem;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 8px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Mobile Menu */
.navbar-collapse {
    margin-top: 1rem;
}

.navbar-nav {
    padding: 0.5rem 0;
}

.navbar-nav .nav-item {
    margin: 0.25rem 0;
}

.navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(0,123,255,0.1);
}

/* ========================================
   SLIDER / CAROUSEL RESPONSIVE
   ======================================== */

.carousel-item img {
    height: 250px !important;
    object-fit: cover;
}

.carousel-caption,
.slider-caption {
    padding: 15px !important;
    max-width: 90% !important;
}

.carousel-caption h2,
.carousel-caption h5,
.slider-caption h2 {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
}

.carousel-caption p,
.slider-caption p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* ========================================
   CARDS RESPONSIVE
   ======================================== */

.card {
    margin-bottom: 1.5rem;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-body {
    padding: 1rem;
}

.card-title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.card-text {
    font-size: 0.9rem;
}

/* Room Cards */
.room-card .card-img-top {
    height: 180px;
}

.room-info {
    padding: 10px;
}

.room-info .col-4 {
    border-right: none !important;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.room-info .col-4:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.room-price {
    font-size: 1rem !important;
}

/* ========================================
   BUTTONS RESPONSIVE
   ======================================== */

.btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

/* Full width buttons on mobile */
.btn-block-mobile {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* ========================================
   FORMS RESPONSIVE
   ======================================== */

.form-control,
.form-select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem;
}

.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

textarea.form-control {
    min-height: 120px;
}

/* ========================================
   GALLERY RESPONSIVE
   ======================================== */

.gallery-item {
    margin-bottom: 1rem;
}

.gallery-item img {
    height: 180px !important;
    border-radius: 8px;
}

.gallery-overlay i {
    font-size: 1.5rem;
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

footer {
    padding: 2rem 0 1rem;
}

footer .col-md-4 {
    margin-bottom: 2rem;
    text-align: center;
}

footer h5 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

footer p,
footer .list-unstyled li {
    font-size: 0.9rem;
}

.social-icons {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.social-icons a {
    margin: 0.25rem;
}

/* ========================================
   PAGE BANNER RESPONSIVE
   ======================================== */

.page-banner {
    height: 250px !important;
}

.banner-title {
    font-size: 1.5rem !important;
}

.banner-subtitle {
    font-size: 0.9rem !important;
}

/* ========================================
   TABLES RESPONSIVE
   ======================================== */

.table-responsive {
    font-size: 0.85rem;
}

.table th,
.table td {
    padding: 0.5rem;
    font-size: 0.85rem;
}

/* Hide less important columns on mobile */
.table .hide-mobile {
    display: none;
}

/* ========================================
   SPACING ADJUSTMENTS
   ======================================== */

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* ========================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger tap targets */
a, button, .btn, .nav-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Remove hover effects on touch devices */
@media (hover: none) {
    .card:hover,
    .btn:hover,
    .gallery-item:hover img {
        transform: none;
    }
}

/* ========================================
   TABLET (576px+)
   ======================================== */

@media (min-width: 576px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    /* Slider */
    .carousel-item img {
        height: 300px !important;
    }
    
    .carousel-caption h2,
    .slider-caption h2 {
        font-size: 1.5rem !important;
    }
    
    .carousel-caption p,
    .slider-caption p {
        font-size: 1rem !important;
    }
    
    /* Cards */
    .card-img-top {
        height: 220px;
    }
    
    .room-card .card-img-top {
        height: 200px;
    }
    
    /* Gallery */
    .gallery-item img {
        height: 200px !important;
    }
    
    /* Page Banner */
    .page-banner {
        height: 300px !important;
    }
    
    .banner-title {
        font-size: 1.75rem !important;
    }
    
    .banner-subtitle {
        font-size: 1rem !important;
    }
}

/* ========================================
   DESKTOP (768px+)
   ======================================== */

@media (min-width: 768px) {
    /* Typography */
    body { font-size: 16px; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    
    /* Navbar */
    .navbar-brand img {
        max-height: 50px !important;
        height: 50px !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        border-radius: 0;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background-color: transparent;
    }
    
    /* Slider */
    .carousel-item img {
        height: 400px !important;
    }
    
    .carousel-caption,
    .slider-caption {
        padding: 30px !important;
    }
    
    .carousel-caption h2,
    .slider-caption h2 {
        font-size: 2rem !important;
    }
    
    .carousel-caption p,
    .slider-caption p {
        font-size: 1.125rem !important;
    }
    
    /* Cards */
    .card-img-top {
        height: 250px;
    }
    
    .room-card .card-img-top {
        height: 220px;
    }
    
    .room-info .col-4 {
        border-right: 1px solid #dee2e6 !important;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .room-info .col-4:last-child {
        border-right: none;
    }
    
    /* Gallery */
    .gallery-item img {
        height: 250px !important;
    }
    
    /* Footer */
    footer .col-md-4 {
        text-align: left;
        margin-bottom: 0;
    }
    
    .social-icons {
        justify-content: flex-start;
    }
    
    /* Page Banner */
    .page-banner {
        height: 350px !important;
    }
    
    .banner-title {
        font-size: 2.5rem !important;
    }
    
    .banner-subtitle {
        font-size: 1.125rem !important;
    }
    
    /* Tables */
    .table .hide-mobile {
        display: table-cell;
    }
    
    /* Spacing */
    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .my-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
}

/* ========================================
   LARGE DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {
    /* Slider */
    .carousel-item img {
        height: 500px !important;
    }
    
    .carousel-caption h2,
    .slider-caption h2 {
        font-size: 2.5rem !important;
    }
    
    /* Page Banner */
    .page-banner {
        height: 400px !important;
    }
    
    .banner-title {
        font-size: 3rem !important;
    }
    
    .banner-subtitle {
        font-size: 1.2rem !important;
    }
}

/* ========================================
   EXTRA LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Slider */
    .carousel-item img {
        height: 550px !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .navbar,
    .carousel-control-prev,
    .carousel-control-next,
    footer,
    .btn,
    .social-icons {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--primary-color, #007bff);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color, #007bff);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Reduced motion for users who prefer it */
@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;
    }
}