/* =====================================================================
   Wellness Dream Center — Gallery page (filter bar + masonry captions)
   Extracted from the template's former inline <style> block.
   ===================================================================== */

  .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; }
  .filter-bar button{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:.7em 1.2em; background:rgba(255,255,255,.012); transition:.3s; }
  .filter-bar button:hover{ color:var(--ink); border-color:var(--gold-line); }
  .filter-bar button.active{ color:#1a1306; background:var(--gold); border-color:var(--gold); }
  .m-item{ transition:opacity .4s var(--ease), transform .4s var(--ease); }
  .m-item.hide{ display:none; }
  .m-cap{ position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:0; transform:translateY(6px); transition:.4s; }
  .m-item:hover .m-cap{ opacity:1; transform:none; }
  [data-lang="ar"] .filter-bar button, [data-lang="ar"] .m-cap{ font-family:'Tajawal', var(--mono); letter-spacing:0; }

  /* uniform aligned grid — every tile the same size, edges lined up top/bottom/left/right */
  #grid{ column-count:initial; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
  #grid .m-item{ margin:0; aspect-ratio:4 / 3; border-radius:10px; }
  #grid .m-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:1080px){ #grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:760px){ #grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } }