@media (min-width: 900px) {
  /* scroll snap */
  .content.scroll-snap {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-y: snapInterval(0%, 100%);
    /* -webkit-overflow-scrolling: touch; */
  }

  /* Apply scroll-snap-align to all .project elements with feature-* classes */
  .project[class*="feature-"] {
    scroll-snap-align: start;
  }

  /* Hero section, if applicable */
  .hero.feature-a {
    scroll-snap-align: start;
  }

  /* Hide scrollbars */
  .content.scroll-snap {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .content.scroll-snap::-webkit-scrollbar {
    display: none;
  }
}

/* Video and fallback styles */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: url('/assets/images/fallback.jpg') center/cover no-repeat;
}

.video-embed.loaded {
  background: none;
}

.bk-video, .bk-video-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-text {
  position: absolute;
  bottom: 20px;
  color: #fff;
  text-decoration: none;
}

.p-director.feature, .p-title.feature {
  margin: 0;
  color: #fff;
}

.project[class*="feature-"] {
    position: relative;
}

.video-container.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
}
#vimeo-player iframe {
    width: 100% !important;
    height: 100% !important;
}


/* Scroll Arrow Styles */
/* Ensure hero can position absolute children */
.hero.feature-a { position: relative; }

/* CTA wrapper that holds the label + arrow */
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: 24px;                 /* tweak to taste */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                     /* space between label and arrow */
  z-index: 60;                  /* above video & overlays */
  pointer-events: none;         /* clicks pass through */
}

/* Label styling (adjust to your typography) */
.scroll-label {
  font-size: 12px;              /* or clamp(...) */
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: Euclid Circular A, Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;                  /* or currentColor; ensure contrast */
  opacity: 0.9;
  pointer-events: none;
}

/* Inside the CTA, the arrow doesn't need absolute */
.hero-cta #scroll-arrow {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;              /* JS will only add translateY(...) */
}

/* Guard: if older rules set the arrow to fixed/absolute, override here */
#scroll-arrow.fixed,
#scroll-arrow.is-fixed {
  position: static !important;
}

.scroll-arrow img {
  width: 35px;
  height: 35px;
  filter: invert(1); /* Makes arrow white, remove if you want original color */
}

.scroll-arrow.show {
  opacity: 0.5;
}

.scroll-arrow.fade-in {
  opacity: 1;
}

/* Fix for Directors Page */
.v-link.video-link {
  color: black!important;
}


/* Directors Menu */
@media screen and (max-width: 767px){
  body.body.directors section.navigation{
  position: relative!important;
  }
}

body.body.directors section.navigation{
  z-index: 10;
  pointer-events: auto;
}

/* lightbox controls */
#custom-controls,
#close-btn {
  opacity: 0;
  transition: opacity 0.25s ease; /* small, quick fade */
}

#custom-controls.visible,
#close-btn.visible {
  opacity: 1;
}

.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 100;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* cover + stacking for videos */
.video-bg { position: relative; width: 100%; height: 100%; overflow: hidden; }
.video-bg .teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.open-lightbox { position: relative; z-index: 2; }

.hero { position: relative; }
.hero-media.video-bg { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.hero-media .teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.open-lightbox { position: absolute; inset: auto auto 2rem 2rem; z-index: 2; }
.hero-content { position: relative; z-index: 3; }



.body.directors .v-view.d-full.v2, .body.new-talents .v-view.d-full.v2{
  height: 85%;
}

@media screen and (max-height: 650px){
  .body.directors .v-view.d-full.v2, .body.new-talents .v-view.d-full.v2{
    height: 60%;
  }
}

.body.directors .director-title{
  margin-top: 6px;
}

.body.directors .hover-video-container {
  pointer-events: none;
}

.body.directors .hover-video-link {
  pointer-events: auto;
  position: relative;
  z-index: 30; /* higher than nav */
}

/* Restaurant Page */

/* Grid wrapper for 3 columns */
.body.restaurants .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}

.restaurant {
  height: 100%;
}

