/*
 * Menu pages: category cards (/menu), product cards (/menu/<category>), page numbers.
 * Values measured on the live site at 375 / 768 / 1024 / 1366 / 1920 px.
 */

/* ---------- Category cards: 1 per row, 2 from 480px, 3 from 768px ---------- */

.category-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -25px;
}

.category-card {
  width: 100%;
  padding: 0 25px;
  box-sizing: border-box;
}

.category-card-title {
  margin: 0;
  padding: 12px;
  background: var(--color-gold);
  text-align: center;
  font-size: var(--size-md);
  line-height: var(--leading-base);
  font-weight: var(--weight-regular);
  color: var(--color-heading);
}

.category-card-title a,
.category-card-title a:hover {
  color: var(--color-text);
}

/* photo: zooms in a little on hover */
.category-card-photo {
  max-width: 500px;
  margin: 10px auto 0;
  overflow: hidden;
}

.category-card-photo img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease-out;
}

.category-card-photo:hover img {
  transform: scale(1.1);
}

/* the line between the rows has no border: it only adds space */
.category-divider {
  height: 0;
  margin: 25px 0;
  border: 0;
}

@media (min-width: 480px) {
  .category-card { width: 50%; }
}

@media (min-width: 768px) {
  .category-card { width: 33.333%; }
}

@media (min-width: 1220px) {
  .category-card { padding: 0 35px; }
}

@media (max-width: 414px) {
  .category-card { margin-top: 50px; }
}

/* ---------- Product cards: 1 per row, 2 from 768px ---------- */

.product-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -25px;
}

.product-grid + .product-grid {
  margin-top: 25px;
}

.product-card {
  width: 100%;
  padding-left: 25px;
  box-sizing: border-box;
}

.product-card-box {
  margin-bottom: 30px;
  padding: 30px;
  color: var(--color-text-base);
}

/* the box grows around the photo when the photo floats (from 1300px) */
.product-card-box::after {
  content: "";
  display: table;
  clear: both;
}

.product-card-text {
  color: var(--color-gold);
}

.product-card-photo {
  max-width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}

.product-card-photo img {
  transition: transform 0.3s ease-out;
}

.product-card-photo:hover img {
  transform: scale(1.1);
}

.product-card-text h3 {
  margin: 0;
  font-size: var(--size-md);
  line-height: var(--leading-base);
  font-weight: var(--weight-regular);
  color: var(--color-gold);
}

.product-card-description {
  color: var(--color-black);
}

@media (min-width: 768px) {
  .product-card { width: 50%; }
}

@media (max-width: 768px) {
  .product-card-box { padding: 0; }
}

@media (min-width: 1220px) {
  .product-grid { margin-left: -35px; }
  .product-grid + .product-grid { margin-top: 35px; }
  .product-card { padding-left: 35px; }
}

/* from 1300px the photo sits on the left of the text */
@media (min-width: 1300px) {
  .product-card-photo {
    float: left;
    margin-right: 30px;
  }
}

/* ---------- Page numbers ---------- */

.pagination {
  margin: 10px -30px;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 0;
  border-top: 1px solid var(--color-border);
}

.pagination li {
  display: inline-block;
  vertical-align: top;
  font-size: var(--size-base);
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 40px;
  padding: 5px;
  line-height: 40px;
  text-align: center;
}

.pagination a {
  color: var(--color-pagination-link);
}

.pagination a:hover {
  color: var(--color-heading);
}

/* current page: grey number on dark background, as on the live site (hard to read, Q20) */
.pagination .is-active span {
  background: var(--color-dark);
  color: var(--color-text);
}