/* ========================================
   RESPONSIVE CSS FOR MOBILE DEVICES
   Optimized for smartphones and tablets
   ======================================== */

/* ========================================
   MOBILE FIRST - BASE STYLES
   ======================================== */

/* Smooth scrolling for all devices */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   HERO SECTION - MOBILE OPTIMIZATION
   ======================================== */

/* Mobile: Extra Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    /* Hero Carousel */
    #HeroSection .carousel-item {
        height: 60vh !important;
        min-height: 500px;
    }

    /* Logo Overlay - Smaller on mobile */
    #HeroSection .position-absolute.top-0 {
        padding: 1rem !important;
    }

    #HeroSection .position-absolute.top-0 img {
        height: 35px !important;
        max-width: 80px;
        object-fit: contain;
    }

    /* Hero Content */
    #HeroSection .hero-content h1 {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: 1rem !important;
    }

    #HeroSection .hero-content .lead {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Hero Buttons */
    #HeroSection .btn-lg {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.5rem !important;
        margin-bottom: 0.5rem;
    }

    #HeroSection .btn-lg.me-3 {
        margin-right: 0.5rem !important;
        margin-bottom: 0.5rem;
    }

    /* Carousel Controls */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Carousel Indicators */
    .carousel-indicators {
        margin-bottom: 0.5rem;
    }

    .carousel-indicators button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 0 3px;
    }
}

/* ========================================
   ROOMS SECTION - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {
    #rooms {
        padding: 2rem 0 !important;
    }

    #rooms .container {
        padding: 1rem !important;
    }

    #rooms h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    #rooms .text-muted {
        font-size: 0.9rem;
    }

    /* Room Cards */
    .card-room {
        margin-bottom: 1.5rem;
    }

    .card-room .card-body {
        padding: 1.25rem !important;
    }

    .card-room h4 {
        font-size: 1.1rem !important;
    }

    .card-room .text-muted {
        font-size: 0.85rem;
        margin-bottom: 1rem !important;
    }

    .card-room .badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem !important;
    }

    .card-room .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1.25rem !important;
    }
}

/* ========================================
   EVENTS SECTION - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {
    #events {
        padding: 2rem 0 !important;
    }

    #events .container {
        padding: 1rem !important;
    }

    #events h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Mini Calendar */
    .mini-calendar {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .mini-calendar h5 {
        font-size: 1rem !important;
    }

    .mini-calendar .btn-group-sm .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .mini-calendar table {
        font-size: 0.85rem;
    }

    .mini-calendar thead th {
        font-size: 0.7rem;
        padding: 0.25rem;
    }

    .mini-calendar tbody td {
        padding: 0.35rem 0.15rem;
    }

    /* Event List */
    .list-group-item {
        padding: 1rem !important;
    }

    .list-group-item .col-auto {
        margin-bottom: 0.75rem;
    }

    .list-group-item .text-center {
        min-width: 50px !important;
    }

    .list-group-item .text-center .small {
        font-size: 0.7rem;
    }

    .list-group-item .text-center .h4 {
        font-size: 1.25rem !important;
    }

    .list-group-item h5 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .list-group-item .text-muted {
        font-size: 0.75rem;
    }

    .list-group-item .btn-sm {
        font-size: 0.75rem;
        padding: 0.4rem 1rem !important;
        margin-top: 0.5rem;
    }

    /* Stack event items vertically on mobile */
    .list-group-item .row {
        flex-direction: column;
    }

    .list-group-item .col-auto,
    .list-group-item .col {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
    }
}

/* ========================================
   GALLERY SECTION - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {

    /* Gallery Section */
    .py-5.bg-light {
        padding: 2rem 0 !important;
    }

    .py-5.bg-light .container {
        padding: 0 1rem !important;
    }

    .py-5.bg-light h2 {
        font-size: 1.5rem !important;
    }

    .py-5.bg-light h4 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Video Section */
    #Video .sticky-top {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 1.5rem;
    }

    /* Gallery Scroll */
    .gallery-scroll {
        padding-bottom: 1rem !important;
    }

    .gallery-scroll .d-inline-block {
        width: 220px !important;
        margin-right: 0.75rem !important;
    }

    .gallery-scroll .card-body {
        padding: 0.75rem !important;
    }

    .gallery-scroll h6 {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   CONTACT SECTION - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {
    #Informasi {
        padding: 2rem 0 !important;
    }

    #Informasi .container {
        padding: 0 1rem !important;
    }

    #Informasi h6 {
        font-size: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    #Informasi .display-5 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }

    #Informasi .lead {
        font-size: 0.95rem !important;
    }

    /* Contact Cards */
    #Informasi .card-body {
        padding: 2rem 1.5rem !important;
    }

    #Informasi .icon-wrapper {
        width: 60px !important;
        height: 60px !important;
    }

    #Informasi .icon-wrapper i {
        font-size: 1.75rem !important;
    }

    #Informasi h4 {
        font-size: 1.1rem !important;
    }

    #Informasi .text-muted {
        font-size: 0.85rem;
        margin-bottom: 1.25rem !important;
    }

    #Informasi .btn-lg {
        font-size: 0.9rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Additional Info Cards */
    #Informasi .card-body .row {
        gap: 1.5rem;
    }

    #Informasi .card-body i {
        font-size: 1.5rem !important;
    }

    #Informasi .card-body h6 {
        font-size: 0.95rem !important;
    }

    #Informasi .card-body .small {
        font-size: 0.8rem !important;
    }

    /* Decorative circles - hide on mobile */
    #Informasi .position-absolute.rounded-circle {
        display: none;
    }
}

