/* Noreh & Ngopi Renovation Add-on
   Hero + Cerita Kami intentionally remain controlled by existing assets/style.css
*/
:root{
  --reno-cream:#f4ead5;
  --reno-paper:#ead7b5;
  --reno-ink:#2a1b12;
  --reno-green:#244829;
  --reno-brown:#5a3824;
  --reno-shadow:0 12px 28px rgba(45,25,12,.16);
}
.reno-heading{text-align:center;max-width:760px;margin:0 auto 28px}
.reno-sub{max-width:660px;margin:8px auto 0;opacity:.78}
.heritage-reno{overflow:hidden}
.heritage-shell{position:relative;max-width:1180px;margin:0 auto;padding:0 42px}
.heritage-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-inline:contain;padding:14px 3px 24px
}
.heritage-track::-webkit-scrollbar,.video-strip::-webkit-scrollbar{display:none}
.memory-frame{
  flex:0 0 min(78vw,320px);scroll-snap-align:center;background:var(--reno-paper);padding:12px 12px 18px;
  border:1px solid rgba(77,44,25,.22);box-shadow:var(--reno-shadow);
  transform:rotate(-.35deg);position:relative
}
.memory-frame:nth-child(even){transform:rotate(.45deg)}
.memory-frame:before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(92,55,31,.28);pointer-events:none
}
.memory-photo{aspect-ratio:4/3;background:#d6c19f;overflow:hidden;filter:sepia(.18) contrast(.96)}
.memory-photo img{width:100%;height:100%;object-fit:cover;display:block}
.memory-copy{text-align:center;padding:14px 8px 0;color:var(--reno-ink)}
.memory-copy h3{margin:0 0 6px;font-family:Georgia,serif}
.memory-copy p{margin:0;font-size:.9rem;opacity:.72}
.carousel-arrow,.video-scroll{
  position:absolute;z-index:3;top:43%;width:42px;height:42px;border-radius:50%;border:1px solid rgba(62,34,18,.2);
  background:#fffaf0;color:var(--reno-brown);font-size:30px;line-height:1;box-shadow:0 7px 18px rgba(40,20,10,.14);cursor:pointer
}
.carousel-arrow.prev,.video-scroll.prev{left:0}
.carousel-arrow.next,.video-scroll.next{right:0}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:4px}
.carousel-dots button{width:9px;height:9px;border:0;border-radius:50%;background:#cdb893;padding:0;cursor:pointer}
.carousel-dots button.active{background:var(--reno-green);transform:scale(1.15)}

.menu-flipbook-section{
  display:grid;grid-template-columns:minmax(250px,.72fr) minmax(420px,1.28fr);align-items:center;gap:54px;
  background:linear-gradient(135deg,#f8f0df,#efe0c4)
}
.flipbook-copy{max-width:440px;margin-left:auto}
.flipbook-copy small{display:block;margin-top:14px;opacity:.65;line-height:1.5}
.book-preview{display:grid;grid-template-columns:1fr 8px 1fr;min-height:380px;max-width:720px;box-shadow:0 20px 35px rgba(48,24,10,.25);perspective:1000px}
.book-page{background:#e4cda8;padding:44px 34px;color:#382314;border:1px solid rgba(65,36,18,.35);position:relative}
.book-page:after{content:"";position:absolute;inset:8px;border:1px solid rgba(79,45,24,.35);pointer-events:none}
.left-page{text-align:center;background:linear-gradient(90deg,#dcc39c,#ecd8b7)}
.right-page{background:linear-gradient(90deg,#ead4b1,#dec29a)}
.book-spine{background:linear-gradient(90deg,#6d4427,#2e1b11,#6d4427)}
.book-kicker{font-size:.72rem;letter-spacing:.14em}
.book-page h3{font-family:Georgia,serif;font-size:2.35rem;line-height:1.05;margin:40px 0 16px}
.book-page ul{list-style:none;padding:22px 0 0;margin:0}
.book-page li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px dotted rgba(58,35,20,.35);padding:8px 0;font-size:.88rem}

.video-collection{overflow:hidden}
.video-strip-wrap{position:relative;max-width:1220px;margin:auto;padding:0 42px}
.video-strip{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;scrollbar-width:none
}
.tiktok-tile{
  flex:0 0 188px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;
  background:#3c281d center/cover no-repeat;color:#fff;text-decoration:none;scroll-snap-align:start;
  box-shadow:0 10px 22px rgba(34,18,10,.18);display:flex;flex-direction:column;justify-content:flex-end;padding:16px
}
.tiktok-tile:not(.has-thumb){background:linear-gradient(145deg,#6b4935,#2f1d14)}
.tiktok-tile strong{font-size:.96rem;line-height:1.25;text-shadow:0 2px 7px rgba(0,0,0,.7)}
.tiktok-tile small{opacity:.82;margin-top:4px}
.tile-play{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.9);color:#322015;padding-left:3px;box-shadow:0 5px 15px rgba(0,0,0,.18)
}
.video-scroll{top:45%}

@media (max-width:820px){
  .heritage-shell,.video-strip-wrap{padding:0 14px}
  .carousel-arrow,.video-scroll{display:none}
  .memory-frame{flex-basis:82vw}
  .menu-flipbook-section{grid-template-columns:1fr;gap:28px}
  .flipbook-copy{margin:0;text-align:center}
  .book-preview{width:min(100%,620px);margin:auto;min-height:300px}
  .book-page{padding:30px 18px}
  .book-page h3{font-size:1.75rem;margin-top:28px}
  .book-page li{font-size:.74rem}
  .tiktok-tile{flex-basis:44vw;max-width:190px}
}
@media (max-width:520px){
  .book-preview{grid-template-columns:1fr 5px 1fr;min-height:250px}
  .book-page{padding:24px 12px}
  .book-page h3{font-size:1.3rem}
  .book-page p,.book-page li{font-size:.68rem}
  .tiktok-tile{flex-basis:58vw}
}
@media (prefers-reduced-motion:reduce){
  .heritage-track,.video-strip{scroll-behavior:auto!important}
}


/* V2 APPROVED MENU VISUAL */
.menu-3d-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.menu-3d-mockup{
  width:min(100%,860px);
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(49,25,12,.22));
}
@media (max-width:820px){
  .menu-3d-mockup{width:min(100%,700px)}
}


/* V2.1 MOBILE FIX — Menu 3D responsive sizing */
@media (max-width:820px){
  .menu-3d-wrap{
    width:100%;
    max-width:100%;
    padding:0 14px;
    box-sizing:border-box;
    overflow:hidden;
  }
  .menu-3d-mockup{
    width:92vw;
    max-width:560px;
    height:auto;
    object-fit:contain;
    margin:0 auto;
  }
}
@media (max-width:480px){
  .menu-3d-wrap{
    padding:0 10px;
  }
  .menu-3d-mockup{
    width:88vw;
    max-width:420px;
  }
}


/* V2.2 STRONGER MOBILE FIX — smaller 3D menu visual */
@media (max-width:820px){
  .menu-flipbook-section{
    grid-template-columns:1fr !important;
    justify-items:center;
  }
  .menu-3d-wrap{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    overflow:hidden !important;
    justify-content:center !important;
  }
  .menu-3d-mockup{
    width:78vw !important;
    max-width:420px !important;
    max-height:320px !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }
}

@media (max-width:480px){
  .menu-3d-mockup{
    width:72vw !important;
    max-width:320px !important;
    max-height:245px !important;
  }
}

@media (max-width:380px){
  .menu-3d-mockup{
    width:68vw !important;
    max-width:270px !important;
    max-height:210px !important;
  }
}


/* V2.3 — BALANCED MENU SECTION SCALE
   Reduce 3D book on desktop + keep mobile compact.
*/
.menu-flipbook-section{
  grid-template-columns:minmax(260px,.9fr) minmax(380px,1.1fr) !important;
  gap:36px !important;
  padding-top:64px !important;
  padding-bottom:64px !important;
}

.menu-3d-wrap{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}

.menu-3d-mockup{
  width:100% !important;
  max-width:620px !important;
  max-height:430px !important;
  object-fit:contain !important;
  margin:0 !important;
}

@media (min-width:1400px){
  .menu-3d-mockup{
    max-width:650px !important;
    max-height:450px !important;
  }
}

@media (max-width:980px){
  .menu-flipbook-section{
    grid-template-columns:1fr !important;
    text-align:center;
  }
  .flipbook-copy{
    margin:0 auto !important;
  }
  .menu-3d-wrap{
    justify-content:center !important;
  }
  .menu-3d-mockup{
    width:72vw !important;
    max-width:500px !important;
    max-height:340px !important;
    margin:0 auto !important;
  }
}

@media (max-width:480px){
  .menu-flipbook-section{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
  .menu-3d-mockup{
    width:64vw !important;
    max-width:285px !important;
    max-height:215px !important;
  }
}

@media (max-width:380px){
  .menu-3d-mockup{
    width:60vw !important;
    max-width:250px !important;
    max-height:190px !important;
  }
}


/* V2.4 MOBILE CONTAINMENT FIX
   Force the 3D book fully inside the phone viewport.
   Desktop rules remain unchanged.
*/
@media (max-width:820px){
  .menu-flipbook-section{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .flipbook-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 26px !important;
    box-sizing:border-box !important;
  }

  .menu-3d-wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  .menu-3d-mockup{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto !important;
    object-fit:contain !important;
    transform:none !important;
    position:static !important;
  }
}

@media (max-width:480px){
  .menu-flipbook-section{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .menu-3d-wrap{
    width:100% !important;
    max-width:100% !important;
  }

  .menu-3d-mockup{
    width:100% !important;
    max-width:340px !important;
    height:auto !important;
    margin:0 auto !important;
  }
}

@media (max-width:390px){
  .menu-3d-mockup{
    max-width:300px !important;
  }
}


/* V2.5 CACHE-BUST + FINAL MOBILE OVERRIDE */
@media (max-width:820px){
  #menu.menu-flipbook-section{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  #menu .menu-3d-wrap{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:hidden!important;
    margin:0 auto!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  #menu img.menu-3d-mockup{
    display:block!important;
    position:static!important;
    transform:none!important;
    width:auto!important;
    height:auto!important;
    max-width:min(82vw,320px)!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
}
@media (max-width:390px){
  #menu img.menu-3d-mockup{
    max-width:min(78vw,285px)!important;
  }
}

/* SEO Phase 1 internal signature links */
.seo-signature-links{text-align:center}
.seo-signature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:26px auto 0}
.seo-signature-card{display:block;padding:24px;background:#f4ead5;border:1px solid rgba(70,40,20,.15);text-decoration:none;color:inherit}
.seo-signature-card strong{display:block;font-family:Georgia,serif;font-size:1.35rem;margin-bottom:6px}
.seo-signature-card span{opacity:.75}
@media(max-width:680px){.seo-signature-grid{grid-template-columns:1fr}}