/* OpenClaw visual polish pass - 2026-05-31
   Fixes audit findings: route duplication, hero crops/heights, cookie banner footprint,
   mobile menu density, CTA hierarchy and tablet first-screen rhythm. */

/* Stronger first-screen composition */
.hero{
  min-height:82svh!important;
  place-items:center!important;
}
.hero-media{
  background:-webkit-image-set(url(/images/optimized/villa-pool-1600.webp) 1x type("image/webp"),url(/images/villa-pool.jpg) 1x type("image/jpeg")) 45% 52%/cover no-repeat!important;
  background:image-set("/images/optimized/villa-pool-1600.webp" 1x type("image/webp"),"/images/villa-pool.jpg" 1x type("image/jpeg")) 45% 52%/cover no-repeat!important;
}
.hero-overlay{
  background:
    radial-gradient(circle at 76% 18%,rgba(118,184,200,.18),transparent 30%),
    linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 52%,rgba(0,0,0,.08))!important;
}
.hero-content:not(.hero-layout){
  padding-top:72px!important;
  max-width:980px!important;
}
.hero-text,
.seo-hero .hero-text,
.menu-hero-copy>p{
  text-shadow:0 2px 18px rgba(0,0,0,.34);
}

/* Make secondary actions read as secondary, not another primary. */
.button.secondary{
  background:rgba(237,235,226,.13)!important;
  border-color:rgba(255,250,240,.45)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.20),0 10px 28px rgba(0,0,0,.16)!important;
}
.button.secondary:hover{
  background:rgba(237,235,226,.20)!important;
}

/* Villa SEO page: clearer property hero and slightly shorter first screen. */
.seo-hero{
  min-height:70svh!important;
  padding-top:128px!important;
  padding-bottom:58px!important;
}
.seo-hero:before{
  background:-webkit-image-set(url(/images/optimized/villa-hero-original-1600.webp) 1x type("image/webp"),url(/images/villa-hero-original.jpg) 1x type("image/jpeg")) 50% 48%/cover no-repeat!important;
  background:image-set("/images/optimized/villa-hero-original-1600.webp" 1x type("image/webp"),"/images/villa-hero-original.jpg" 1x type("image/jpeg")) 50% 48%/cover no-repeat!important;
  transform:scale(1.02)!important;
}
.seo-hero:after{
  background:
    radial-gradient(circle at 78% 18%,rgba(118,184,200,.20),transparent 30%),
    linear-gradient(90deg,rgba(5,7,10,.82),rgba(8,16,26,.58) 50%,rgba(7,11,15,.20))!important;
}

/* Chef/menu hero: less abstract and less over-tall. */
.menu-hero{
  min-height:64svh!important;
  align-items:center!important;
  padding-top:132px!important;
  padding-bottom:56px!important;
}
.menu-hero:before{
  background:-webkit-image-set(url(/images/optimized/chef-seafood-platter-1600.webp) 1x type("image/webp"),url(/images/chef-seafood-platter.jpg) 1x type("image/jpeg")) 45% 45%/cover no-repeat!important;
  background:image-set("/images/optimized/chef-seafood-platter-1600.webp" 1x type("image/webp"),"/images/chef-seafood-platter.jpg" 1x type("image/jpeg")) 45% 45%/cover no-repeat!important;
  transform:scale(1.02)!important;
}
.menu-hero:after{
  background:
    radial-gradient(circle at 78% 18%,rgba(118,184,200,.20),transparent 30%),
    linear-gradient(90deg,rgba(8,16,26,.82),rgba(16,32,51,.58) 52%,rgba(31,79,120,.18))!important;
}
body.babudri-chef-landing .menu-hero:before{
  background:-webkit-image-set(url(/images/optimized/chef-summer-starter-1600.webp) 1x type("image/webp"),url(/images/chef-summer-starter.jpg) 1x type("image/jpeg")) 50% 50%/cover no-repeat!important;
  background:image-set("/images/optimized/chef-summer-starter-1600.webp" 1x type("image/webp"),"/images/chef-summer-starter.jpg" 1x type("image/jpeg")) 50% 50%/cover no-repeat!important;
}
body.babudri-chef-landing .menu-hero:after{
  background:linear-gradient(90deg,rgba(8,16,26,.86),rgba(16,32,51,.58) 52%,rgba(31,79,120,.16))!important;
}
.menu-hero-copy{max-width:860px!important;}

