/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero-section {
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url("../images/Images/Desktop/img-home-hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-restaurant-logo {
  width: 380px;
  height: auto;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-restaurant-logo.EN {
  display: none;
}

html[data-language="bg"] .hero-restaurant-logo.BG {
  display: block;
}

html[data-language="bg"] .hero-restaurant-logo.EN {
  display: none;
}

html[data-language="en"] .hero-restaurant-logo.BG {
  display: none;
}

html[data-language="en"] .hero-restaurant-logo.EN {
  display: block;
}

.hero-restaurant-logo-mobile {
  display: none;
  width: 128px;
  height: auto;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-restaurant-logo-mobile.EN {
  display: none;
}

html[data-language="bg"] .hero-restaurant-logo-mobile.BG {
  display: none;
}

html[data-language="bg"] .hero-restaurant-logo-mobile.EN {
  display: none;
}

html[data-language="en"] .hero-restaurant-logo-mobile.BG {
  display: none;
}

html[data-language="en"] .hero-restaurant-logo-mobile.EN {
  display: none;
}

.hero-section-main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 32px;
  max-width: 1000px;
  margin-top: -28px;
}

.hero-title {
  color: var(--white);
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  font-size: 76px;
  font-weight: var(--semiBold);
  line-height: 100%;
}

.main-link-button {
  color: var(--white);
  text-align: center;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 1);
  font-size: 20px;
  font-weight: var(--regular);
  line-height: 100%;
  letter-spacing: 2px;
  transition: 0.5s;
  padding: 10px 16px;
}

.hero-button-line {
  color: var(--white);
  text-align: center;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 1);
  font-size: 20px;
  font-weight: var(--regular);
  line-height: 100%;
  letter-spacing: 2px;
  transition: 0.5s;
  opacity: 1;
}

.main-link-button:is(:hover, :focus-visible, :focus-within) {
  font-size: 21px;
  border: 1px solid #fff;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
  background: rgba(242, 242, 242, 0.2);
}

.main-link-button:is(:hover, :focus-visible, :focus-within) .hero-button-line {
  opacity: 0;
}

/*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/
.story-panel.chef-section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 0;
  overflow: hidden;
}

.chef-main-container {
  width: 1280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 120px;
  z-index: 1;
}

.chef-section-main-image {
  width: 520px;
  height: 520px;
  flex-shrink: 0;
}

.chef-damyanov-info-main-container {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 40px;
}

.chef-title {
  color: var(--brown-01, #2a2224);
  font-size: 44px;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: 2%;
  text-transform: uppercase;
}

.chef-separatot-line {
  height: 2px;
  width: 128px;
  background-color: #cba14d;
}

.chef-description-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  position: relative;
}

.chef-image {
  width: 112px;
  border-radius: 104px 104px 0 0;
}

.chef-description-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chef-name {
  color: var(--brown-01, #2a2224);
  font-size: 28px;
  font-style: italic;
  font-weight: 600;
  line-height: 100%;
  /* 28px */
}

