/* Loaded on the experimental homepage only. */
.section-menu {
  display: none;
}

@media (max-width: 1150px) {
  .has-section-menu {
    --section-menu-gutter: 32px;
    --section-menu-header-height: 88px;
  }

  .has-section-menu .header-inner {
    gap: 12px;
  }

  .has-section-menu .wordmark,
  .has-section-menu .header-city,
  .has-section-menu .header-booking {
    flex-shrink: 0;
  }

  .section-menu {
    display: block;
    position: static;
    order: 4;
    flex: 0 0 44px;
  }

  .section-menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
  }

  .section-menu-toggle span {
    display: block;
    width: 17px;
    height: 1px;
    background: var(--gold);
    pointer-events: none;
  }

  .section-menu-toggle:hover,
  .section-menu-toggle[aria-expanded="true"] {
    border-color: var(--gold);
  }

  .section-menu-panel {
    position: absolute;
    z-index: 1;
    top: 100%;
    right: var(--section-menu-gutter);
    width: min(360px, calc(100vw - 2 * var(--section-menu-gutter)));
    max-height: calc(100dvh - var(--section-menu-header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 20px;
    border: 1px solid var(--line);
    background: var(--bg);
  }

  .section-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-block: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.5;
  }

  .section-menu-panel a:last-child {
    border-bottom: 0;
  }

  .section-menu-panel a:hover {
    color: var(--gold);
  }

  .section-menu-panel a:focus-visible {
    outline-offset: 2px;
  }
}

@media (max-width: 650px) {
  .has-section-menu {
    --section-menu-gutter: 20px;
    --section-menu-header-height: 76px;
  }
}

@media (max-width: 360px) {
  .has-section-menu {
    --section-menu-gutter: 16px;
  }
}