.body.restaurants .link-block {
  display: flex;
  place-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease;
  position: relative;
}

/* Position logo and text stacked vertically centered */
.link-block img.restaurant-logo {
  max-width: 200px;
  width: 60%;
  height: auto;
  margin-bottom: 1rem;
}

.resparagraph {
  font-size: 1rem;
  line-height: 1.4;
}

.link-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: white;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  gap: 1rem; /* controls space between logo and text */
}

.restaurant-logo {
  max-width: 200px;
  width: 60%;
  height: auto;
}

.resparagraph {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
}



@media (max-width: 900px) {
  .body.restaurants .wrapper {
    grid-template-columns: 1fr;
  }
  body.body.restaurants section.navigation{
  position: relative!important;
  }
}

@media screen and (min-width: 745px){
/* Directors Page Column Fix */

/* Page scaffolding so the footer naturally sits at the bottom */
html, body { height: 100%; }
.body.directors { min-height: 100svh; display: flex; flex-direction: column; }

/* Your fullscreen section grows to fill space */
.d-fullscreen.v2 { position: relative; flex: 1; padding-bottom: clamp(48px, 8vh, 120px); }

/* Make background/hover videos sit under everything */
.video-container { position: absolute; inset: 0; z-index: 0; }
.bk-video { width: 100%; height: 100%; object-fit: cover; }


.d-linklist.d-full.v2 {
    /* margin-top: 50px; */
    margin: 50px auto;
    text-align: center;
}

.d-linklist .v-link {
        display: inline;
        break-inside: avoid;
        margin: 0 1rem;
    }

}

/* === Director Bio modal === */

/* Top-right BIO link */
.bio-trigger {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 40;
  font-size: 20px;
  font-family: Euclid Circular A, Times New Roman, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
}

.bio-trigger:hover {
  opacity: 0.7;
}
.bio-row {
  align-items: flex-start; /* makes thumb + text align nicely */
}
.bio-row  .w-col-8{
  padding-right: 10%;
}

.bio-thumb {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.bio-modal{
  font-family: Euclid Circular A, Arial, sans-serif;
  font-size: 16px;
  padding: 30px;
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;
  height: 100vh;
}

.bio-modal figure{
  text-align: center;
  padding: 0 30px;
}
.bio-modal figure img{ max-width:60%;}

/* === Modal visibility control  === */

[data-modal-id] {
  display: none;            /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

[data-modal-id].is-open {
  display: block;           /* <-- forces it to show */
  opacity: 1;
  pointer-events: auto;
}

/* Prevent background scroll when a modal is open */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

/* 
    Mobile Callouts 
    ===============
*/

@media screen and (max-width: 500px){
  .content{ padding-top: 0;}
  .body.directors .v-view.d-full.v2 {
  height: 350px}
  body.body.directors section.navigation{
  padding-top: 40px;
  }

  div#hero-cta{
    display: none !important;
  }

  
  .navigation{ position: relative;
  }

   /* If your columns are in a container, make it a vertical flow */
  .directors-layout, .directors-wrapper, .page-body { /* use your actual parent */
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Remove any absolute/fixed/sticky tricks on mobile */
  .d-linklist {
    position: static; /* overrides absolute/sticky */
    top: auto;
    bottom: auto;
    height: auto;     /* ensure it can grow with content */
  }

  /* Make sure nav participates in normal flow */
  .section.navigation {
    position: static;
    margin-top: 1rem; /* small breathing space */
  }

  .bio-trigger{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
  }

  
}

/* Landing page fix */

/* Mobile/tablet: body scrolls, not .content */
@media (max-width: 899.98px) {
  .content.scroll-snap {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding-bottom: 80px;
    box-sizing: border-box;
  }

  .d-fullscreen.v2{
    height: inherit!important;
  }

  /* Stop full-viewport locks on small screens 
  .project[class*="feature-"],
  .video-embed {
    height: auto !important;
    aspect-ratio: 16 / 9;           
  }*/



}