/* =====================================================================
   AL-ZOHRA TRAVEL & TOURS — assets/css/pages/gallery.css
   Loaded AFTER style.css, on gallery.php only.
   Everything is scoped under body.p-gallery so no global component
   can be affected. Tokens only — no hard-coded colours.

   It does exactly three things:
     1. lets the .rv image reveal live inside a .gallery__item button
     2. styles the category filter bar (only rendered when the client
        has created subfolders inside assets/gallery/)
     3. styles the empty state
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. .rv INSIDE A GALLERY TILE

   .gallery__item is a <button> with its own aspect-ratio. Dropping the
   site-wide .rv reveal inside it means the photograph wipes open, scales
   from .94 and keeps its parallax drift, exactly as on every other page.

   Two of style.css's own gallery rules have to be answered:
     .gallery__item img        sets a plain transform/transition
     .gallery__item:hover img  sets transform: scale(1.06)
   Both would overwrite the transform that .rv__img needs for the wipe
   and the parallax. The rules below restore it, and move the hover zoom
   onto the --rv-s custom property instead, which is how .rv--zoom does
   it in the design system.
   ------------------------------------------------------------------ */
.p-gallery .gallery__item {
  /* the .rv frame carries the placeholder ground while it is clipped */
  background: transparent;
}

.p-gallery .gallery__item > .rv {
  position: absolute;
  inset: 0;
  --rv-r: 0px;
}

.p-gallery .gallery__item .rv__img {
  transform: translate3d(0, var(--rv-y, 0%), 0) scale(var(--rv-s, 1));
}

.p-gallery .gallery__item:hover .rv,
.p-gallery .gallery__item:focus-visible .rv {
  --rv-s: 1.09;
}

/* The caption and the darkening scrim must stay above the clipped frame. */
.p-gallery .gallery__caption { z-index: 3; }

/* Hidden by the category filter. */
.p-gallery .gallery__item[hidden] { display: none; }


/* ---------------------------------------------------------------------
   2. CATEGORY FILTER BAR
   Only present when assets/gallery/ contains subfolders.
   ------------------------------------------------------------------ */
.p-gallery .gal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.p-gallery .gal-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55rem 1.05rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-full);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}

.p-gallery .gal-filter__btn:hover {
  border-color: var(--red-200);
  color: var(--red-800);
  background: var(--red-50);
}

.p-gallery .gal-filter__btn.is-active {
  background: var(--grad-red);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-red-sm);
}

.p-gallery .gal-filter__count {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}

.p-gallery .gal-filter__btn.is-active .gal-filter__count { color: rgba(255, 255, 255, .78); }

.p-gallery .gal-count { max-width: 62ch; }


/* ---------------------------------------------------------------------
   3. EMPTY STATE
   Rendered when assets/gallery/ is missing, unreadable or holds no
   image files. A designed panel — never a PHP warning.
   ------------------------------------------------------------------ */
.p-gallery .gal-empty {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.p-gallery .gal-empty__actions { justify-content: center; }


/* ---------------------------------------------------------------------
   4. REDUCED MOTION
   style.css already disables the reveal transforms globally; this kills
   the hover zoom introduced above so nothing moves under the pointer.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .p-gallery .gallery__item:hover .rv,
  .p-gallery .gallery__item:focus-visible .rv { --rv-s: 1; }
  .p-gallery .gal-filter__btn { transition: none; }
}