/* Distinct private-chef landing page injected by JS. */
.chef-landing-sections{
  background:linear-gradient(#f7f5eb 0%,#edf4fa 100%);
}
.chef-landing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  display:grid;
}
.chef-landing-card,
.chef-landing-split-copy{
  border:1px solid var(--glass-border);
  background:radial-gradient(circle at 100% 0,rgba(118,184,200,.20),transparent 42%),rgba(255,250,240,.74);
  border-radius:32px;
  padding:clamp(24px,4vw,38px);
  box-shadow:0 18px 60px rgba(16,32,51,.10);
}
.chef-landing-card strong{
  color:var(--sage);
  font-family:Georgia,serif;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.05;
  display:block;
  margin-bottom:12px;
}
.chef-landing-split{
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:28px;
  display:grid;
}
.chef-landing-split img{
  object-fit:cover;
  object-position:45% 45%;
  border-radius:38px;
  width:100%;
  height:460px;
  box-shadow:0 24px 80px rgba(16,32,51,.16);
}
.chef-landing-split-copy h2{font-size:clamp(38px,4.8vw,66px)}
.chef-landing-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.chef-landing-page .menu-intro{margin-top:clamp(28px,5vw,54px)!important;}

/* Give cards and lists a bit more breathing room. */
.quick-stats{gap:16px!important;}
.quick-stats div{padding:clamp(22px,2.4vw,30px)!important;}
.menu-item{padding:clamp(24px,3vw,30px)!important;gap:24px!important;}
.menu-item p{color:#5f5f54!important;font-size:17px!important;line-height:1.55!important;}
.menu-item strong{font-size:15px!important;padding:11px 16px!important;}
.menu-list-block{padding:52px 0!important;}
.menu-intro,.menu-notes{gap:clamp(28px,4vw,44px)!important;}

/* Smaller, less intrusive cookie banner. Add bottom space while visible. */
body:has(.cookie-consent){padding-bottom:96px;}
.cookie-consent{
  left:auto!important;
  right:18px!important;
  bottom:18px!important;
  max-width:min(680px,calc(100% - 36px))!important;
  padding:12px 14px!important;
  gap:14px!important;
  border-radius:18px!important;
  background:rgba(16,32,51,.92)!important;
  box-shadow:0 16px 46px rgba(16,32,51,.28)!important;
}
.cookie-consent strong{font-size:14px!important;margin-bottom:2px!important;}
.cookie-consent span{font-size:12.5px!important;line-height:1.35!important;}
.cookie-consent .button{min-height:36px!important;padding:0 13px!important;font-size:13px!important;}
.cookie-actions{gap:8px!important;}

@media (min-width:901px){
  .hero{min-height:78svh!important;}
}
@media (min-width:701px) and (max-width:1100px){
  .hero{min-height:74svh!important;align-items:center!important;padding-bottom:0!important;}
  .hero-media{background-position:45% 50%!important;}
  .menu-hero{min-height:58svh!important;align-items:center!important;padding-top:118px!important;}
  .seo-hero{min-height:62svh!important;align-items:center!important;padding-top:118px!important;}
}
@media (max-width:900px){
  .hero{min-height:76svh!important;align-items:end!important;padding-bottom:30px!important;}
  .hero-content:not(.hero-layout){padding-top:88px!important;}
  .hero-text{font-size:18px!important;line-height:1.5!important;}
  .section{padding-top:52px!important;padding-bottom:52px!important;}
  .menu-hero{min-height:58svh!important;align-items:end!important;padding-top:110px!important;padding-bottom:42px!important;}
  .menu-hero h1{font-size:clamp(48px,13vw,72px)!important;}
  .menu-hero-copy>p{font-size:17px!important;line-height:1.55!important;}
  .seo-hero{min-height:62svh!important;align-items:end!important;padding-top:110px!important;padding-bottom:42px!important;}
  .seo-hero h1{font-size:clamp(44px,12.5vw,70px)!important;}
  .seo-hero p{font-size:17px!important;line-height:1.55!important;}
  .menu-item{border-radius:24px!important;padding:22px!important;}
  .menu-item h3{font-size:clamp(27px,8vw,36px)!important;}
  .menu-item strong{justify-self:start!important;font-size:14px!important;}
  .chef-landing-grid,.chef-landing-split{grid-template-columns:1fr;}
  .chef-landing-split img{height:320px;}
  .cookie-consent{left:12px!important;right:12px!important;bottom:12px!important;max-width:none!important;display:grid!important;}
  .cookie-actions{grid-template-columns:1fr 1fr!important;display:grid!important;}
  body:has(.cookie-consent){padding-bottom:132px;}
}
@media (max-width:520px){
  .hero{min-height:74svh!important;}
  .hero-media{
    background:-webkit-image-set(url(/images/optimized/villa-pool-960.webp) 1x type("image/webp"),url(/images/villa-pool.jpg) 1x type("image/jpeg")) 42% 50%/cover no-repeat!important;
    background:image-set("/images/optimized/villa-pool-960.webp" 1x type("image/webp"),"/images/villa-pool.jpg" 1x type("image/jpeg")) 42% 50%/cover no-repeat!important;
  }
  .quick-stats{padding-top:28px!important;gap:12px!important;}
  .quick-stats div{border-radius:22px!important;padding:20px!important;}
  .menu-photo-card img{height:280px!important;min-height:280px!important;}
}

/* Mobile overflow hardening - verified before deploy */
html,body,#root,main{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
main,.menu-page,.menu-hero,.menu-hero-copy,.chef-landing-sections,
.menu-intro,.menu-notes,.menu-list-block,.visual-menu-block,.menu-list-content,
.menu-items,.menu-item,.chef-landing-grid,.chef-landing-card,.chef-landing-split,
.chef-landing-split-copy,.seo-hero,.seo-hero-copy{
  min-width:0!important;
  max-width:100%!important;
}
.menu-page h1,.menu-page h2,.menu-page h3,.menu-page p,.menu-page li,
.seo-page h1,.seo-page h2,.seo-page p,.seo-page li{
  overflow-wrap:break-word;
}
@media (max-width:700px){
  .menu-hero,.seo-hero{
    width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .menu-hero-copy,.seo-hero-copy{
    width:100%!important;
    max-width:calc(100vw - 36px)!important;
  }
  .menu-hero .eyebrow,.seo-hero .eyebrow{
    letter-spacing:.105em!important;
    font-size:11.5px!important;
    line-height:1.35!important;
  }
  .menu-hero h1,.seo-hero h1{
    max-width:100%!important;
    font-size:clamp(42px,11.4vw,58px)!important;
    line-height:1.02!important;
  }
  .menu-hero-copy>p,.seo-hero p{
    max-width:100%!important;
    font-size:16.5px!important;
    line-height:1.5!important;
  }
  .section,.menu-list-block{
    width:calc(100vw - 32px)!important;
    max-width:calc(100vw - 32px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .menu-intro,.menu-notes,.chef-landing-card,.chef-landing-split-copy{
    padding:22px 18px!important;
    border-radius:26px!important;
  }
  .menu-intro ul,.menu-notes ul{
    padding-left:18px!important;
    font-size:16.5px!important;
    line-height:1.65!important;
  }
  .chef-landing-card strong{font-size:32px!important;}
  .chef-landing-card p,.chef-landing-split-copy p{font-size:16.5px!important;line-height:1.55!important;}
  .menu-item{
    width:100%!important;
    max-width:100%!important;
    padding:20px 18px!important;
  }
  .menu-item p{font-size:16px!important;}
  .menu-item strong{max-width:100%!important;text-align:left!important;}
  .price-tiers{max-width:100%!important;}
  .cookie-consent{max-width:calc(100vw - 24px)!important;}
}
@media (max-width:410px){
  .menu-hero,.seo-hero{padding-left:16px!important;padding-right:16px!important;}
  .menu-hero-copy,.seo-hero-copy{max-width:calc(100vw - 32px)!important;}
  .section,.menu-list-block{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;}
  .menu-hero h1,.seo-hero h1{font-size:clamp(38px,10.8vw,52px)!important;}
}

/* booking-portal title fit: prevent overflow/clipping in narrow portal cards */
.portal-strip .booking-link strong{font-size:clamp(16px,1.4vw,18px)!important;overflow-wrap:anywhere;word-break:break-word;}

/* Claude design polish - 2026-06-03: portal label legibility + keyboard focus ring */
.portal-strip .booking-link span,.portal-grid span{opacity:1!important;color:#fcfaf3!important;letter-spacing:.13em!important;}
.portal-strip .booking-link:not(.primary-booking){background:rgba(255,250,240,.18)!important;border-color:rgba(255,255,255,.40)!important;}
a:focus-visible,button:focus-visible,.button:focus-visible,.booking-link:focus-visible,.portal-grid a:focus-visible,.quick-stats div:focus-visible,.standard-card:focus-visible{outline:2px solid #76b8c8!important;outline-offset:3px!important;border-radius:14px;}

/* Claude design: lightweight animations - transform/opacity only (compositor-friendly), hover gated, reduced-motion honored by global rule */
@keyframes cd-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.hero-content>.eyebrow,.hero-content>h1,.hero-content>.hero-text,.hero-content>.hero-actions{animation:cd-rise .7s cubic-bezier(.22,.61,.36,1) both;}
.hero-content>h1{animation-delay:.08s}
.hero-content>.hero-text{animation-delay:.18s}
.hero-content>.hero-actions{animation-delay:.28s}
@media (hover:hover) and (min-width:901px){
  .site-header nav a:not(.nav-cta){position:relative}
  .site-header nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:currentColor;opacity:.9;transform:scaleX(0);transform-origin:right center;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
  .site-header nav a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left center}
}
.button,.nav-cta{transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){.button:hover,.nav-cta:hover{transform:translateY(-2px)}}

/* Claude design 2026-06-03d: hover micro-interactions - transitions only (cascade tier above !important), compositor transform/opacity, hover-gated so zero idle cost & no scroll jank */
@media (hover:hover){
  /* gallery/feature cards: gentle lift + deeper shadow (restores intended lift the base CSS had disabled) */
  .tour-card,.season-source-card,.standard-card,.chef-landing-card,.featured-chef{transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s ease!important}
  .tour-card:hover,.season-source-card:hover,.standard-card:hover,.chef-landing-card:hover,.featured-chef:hover{transform:translateY(-6px)!important;box-shadow:0 34px 90px #1020331f!important}
  /* image inside cards subtly zooms (cards are overflow:hidden so it stays clipped) */
  .tour-card img{transition:transform .65s cubic-bezier(.22,.61,.36,1)!important}
  .tour-card:hover img{transform:scale(1.045)!important}
  /* amenity chips: soft press-in feel */
  .amenity-chips span,.amenity-chips li{transition:transform .25s ease,background-color .25s ease}
  .amenity-chips span:hover,.amenity-chips li:hover{transform:translateY(-2px)}
}

/* Claude design 2026-06-03e: desktop proportion tuning - tame oversized display type & fix stat-card unit wrapping (no markup change, override-only) */
@media (min-width:1200px){
  .quick-stats div{padding:22px 16px!important}
  .quick-stats strong{font-size:clamp(30px,2.4vw,35px)!important;white-space:nowrap!important;letter-spacing:.005em!important}
  .quick-stats span{font-size:14px!important}
}
@media (min-width:901px){
  .section-heading h2{font-size:clamp(40px,4.6vw,60px)!important;line-height:1.05!important}
  .tour-card h2,.tour-card h3{font-size:clamp(36px,3.4vw,48px)!important;line-height:1.06!important}
  .featured-chef h2{font-size:clamp(40px,4.4vw,56px)!important;line-height:1.06!important}
  .featured-chef{padding:clamp(40px,3.4vw,48px)!important}
}

/* Claude design 2026-06-03f: fix hover-lift SNAP on reveal cards. Base CSS sets `.reveal.visible{transition:none!important}` (spec 0,2,0) which killed my transitions, so the lift jumped instantly. Bump my transition selector to match `.reveal` (0,2,0) AND load later in cascade -> transition wins, lift glides. Large featured-chef block drops the lift (only shadow) so it doesn't shove the layout. */
@media (hover:hover){
  .season-source-card.reveal,.standard-card.reveal,.tour-card.reveal,.chef-landing-card.reveal{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease!important}
  .season-source-card.reveal:hover,.standard-card.reveal:hover,.tour-card.reveal:hover,.chef-landing-card.reveal:hover{transform:translateY(-6px)!important;box-shadow:0 30px 80px #1020331a!important}
  .tour-card.reveal img{transition:transform .65s cubic-bezier(.22,.61,.36,1)!important}
  .tour-card.reveal:hover img{transform:scale(1.045)!important}
  .featured-chef.reveal,.featured-chef{transition:box-shadow .4s ease!important}
  .featured-chef.reveal:hover,.featured-chef:hover{transform:none!important;box-shadow:0 16px 44px #10203316!important}
}

/* Claude design 2026-06-03f: injected "Explore season" link on homepage season cards */
.season-source-card .season-explore{display:inline-flex;align-items:center;margin-top:14px;font-weight:600}
.season-source-card{cursor:pointer}