/* EVO+ mobile orientation contract.
   This file intentionally loads last: legacy responsive rules must not keep
   the expanded rail width after its labels have been collapsed. */
:root {
  --be-browser-bottom-occlusion: 0px;
  --evo-landscape-safe-left: env(safe-area-inset-left, 0px);
  --evo-landscape-safe-right: env(safe-area-inset-right, 0px);
}

/* A collapsed menu in phone/tablet landscape is a real 52 px rail. On an
   iPhone Safari places that rail after the camera-side safe area, so the grid
   must reserve both measurements. Reserving only 52 px made the sidebar sit
   over the first navigation item, the featured copy and the first card. */
@media (orientation: landscape) and (min-width: 681px) and (max-width: 1180px) and (max-height: 820px) {
  :root {
    /* Ten destinations must fit between the wordmark/toggle and the ticker.
       dvh follows Safari's visible viewport while its bars expand/collapse. */
    --evo-landscape-menu-row: clamp(23px,
      calc((100dvh - 103px - var(--be-live-ticker-height, 0px) - var(--be-browser-bottom-occlusion, 0px)) / 10),
      36px);
  }

  html body.theme-blackeye #app.be-home-redesign.sidebar-collapsed:not([hidden]),
  html body.theme-blackeye #app.app.sidebar-collapsed:not([hidden]) {
    display: grid !important;
    grid-template-columns: calc(52px + var(--evo-landscape-safe-left)) minmax(0, 1fr) !important;
    transition: none !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar {
    right: auto !important;
    left: var(--evo-landscape-safe-left) !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 7px 6px !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    box-sizing: border-box !important;
    height: calc(100dvh - var(--be-live-ticker-height, 0px) - var(--be-browser-bottom-occlusion, 0px)) !important;
    max-height: calc(100dvh - var(--be-live-ticker-height, 0px) - var(--be-browser-bottom-occlusion, 0px)) !important;
    overflow: visible !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar > .brand {
    flex: 0 0 34px !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar > .brand img {
    width: 36px !important;
    height: 30px !important;
    max-height: 30px !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar nav {
    display: grid !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-columns: 40px !important;
    grid-auto-rows: var(--evo-landscape-menu-row) !important;
    align-content: start !important;
    gap: 1px !important;
    margin-top: 3px !important;
    padding: 1px 0 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar nav::-webkit-scrollbar {
    display: none !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar .nav-item {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: var(--evo-landscape-menu-row) !important;
    min-height: var(--evo-landscape-menu-row) !important;
    max-height: var(--evo-landscape-menu-row) !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 1px 2px !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar .nav-item > span {
    margin: 0 auto !important;
    width: clamp(23px, calc(var(--evo-landscape-menu-row) - 4px), 31px) !important;
    height: clamp(23px, calc(var(--evo-landscape-menu-row) - 4px), 31px) !important;
    flex-basis: clamp(23px, calc(var(--evo-landscape-menu-row) - 4px), 31px) !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .sidebar .nav-item > span img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  html body.theme-blackeye #app.sidebar-collapsed > .main {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
    transition: none !important;
  }

  /* The ticker belongs to the content viewport in compact landscape. Keeping
     it out from under the safe area and rail prevents the empty brand block
     from covering the bottom of the menu and keeps Safari chrome clear. */
  html.be-live-ticker-visible body.theme-blackeye #beLiveTicker {
    left: calc(52px + var(--evo-landscape-safe-left)) !important;
    right: auto !important;
    width: calc(100vw - 52px - var(--evo-landscape-safe-left) - var(--evo-landscape-safe-right)) !important;
    max-width: none !important;
  }

  html.be-live-ticker-visible body.theme-blackeye #beLiveTicker .be-ticker-brand {
    padding-left: 0 !important;
  }
}

/* Safari can keep the landscape media-query result for a few frames after a
   rotation. The JS-set orientation attribute supplies the immediate reset. */
@media (max-width: 760px) {
  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app.app:not([hidden]),
  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app.app.sidebar-collapsed:not([hidden]) {
    display: block !important;
    grid-template-columns: none !important;
  }

  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app > .sidebar,
  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app.sidebar-collapsed > .sidebar {
    position: fixed !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px max(8px, env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app > .main,
  html[data-be-mobile-orientation="portrait"] body.theme-blackeye #app.sidebar-collapsed > .main {
    grid-column: auto !important;
    margin-left: 0 !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* Keep the sports ribbon inside Safari's visible viewport. safe-area padding
   remains part of the ribbon; this extra offset represents browser chrome. */
html.be-live-ticker-visible body #app > .main {
  padding-bottom: calc(30px + var(--be-live-ticker-height, 0px) + var(--be-browser-bottom-occlusion, 0px)) !important;
}

html.be-live-ticker-visible.be-live-ticker-bottom-nav body #app > .main {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px) + var(--be-live-ticker-height, 0px) + var(--be-browser-bottom-occlusion, 0px)) !important;
}

html.be-live-ticker-visible:not(.be-live-ticker-bottom-nav) body #app > .sidebar {
  max-height: calc(100dvh - var(--be-live-ticker-height, 0px) - var(--be-browser-bottom-occlusion, 0px)) !important;
}