/* Casa Luna Pass 17 — hard QA fixes
   1) Brand wordmark clipped off-screen on narrow phones (<=380px)
   2) Guide-detail media: safety net for low-res source photos (object-fit already set in pass16; this just prevents jagged upscaling artifacts from being worse than necessary)
*/

/* --- Fix 1: nav brand clipping on narrow phones --------------------- */
/* Root cause: pass16 fixed .lux-brand-name at 29px + 0.09em letter-spacing
   for all widths <=760px. On 320-374px phones the remaining grid track
   (viewport - padding - hamburger - gap) is narrower than the text needs,
   so "CASA LUNA" renders past the right edge and is invisibly cut off by
   the viewport boundary (confirmed via headless render at 320/360/375px). */
.lux-brand-name{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:400px){
  .lux-nav{padding-left:14px!important;padding-right:14px!important;}
  .lux-brand-name{font-size:22px!important;letter-spacing:.045em!important;}
}
@media(max-width:340px){
  .lux-brand-name{font-size:19px!important;letter-spacing:.03em!important;}
}

/* --- Fix 2: guide-detail media upscale safety net -------------------- */
.guide-detail__media img{
  image-rendering:auto!important;
}

/* --- Fix 4: nav — always the readable white/scrolled state --------- */
/* Root cause of the "which nav am I looking at" confusion: two nav
   states (transparent-over-hero vs. white-on-scroll) were both styled
   across 6 different pass files with !important, so which one you saw
   depended on scroll position AND load order. Simplest, most durable
   fix: there is only ever one nav appearance now. */
#mainNav.lux-nav,
.lux-nav.lux-nav--pass16,
.lux-nav{
  height:120px!important;padding:20px 32px 16px!important;
  background:rgba(246,239,226,.97)!important;
  box-shadow:0 8px 30px rgba(17,25,20,.09)!important;
}
#mainNav.lux-nav:before,
.lux-nav:before{display:none!important;}
#mainNav .lux-brand,
.lux-brand{color:var(--cl-ink)!important;}
#mainNav .lux-links a,
.lux-links a{color:var(--cl-ink)!important;text-shadow:none!important;}
/* Fix 18: the rule above was written for the desktop top bar (always
   light background now), but it also caught the mobile fullscreen
   dropdown menu, which has a permanently dark background regardless
   of scroll state — resulting in dark-ink text on a near-black
   overlay. Restore white text specifically for the open mobile menu. */