/* ========================================
   TABLET - SMALL (576px to 767.98px)
   ======================================== */

@media (min-width: 576px) and (max-width: 767.98px) {

    /* Hero adjustments for small tablets */
    #HeroSection .carousel-item {
        height: 70vh !important;
    }

    #HeroSection .position-absolute.top-0 {
        padding: 1.5rem !important;
    }

    #HeroSection .position-absolute.top-0 img {
        height: 45px !important;
    }

    #HeroSection .hero-content h1 {
        font-size: 2.25rem !important;
    }

    #HeroSection .hero-content .lead {
        font-size: 1.1rem !important;
    }

    /* Gallery items slightly larger */
    .gallery-scroll .d-inline-block {
        width: 240px !important;
    }
}

/* ========================================
   TABLET - MEDIUM (768px to 991.98px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Hero adjustments for medium tablets */
    #HeroSection .carousel-item {
        height: 80vh !important;
    }

    #HeroSection .position-absolute.top-0 {
        padding: 2rem !important;
    }

    #HeroSection .position-absolute.top-0 img {
        height: 50px !important;
    }

    #HeroSection .hero-content h1 {
        font-size: 2.5rem !important;
    }

    /* Event list - semi-responsive */
    .list-group-item .col-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .list-group-item .btn-sm {
        margin-top: 0;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 767.98px) and (orientation: landscape) {

    /* Reduce hero height in landscape */
    #HeroSection .carousel-item {
        height: 85vh !important;
        min-height: 400px;
    }

    #HeroSection .hero-content h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    #HeroSection .hero-content .lead {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }

    #HeroSection .btn-lg {
        font-size: 0.8rem !important;
        padding: 0.5rem 1.25rem !important;
    }
}

/* ========================================
   UTILITY CLASSES FOR MOBILE
   ======================================== */

@media (max-width: 575.98px) {

    /* Spacing utilities */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

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

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

    .g-4 {
        gap: 1rem !important;
    }

    .g-5 {
        gap: 1.5rem !important;
    }

    /* Text utilities */
    .display-3 {
        font-size: 2rem !important;
    }

    .display-5 {
        font-size: 1.75rem !important;
    }

    /* Border radius adjustments */
    .rounded-4 {
        border-radius: 1rem !important;
    }

    .rounded-pill {
        border-radius: 50rem !important;
    }
}

/* ========================================
   TOUCH OPTIMIZATION
   ======================================== */

