/* Menu only. Desktop continues to use the original shared Hero rules. */
@media (max-width: 1024px) {
  .hero--menu {
    --menu-photo-height: clamp(420px, 58vw, 540px);
    isolation: isolate;
    min-height: 660px;
    padding-top: 0;
    background: #140b02;
  }

  .hero--menu::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: 22%;
    top: 50%;
    width: 78%;
    height: var(--menu-photo-height);
    transform: translateY(-50%);
    background: url('../../images/menu-hero-new.png') 61% 55% / cover no-repeat;
    pointer-events: none;
  }

  .hero--menu::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      linear-gradient(180deg, #140b02 0%, #140b02 calc(50% - var(--menu-photo-height) / 2), rgba(20, 11, 2, .1) 35%, transparent 65%, #140b02 calc(50% + var(--menu-photo-height) / 2)),
      linear-gradient(90deg, #140b02 18%, rgba(20, 11, 2, .95) 31%, rgba(20, 11, 2, .76) 44%, rgba(20, 11, 2, .25) 60%, transparent 80%);
    pointer-events: none;
  }

  .hero--menu .hero__inner {
    width: 100%;
    max-width: none;
    min-height: inherit;
    padding: 128px clamp(32px, 5vw, 52px) 48px;
    align-items: flex-start;
    justify-content: center;
  }

  .hero--menu .hero__content { width: 52%; text-align: left; }
  .hero--menu .hero__title { max-width: none; margin: 0 0 10px; font-size: 62px; line-height: 1.05; }
  .hero--menu .hero__subtitle { max-width: 410px; margin: 0 0 16px; font-size: 29px; line-height: 1.2; }
  .hero--menu .hero__decor { width: 250px; max-width: 100%; height: auto; margin: 0 0 18px; }
  .hero--menu .hero__description { max-width: 400px; margin: 0 0 24px; font-size: 16px; line-height: 1.55; font-weight: 400; }
  .hero--menu .hero__actions { flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 14px 24px; margin: 0; }

  .hero--menu .hero__actions a:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 4px; }
}

@media (max-width: 767px) {
  .hero--menu {
    --menu-photo-top: 64px;
    --menu-photo-height: clamp(210px, 54vw, 230px);
    min-height: 0;
    align-items: stretch;
  }

  .hero--menu::before {
    top: var(--menu-photo-top);
    left: 0;
    width: 100%;
    height: var(--menu-photo-height);
    transform: none;
    background-position: 64% 58%;
  }

  .hero--menu::after {
    background:
      linear-gradient(180deg, #140b02 0%, #140b02 var(--menu-photo-top), rgba(20, 11, 2, .05) calc(var(--menu-photo-top) + var(--menu-photo-height) * .16), transparent calc(var(--menu-photo-top) + var(--menu-photo-height) * .64), rgba(20, 11, 2, .3) calc(var(--menu-photo-top) + var(--menu-photo-height) * .85), #140b02 calc(var(--menu-photo-top) + var(--menu-photo-height))),
      linear-gradient(90deg, rgba(20, 11, 2, .22), transparent 35%, transparent 80%, rgba(20, 11, 2, .2));
  }

  .hero--menu .hero__inner {
    min-height: 0;
    padding: calc(var(--menu-photo-top) + var(--menu-photo-height) - 8px) 24px 32px;
  }

  .hero--menu .hero__content { width: 100%; max-width: 460px; margin: 0 auto; text-align: center; }
  .hero--menu .hero__title { font-size: 38px; margin-bottom: 8px; }
  .hero--menu .hero__subtitle { max-width: 360px; margin: 0 auto 10px; font-size: 24px; line-height: 1.22; text-wrap: balance; }
  .hero--menu .hero__decor { width: 220px; margin: 0 auto 12px; }
  .hero--menu .hero__description { margin: 0 auto 18px; max-width: 390px; font-size: 14px; line-height: 1.55; }
  .hero--menu .hero__actions { flex-direction: column; justify-content: center; gap: 10px; }
}