#mainNav .lux-links.open a,
.lux-links.open a{color:#fff!important;}
.lux-links a.lux-book-mobile{
  color:var(--cl-gold,#cfa85d)!important;
  border:1px solid var(--cl-gold,#cfa85d)!important;
  padding:14px 28px!important;
  margin-top:10px!important;
  border-radius:2px!important;
  display:none!important;
  font-size:12px!important;
  letter-spacing:.12em!important;
}
@media(max-width:1080px){
  .lux-links a.lux-book-mobile{display:inline-flex!important;}
}
.lux-links a.active,.lux-links a:hover{color:var(--cl-gold)!important;}
#mainNav .lux-book,
.lux-book{border-color:rgba(207,168,93,.55)!important;background:transparent!important;color:var(--cl-ink)!important;text-shadow:none!important;}
.lang-btn{background:#fffaf0!important;border-color:rgba(207,168,93,.42)!important;color:var(--cl-ink)!important;}
#mainNav .lux-menu span,
.lux-menu span{background:var(--cl-ink)!important;}
@media(max-width:1080px){ #mainNav.lux-nav, .lux-nav{height:120px!important;} }
@media(max-width:760px){ #mainNav.lux-nav, .lux-nav{height:82px!important;padding:18px 18px 10px!important;} }

/* Breadcrumb top padding now matches the single fixed nav height */
.cl-breadcrumb{padding-top:calc(120px + 18px)!important;}
@media(max-width:760px){ .cl-breadcrumb{padding-top:calc(82px + 14px)!important;} }

/* --- Fix 5: hero bottom bar — drop the play-button + place tag ------ */
/* "Experience the Morning" duplicated the hz-morning hotzone with no
   clear purpose, and the "Campecolle, Umbria, Italy" tag added nothing
   the hero copy doesn't already say. Keep only Scroll to Discover. */
.hero-play,.hero-place{display:none!important;}
.hero-bottom{justify-content:center!important;}

/* --- Fix 6: Antognolla Golf heading — legibility over photo --------- */
/* Root cause: the scrim is a left-to-right gradient (90% -> 10%
   opacity) but the long word "Antognolla" at clamp(42px,5vw,76px)
   routinely spans into the low-opacity zone, landing directly on the
   photo's bright stone tower with no shadow to separate it. */
.golf-overlay{
  background:linear-gradient(105deg, rgba(15,11,6,.94) 0%, rgba(15,11,6,.82) 45%, rgba(15,11,6,.55) 75%, rgba(15,11,6,.25) 100%)!important;
}
.golf-inner .section-title,
.golf-inner .section-label{
  color:var(--cl-gold,#cfa85d)!important;
  text-shadow:0 3px 18px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.8)!important;
}

/* --- Fix 7: Etruscan Heritage fact overlay — insurance --------------- */
.niccone-fact-overlay{background:rgba(17,15,10,.94)!important;}
.niccone-fact-overlay p{color:rgba(255,255,255,.88)!important;}
.nfo-label{color:var(--cl-gold-soft,#e6c77d)!important;}

@media(max-width:1460px) and (min-width:1081px){
  .lux-links{gap:8px!important;}
  .lux-links a{font-size:9.5px!important;letter-spacing:.06em!important;}
  .lux-book{min-width:135px!important;max-width:148px!important;padding:0 12px!important;}
}
/* --- Fix 11: Discover indicator — remove fragile delayed fade-in ---- */
/* Root cause: home.css (an older, mostly-orphaned hero CSS system) still
   has .hero-scroll wired to opacity:0 + a keyframe animation that only
   starts after a 1.6s delay. If that animation stalls for any reason
   (backgrounded tab, reduced-motion, mobile animation throttling), the
   element stays invisible until something else forces a repaint —
   which is exactly the "have to scroll to see it" symptom. */
.hero-scroll{
  opacity:1!important;
  animation:none!important;
  text-decoration:none!important;
  color:#fff!important;
  cursor:pointer!important;
}
.scroll-bar{animation:none!important;opacity:.6!important;}
.lux-hero{min-height:100vh!important;min-height:100svh!important;}
/* --- Fix 12: retire the "baked-in-image-has-the-nav" architecture --- */
/* Root cause, found by inspecting computed style directly: pass9.css
   added body.home-cinematic rules that make the REAL nav and hero
   text invisible (opacity:0, width:1px, clipped) on desktop, on the
   assumption the hero background image itself contains baked-in nav/
   headline/button text — true of the original AI-mockup image, never
   true of the real photos or the new clean image we're using now.
   A mobile-only override (@media max-width:900px) already restores
   real visibility, which is exactly why every mobile screenshot in
   this thread looked fine while desktop silently showed nothing
   until scroll. Since we're committed to clean images with live HTML
   text, this override now needs to apply at every width, not just
   mobile. */
body.home-cinematic .lux-hero__content,
body.home-cinematic .hero-bottom{
  position:relative!important;
  width:min(980px,92vw)!important;
  height:auto!important;
  margin:0 auto!important;
  padding:70px 0 0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:normal!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body.home-cinematic .hero-bottom{
  position:absolute!important;
  width:auto!important;
  left:32px!important;right:32px!important;
  padding:0!important;
}
body.home-cinematic .lux-nav,
body.home-cinematic .lux-nav:not(.is-scrolled),
body.home-cinematic .lang-switcher{
  opacity:1!important;
  pointer-events:auto!important;
}
body.home-cinematic .lux-menu:not(.open){
  opacity:1!important;
  pointer-events:auto!important;
}
.hero-hotzones{display:none!important;}
/* --- Fix 13: chips beside the map, not stacked below it ------------- */
/* Root cause of the height mismatch: .vmap-wrap (map), .map-instruction,
   and .vmap-chips were three stacked siblings, so total card height was
   map-height + instruction + however many rows the chips wrapped into.
   With 11 locations that's 2-3 extra rows on top of a 520px map, making
   this card far taller than the Nick's Notes card beside it. */
.guide-map-card{
  display:grid!important;
  grid-template-columns:1fr 240px!important;
  gap:18px!important;
  align-items:start!important;
}
.guide-map-card .vmap-wrap{grid-column:1;grid-row:1;margin-top:0!important;}
.guide-map-sidebar{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;
  height:520px;overflow:hidden;
}
.guide-map-sidebar .map-instruction{
  font-size:11.5px!important;line-height:1.5!important;
  color:rgba(255,255,255,.74)!important;
  margin-bottom:14px!important;flex-shrink:0;
}
.guide-map-sidebar .vmap-chips{
  display:flex!important;flex-direction:column!important;
  flex-wrap:nowrap!important;gap:6px!important;
  overflow-y:auto;padding-right:4px;
  margin:0!important;
}
.guide-map-sidebar .vmap-chip{
  width:100%!important;justify-content:flex-start!important;
  text-align:left!important;
  padding:0.4rem 0.85rem!important;
}
.guide-map-sidebar .vmap-chips::-webkit-scrollbar{width:5px;}
.guide-map-sidebar .vmap-chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
@media(max-width:900px){
  .guide-map-card{grid-template-columns:1fr!important;}
  .guide-map-sidebar{grid-column:1;grid-row:2;height:auto!important;}
  .guide-map-sidebar .vmap-chips{
    flex-direction:row!important;flex-wrap:wrap!important;
    overflow-y:visible;max-height:none;
  }
  .guide-map-sidebar .vmap-chip{width:auto!important;}
}

/* --- Fix 14: Valley View button was overlapping the map search box -- */
/* Root cause: both .vmap-reset (top:12px;left:12px) and the Mapbox
   geocoder search box (added via map.addControl(geocoder,'top-left'))
   were pinned to the same corner. Zoom controls already occupy
   top-right, so bottom-left is the only open corner. */
.vmap-reset{
  top:auto!important;bottom:12px!important;left:12px!important;
}

/* --- Fix 15: "Meet Luna" section never reveals — force visible ------ */
/* This section's [data-reveal] elements never receive the .revealed
   class from the IntersectionObserver even after scrolling through
   the entire page (verified: 10 other identical-pattern sections on
   this page reveal correctly, only this one doesn't). Rather than
   leave content permanently invisible while chasing an elusive JS
   timing issue, removing the dependency for this section specifically. */
.two-up[data-reveal],
.two-up .split-copy,
.two-up .split-media{
  opacity:1!important;
  transform:none!important;
}
#umbertide,#montone,#cortona{scroll-margin-top:140px;}
.video-play-fallback{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;
  border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
}
.video-play-fallback svg{margin-left:3px;}
.decade-s{text-transform:lowercase;font-size:0.7em;}
/* --- Fix 16: hamburger menu pushed off-screen on mobile --------------- */
/* Root cause: pass16's base .lux-nav rule matches via the compound
   selector .lux-nav.lux-nav--pass16 (specificity 0,2,0) since the nav
   element carries both classes. Its own responsive media-query
   overrides use the plain selector .lux-nav (specificity 0,1,0) —
   lower specificity, so despite being !important and later in the
   file, they never actually won. The base rule's 650px-wide grid
   (minmax(230,300) + minmax(420,1fr) + auto) applied at EVERY screen
   width, squeezing the third column — the hamburger — to 0px and
   rendering it far outside the mobile viewport. Verified via computed
   style: grid-template-columns came back as "230px 420px 0px" on a
   390px-wide viewport, with the menu button's bounding box starting
   at x:650 — entirely off-screen. */
#mainNav.lux-nav,
.lux-nav.lux-nav--pass16,
.lux-nav{
  grid-template-columns:minmax(230px,300px) minmax(420px,1fr) auto!important;
}
@media(max-width:1260px){
  #mainNav.lux-nav,
  .lux-nav.lux-nav--pass16,
  .lux-nav{
    grid-template-columns:minmax(210px,270px) 1fr auto!important;
  }
}
@media(max-width:1080px){
  #mainNav.lux-nav,
  .lux-nav.lux-nav--pass16,
  .lux-nav{
    grid-template-columns:1fr auto!important;
  }
}
/* --- Fix 17: reverse sections show photo-before-text on mobile ------ */
/* Root cause: .split-feature.reverse puts .split-media before
   .split-copy in the HTML (that's what "reverse" means on desktop —
   it's a column-order flip via grid-template-columns, not a DOM
   reorder). At <=1100px the grid collapses to a single column and
   just stacks children in source order, so reverse sections show
   their photo first — breaking the text-then-photo pattern every
   other section follows, and putting two photos back-to-back
   whenever a reverse section follows a normal one. */
@media(max-width:1100px){
  .split-feature.reverse .split-copy{order:1!important;}
  .split-feature.reverse .split-media{order:2!important;}
}

/* --- Fix 19: gallery lightbox on mobile ------------------------------ */
/* 1) Captions relied on :hover, which doesn't fire reliably on touch —
   always show them on small screens. */
@media(max-width:760px){
  .gal-caption{
    opacity:1!important;
    transform:none!important;
    font-size:0.78rem!important;
    padding:1.75rem 1rem 0.9rem!important;
    background:linear-gradient(to top, rgba(28,20,10,.92), rgba(28,20,10,.15) 70%, transparent)!important;
  }
}
/* 2) The fixed nav (z-index 7000) was visually winning over the
   lightbox (z-index 9000) in some stacking-context edge case —
   rather than chase that, force it out of the way explicitly
   whenever the lightbox is open. */
body.lightbox-open .lux-nav{
  opacity:0!important;
  pointer-events:none!important;
}
/* 3) Tighten padding and controls so the photo actually fills the
   screen on mobile instead of floating in a small centered box. */
@media(max-width:760px){
  .lightbox{padding:0.75rem!important;}
  .lb-wrap img{max-height:70vh!important;}
  .lb-caption{font-size:0.68rem!important;padding:0 0.5rem;}
  .lb-close{
    top:0.75rem!important;right:0.75rem!important;
    background:rgba(0,0,0,.4)!important;
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.8rem!important;
  }
  .lb-prev,.lb-next{
    padding:0.7rem 0.9rem!important;
    background:rgba(0,0,0,.4)!important;
  }
  .lb-prev{left:0.5rem!important;}
  .lb-next{right:0.5rem!important;}
}

.lux-links a.lux-download{
  font-size:12px!important;
}
@media(max-width:1260px){
  .lux-links a.lux-download{font-size:11px!important;}
}
@media(max-width:1080px){
  .lux-links a.lux-download{font-size:14px!important;}
}
/* Root cause: I fixed .vmap-chip (the filter buttons below the map)
   last round, but the pins ON the map itself use a DIFFERENT class,
   .vmap-label, which no pass has ever touched. It sets opacity:.78 on
   the whole pill (bg + text together), which is enough to lose it
   against a busy green/brown satellite photo. */
.vmap-label{
  opacity:1!important;
  background:rgba(15,11,6,.94)!important;
  color:#fff!important;
  box-shadow:0 2px 10px rgba(0,0,0,.55)!important;
}
.vmap-label--home{
  background:var(--cl-gold)!important;color:#1a1408!important;opacity:1!important;
}
/* NOTE: town/road labels baked into the Mapbox satellite-streets base
   style (e.g. "MONTONE", "SR416") are NOT controlled by this CSS at
   all — they come from Mapbox's own style, set in explore-map.js via
   style:'mapbox://styles/mapbox/satellite-streets-v12'. Fixing those
   requires a custom Mapbox Studio style, not a CSS change. */

/* --- Fix 10: map card top-align with the Nick's Notes detail card --- */
/* Root cause: .guide-map-card carries padding:20px on all sides, so
   the map starts 20px lower than .guide-detail's photo, which has no
   top padding. Zero the top padding so both columns start flush. */
.guide-map-card{padding-top:0!important;}
.vmap-wrap{margin-top:0!important;}
.vmap-chip{
  background:rgba(207,168,93,.1)!important;border:1px solid rgba(207,168,93,.55)!important;
  color:#fff!important;font-weight:700!important;
}
.vmap-chip:hover,.vmap-chip.is-active{
  background:var(--cl-gold)!important;border-color:var(--cl-gold)!important;color:#1a1408!important;
}
.vmap-chip-dot{background:var(--cl-gold-soft,#e6c77d)!important;}
.cl-breadcrumb{
  max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px) 0;
}
.cl-breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;
}
.cl-breadcrumb li{
  font-family:var(--font-ui,Arial,sans-serif);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cl-muted,#5d594f);
}
.cl-breadcrumb li a{color:var(--cl-muted,#5d594f);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;}
.cl-breadcrumb li a:hover{color:var(--cl-gold,#cfa85d);border-bottom-color:var(--cl-gold,#cfa85d);}
.cl-breadcrumb li[aria-current="page"]{color:var(--cl-ink,#172018);}
.cl-breadcrumb li.cl-bc-sep{color:rgba(93,89,79,.45);font-weight:400;}
@media(max-width:760px){
  .cl-breadcrumb li{font-size:10.5px;}
}