/* Viewport overrides only. Base layout stays in style.css.
   64rem  editorial split
   80rem  horizontal navigation
   90rem  wider navigation */

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(26rem, 1fr) 1.05fr;
  }

  .hero {
    min-height: calc(100svh - var(--header-offset));
  }

  .footer-info {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.15rem;
  }

  .footer-info li:first-child {
    justify-self: start;
  }

  .footer-info li:last-child {
    justify-self: end;
  }

  .footer-info-item {
    text-align: start;
    white-space: nowrap;
  }

  .hero .display {
    font-size: clamp(1.85rem, 8.4cqi, 3.7rem);
  }

  .about .display {
    font-size: clamp(2.05rem, 2.8vw, 3.15rem);
  }

  .ambience .display {
    font-size: clamp(2.15rem, 3vw, 3.4rem);
  }

  .split-flip {
    grid-template-columns: 1.15fr minmax(22rem, 0.88fr);
  }

  .split-flip .media,
  .split-flip .split-copy {
    order: 0;
  }

  .split .media {
    min-height: 100%;
  }

  .events {
    position: static;
    isolation: auto;
    min-height: 22rem;
    background: var(--color-bg);
    color: var(--color-text);
  }

  .events .media {
    position: relative;
    inset: auto;
  }

  .events .media::before {
    content: none;
  }

  .events .media img {
    object-position: 78% center;
  }

  .events .split-copy {
    position: static;
    z-index: auto;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding-block: clamp(2.25rem, 4vw, 3rem);
    text-align: start;
  }

  .events .display {
    color: var(--color-text);
    font-size: clamp(1.85rem, 3.1vw, 3.35rem);
  }

  .events .kicker,
  .events .lede {
    color: var(--color-text-muted);
  }

  .events .button,
  .events .button:hover {
    background: transparent;
    color: var(--color-primary);
  }

  .events .button:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  }

  .events-seal {
    display: block;
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    right: 1.25rem;
    width: 7.25rem;
    height: 7.25rem;
    color: var(--color-primary);
    pointer-events: none;
  }

  .events-seal text {
    fill: currentColor;
    text-transform: uppercase;
  }

  .media-fade img {
    mask-image: linear-gradient(to right, transparent 0%, black 34%);
  }

  .media-fade::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 42%;
    height: auto;
    pointer-events: none;
    background: linear-gradient(
      to right,
      var(--media-fade) 0%,
      var(--media-fade) 16%,
      color-mix(in srgb, var(--media-fade) 48%, transparent) 55%,
      transparent 100%
    );
    backdrop-filter: blur(28px);
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
  }
}

@media (min-width: 42rem) {
  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .menu-card-body {
    padding: 0.95rem 1rem 1.05rem;
  }

  .menu-card-name {
    font-size: 1.2rem;
  }

  .events-grid,
  .event-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-field-wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .menu-strip-card {
    width: 15rem;
  }
}

@media (min-width: 80rem) {
  .site-header-bar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
  }

  .nav-toggle,
  .nav-overlay,
  .nav-sidebar-head {
    display: none;
  }

  .site-menu,
  .site-menu.is-open {
    position: static;
    display: contents;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    transform: none;
  }

  .site-logo-name {
    font-size: 1.45rem;
  }

  .site-nav {
    position: absolute;
    left: 50%;
    flex-direction: row;
    gap: 1.35rem;
    transform: translateX(-50%);
  }

  .site-nav a {
    padding-bottom: 0.35rem;
  }

  .site-tools {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
  }

  .language-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    left: auto;
    margin-top: 0;
  }
}

@media (min-width: 90rem) {
  .site-nav {
    gap: 2rem;
  }

  .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}