/* ==========================================================================
   Montiliya — the Templates Library (js/gallery.js): a dark gallery of real reference videos, filters in one pill bar, cards in the shape of their video (a masonry of columns),
   a hover preview where a fine pointer exists, and the detail with "Use this template". Same tokens as the app; the accent marks the way forward.
   ========================================================================== */

.gallery { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--glow), var(--panel); }
.gal { width: 100%; max-width: 1320px; margin-inline: auto; padding: var(--s8) var(--s8) var(--s16); display: flex; flex-direction: column; gap: var(--s6); }
.gal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s8); flex-wrap: wrap; }
.gal-head-t { flex: 1 1 420px; min-width: 0; }
.gal-head h1 { margin: 0 0 var(--s2); font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.gal-head h1:focus { outline: none; }
.gal-head h1:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-sm); }
.gal-sub { margin: 0; max-width: 62ch; color: var(--ink-3); font-size: var(--fs-lg); text-wrap: pretty; }
.gal-search { display: flex; align-items: center; gap: var(--s2); flex: 0 1 300px; min-height: 44px; padding-inline: var(--s4); border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-3); }
.gal-search:focus-within { border-color: var(--accent); color: var(--ink); }
.gal-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }

/* the filters: one rounded bar of pills (the active one lifted) */
.gal-filters { display: flex; gap: 2px; align-self: flex-start; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--panel-2); }
.gal-filters::-webkit-scrollbar { display: none; }
.gal-pill { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding-inline: var(--s5); border-radius: var(--r-full); border: 1px solid transparent; color: var(--ink-3); font-size: var(--fs-md); font-weight: 550; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.gal-pill:hover { color: var(--ink); }
.gal-pill[aria-checked='true'] { color: var(--ink); background: var(--panel-3); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.gal-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gal-n { font-size: var(--fs-xs); color: var(--ink-3); }

/* the masonry: columns, each card keeps its video's shape */
.gal-grid { list-style: none; margin: 0; padding: 0; columns: 4 210px; column-gap: var(--s4); }
.gal-card { break-inside: avoid; margin: 0 0 var(--s4); }
.gal-card.skel { aspect-ratio: var(--r, 0.5625); border-radius: var(--r-lg); background: var(--panel-2); animation: gal-pulse 1.4s ease-in-out infinite; }
@keyframes gal-pulse { 50% { opacity: 0.55; } }
.gal-face { position: relative; display: block; width: 100%; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; text-align: start; color: #fff; border: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast); }
.gal-face:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.gal-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal-media { position: relative; display: block; width: 100%; aspect-ratio: var(--r, 0.5625); background: linear-gradient(160deg, #262626, #121212); }
.gal-media img, .gal-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-media video { opacity: 0; transition: opacity var(--t-med) var(--ease); }
.gal-card.has-frame .gal-media video.still { opacity: 1; }
.gal-card.has-frame .gal-ph { display: none; }
.gal-card.playing .gal-media video { opacity: 1; }
.gal-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.5); }
.gal-ph .icon { width: 36px; height: 36px; }
.gal-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 38%, transparent 62%); pointer-events: none; }
.gal-info { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--s4); }
.gal-cat { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
:lang(ar) .gal-cat { text-transform: none; }
.gal-name { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.gal-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); max-height: 0; opacity: 0;
  transition: max-height var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
.gal-face:hover .gal-desc, .gal-face:focus-visible .gal-desc { max-height: 3em; opacity: 1; }
.gal-play { position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s3); display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); transition: opacity var(--t-fast); }
.gal-play .icon { width: 16px; height: 16px; fill: currentColor; }
.gal-card.playing .gal-play { opacity: 0; }

.gal-state { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s16) var(--s4); text-align: center; color: var(--ink-3); }
.gal-state p { margin: 0; max-width: 46ch; }
.gal-state strong { color: var(--ink); font-size: var(--fs-lg); }
.gal-state-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-full); background: var(--panel-2); }

/* the detail */
.gal-dlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; }
.gal-dlg-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); min-height: 0; }
.gal-dlg-media { display: grid; place-items: center; background: #000; max-height: calc(100dvh - 34px); }
.gal-dlg-media video, .gal-dlg-media img { width: 100%; height: 100%; max-height: calc(100dvh - 34px); object-fit: contain; }
.gal-dlg-text { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s8) var(--s6) var(--s6); overflow-y: auto; }
.gal-dlg-text .gal-cat { color: var(--accent); }
.gal-dlg-text h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.gal-dlg-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-md); text-wrap: pretty; }
.gal-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.gal-tags li { padding: 3px var(--s3); border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink-3); font-size: var(--fs-xs); }
.gal-fine { margin: auto 0 0; padding-top: var(--s4); color: var(--ink-3); font-size: var(--fs-sm); }
.gal-use { align-self: stretch; min-height: 52px; font-size: var(--fs-lg); }
.gal-x { position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s3); }

@media (max-width: 900px) {
  .gal { padding: var(--s5) var(--s4) var(--s12); gap: var(--s5); }
  .gal-grid { columns: 2 160px; column-gap: var(--s3); }
  .gal-card { margin-bottom: var(--s3); }
  .gal-search { flex: 1 1 100%; }
  .gal-dlg-in { grid-template-columns: 1fr; }
  .gal-dlg-media { max-height: 58dvh; }
  .gal-dlg-media video, .gal-dlg-media img { max-height: 58dvh; }
  .gal-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-face, .gal-pill, .gal-desc { transition: none; }
  .gal-face:hover { transform: none; }
  .gal-card.skel { animation: none; }
}