/* Photos on the website menu page (menu.php). Loaded only by menu.php. */

/* Photo grid at the bottom of each category tab */
.menu-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.menu-photos .menu-photo,
.menu-strip-grid .menu-photo {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #c6ac83;
    background: #0f1518;
    cursor: zoom-in;
}
.menu-photos .menu-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}
.menu-photos .menu-photo.tall img { object-position: center 55%; }
.menu-photos .menu-photo:hover img { transform: scale(1.05); }
/* an odd count: let the first photo span the full row so the grid has no gap */
.menu-photos--odd .menu-photo:first-child { grid-column: 1 / -1; }
.menu-photos--odd .menu-photo:first-child img { aspect-ratio: 16 / 9; }

/* Two-photo strip under the menu */
.menu-photo-strip { padding: 10px 0 70px; }
.menu-strip-title {
    text-align: center;
    margin-bottom: 26px;
    font-family: 'CormorantInfant', serif;
    font-size: 34px;
    line-height: 1.2;
    color: #D9BB65;
    letter-spacing: 1px;
}
.menu-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.menu-strip-grid .menu-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .4s ease;
}
.menu-strip-grid .menu-photo:hover img { transform: scale(1.04); }

@media (max-width: 767px) {
    .menu-photos { gap: 8px; }
    .menu-strip-grid { grid-template-columns: 1fr; gap: 14px; }
    .menu-strip-title { font-size: 26px; }
    .menu-photo-strip { padding-bottom: 50px; }
}