/* ================= MEDIA SCREEN ================= */
/* ================= XX-Large (Huge Desktop) ================= */
@media (min-width: 1200px){
	.container{
        width:1200px;
        margin:0 auto;
    }

    #about-us .container,
    #order .container,
    #shop .container,
    #magazine .container,
    #activity .container,
    #art .container{
        width:800px;
        margin:0 auto;
    }

}

/* ================= Large Devices (Desktop) ================= */
@media (max-width: 991.98px){
    .social-footer img, .social-header img{
        width:42px;
        height:42px;
    }

	/* Mobile Menu Styling */
	#menu {
        background-color:rgba(0, 0, 0, 0.85);
		text-align: center;
	}
	#menu .navbar-nav {
		gap: 15px;
		padding-top: 30px;
	}
	#menu .social-header {
		padding-bottom: 30px;
	}
	#menu .nav-link {
		color: var(--white);
		font-size: 20px;
		font-family: var(--font_b);
		text-transform: uppercase;
		padding: 12px 20px;
		border-radius: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	#menu .nav-item:last-child .nav-link {
		border-bottom: none;
	}
	#menu .nav-link:hover, #menu .nav-item.active .nav-link {
		background: var(--red);
		color: var(--white);
		border-color: transparent;
	}
	
	/* Sticky Header State */
	#header.sticky-home #menu {
		background: var(--white);
	}
	#header.sticky-home #menu .nav-link {
		color: var(--text);
        border-radius:0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}
	#header.sticky-home #menu .nav-link:hover, 
	#header.sticky-home #menu .nav-item.active .nav-link {
		background: var(--red);
		color: var(--white);
	}
	#header{
		padding:0 10px;
	}

	.custom-toggler {
		border: 0;
		padding: 5px;
		background: transparent;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 40px;
		height: 43px;
		cursor: pointer;
	}
	.custom-toggler:focus {
		outline: none;
		box-shadow: none;
	}
	.custom-toggler span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: gold; /* Default transparent header state */
		border-radius: 10px;
		transition: all 0.3s ease;
	}
	/* Sticky header state for toggler */
	#header.sticky-home .custom-toggler span {
		background-color: var(--red);
	}
	
	/* Optional: Transform to X when opened */
	.custom-toggler[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(13px) rotate(45deg);
	}
	.custom-toggler[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.custom-toggler[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}

	.slider-wrapper .slider-content {
		top: 95px;
		right: 30px;
		max-width: 380px;
	}
	.slider-wrapper .slider-content h3 {
		font-size: 38px;
		margin-bottom: -12px;
		letter-spacing: 4px;
	}
	.slider-wrapper .slider-content p {
		font-size: 32px;
	}
}



/* Mobile devices */
@media (max-width: 767.98px) {
    .slider-wrapper .slider-content {
        top: 115px;
        right: 20px;
        max-width: 75%;
    }
    .slider-wrapper .slider-content h3 {
        font-size: 28px;
        margin-bottom: -8px;
        letter-spacing: 3px;
    }
    .slider-wrapper .slider-content p {
        font-size: 24px;
        letter-spacing: 2px;
    }

   #btn-click { bottom: 15px; right: 15px; width: 48px; height: 48px; }
    .messenger-btn { bottom: 80px; right: 15px; width: 50px; height: 50px; }
    .messenger-btn img { width: 28px; height: 28px; }
    .bottom-center-action { top: 80%; }
    .bottom-center-action .btn-booking { padding: 10px 25px; font-size: 18px; margin-bottom:20px;}
    .bottom-center-action .sub-text { font-size: 17px; padding: 0 10px; line-height:1.6; }
    .slider-dots { bottom: 60px; }
    .slider-dots .dot { width: 14px; height: 14px; }
	
	#header .navbar-brand img{
		width:53px;
	}
	
	/* About Us - Mobile Layout */
    .about-menu {
        position: sticky;
        top: 95px; 
        z-index: 100;
        background: transparent;
        padding: 0;
        margin-bottom: 0;
        box-shadow: none;
    }
    .about-menu ul {
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
    }
    .about-menu li {
        width: 70px;
    }
    
    .about-menu li img{
        width:50px;
    }

    .about-menu li a {
        padding: 5px;
        height:140px;
    }
    .about-menu li a svg {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
    .about-menu li a span {
        font-size: 13px;
        margin-top:10px;
		font-family:var(--font_b);
		font-weight:normal;
        text-align: center;
    }
    
    .about-content {
        padding-left: 15px; /* space between menu and content */
    }
    .about-section {
        scroll-margin-top: 80px; /* Offset for mobile header */
    }
    .title-about {
        font-size: 28px;
        margin-bottom: 15px;
    }

	.space_section h2{
		font-size:40px;
	}

	.title-about{
		font-size:34px;
	}

	#about-us{
		padding-bottom:0;
	}
    
    /* Reset Grid for Mobile to be vertical or simpler */
    .style-4-imgs, .style-3-imgs, .style-4-imgs-2, .style-3-imgs-2 {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    .style-3-imgs .grid-img.large, 
    .style-4-imgs-2 .grid-img.large, 
    .style-3-imgs-2 .grid-img.large,
    .style-4-imgs-2 .grid-img:nth-child(1),
    .style-4-imgs-2 .grid-img:nth-child(3),
    .style-4-imgs-2 .grid-img:nth-child(4) {
        grid-row: auto;
        grid-column: auto;
    }
}

