/*
Theme Name: Paletu Villa
Theme URI: http://www.birudaun.net
Description: <p>Corporate CMS website template</p>
Version: 1.0
Author: Birudaun Web Studio

Author URI: http://www.birudaun.net

*/
:root{
    --ivory:#F7F4EE;
    --charcoal:#262626;
    --royal:#4A6896;
    --rice:#5A6650;
    --bronze:#A07A52;
    --line: rgba(38,38,38,0.12);
    --maxw: 1240px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--ivory); color:var(--charcoal); font-family:'Work Sans', sans-serif; font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased;}
  p{text-align:justify; hyphens:auto;}
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:400; margin:0; color:var(--charcoal);}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .eyebrow{font-family:'Work Sans',sans-serif; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:500; color:var(--rice); margin:0 0 1rem;}
  .eyebrow-lg{font-size:0.9rem; letter-spacing:0.18em;}

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:60;
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    transition:background 0.4s ease, border-color 0.4s ease;
  }
  header.dark-header{
    background:var(--charcoal);
    border-bottom:1px solid rgba(247,244,238,0.12);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 40px; max-width:var(--maxw); margin:0 auto;}
  .logo-img{height:52px; width:auto; display:block;}
  nav.primary-nav ul{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
  nav.primary-nav a{font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; font-weight:500; color:var(--charcoal); transition:color 0.4s ease;}
  header.dark-header nav.primary-nav a{color:var(--ivory);}
  .book-btn{background:#CC2020; color:#fff; font-size:0.76rem; letter-spacing:0.07em; text-transform:uppercase; font-weight:500; padding:12px 24px;}
  .book-btn:hover{background:#a81818; color:#fff;}
  .menu-toggle{display:none; background:none; border:none; cursor:pointer;}
  .menu-toggle span{display:block; width:22px; height:1.5px; background:var(--charcoal); margin:5px 0; transition:background 0.4s ease;}
  header.dark-header .menu-toggle span{background:var(--ivory);}

.menu-toggle span{
    transition:.3s;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
}

  /* ===== Hero ===== */
  .hero{
    position:relative; min-height:94vh; display:flex; align-items:center; justify-content:center;
    background-size:cover;
    background-position:center 38%;
    background-repeat:no-repeat;
    color:var(--ivory);
  }
  .hero-inner{position:relative; z-index:2; padding:40px; max-width:var(--maxw); margin:0 auto; width:100%; text-align:center;}
  .hero-inner-center{display:flex; align-items:center; justify-content:center; min-height:60vh;}

  .hero .eyebrow{color:#D9D6C8;}
  .hero h1{font-size:clamp(2.6rem,6vw,4.6rem); color:#FBFAF6; font-weight:400;}
  .hero p{margin-top:1rem; max-width:38ch; color:#E4E2D7; font-size:1.05rem;}
  .hero-btns{margin-top:2.2rem; display:flex; gap:14px; flex-wrap:wrap;}
  .btn{display:inline-block; font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; font-weight:500; padding:15px 28px;}
  .btn-royal{background:var(--royal); color:#fff;}
  .btn-royal:hover{background:#3c5577;}
  .btn-outline{border:1px solid rgba(251,250,246,0.55); color:#FBFAF6;}
  .btn-gallery{background:var(--ivory); color:var(--charcoal); border:none;}
  .btn-gallery:hover{background:#e8e4da; color:var(--charcoal);}
  .btn-outline:hover{border-color:#FBFAF6;}

  section{padding:100px 0;}
  section.tight{padding:70px 0;}

  /* ===== Overview (centered intro + facts) ===== */
  .overview-head{text-align:center; max-width:760px; margin:0 auto;}
  .overview-head .eyebrow{justify-content:center; text-align:center;}
  .overview-head h2{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:24px; text-align:center;}
  .overview-head p{font-size:1.04rem; color:var(--royal); line-height:1.85; font-weight:300; margin:0 0 1.2rem;}
  .story-link{
    display:inline-block; margin-top:12px;
    font-family:'Work Sans', sans-serif; font-size:1.04rem; font-weight:600; letter-spacing:0; text-transform:none;
    color:var(--bronze); border-bottom:1px solid var(--bronze); padding-bottom:3px;
  }
  .story-link:hover{color:var(--charcoal); border-color:var(--charcoal);}

  /* ===== Full Story (toggled section) ===== */
  .story-section{display:none; /*background:var(--ivory); border-top:1px solid var(--line);*/}
  .story-section.open{display:block;}
  .story-body{max-width:760px; margin:0 auto;}
  .story-salutation{font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--charcoal) !important; margin:0 0 1.4rem;}
  .story-body p{font-size:1.04rem; color:var(--royal); line-height:1.85;font-weight:300; margin:0 0 1.2rem;}
  .story-feature{margin:2.2rem 0 0.6rem;}
  .story-feature h4{font-family:'Fraunces',serif; font-weight:400; font-size:1.15rem; margin:0 0 0.7rem; color:var(--charcoal);}
  .story-media-frame{aspect-ratio:16/9; margin:1.6rem 0 2rem; display:flex; align-items:flex-end; padding:18px; overflow:hidden;}
  .story-media-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .story-media-frame .cap{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(247,244,238,0.85);}
  .story-intro-strong{font-family:'Fraunces',serif; font-weight:400; font-size:1.15rem; color:var(--charcoal); margin:2rem 0 0.6rem;}
  .story-signoff{margin-top:2.4rem; font-size:1rem; color:var(--charcoal); line-height:1.9;}
  .story-signoff strong{font-weight:500;}
  .facts-strip{display:flex; justify-content:center; gap:50px; flex-wrap:wrap; margin:44px auto 0; padding-top:28px; border-top:1px solid var(--line); max-width:680px;}
  .facts-strip div{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.05em; color:var(--rice); text-transform:uppercase; text-align:center;}
  .facts-strip strong{display:block; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--charcoal); margin-top:4px; font-weight:400;}

  /* ===== Story carousel (auto-sliding filmstrip, edge-to-edge) ===== */
  /*.story-carousel-wrap{max-width:var(--maxw); margin:70px auto 0; padding:0 40px; overflow:hidden;}
  .story-carousel-track{display:flex; align-items:center; gap:40px; width:max-content; animation:storyScroll 48s linear infinite;}
  .story-carousel-wrap:hover .story-carousel-track{animation-play-state:paused;}
  .c-item{flex:0 0 auto; overflow:hidden;}
  .c-tall{width:320px; height:500px;}
  .c-short{width:460px; height:290px;}
  .c1{background:linear-gradient(150deg,#5A6650,#262626);}
  .c2{background:linear-gradient(150deg,#4A6896,#262626);}
  .c3{background:linear-gradient(150deg,#A07A52,#262626);}
  .c4{background:linear-gradient(150deg,#262626,#4A6896);}
  .c5{background:linear-gradient(150deg,#5A6650,#A07A52);}
  .c6{background:linear-gradient(150deg,#4A6896,#5A6650);}
  @keyframes storyScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}*/

.story-carousel-wrap{
    overflow:hidden;
    padding:30px 40px;
}

.story-carousel-track{
    display:flex;
    align-items:center;
    gap:24px;               /* jarak antar gambar */
    width:max-content;
    animation:storyScroll 40s linear infinite;
}

.c-item{
    flex:0 0 auto;
    overflow:hidden;
}

/* portrait */
.c-item.portrait{
    width:320px;
    height:500px;
}

/* landscape */
.c-item.landscape{
    width:500px;
    height:320px;
}

.c-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
@keyframes storyScroll{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(-50%,0,0);
    }
}
  @media (max-width:900px){
    .c-tall{width:220px; height:360px;}
    .c-short{width:300px; height:200px;}
    .story-carousel-track{gap:24px;}
  }

  /* ===== Gallery ===== */
  
  
    /*.gallery-lightbox{
        display:none;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.9);
        z-index:99999;
        justify-content:center;
        align-items:center;
    }

    .gallery-lightbox img{
        max-width:90%;
        max-height:90%;
    }

    .gallery-close{
        position:absolute;
        right:30px;
        top:20px;
        color:#fff;
        font-size:40px;
        cursor:pointer;
    }

    @media(max-width:768px){
        .gallery-page{
            grid-template-columns:repeat(2,1fr);
            grid-template-rows:repeat(3,180px);
        }
    }*/
  .gallery-head{text-align:center; margin-bottom:40px;}
  .gallery-head .eyebrow{justify-content:center;}
  /*.gallery-viewer{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 56px;}*/
  .gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .g-item{aspect-ratio:4/3; background:#ccc; overflow:hidden;}
  /*.gallery-pages .gallery-page{display:none;}*/
  /*.gallery-viewer{
    position:relative;
    overflow:hidden;
   max-width:var(--maxw);
    margin:auto;
    padding:0 70px;     
    box-sizing:border-box;
}

.gallery-pages{
    display:flex;
    transition:transform .6s ease;
    will-change:transform;
}

.gallery-page{
    flex:0 0 100%;
    width:100%;
    box-sizing:border-box;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.g-item{
    aspect-ratio:4/3;
    overflow:hidden;
}

.g-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}*/
.gallery-viewer{
    position:relative;
}

.gallery-viewport{
    overflow:hidden;
    margin:0 70px; /* ruang untuk tombol */
}

.gallery-pages{
    display:flex;
    transition:transform .6s ease;
}

.gallery-page{
    flex:0 0 100%;
}

.gallery-page{
    flex: 0 0 calc(100% - 40px);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.g-item img{
    width:100%;
    display:block;
}


  /*.gallery-pages .gallery-page.active{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}*/
  .g-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    background:var(--ivory); border:1px solid var(--line); border-radius:50%;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:16px; color:var(--charcoal); z-index:2;
    transition:background 0.2s ease;
  }
  .g-arrow:hover{background:var(--charcoal); color:var(--ivory);}
  .g-arrow.left{left:0;}
  .g-arrow.right{right:0;}
  .gallery-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
  .g-dot{display:none; width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; border:none;}
  .g-dot.active{background:var(--charcoal);}
  .g1{background:linear-gradient(150deg,#5A6650,#262626);}
  .g2{background:linear-gradient(150deg,#4A6896,#262626);}
  .g3{background:linear-gradient(150deg,#A07A52,#262626);}
  .g4{background:linear-gradient(150deg,#262626,#4A6896);}
  .g5{background:linear-gradient(150deg,#5A6650,#A07A52);}
  .g6{background:linear-gradient(150deg,#4A6896,#5A6650);}
  .g1{background:linear-gradient(150deg,#5A6650,#262626);}
  .g2{background:linear-gradient(150deg,#4A6896,#262626);}
  .g3{background:linear-gradient(150deg,#A07A52,#262626);}
  .g4{background:linear-gradient(150deg,#262626,#4A6896);}
  .g5{background:linear-gradient(150deg,#5A6650,#A07A52);}
  .g6{background:linear-gradient(150deg,#4A6896,#5A6650);}
  
  .g-item a{
    display:block;
    width:100%;
    height:100%;
}
 
.g-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.3s;
}
.g-item:hover img{
    transform:scale(1.05);
}
  /* ===== Facilities & Services ===== */
  .spec-grid{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);}
  .spec-col{padding:34px; border-right:1px solid var(--line); text-align:center;}
  .spec-col:last-child{border-right:none;}
  .spec-col h4{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bronze); margin:0 0 18px;}
  .spec-col ul{list-style:none; margin:0; padding:0;}
  .spec-col li{font-size:0.9rem; padding:12px 0; border-top:1px solid var(--line); color:#3F3F3F; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; text-align:left;}
  .spec-col ul{list-style:none; margin:0 auto; padding:0; max-width:220px;}
  .fac-icon{flex-shrink:0; width:24px; height:24px; opacity:0.78; display:block;}
  li .fac-icon[stroke]{color:var(--charcoal); opacity:0.78;}
  .spec-col li:first-child{border-top:none;}

  /* ===== Map ===== */
  .location-grid{display:grid; grid-template-columns:0.5fr 1.1fr; gap:20px; align-items:center;}
  .map-frame{height:380px; border:1px solid var(--line);}
  .map-frame iframe{width:100%; height:100%; border:0;}
  .addr{font-family:'IBM Plex Mono',monospace; font-size:0.92rem; color:var(--rice); line-height:1.8;}

  /* ===== Footer ===== */
  footer.site-footer{
    background:var(--charcoal);
    color:#EDEDED;
    position:relative;
  }
  footer.site-footer .footer-bottom{
    background:rgba(0,0,0,0.25);
    border-top:1px solid rgba(247,244,238,0.1);
  }
  .footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:50px; padding:80px 0 40px;}
  .footer-grid .logo{color:#FBFAF6; margin-bottom:14px; display:block;}
  .footer-grid p{color:#B8B8B0; font-size:0.92rem; max-width:32ch;}
  .footer-grid h4{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:#9BA38E; margin:0 0 16px;}
  .footer-grid a{display:block; color:#EDEDED; font-size:0.92rem; margin-bottom:10px;}
  .footer-bottom{border-top:1px solid rgba(247,244,238,0.1); text-align:center; padding:22px 0; font-size:0.76rem; color:#7A7A7A;}

  @media (max-width: 900px){
   
    .menu-toggle{display:block;}
	 .nav-row{
        padding:15px 20px;
        position:relative;
    }

    .menu-toggle{
        display:block;
        z-index:1002;
    }

    .primary-nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:var(--ivory);
        display:block;
        max-height:0;
        overflow:hidden;
        transition:max-height .35s ease;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        z-index:1001;
    }
	  .dark-header .primary-nav{
		  background:var(--charcoal);
	  }

   
.primary-nav.active{
    max-height:500px;
}

    .primary-nav ul{
        display:flex;
        flex-direction:column;
        gap:0 !important;
    }

    .primary-nav a{
        display:block;
        padding:15px 20px;
        font-size:.9rem;
    }
	  .dark-header .primary-nav a{
		  color:#fff;
	  }
	  
	  .hero{
		  background-repeat: no-repeat !important;
		  background-size: cover !important;
		  background-position: center !important;
	  }
    .gallery-viewer{padding:0 40px;} 
    .gallery-pages .gallery-page.active{grid-template-columns:repeat(2,1fr);}
    .spec-grid{grid-template-columns:1fr;}
    .spec-col{border-right:none; border-bottom:1px solid var(--line);}
    .location-grid{grid-template-columns:1fr; gap:30px;}
    .footer-grid{grid-template-columns:1fr; gap:36px;}
	 
  }

  /* ── Override: elements that must NOT be justified ── */
  h1,h2,h3,h4,h5,h6{text-align:left;}
  .eyebrow, .eyebrow-lg{text-align:inherit;}
  nav a, .book-btn, .btn, .story-link{text-align:center;}
  .facts-strip div{text-align:center;}
  .hero p{text-align:left;}
  .hero-inner-center{text-align:center;}
  .footer-grid p{text-align:left;}
  .footer-bottom{text-align:center;}
  .spec-col h4{text-align:center;}
  .addr{text-align:left;}
  .story-signoff{text-align:left;}
  .story-salutation{text-align:left;}
  .story-intro-strong{text-align:left;}

.map-frame {
    position: relative;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }
  .map-frame iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    /* Grey out the map */
    filter: grayscale(100%) contrast(1.05) brightness(1.02);
  }
  /* Logo pinned dead-center of the map */
  .map-logo {
    position: absolute;
    top: 58%;
    left: 48%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    border: 2px solid var(--accent);
  }
  .map-logo span {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: bold;
  }
  .map-logo img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
  }