/* Larger touch targets for mobile */
@media (max-width: 767.98px) {

    a,
    button,
    .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Improve tap highlight */
    a,
    button,
    .btn,
    .card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animations on mobile for better performance */
@media (max-width: 767.98px) {
    .animate__animated {
        animation-duration: 0.5s !important;
    }

    /* Disable some heavy animations on mobile */
    .hover-lift:hover {
        transform: translateY(-2px);
    }

    .card-room:hover {
        transform: translateY(-5px);
    }
}

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

/* Better focus states for keyboard navigation */
@media (max-width: 767.98px) {

    a:focus,
    button:focus,
    .btn:focus {
        outline: 2px solid #005596;
        outline-offset: 2px;
    }
}

/* ========================================
   NAVBAR MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 0 !important;
    }

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

    .navbar-toggler {
        padding: 0.5rem;
        font-size: 1.1rem;
        border: none;
    }

    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 0.375rem;
    }

    .nav-link:hover {
        background-color: rgba(0, 85, 150, 0.05);
    }
}

/* ========================================
   FOOTER MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 767.98px) {
    footer {
        padding: 2rem 0 1rem !important;
    }

    footer img {
        height: 35px !important;
        margin-bottom: 1rem !important;
    }

    footer .container {
        padding: 0 1rem;
    }

    .footer-bottom {
        font-size: 0.8rem !important;
        padding-top: 1rem !important;
        margin-top: 1.5rem !important;
        text-align: center;
    }
}

/* ========================================
   RUANGAN PAGE - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {

    /* Page Header */
    .py-5.bg-light .row.align-items-end {
        margin-bottom: 2rem !important;
    }

    .py-5.bg-light h6.tracking-widest {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .py-5.bg-light .display-5 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }

    .py-5.bg-light .text-muted {
        font-size: 0.9rem;
        margin-top: 1rem !important;
    }

    /* Room Cards */
    .hover-up {
        transition: transform 0.3s ease;
    }

    .hover-up:hover {
        transform: translateY(-3px);
    }

    .card .position-relative {
        height: 200px !important;
    }

    .card .position-absolute.top-0.end-0 .badge {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem !important;
    }

    .card .position-absolute.bottom-0 h5 {
        font-size: 1rem !important;
    }

    .card-body .line-clamp-3 {
        font-size: 0.85rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-body .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem !important;
    }
}

/* ========================================
   ACARA PAGE - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {

    /* Filter Toolbar */
    .bg-white.rounded-pill.shadow-sm.border {
        flex-direction: column !important;
        border-radius: 1rem !important;
        padding: 1rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .bg-white.rounded-pill form {
        width: 100% !important;
    }

    .bg-white.rounded-pill .col-auto {
        width: 100%;
    }

    .bg-white.rounded-pill .form-select {
        width: 100% !important;
        margin-bottom: 0.5rem;
        padding: 0.75rem 1rem !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 0.5rem !important;
    }

    .bg-white.rounded-pill .vr {
        display: none;
    }

    .bg-white.rounded-pill button[type="submit"] {
        width: 100% !important;
        height: 48px !important;
        border-radius: 0.5rem !important;
        margin-top: 0.5rem;
    }

    /* Timeline */
    .timeline {
        padding: 1.5rem 1rem !important;
    }

    .timeline-day {
        margin-bottom: 2rem !important;
    }

    .timeline-day .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .timeline-day .bg-primary {
        min-width: 70px !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem;
        margin-right: 0 !important;
    }

    .timeline-day .bg-primary .small {
        font-size: 0.7rem;
    }

    .timeline-day .bg-primary .h2 {
        font-size: 1.5rem !important;
    }

    .timeline-day h4 {
        font-size: 1.1rem !important;
    }

    .timeline-day .text-muted.small {
        font-size: 0.8rem;
    }

    .timeline-day .ms-lg-5 {
        margin-left: 0 !important;
    }

    /* Event Cards */
    .timeline .card-body {
        padding: 1.25rem !important;
    }

    .timeline .card-body .row {
        flex-direction: column;
    }

    .timeline .card-body .col-md-8,
    .timeline .card-body .col-md-4 {
        width: 100%;
        max-width: 100%;
    }

    .timeline .card-body .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .timeline .card-body .badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem !important;
        margin-right: 0 !important;
        margin-bottom: 0.25rem;
    }

    .timeline .card-body h5 {
        font-size: 1rem !important;
        margin-top: 0.5rem;
    }

    .timeline .card-body .small {
        font-size: 0.8rem;
    }

    .timeline .card-body .btn {
        width: 100%;
        margin-top: 1rem;
        font-size: 0.85rem;
        padding: 0.6rem 1rem !important;
    }

    .timeline .card-body .text-md-end {
        text-align: left !important;
    }
}

/* Tablet adjustments for Acara page */
@media (min-width: 576px) and (max-width: 991.98px) {
    .bg-white.rounded-pill.shadow-sm.border {
        width: 100% !important;
        margin: 0 !important;
    }

    .timeline .card-body .btn {
        font-size: 0.9rem;
    }
}

/* ========================================
   DETAIL PAGES - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 575.98px) {

    /* Detail page headers */
    .min-vh-100 .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Image galleries in detail pages */
    .ratio.ratio-16x9,
    .ratio.ratio-4x3 {
        margin-bottom: 1rem;
    }

    /* Detail content */
    .card-body h3,
    .card-body h4 {
        font-size: 1.25rem !important;
    }

    .card-body h5 {
        font-size: 1.1rem !important;
    }

    .card-body p {
        font-size: 0.9rem;
    }

    /* Info badges and tags */
    .badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    /* Action buttons in detail pages */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

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

@media print {

    #HeroSection,
    .navbar,
    footer,
    .btn,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}