/*
 * Home page menu rows: photo 60% wide with a white box over it; every second row mirrored.
 * Values measured on the live site at 375 / 768 / 1024 / 1366 / 1920 px.
 */

.menu-rows {
  padding: 0 15px;
  background: var(--color-page-bg);
}

.menu-rows-inner {
  max-width: var(--layout-inner-container);
  margin: 0 auto;
}

.menu-row {
  position: relative;
  width: 100%;
  height: 600px;
  margin-top: 40px;
}

.menu-row-image {
  position: absolute;
  width: 60%;
  height: 600px;
  background: no-repeat center / cover;
}

/* "brown" shows only while the photo loads (as on the live site) */
.menu-row-reverse .menu-row-image {
  right: 0;
  background-color: var(--color-brown-fallback);
}

.menu-row-box {
  position: absolute;
  right: 0;
  bottom: 20%;
  z-index: 10;
  width: 100%;
  max-width: 600px;
  min-height: 370px;
  background: var(--color-white);
}

.menu-row-reverse .menu-row-box {
  right: auto;
  left: 0;
}

.menu-row-text {
  padding: 10px 15px;
}

.menu-row-title {
  margin: 20px 0 0 15px;
  font-size: var(--size-3xl);
  font-weight: var(--weight-extra);
  color: var(--color-text-menu);
  text-align: left;
}

.menu-row-items {
  position: relative;
  margin: 15px 0 0 15px;
  line-height: 1.2;
  text-align: left;
}

.menu-row-items-inner {
  font-size: var(--size-md);
}

.menu-row-item-title {
  margin-top: 20px;
  font-weight: var(--weight-extra);
  color: var(--color-text-menu);
}

.menu-row-item-text {
  margin-top: 5px;
  color: var(--color-text-menu);
}

/* gold button half outside the bottom of the box */
.menu-row-more {
  position: absolute;
  right: 0;
  bottom: -31px;
  z-index: 12;
  width: 255px;
  min-height: 60px;
  margin: 0 auto;
  background: var(--color-gold-alt);
}

.menu-row-reverse .menu-row-more {
  right: auto;
  left: 0;
}

.menu-row-more span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .menu-row { height: 740px; }

  .menu-row-image {
    width: 100%;
    height: 400px;
    background-position: center bottom;
  }

  .menu-row-box {
    max-width: none;
    bottom: 0;
  }

  .menu-row-more,
  .menu-row-reverse .menu-row-more {
    right: 0;
    left: auto;
    bottom: -20px;
  }
}

@media (max-width: 560px) {
  .menu-row-more { width: 150px; min-height: 40px; }
  .menu-row-more span { height: 40px; }
}