/* -------------------------------------------------------------------------- */
/* Global                                                                      */
/* -------------------------------------------------------------------------- */

html { background: #000; margin: 0; scrollbar-gutter: stable; }
body { margin: 0; }
body.menu-modal-open { overflow: hidden; background: #000; }


/* -------------------------------------------------------------------------- */
/* Menu Gallery                                                                */
/* -------------------------------------------------------------------------- */

.menu-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; width: 100%; background: #000; transition: opacity .35s ease, transform .35s ease; }
.menu-gallery__item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }


/* -------------------------------------------------------------------------- */
/* Media Frame                                                                 */
/* -------------------------------------------------------------------------- */

.menu-gallery__item.media-frame { position: relative; inset: auto; z-index: 0; }
.menu-gallery__item .media-placeholder { z-index: 0; }
.menu-gallery__item .media-frame__photo { z-index: 1; }


/* -------------------------------------------------------------------------- */
/* Gallery Animation                                                           */
/* -------------------------------------------------------------------------- */

.menu-gallery--animate.menu-gallery--next { animation: menuGalleryFadeNext .4s ease; }
.menu-gallery--animate.menu-gallery--prev { animation: menuGalleryFadePrev .4s ease; }

@keyframes menuGalleryFadeNext {
    0% { opacity: .25; transform: translateX(28px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes menuGalleryFadePrev {
    0% { opacity: .25; transform: translateX(-28px); }
    100% { opacity: 1; transform: translateX(0); }
}


/* -------------------------------------------------------------------------- */
/* Menu Row                                                                    */
/* -------------------------------------------------------------------------- */

.menu-row { position: relative; }
.menu-row__title { margin: 0; padding: 34px 0 14px; color: var(--color-gold); font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .22em; text-align: center; }
.menu-row__slider { position: relative; }
/* Nombre del platillo sobre la foto (viene de data-nombre de la BD). */
.menu-gallery__item[data-nombre]::after { content: attr(data-nombre); position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 10px 10px; color: #fff; background: linear-gradient(transparent, rgba(2, 6, 12, .88)); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.menu-gallery__item[data-nombre]:hover::after, .menu-gallery__item[data-nombre]:focus-within::after { opacity: 1; transform: none; }
/* Ficha del platillo dentro del modal de imagen. */
.menu-image-modal__caption { position: absolute; left: 60px; right: 60px; bottom: 10px; z-index: 5; margin: 0; color: #fff; font-size: 14px; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }

.menu-row__arrow { position: absolute; top: 50%; z-index: 10; width: 38px; height: 64px; padding: 0; border: 0; background: rgba(3, 7, 13, .25); color: rgba(255, 255, 255, .55); font-family: Arial, sans-serif; font-size: 46px; font-weight: 300; line-height: 1; transform: translateY(-50%); cursor: pointer; transition: color .2s ease, background .2s ease, opacity .2s ease; }
.menu-row__arrow:hover:not(:disabled) { color: var(--color-gold); background: rgba(3, 7, 13, .45); }
.menu-row__arrow:disabled { opacity: 0; pointer-events: none; }
.menu-row__arrow--prev { left: -16px; }
.menu-row__arrow--next { right: -16px; }


/* -------------------------------------------------------------------------- */
/* Image Modal                                                                 */
/* -------------------------------------------------------------------------- */

.menu-image-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; padding: 30px; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.menu-image-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }


/* -------------------------------------------------------------------------- */
/* Modal Backdrop                                                              */
/* -------------------------------------------------------------------------- */

.menu-image-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 2, 7, .88); backdrop-filter: blur(5px); }


/* -------------------------------------------------------------------------- */
/* Modal Content                                                               */
/* -------------------------------------------------------------------------- */

.menu-image-modal__content { position: relative; z-index: 1; display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; justify-items: center; width: min(1200px, 96vw); max-height: 92vh; transform: scale(.94); opacity: 0; transition: transform .35s ease, opacity .35s ease; }

.menu-image-modal.is-open .menu-image-modal__content { transform: scale(1); opacity: 1; }


/* -------------------------------------------------------------------------- */
/* Modal Image                                                                 */
/* -------------------------------------------------------------------------- */

.menu-image-modal__image { display: block; grid-column: 2; grid-row: 1; width: auto; height: auto; max-width: 100%; max-height: 88vh; object-fit: contain; box-shadow: 0 15px 60px rgba(0, 0, 0, .65); opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; }
.menu-image-modal__image--visible { opacity: 1; transform: scale(1); }


/* -------------------------------------------------------------------------- */
/* Modal Close                                                                */
/* -------------------------------------------------------------------------- */

.menu-image-modal__close { position: absolute; top: -18px; right: 42px; z-index: 20; width: 40px; height: 40px; padding: 0; border: 2px solid var(--color-gold); border-radius: 50%; background: rgba(3, 7, 13, .82); color: var(--color-gold); font-size: 28px; font-weight: 400; line-height: 34px; cursor: pointer; opacity: 1; visibility: visible; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }

.menu-image-modal__close:hover { background: var(--color-gold); border-color: var(--color-gold); color: #fff; transform: scale(1.05); }


/* -------------------------------------------------------------------------- */
/* Modal Arrows                                                               */
/* -------------------------------------------------------------------------- */

.menu-image-modal__arrow { position: relative; z-index: 10; width: 48px; height: 72px; padding: 0; border: 0; background: rgba(3, 7, 13, .25); color: rgba(255, 255, 255, .65); font-family: Arial, sans-serif; font-size: 58px; font-weight: 300; line-height: 1; cursor: pointer; transition: color .2s ease, background .2s ease, opacity .2s ease; }

.menu-image-modal__arrow:hover:not(:disabled) { color: var(--color-gold); background: rgba(3, 7, 13, .55); }
.menu-image-modal__arrow:disabled { opacity: 0; pointer-events: none; }
.menu-image-modal__arrow[hidden] { display: block; visibility: hidden; pointer-events: none; }
.menu-image-modal__arrow--prev { grid-column: 1; grid-row: 1; }
.menu-image-modal__arrow--next { grid-column: 3; grid-row: 1; }


/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 850px) {
    .menu-gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

@media (max-width: 600px) {
    .menu-image-modal { padding: 15px; }
    .menu-image-modal__content { width: 100%; grid-template-columns: 42px minmax(0, 1fr) 42px; }
    .menu-image-modal__image { max-width: 100%; max-height: 82vh; }
    .menu-image-modal__arrow { width: 36px; height: 54px; font-size: 42px; background: rgba(3, 7, 13, .45); }
    .menu-image-modal__close { top: -10px; right: 0; }
}

@media (max-width: 500px) {
    .menu-gallery { grid-template-columns: repeat(2, 1fr); }
}