/* ==========================================================================
   HU_PhotoGrid — shared photo grid. Class-scoped (not page-scoped) on purpose:
   this is meant to be dropped into any surface in the app.
   Prefix `pgx-` checked: zero matches before this.
   ========================================================================== */
.pgx{ margin:12px 0 0; font-family:'Nunito',system-ui,-apple-system,sans-serif; }
.pgx-grid{ display:grid; gap:8px; }
.pgx-grid.is-one { grid-template-columns:1fr; }
.pgx-grid.is-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pgx-grid.is-quad{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pgx-grid.is-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pgx-cell{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  background:#F1EFEC; aspect-ratio:1/1; }
.pgx-grid.is-one .pgx-cell{ aspect-ratio:4/3; }
.pgx-grid.is-two .pgx-cell{ aspect-ratio:1/1; }
.pgx-cell img{ display:block; width:100%; height:100%; object-fit:cover; }
.pgx-x{
  position:absolute; top:6px; right:6px; width:44px; height:44px; min-height:44px;
  border-radius:50%; cursor:pointer; font:inherit; font-size:.85rem; font-weight:800;
  padding:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92) !important; border:0 !important;
  color:#3E4B65 !important; -webkit-text-fill-color:#3E4B65 !important;
  box-shadow:0 2px 8px rgba(20,28,44,.2); }
.pgx-x:hover{ background:#fff !important; }
.pgx-x:focus-visible, .pgx-b:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
.pgx-acts{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:10px 0 0; }
.pgx-b{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:12px 18px; border-radius:999px; cursor:pointer; font:inherit;
  font-size:.86rem; font-weight:800;
  background:#fff !important; border:1px solid #E3E7EC !important;
  color:#3E4B65 !important; -webkit-text-fill-color:#3E4B65 !important; }
.pgx-b:hover{ background:#F4F6F8 !important; }
.pgx-b.is-sm{ min-height:44px; padding:11px 15px; font-size:.8rem; }
.pgx-count{
  font-size:.78rem; font-weight:700;
  color:#77808F !important; -webkit-text-fill-color:#77808F !important; }
.pgx-note{
  margin:8px 0 0; font-size:.78rem; line-height:1.6;
  color:#77808F !important; -webkit-text-fill-color:#77808F !important; }
#pgxToast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:9850;
  background:#1F3054 !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:14px 24px; border-radius:999px;
  font:700 .86rem/1.35 'Nunito',system-ui,sans-serif;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:calc(100vw - 32px); text-align:center; }
#pgxToast.on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:620px){
  .pgx-grid.is-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pgx-acts .pgx-b{ flex:1 1 auto; }
}