/* =========================================================================
   NAJA RESTAURANT — GALLERY PAGE
   Loaded after style.css on the Gallery page only. Reuses the homepage
   tokens, hero, buttons, order section, footer and lightbox styles.
   Logical properties keep the layout correct in both RTL and LTR.
   ========================================================================= */

/* =========================================================================
   01 — GALLERY HERO
   ========================================================================= */
.hero--gallery {
  min-height: 64vh;
  min-height: 64svh;
  justify-content: center;
  padding-bottom: clamp(56px, 8vh, 96px);
}
.hero--gallery .hero__content { max-width: 820px; }
.hero--gallery .hero__title { font-size: clamp(2.8rem, 8vw, 6.2rem); }
.hero--gallery .hero__img { object-position: center 55%; }
.hero--gallery .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to left, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}
[dir="ltr"] .hero--gallery .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to right, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}

/* =========================================================================
   02 — FILTERS
   ========================================================================= */
.gallery-page { padding-block: clamp(36px, 5vw, 64px) var(--section-space); }

.gp-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.gp-filter { display: inline-flex; align-items: center; gap: 8px; }
.gp-filter__count {
  font-family: var(--font-en); font-size: 0.72rem; line-height: 1;
  padding: 4px 6px; border: 1px solid var(--brand-line); color: var(--muted);
}
.gp-filter[aria-pressed="true"] .gp-filter__count { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }

.gp-status {
  min-height: 1.7em;
  margin-block: 18px clamp(20px, 3vw, 32px);
  text-align: center; font-size: 0.88rem; color: var(--muted);
}

/* =========================================================================
   03 — MASONRY GRID (CSS columns: 2 mobile, 3 tablet, 4 desktop)
   Every tile has a fixed aspect ratio, so nothing shifts while photos load.
   ========================================================================= */
.gp-grid {
  --gp-gap: clamp(10px, 1.6vw, 20px);
  column-count: 2;
  column-gap: var(--gp-gap);
}
@media (min-width: 700px) { .gp-grid { column-count: 3; } }
@media (min-width: 1100px) { .gp-grid { column-count: 4; } }

.gp-tile {
  display: block;
  margin-block-end: var(--gp-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.gp-tile__btn {
  position: relative; display: block; width: 100%; overflow: hidden;
  cursor: zoom-in; text-align: start;
}
.gp-tile__btn:focus-visible { outline-offset: -4px; }

.gp-tile__frame { display: block; aspect-ratio: 1 / 1; }
.gp-tile--tall .gp-tile__frame { aspect-ratio: 3 / 4; }
.gp-tile--wide .gp-tile__frame { aspect-ratio: 4 / 3; }
.gp-tile__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), opacity 0.6s;
}

/* readability gradient + the thin ember frame that appears on hover */
.gp-tile__btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.78), transparent 48%);
  transition: opacity 0.5s;
}
.gp-tile__btn::before {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(238, 29, 35, 0);
  transition: border-color 0.6s var(--ease), inset 0.6s var(--ease);
}

.gp-tile__caption {
  position: absolute; z-index: 3; bottom: 12px; inset-inline: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; line-height: 1.4; color: var(--cream);
}
.gp-tile__caption::before { content: ""; width: 18px; height: 1px; background: var(--brand); flex: none; }
@media (min-width: 700px) {
  .gp-tile__caption { bottom: 16px; inset-inline: 18px; font-size: 0.9rem; }
  .gp-tile__caption::before { width: 22px; }
}

/* Mouse + keyboard: subtle zoom, caption fades in. Touch screens keep the caption visible. */
.gp-tile__btn:focus-visible img { transform: scale(1.06); }
.gp-tile__btn:focus-visible::before { border-color: var(--brand-soft); inset: 14px; }
@media (hover: hover) and (pointer: fine) {
  .gp-tile__btn::after { opacity: 0.35; }
  .gp-tile__caption { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .gp-tile__btn:hover img { transform: scale(1.06); }
  .gp-tile__btn:hover::after, .gp-tile__btn:focus-visible::after { opacity: 1; }
  .gp-tile__btn:hover::before { border-color: var(--brand-soft); inset: 14px; }
  .gp-tile__btn:hover .gp-tile__caption, .gp-tile__btn:focus-visible .gp-tile__caption { opacity: 1; transform: none; }
}

/* tiles that appear after a filter change fade in */
@keyframes gpTileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gp-grid.is-filtered .gp-tile { animation: gpTileIn 0.5s var(--ease) both; }

.gp-empty { padding-block: 56px; text-align: center; color: var(--muted); }
.gp-note { margin-block-start: clamp(28px, 4vw, 44px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .gp-grid.is-filtered .gp-tile { animation: none; }
  .gp-tile__frame img, .gp-tile__caption { transition: none; }
  .gp-tile__btn:hover img, .gp-tile__btn:focus-visible img { transform: none; }
}