@media (min-width: 768px){
    .magazine-text{
        padding-right:40px;
    }
}

/* Menu Carousel Mobile Adjustments */
@media (max-width: 767.98px) {


    .social-header{
        display:flex;
        align-items:center;
        justify-content: center;
        margin-bottom:0;
        padding-top:25px;
    }

    .social-header li a{
        margin:0 8px;
    }

    /* Controls are easier to tap if wider on mobile */
    .menu-carousel .carousel-control-prev,
    .menu-carousel .carousel-control-next {
        width: 15%;
    }
}

/* Art Section Mobile */
@media (max-width: 767.98px) {
    footer{
        padding-left: 20px;
        padding-right:20px;
    }

    footer .social-footer{
        margin-top:25px;
        margin-bottom:30px;
    }

    .activity-hero img {
        height: 350px;
    }
    .activity-content-box {
        margin-top: -40px;
        padding: 30px 20px;
        border-radius: 0 0 10px 10px;
    }
    .activity-title {
        font-size: 26px;
        text-align: center;
    }

    .art-img-tall, .art-img-short, .art-img-right {
        height: auto !important;
        max-height: 400px;
    }
}
/* ================= Desktop Customization (min-width: 992px) ================= */
@media (min-width: 992px) {
    /* Unified Staggered Grid for Desktop */
    .gallery-grid {
        display: grid;
        align-items: start;
    }
    
    /* Staggered layout for 4 images */
    .style-4-imgs, .style-4-imgs-2 {
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 60px; /* Prevent overflow from staggered items */
    }
    .style-4-imgs .grid-img:nth-child(even),
    .style-4-imgs-2 .grid-img:nth-child(even) {
        transform: translateY(60px);
    }
    
    /* 3 images in 1 row */
    .style-3-imgs, .style-3-imgs-2 {
        grid-template-columns: repeat(3, 1fr);
        padding-bottom: 0;
    }
    .style-3-imgs .grid-img, .style-3-imgs-2 .grid-img {
        transform: none;
    }

    .gallery-grid .grid-img {
        /* Remove fixed heights so images define the height */
        height: auto;
    }
    .gallery-grid .grid-img img {
        height: auto;
        display: block; /* Prevent inline gaps */
    }

    #header .navbar-collapse {
        position: relative;
    }
    .social-header {
        display: none;
    }

    /* Art Section Image Heights (Desktop) */
    .art-img-tall {
        height: 600px;
    }
    .art-img-short {
        height: 250px;
    }
    .art-img-right {
        height: 194px; /* (600 + 250 + 24) - (3 * 24) / 4 = approx 194px for perfect bottom alignment */
    }
}

/* ================= Large Desktop (min-width: 1200px) ================= */
@media (min-width: 1200px) {
    .gallery-grid {
        justify-content: center;
    }
}

/* ================= Mobile Fullscreen Intro Sliders (max-width: 767.98px) ================= */
@media (max-width: 767.98px) {
    #about-us,
    #order,
    #shop,
    #magazine,
    #activity,
    #art {
        scroll-margin-top: 75px;
        min-height: calc(100vh - 75px);
        min-height: calc(100dvh - 75px);
        height: calc(100vh - 75px);
        height: calc(100dvh - 75px);
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #about-us .container,
    #order .container,
    #shop .container,
    #magazine .container,
    #activity .container,
    #art .container {
        height: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .about-intro,
    .order-intro,
    .shop-intro,
    .magazine-intro,
    .activity-intro,
    .art-intro {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    #about-us .intro-container,
    #order .intro-container,
    #shop .intro-container,
    #magazine .intro-container,
    #activity .intro-container,
    #art .intro-container {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    #about-us .intro-slider-wrap,
    #order .intro-slider-wrap,
    #shop .intro-slider-wrap,
    #magazine .intro-slider-wrap,
    #activity .intro-slider-wrap,
    #art .intro-slider-wrap {
        height: 100%;
        width: 100%;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    #about-us .intro-slider,
    #order .intro-slider,
    #shop .intro-slider,
    #magazine .intro-slider,
    #activity .intro-slider,
    #art .intro-slider {
        height: 100%;
        width: 100%;
        display: flex;
        flex: 1;
    }

    #about-us .intro-slide,
    #order .intro-slide,
    #shop .intro-slide,
    #magazine .intro-slide,
    #activity .intro-slide,
    #art .intro-slide {
        height: 100%;
        width: 100%;
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        overflow: hidden;
    }

    #about-us .intro-slide img,
    #order .intro-slide img,
    #shop .intro-slide img,
    #magazine .intro-slide img,
    #activity .intro-slide img,
    #art .intro-slide img {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }
}