/* css/pages/photos.css — extracted from phopf-tos.html */

/* body bg/color: inherited from theme.css */
#eco-header{position:relative;z-index:200;}
.pg{max-width:1200px;margin:0 auto;padding:70px 16px 40px;}
.pg-title{font-family:'Arial Black',Arial,sans-serif;font-size:clamp(20px,3vw,28px);letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--color-accent-c),var(--color-accent-g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;}

/* Filter bar */
.fbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center;}
.fbar select,.fbar input{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;font-size:13px;min-height:38px;}
.fbar select{min-width:140px;cursor:pointer;}
.fbar input{max-width:120px;}
.fchip{padding:6px 14px;border-radius:16px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-mid);font-size:12px;font-weight:700;cursor:pointer;transition:all .12s;white-space:nowrap;}
.fchip.on{background:var(--color-accent-c-tint);border-color:var(--color-accent-c);color:var(--color-accent-c);}
.fchip:hover{border-color:rgba(0,170,255,.4);}

/* Multi-select dropdown */
.ms-wrap{position:relative;display:inline-block;}
.ms-btn{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;min-height:38px;min-width:160px;text-align:left;}
.ms-drop{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:100;margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:220px;}
.ms-drop.open{display:block;}
.ms-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--color-text);transition:background .1s;}
.ms-item:hover{background:var(--color-accent-c-subtle);}
.ms-item .ms-cb{width:16px;height:16px;border:1.5px solid var(--color-border);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-accent-c);}
.ms-item.on .ms-cb{background:rgba(0,170,255,.15);border-color:var(--color-accent-c);}
.ms-search{width:100%;border:none;border-bottom:1px solid var(--color-border);background:transparent;color:var(--color-text);padding:8px 12px;font-size:13px;outline:none;}

/* Stats */
.pstat{font-size:13px;color:var(--color-text-dim);margin-bottom:14px;}
.pstat b{color:var(--color-accent-c);}

/* Gallery grid */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;}
@media(min-width:768px){.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}}
.gitem{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;cursor:pointer;background:var(--color-surface);}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .2s;}
.gitem:hover img{transform:scale(1.05);}
.gitem .gmeta{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:12px;color:rgba(255,255,255,.8);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;}
.gitem .gtype{position:absolute;top:6px;left:6px;font-size:12px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.6);color:var(--color-accent-c);text-transform:uppercase;pointer-events:none;}

/* Lightbox */
#lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);justify-content:center;align-items:center;flex-direction:column;backdrop-filter:blur(8px);}
#lightbox.open{display:flex;}
#lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:6px;}
#lb-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--color-text);font-size:28px;cursor:pointer;padding:8px;z-index:10;}
#lb-caption{color:var(--color-text-mid);font-size:13px;margin-top:12px;text-align:center;max-width:90vw;}
#lb-nav{position:absolute;bottom:24px;display:flex;gap:16px;}
#lb-nav button{background:var(--color-border);border:1px solid var(--color-border-strong);color:var(--color-text);font-size:18px;width:44px;height:44px;border-radius:50%;cursor:pointer;}

/* Empty */
.empty-msg{text-align:center;padding:60px 20px;color:var(--color-text-dim);font-size:15px;}

/* ── Tag In Photo (S437) ────────────────────────────────────────────────────── */
.lb-tag-wrap {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  z-index: 10;
  max-width: 90vw;
  justify-content: center;
}
.lb-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.55);
  color: var(--brand-white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  font-size: 12px;
  backdrop-filter: blur(6px);
}
.lb-tag-rm {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  cursor: pointer;
  padding: 0 0 0 2px;
  line-height: 1;
}
.lb-tag-rm:hover { color: var(--brand-white); }
.lb-tag-btn {
  background: rgba(0,0,0,0.55);
  color: var(--brand-white);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.lb-tag-btn:hover { background: rgba(0,0,0,0.75); }
.lb-tag-drop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,16,26,0.96);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  min-width: 220px;
  z-index: 20;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.lb-tag-drop.hidden { display: none; }
.lb-tag-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--brand-white);
  padding: 10px 14px;
  font-size: 13px;
  outline: none;
}
.lb-tag-input::placeholder { color: rgba(255,255,255,0.4); }
.lb-tag-result {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--brand-white);
  cursor: pointer;
  transition: background 0.1s;
}
.lb-tag-result:hover { background: rgba(255,255,255,0.1); }
.lb-tag-none { padding: 9px 14px; font-size: 12px; color: rgba(255,255,255,0.4); }