.chef-info-text {
  color: var(--brown-01, #2a2224);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 0.5%;
}

.chef-signature {
  position: absolute;
  left: 136px;
  bottom: -140px;
  width: 128px;
  height: 128px;
}

/*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
.story-panel.gallery-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 104px 0;
  padding-left: max(24px, calc((100vw - 1280px) / 2));
  background-color: #f5ece0;
  background-image: url("../images/Textures/instagram-background.png");
  background-repeat: repeat;
  background-size: 1440px 831px;
}

.gallery-main-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 454px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 44px;
}

.gallery-info-container {
  width: 416px;
  height: 100%;
  flex: 0 0 416px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.gallery-title-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.gallery-main-title {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--primary-brown);
  font-size: 44px;
  font-style: italic;
  font-weight: var(--medium);
  line-height: 105%;
}

.gallery-main-title span {
  font: inherit;
  color: inherit;
}

.gallery-carrussel-buttons-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.gallery-carrussel-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 180ms ease;
}

.gallery-carrussel-button:not(:disabled):is(:hover, :focus-visible) {
  background-color: rgba(42, 34, 36, 0.08);
}

.gallery-carrussel-button:focus-visible {
  outline: 1px solid var(--primary-brown);
  outline-offset: 2px;
}

.gallery-carrussel-button:disabled {
  cursor: default;
}

.gallery-carrussel-btn-icon {
  width: 20px;
  height: 20px;
  max-width: none;
  filter: var(--filter-primary-brown);
  transition: opacity 180ms ease;
}

.gallery-carrussel-button:disabled .gallery-carrussel-btn-icon {
  opacity: 0.45;
}

.gallery-carrussel-btn-icon.previous {
  transform: rotate(180deg);
}

.gallery-info-bottom-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
}

.gallery-info-text {
  width: 100%;
  color: var(--primary-brown);
  font-size: 18px;
  font-weight: var(--light);
  line-height: 140%;
  letter-spacing: 0.9px;
}

.gallery-images-carrussel {
  min-width: 0;
  height: 454px;
  flex: 1 1 auto;
  overflow: hidden;
}

.gallery-images-track {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translate3d(0, 0, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.gallery-index-slide {
  width: 352px;
  height: 454px;
  flex: 0 0 352px;
  overflow: hidden;
}

.gallery-index-image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-images-track {
    transition: none;
  }
}

/*-----------------------------------*\
  #STORY SCROLL
\*-----------------------------------*/

.story-scroll-section {
  --panel-count: 2;
  --story-viewport-height: 100vh;
  position: relative;
  height: calc(var(--panel-count) * var(--story-viewport-height));
  color-scheme: light;
}

.story-scroll-sticky {
  position: sticky;
  top: 0;
  height: var(--story-viewport-height);
  overflow: hidden;
  background-color: var(--primary-brown);
}

.story-scroll-video,
.story-scroll-overlay {
  position: absolute;
  inset: 0;
}

.story-scroll-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-scroll-overlay {
  background: transparent;
}

.story-scroll-track {
  position: relative;
  z-index: 1;
  will-change: transform;
}

.story-panel {
  /* min-height: var(--story-viewport-height); */
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-panel-width-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1280px;
  height: auto;
}

/*-----------------------------------*\
  #MENU
\*-----------------------------------*/

.menu-width-container {
  justify-content: space-between;
  gap: 120px;
  margin-top: 60px;
}

.menu-image {
  width: 520px;
  height: auto;
  object-fit: cover;
}

.menu-main-container {
  max-width: 520px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 40px;
}

.menu-title {
  font-size: 48px;
  font-weight: var(--medium);
  line-height: 100%;
}

.menu-description {
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
  letter-spacing: 1px;
}

.menu-tabs-container {
  margin-top: 24px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.menu-tab-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--grey-55, #8c8c8c);
  cursor: pointer;
}

.menu-tab-button.active .menu-name {
  color: var(--primary-brown);
}

.menu-name {
  color: var(--grey-55, #8c8c8c);
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s;
}

.menu-tab-button.active .menu-download-button {
  display: flex;
}

.menu-download-button {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.menu-download-icon {
  width: 16px;
  height: 16px;
  filter: var(--filter-gold-02);
  transition: transform 180ms ease;
}

.menu-tab-button:is(:hover, :focus-visible, :focus-within) .menu-download-icon {
  transform: translateX(3px);
}

.menu-download-text {
  display: none;
  color: var(--primary-gold-02, #cba14d);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-transform: uppercase;
}

/*-----------------------------------*\
  #WINE SELECTION
\*-----------------------------------*/
.wine-selection-width-container {
  width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url("../images/Images/Desktop/Wine-selection.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 96px;
}

.wine-selection-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 28px;
  padding: 48px 80px;
  background-color: #ffffffeb;
  border: solid 1px var(--grey-80);
}

.wine-selection-title {
  color: var(--brown-01, #2a2224);
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  line-height: 100%;
}

.wine-selection-description {
  color: var(--brown-01, #2a2224);
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 2%;
  margin-bottom: 28px;
}

/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact-width-container {
  width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 80px;
  background-color: transparent;
}

.contact-title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 32px;
}

.contact-title {
  text-align: center;
  font-size: 48px;
  font-style: italic;
  font-weight: var(--medium);
  line-height: 100%;
}

.contact-description-title {
  color: var(--brown-01, #2a2224);
  font-size: 18px;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 2%;
  text-align: center;
  max-width: 960px;
}

.contact-widgets-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.contact-widget {
  width: 100%;
  height: 264px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  padding: 40px 32px;
  border: 3px solid var(--grey-80, #ccc);
  background: rgba(242, 242, 242, 0.5);
  backdrop-filter: blur(2px);
  transition: 0.5s;
}

.contact-widget:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  background-color: rgba(242, 242, 242, 1);
}

.contact-widget-icon {
  width: 64px;
  height: 64px;
}

.contact-widget-name {
  color: var(--primary-brown-01, #2a2224);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}

.contact-description {
  color: var(--primary-gold-02, #cba14d);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 2%;
}

.contact-description.worktime {
  font-size: 18px;
}

.contact-worktime-small {
  margin-top: 6px;
  color: var(--primary-gold-02, #cba14d);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 2%;
  font-style: inherit;
  font-size: 16px;
}

.map-contacts {
  width: 1280px;
  height: 560px;
  display: block;
  border: 0;
  background-color: var(--white);
}

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

@media (max-width: 1320px) {

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .story-panel-width-container,
  .contact-width-container,
  .map-contacts,
  .wine-selection-width-container {
    width: 1000px;
  }

  .menu-width-container {
    gap: 64px;
  }

  .menu-image {
    width: 440px;
  }

  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/
  .contact-widgets-container {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .contact-widget {
    width: calc(50% - 12px);
  }





  /*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/
  .story-panel.chef-section {
    padding: 160px 0;
  }

  .chef-main-container {
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
    z-index: 1;
  }

  .chef-section-main-image {
    width: 400px;
    height: 400px;
    flex-shrink: 0;
  }


}

@media (max-width: 1080px) {

  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
  .hero-section {
    padding: 0 48px;
  }

  .hero-section-main-container {
    width: 100%;
  }

  .hero-title {
    font-size: 56px;
  }

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .story-panel {
    padding: 104px 0;
  }

  .story-panel-width-container,
  .contact-width-container,
  .map-contacts {
    width: 100%;
  }

  .wine-selection-width-container {
    width: 100%;
    margin-inline: 48px;
  }

  .story-panel-width-container,
  .contact-width-container {
    padding: 0 48px;
  }

  .menu-width-container {
    gap: 48px;
  }

  .menu-main-container {
    max-width: 420px;
    gap: 32px;
  }

  .menu-image {
    width: min(400px, 42vw);
  }

  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/
  .contact-width-container {
    gap: 64px;
  }

  /*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/

  .story-panel.chef-section {
    padding: 160px 48px;
  }

  .chef-main-container {
    width: 100%;
    gap: 48px;
    z-index: 1;
  }

  .chef-section-main-image {
    width: 400px;
    height: 400px;
    flex-shrink: 0;
  }

  .chef-main-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    gap: 48px;
    z-index: 1;
  }

  .chef-section-main-image {
    width: 100%;
    height: auto;
    flex-shrink: 0;
  }

  .chef-damyanov-info-main-container {
    width: 100%;
    max-width: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
  }

  .chef-title {
    text-align: center;
  }

}

@media (max-width: 900px) {

  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
  .hero-section {
    padding: 0 32px;
  }

  .hero-title {
    font-size: 48px;
  }

  .wine-selection-width-container {
    margin-inline: 32px;
  }

  /*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/
  .story-panel.chef-section {
    padding: 96px 0;
  }

  .chef-main-container {
    width: 100%;
    padding: 0 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
  }

  .chef-damyanov-info-main-container {
    max-width: 100%;
  }

  .chef-title {
    font-size: 42px;
  }

  .chef-section-main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: 120px;
  }



  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .story-panel.gallery-section {
    padding: 80px 0 80px 32px;
  }

  .gallery-main-container {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
  }

  .gallery-info-container {
    width: calc(100% - 32px);
    height: auto;
    flex-basis: auto;
    gap: 72px;
  }

  .gallery-main-title {
    font-size: 42px;
  }

  .gallery-images-carrussel {
    width: 100%;
    /* Swap the arrow-button/JS-transform carousel for native touch
           scrolling on mobile - swipe left/right instead of tapping
           arrows, with the browser handling momentum/snapping itself. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .gallery-images-carrussel::-webkit-scrollbar {
    display: none;
  }

  .gallery-carrussel-buttons-container {
    display: none;
  }

  .gallery-images-track {
    /* The JS carousel still computes/sets a translate3d() offset for
           the (now hidden) arrow buttons - force it off so it can't fight
           the container's native scroll position. */
    transform: none !important;
    transition: none;
  }

  .gallery-index-slide {
    scroll-snap-align: start;
  }

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .story-panel {
    padding: 96px 0;
  }

  .story-panel-width-container,
  .contact-width-container {
    padding: 0 32px;
  }

  .menu-width-container {
    gap: 32px;
  }

  .menu-main-container {
    max-width: 360px;
    gap: 24px;
  }

  .menu-title,
  .contact-title {
    font-size: 44px;
  }

  .menu-description,
  .contact-description-title {
    font-size: 18px;
    line-height: 130%;
  }

  .menu-image {
    width: min(360px, 40vw);
  }

  .menu-name {
    font-size: 18px;
  }

  /*-----------------------------------*\
  #WINE SELECTION
\*-----------------------------------*/
  .wine-selection-width-container {
    width: 100%;
    padding: 64px 32px;
  }

  .wine-selection-info-container {
    padding: 40px 40px;
  }

  .wine-selection-title {
    font-size: 38px;
  }

  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/
  .contact-width-container {
    gap: 48px;
  }

  .contact-widget {
    height: auto;
    min-height: 220px;
    padding: 32px 24px;
    gap: 20px;
  }
}

@media (max-width: 800px) {

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .menu-width-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-main-container,
  .menu-image,
  .menu-tabs-container,
  .menu-tab-button {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 700px) {

  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
  .hero-section {
    padding: 0 24px;
    /* The dedicated mobile photo (390x760) is too small for real phone
           pixel densities and renders pixelated - reuse the large desktop
           photo instead until a proper high-res mobile crop exists. */
    align-items: flex-start;
  }

  .hero-restaurant-logo {
    display: none;
  }

  html[data-language="bg"] .hero-restaurant-logo.BG,
  html[data-language="bg"] .hero-restaurant-logo.EN,
  html[data-language="en"] .hero-restaurant-logo.BG,
  html[data-language="en"] .hero-restaurant-logo.EN {
    display: none;
  }

  .hero-restaurant-logo-mobile {
    display: block;
  }

  html[data-language="bg"] .hero-restaurant-logo-mobile.BG {
    display: block;
  }

  html[data-language="bg"] .hero-restaurant-logo-mobile.EN {
    display: none;
  }

  html[data-language="en"] .hero-restaurant-logo-mobile.BG {
    display: none;
  }

  html[data-language="en"] .hero-restaurant-logo-mobile.EN {
    display: block;
  }

  .hero-section-main-container {
    width: 100%;
    margin-top: 246px;
  }

  .wine-selection-width-container {
    margin-inline: 20px;
  }

  .hero-title {
    font-size: 40px;
  }

  .main-link-button {
    font-size: 16px;
  }

  .hero-button-line {
    font-size: 16px;
  }

  .main-link-button:is(:hover, :focus-visible, :focus-within) {
    font-size: 17px;
  }

  .wine-selection-width-container {
    width: 100%;
    padding: 64px 28px;
  }

  /*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/
  .story-panel.chef-section {
    padding: 72px 0;
  }

  .chef-main-container {
    padding: 0 24px;
    gap: 48px;
  }

  .chef-damyanov-info-main-container {
    gap: 32px;
    align-items: center;
    text-align: center;
  }

  .chef-title {
    font-size: 40px;
  }

  .chef-description-info {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .chef-description-container {
    align-items: center;
    text-align: center;
  }

  .chef-image {
    width: 140px;
  }

  .chef-info-text {
    font-size: 16px;
  }

  .chef-signature {
    position: static;
    align-self: center;
    margin-top: 8px;
  }

  .chef-section-main-image {

    margin-top: 0px;
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .story-panel.gallery-section {
    padding: 72px 0 72px 24px;
  }

  .gallery-info-container {
    width: calc(100% - 24px);
    gap: 24px;
  }

  .gallery-title-container {
    gap: 16px;
  }

  .gallery-main-title {
    font-size: 40px;
  }

  .gallery-info-bottom-container {
    gap: 32px;
  }

  .gallery-info-text,
  .gallery-main-link-btn {
    font-size: 16px;
  }

  /*-----------------------------------*\
  #STORY SCROLL
\*-----------------------------------*/
  /* The desktop sticky/parallax panel-scroll effect forces every panel to
       be exactly one viewport tall, which left mostly-empty panels on phones
       where the content doesn't need that much height. Below this breakpoint
       the panels stack and scroll normally instead, sized to their content. */
  .story-scroll-section {
    height: auto;
  }

  .story-scroll-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    /* Keep the video above the page background, but clip its fixed layer
       to this section so it cannot cover the hero, Instagram, or footer.
       Overflow alone does not clip viewport-fixed descendants. */
    isolation: isolate;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    background-color: transparent;
  }

  .story-scroll-track {
    transform: none !important;
  }

  /* On mobile the pinned/scroll-jacked "video window" effect is turned
       off above (the track just scrolls normally in-flow), but the video
       itself still needs to read as a full-bleed backdrop behind every
       panel rather than stretching to the *combined* height of all of them
       (which is what happened when it stayed position:absolute inside a
       now-auto-height parent - it barely rendered at all). Pinning it to
       the viewport with position:fixed keeps it exactly one screen tall
       and in place while the foreground content scrolls over it. */
  .story-scroll-video,
  .story-scroll-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
  }

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .story-panel {
    min-height: auto;
    padding: 0;
  }

  .story-panel-width-container,
  .contact-width-container {
    width: 100%;
    padding: 0 24px;
  }

  .story-panel-width-container {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 96px;
  }

  .menu-width-container {
    gap: 40px;
  }

  /* Per Figma, the mobile menu section's photo sits between the title
       text and the tab list, not after all of it like on desktop. Rather
       than reshuffling the markup (which desktop's two-column layout still
       depends on), let .menu-main-container's own box disappear so its
       children become direct flex items of .menu-width-container
       alongside .menu-image, then reorder all four with `order`. */
  .menu-main-container {
    display: contents;
  }

  .menu-title {
    order: 1;
    font-size: 40px;
    line-height: 100%;
  }

  .menu-description {
    order: 2;
    font-size: 20px;
    line-height: 130%;
  }

  .menu-image {
    order: 3;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .menu-tabs-container {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .menu-tab-button {
    padding: 24px 0;
  }

  .menu-download-button {
    gap: 8px;
  }

  .menu-download-text {
    display: inline;
  }

  /*-----------------------------------*\
  #WINE SELECTION
\*-----------------------------------*/
  .wine-selection-width-container {
    background-image: url("../images/Images/Mobile/img-home-wine-mobile.jpg");
  }

  .wine-selection-info-container {
    padding: 40px 20px;
  }

  .wine-selection-title {
    font-size: 34px;
  }

  .wine-selection-description {
    font-size: 16px;
  }

  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/
  .contact-width-container {
    gap: 48px;
    padding-top: 104px;
  }

  .contact-title-container {
    max-width: unset;
    width: 100%;
    gap: 24px;
  }

  .contact-title {
    font-size: 40px;
    line-height: 100%;
  }

  .contact-description-title {
    font-size: 20px;
    line-height: 130%;
    text-align: center;
  }

  .contact-widgets-container {
    flex-direction: column;
    gap: 20px;
  }

  .contact-widget {
    width: 100%;
    min-height: 194px;
    padding: 32px;
    gap: 16px;
    border-width: 2px;
  }

  .contact-widget:first-child {
    min-height: 220px;
  }

  .contact-widget:nth-child(2) {
    min-height: 218px;
  }

  .contact-widget-icon {
    width: 56px;
    height: 56px;
  }

  .contact-widget-name {
    font-size: 24px;
  }

  .contact-description {
    font-size: 18px;
    line-height: 120%;
  }

  .contact-description.worktime {
    font-size: 18px;
  }

  .contact-worktime-small {
    font-size: 16px;
  }

  .map-contacts {
    width: 100vw;
    height: 560px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /*-----------------------------------*\
  #RESERVATION
\*-----------------------------------*/
  /* Scoped to the homepage's embedded reservation story-panel only --
     reservation.php (the standalone page) uses this same class name
     directly under .reservation-section and must not inherit this
     padding, since that page controls its own mobile gutter entirely via
     .reservation-section's own padding (assets/css/reservation.css). An
     unscoped rule here was unintentionally leaking onto the standalone
     page too (both pages load index.css), throwing off its intended
     mobile side gutter. Scoped via .story-panel-reservation rather than
     #RESERVATION -- both pages' wrappers happen to share that id
     (reservation.php's own <section> is also id="RESERVATION"), but only
     the homepage's <article> carries this class. */
  .story-panel-reservation .reservation-width-container {
    padding: 56px 24px 0;
  }

  #WINE-SELECTION {
    margin-top: 96px;
  }
}

@media (max-width: 500px) {

  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
  .hero-section {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 32px;
  }

  /*-----------------------------------*\
  #CHEF SECTION
\*-----------------------------------*/
  .chef-main-container {
    padding: 0 16px;
  }

  .chef-title {
    font-size: 26px;
  }

  .chef-name {
    font-size: 24px;
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .story-panel.gallery-section {
    padding-left: 16px;
  }

  .gallery-info-container {
    width: calc(100% - 16px);
  }

  .gallery-main-title {
    font-size: 36px;
  }

  .gallery-index-slide {
    width: min(352px, calc(100vw - 32px));
    flex-basis: min(352px, calc(100vw - 32px));
  }

  /*-----------------------------------*\
  #MENU
\*-----------------------------------*/
  .story-panel-width-container,
  .contact-width-container {
    padding: 0 16px;
  }

  .story-panel-width-container {
    padding-top: 96px;
  }

  .menu-title {
    font-size: 34px;
  }

  .menu-description {
    font-size: 20px;
  }

  .menu-name {
    font-size: 18px;
  }

  .menu-download-text {
    font-size: 14px;
  }

  /*-----------------------------------*\
  #WINE SELECTION
\*-----------------------------------*/

  .wine-selection-title {
    font-size: 30px;
  }

  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/
  .contact-width-container {
    padding-top: 104px;
  }

  .contact-title-container {
    max-width: 350px;
  }

  .contact-title {
    font-size: 34px;
  }

  .contact-description-title {
    font-size: 20px;
  }
}