/* ============================================================
   oceanparksm.com — /photos/ gallery + admin styles · v2
   The photograph is the interface: masonry grid, hover veils,
   dark viewing stage, lightbox. Tokens only. Blue, no yellow.
   ============================================================ */

/* ================= PUBLIC · filter bar ==========================
   Two DESIGNED rows (grid, never flex-wrap):
   Row 1:  [ search———————————————————— ][ Filter ][ Reset ]
   Row 2:  [Era ▾][Place ▾][Sort ▾][View ▾][For sale]
   ≤760px: row 2 becomes a 3-column grid; ≤460px a 2-column grid.
   Every select sits in a labeled pill with a visible ▾ so it reads
   as a control, not a button. */
.filters{max-width:1160px;margin:-56px auto 0;padding:0 24px;position:relative}
/* solid deep-ink bar (owner 2026-07-16: the translucent white version had
   no contrast against the pale pills) — every control pops against it */
.filters form{
  background:var(--op-ink);
  border-radius:28px;box-shadow:var(--shadow-card);
  padding:12px 14px;
  display:grid;gap:8px;
}
.filters .f-row{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:8px;align-items:center}
.filters .f-row2{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr)) auto;gap:8px;align-items:stretch}
.filters input[type="text"]{
  font-family:inherit;font-size:.92rem;font-weight:800;color:var(--op-ink);
  padding:9px 18px;border-radius:var(--radius-pill);background:var(--op-foam);
  border:2px solid transparent;width:100%;
}
.filters input[type="text"]:focus{border-color:var(--op-ocean);outline:none}
.f-field{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:0 14px 0 16px;border-radius:var(--radius-pill);background:var(--op-foam);
  border:2px solid transparent;
}
.f-field:focus-within{border-color:var(--op-ocean)}
.f-field .f-lbl{
  font-size:.68rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  color:var(--op-ocean);white-space:nowrap;
}
.f-field select{
  appearance:none;flex:1;min-width:0;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:800;color:var(--op-ink);
  padding:9px 2px;background:transparent;border:none;outline:none;
}
.f-field::after{content:"▾";font-size:.8rem;color:var(--op-ink);pointer-events:none}
.filters .f-check{
  display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:.9rem;cursor:pointer;
  padding:9px 16px;border-radius:var(--radius-pill);background:var(--op-foam);white-space:nowrap;
  border:2px solid transparent;
}
.filters .f-check:has(input:checked){background:var(--op-ocean);color:var(--op-white)}
.filters button{
  font-family:inherit;cursor:pointer;border:none;font-weight:900;font-size:.92rem;
  padding:10px 24px;border-radius:var(--radius-pill);
  background:var(--op-ocean);color:var(--op-white);
}
.filters button:hover{background:color-mix(in srgb, var(--op-ocean) 85%, var(--op-ink))}
.f-reset{
  display:inline-block;text-decoration:none;font-weight:900;font-size:.92rem;
  padding:8px 22px;border-radius:var(--radius-pill);
  color:var(--op-white);border:2px solid var(--op-white);white-space:nowrap;
}
.f-reset:hover{background:var(--op-white);color:var(--op-ink)}
.f-reset.off{opacity:.35;pointer-events:none}
@media (max-width:760px){
  .filters .f-row2{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:460px){
  .filters .f-row{grid-template-columns:1fr;}
  .filters .f-row2{grid-template-columns:1fr 1fr}
}
.active-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:900;
  color:var(--op-white);background:var(--op-ink);border-radius:var(--radius-pill);
  padding:.35em 1em;text-decoration:none;
}
.active-chip:hover{background:var(--op-sunset)}

/* ================= PUBLIC · masonry grid ======================== */
.grid-wrap{max-width:1160px;margin:0 auto;padding:18px 24px 60px}
/* one slim bar above the photo set: count left, Previous/Next right —
   designed grid at ≤560px (count row, pager row), never flex-wrap */
.gallery-bar{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  margin-bottom:12px;
}
@media (max-width:560px){.gallery-bar{grid-template-columns:1fr}}
.grid-count{
  font-size:var(--fs-small);font-weight:800;
  color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam));
  display:flex;gap:12px;align-items:center;
}
.pager-top{margin:0;justify-content:flex-end}
@media (max-width:560px){.pager-top{justify-content:flex-start}}
.pager a,.pager .pg-off{
  display:inline-block;text-decoration:none;font-weight:900;font-size:.88rem;
  padding:8px 20px;border-radius:var(--radius-pill);white-space:nowrap;
}
.pager a{color:var(--op-ink);border:2px solid var(--op-ink)}
.pager a:hover{background:var(--op-ink);color:var(--op-white)}
.pager .pg-off{color:color-mix(in srgb, var(--op-ink) 35%, var(--op-foam));border:2px solid color-mix(in srgb, var(--op-ink) 18%, transparent)}
.masonry{columns:4 250px;column-gap:16px}
.masonry-large{columns:2 460px}

/* list view (?view=list): thumbnail left, full metadata right */
.plist{display:grid;gap:12px}
.prow{
  position:relative;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;
  text-decoration:none;border-radius:14px;overflow:hidden;
  background:var(--op-white);box-shadow:var(--shadow-card);padding:10px;
}
.prow img{width:150px;height:100px;object-fit:cover;border-radius:10px;display:block;
  background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-foam))}
.prow-title{display:block;font-weight:800;font-size:1rem;line-height:1.35;color:var(--op-ink)}
.prow-meta{display:block;font-weight:700;font-size:.82rem;margin-top:4px;
  color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam))}
.prow:hover .prow-title{color:var(--op-ocean)}
.prow .ptile-sale{top:16px;right:16px}
@media (max-width:560px){
  .prow{grid-template-columns:96px 1fr}
  .prow img{width:96px;height:72px}
}
.ptile{
  position:relative;display:block;break-inside:avoid;margin-bottom:16px;
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);
  background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-foam));
}
.ptile img{
  width:100%;height:auto;display:block;
  transform:scale(1.001);transition:transform .45s ease;
}
.ptile:hover img{transform:scale(1.045)}
.ptile-veil{
  position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;
  background:linear-gradient(180deg, transparent 0%,
    color-mix(in srgb, var(--op-ink) 78%, transparent) 100%);
  opacity:0;transform:translateY(8px);transition:opacity .3s ease, transform .3s ease;
}
.ptile:hover .ptile-veil,.ptile:focus-visible .ptile-veil{opacity:1;transform:none}
@media (hover:none){.ptile-veil{opacity:1;transform:none}}
.ptile-title{display:block;color:var(--op-white);font-weight:800;font-size:.95rem;line-height:1.3}
.ptile-meta{display:block;color:color-mix(in srgb, var(--op-white) 78%, transparent);font-weight:700;font-size:.78rem;margin-top:2px}
.ptile-sale{
  position:absolute;top:10px;right:10px;
  font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--op-white);background:var(--op-sunset);
  border-radius:var(--radius-pill);padding:.3em .85em;
  box-shadow:0 2px 10px color-mix(in srgb, var(--op-ink) 35%, transparent);
}
.grid-empty{
  text-align:center;padding:70px 24px;
  border-radius:var(--radius-card);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--op-ocean) 14%, var(--op-foam)) 0%,
    color-mix(in srgb, var(--op-ocean) 5%, var(--op-foam)) 100%);
}
.grid-empty .ge-mark{font-size:2.6rem;display:block;margin-bottom:10px}
.grid-empty p{font-weight:800;font-size:1.05rem;color:color-mix(in srgb, var(--op-ink) 70%, var(--op-foam))}
.pager{display:flex;gap:10px;justify-content:center;margin-top:26px}

/* ================= PUBLIC · photo page ========================== */
.stage-dark{
  background:color-mix(in srgb, var(--op-ink) 94%, black);
  padding:34px 24px 26px;text-align:center;position:relative;
}
.stage-dark img{
  max-width:min(100%,1400px);max-height:80vh;border-radius:8px;cursor:zoom-in;
  box-shadow:0 20px 60px color-mix(in srgb, black 55%, transparent);
}
.stage-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:1.9rem;font-weight:900;line-height:1;text-decoration:none;
  color:color-mix(in srgb, var(--op-foam) 75%, transparent);
  background:color-mix(in srgb, var(--op-white) 10%, transparent);
  border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
}
.stage-nav:hover{color:var(--op-white);background:color-mix(in srgb, var(--op-white) 22%, transparent)}
.stage-nav.prev{left:14px}.stage-nav.next{right:14px}
.stage-hint{
  margin-top:14px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb, var(--op-foam) 45%, transparent);
}
.photo-wrap{max-width:1160px;margin:0 auto;padding:30px 24px 60px}
.photo-cols{display:grid;grid-template-columns:2fr 1fr;gap:26px}
@media (max-width:800px){.photo-cols{grid-template-columns:1fr}}
.photo-info h1{font-size:var(--fs-h2);font-weight:var(--fw-h2);margin-bottom:8px}
.photo-info .caption{font-size:var(--fs-body);line-height:1.6;margin-bottom:14px;
  color:color-mix(in srgb, var(--op-ink) 85%, var(--op-foam))}
.meta-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.meta-table th{
  text-align:left;font-weight:900;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam));padding:.45rem .6rem .45rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);white-space:nowrap;vertical-align:top;
}
.meta-table td{
  padding:.45rem 0;border-bottom:1px solid color-mix(in srgb, var(--op-ink) 12%, transparent);
  color:color-mix(in srgb, var(--op-ink) 82%, var(--op-foam));
}
.tag-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.tag-row a{
  font-size:.8rem;font-weight:800;text-decoration:none;color:var(--op-ocean);
  border:1px solid color-mix(in srgb, var(--op-ocean) 40%, transparent);
  border-radius:var(--radius-pill);padding:.25em .9em;
}
.tag-row a:hover{background:var(--op-ocean);color:var(--op-white)}
.buy-box{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  border-top:6px solid var(--op-sunset);padding:20px 22px;align-self:start;
}
.buy-box h2{font-size:var(--fs-h3);font-weight:var(--fw-h3);margin-bottom:10px}
.buy-box .price-line{font-size:var(--fs-small);font-weight:800;margin-bottom:4px}
.buy-box .price-line b{color:var(--op-sunset)}
.buy-box form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.buy-box label{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--op-ocean)}
.buy-box input,.buy-box select,.buy-box textarea{
  width:100%;font-family:inherit;font-size:.98rem;font-weight:700;color:var(--op-ink);
  padding:10px 12px;border-radius:10px;background:var(--op-foam);
  border:2px solid color-mix(in srgb, var(--op-ink) 18%, transparent);
}
.buy-box textarea{min-height:70px;resize:vertical}
.buy-box button{font-family:inherit;cursor:pointer;border:none}
.buy-sent{
  background:color-mix(in srgb, var(--op-palm) 14%, var(--op-white));
  border:1px solid var(--op-palm);border-radius:10px;padding:.7rem .9rem;font-weight:800;
}
.related{margin-top:38px}
.related h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);text-align:center;margin-bottom:22px}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:9999;display:none;
  background:color-mix(in srgb, var(--op-ink) 97%, black);
  align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:6px}
.lightbox .lb-close{
  position:absolute;top:16px;right:20px;font-size:1.6rem;font-weight:900;cursor:pointer;
  color:var(--op-white);background:none;border:none;font-family:inherit;padding:8px 12px;
}

/* ================= ADMIN ======================================== */
.padmin{max-width:1160px;margin:0 auto;padding:34px 24px 70px}
.padmin h1{font-size:var(--fs-h2);font-weight:var(--fw-h2);margin-bottom:.4rem}
.padmin .sub{color:color-mix(in srgb, var(--op-ink) 62%, var(--op-foam));font-weight:700;margin-bottom:1.4rem;max-width:76ch}
.flash{
  background:color-mix(in srgb, var(--op-ocean) 12%, var(--op-white));
  border:1px solid var(--op-ocean);border-radius:12px;padding:.8rem 1rem;font-weight:800;margin-bottom:1rem;
}
.flash.bad{background:color-mix(in srgb, var(--op-sunset) 10%, var(--op-white));border-color:var(--op-sunset)}

/* dashboard strip */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.dash .d-card{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:16px 18px;border-top:5px solid var(--d-c, var(--op-ocean));
}
.dash .d-num{font-size:1.9rem;font-weight:900;line-height:1.1}
.dash .d-lbl{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam))}

/* drag & drop upload */
.dropzone{
  border:3px dashed color-mix(in srgb, var(--op-ocean) 45%, transparent);
  border-radius:var(--radius-card);background:color-mix(in srgb, var(--op-ocean) 6%, var(--op-white));
  padding:34px 22px;text-align:center;cursor:pointer;transition:background .2s, border-color .2s;
  margin-bottom:12px;
}
.dropzone.drag{border-color:var(--op-ocean);background:color-mix(in srgb, var(--op-ocean) 16%, var(--op-white))}
.dropzone .dz-icon{font-size:2rem;display:block;margin-bottom:6px}
.dropzone p{font-weight:800;color:color-mix(in srgb, var(--op-ink) 72%, var(--op-foam))}
.dropzone input[type="file"]{display:none}
.dz-previews{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.dz-previews img{width:74px;height:74px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-card)}
.upload-card{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:20px 22px;margin-bottom:26px;
}
.upload-card h2{font-size:var(--fs-h3);font-weight:var(--fw-h3);margin-bottom:12px}

/* admin library */
.lib-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;
}
/* library search row: input takes the flexible share, buttons never orphan */
.lib-search{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;margin-bottom:16px}
.lib-search input[type="text"]{
  font-family:inherit;font-size:.92rem;font-weight:800;color:var(--op-ink);
  padding:9px 18px;border-radius:var(--radius-pill);background:var(--op-white);
  border:2px solid color-mix(in srgb, var(--op-ink) 15%, transparent);width:100%;
}
.lib-search input[type="text"]:focus{border-color:var(--op-ocean);outline:none}
.lib-search button{font-family:inherit;cursor:pointer;border:none;padding:9px 20px;font-size:.88rem}
.ls-clear{
  display:inline-block;text-decoration:none;font-weight:900;font-size:.88rem;
  padding:7px 18px;border-radius:var(--radius-pill);
  color:var(--op-ink);border:2px solid var(--op-ink);white-space:nowrap;
}
.ls-clear:hover{background:var(--op-ink);color:var(--op-white)}
.ls-clear.off{opacity:.35;pointer-events:none}
.ls-count{font-size:.85rem;font-weight:800;color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam));white-space:nowrap}
@media (max-width:560px){
  .lib-search{grid-template-columns:1fr auto}
  .lib-search input[type="text"]{grid-column:1/-1}
}
.lib-bar .lb-tab{
  font-size:.85rem;font-weight:900;text-decoration:none;color:var(--op-ink);
  padding:.4em 1.1em;border-radius:var(--radius-pill);background:var(--op-white);
  box-shadow:var(--shadow-card);
}
.lib-bar .lb-tab[aria-current="true"]{background:var(--op-ocean);color:var(--op-white)}
.bulk-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:12px 16px;margin-bottom:18px;font-size:.88rem;font-weight:800;
}
.bulk-bar select,.bulk-bar input[type="text"]{
  font-family:inherit;font-size:.88rem;font-weight:700;color:var(--op-ink);
  padding:7px 10px;border-radius:8px;background:var(--op-foam);
  border:2px solid color-mix(in srgb, var(--op-ink) 15%, transparent);
}
.bulk-bar button{font-family:inherit;cursor:pointer;border:none;padding:9px 20px;font-size:.88rem}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.lib-card{
  background:var(--op-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  overflow:hidden;
}
.lib-card .lc-img{position:relative}
.lib-card .lc-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-foam))}
.lib-card .lc-check{
  position:absolute;top:10px;left:10px;transform:scale(1.35);accent-color:var(--op-ocean);
}
.lib-card .lc-badges{position:absolute;bottom:8px;left:8px;display:flex;gap:6px;flex-wrap:wrap}
.badge{
  font-size:.65rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:.25em .75em;color:var(--op-white);
  background:color-mix(in srgb, var(--op-ink) 75%, transparent);
}
.badge.b-public{background:var(--op-palm)}
.badge.b-sale{background:var(--op-sunset)}
.badge.b-pending,.badge.b-restricted{background:color-mix(in srgb, var(--op-sunset) 75%, var(--op-ink))}
.lib-card .lc-body{padding:12px 14px}
.lib-card .lc-title{font-weight:800;font-size:.95rem;line-height:1.3}
.lib-card .lc-meta{font-size:.78rem;font-weight:700;color:color-mix(in srgb, var(--op-ink) 55%, var(--op-foam));margin-top:2px}
.lib-card details{border-top:1px solid color-mix(in srgb, var(--op-ink) 10%, transparent)}
.lib-card summary{
  cursor:pointer;list-style:none;padding:10px 14px;font-size:.82rem;font-weight:900;
  color:var(--op-ocean);letter-spacing:.05em;text-transform:uppercase;
}
.lib-card summary::-webkit-details-marker{display:none}
.lib-card details[open] summary{background:color-mix(in srgb, var(--op-ocean) 8%, var(--op-white))}
.pform{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px}
.pform .wide{grid-column:1/-1}
.pform label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--op-ocean);margin-bottom:3px;
}
.pform input,.pform select,.pform textarea{
  width:100%;font-family:inherit;font-size:.88rem;font-weight:700;color:var(--op-ink);
  padding:7px 9px;border-radius:8px;background:var(--op-foam);
  border:2px solid color-mix(in srgb, var(--op-ink) 15%, transparent);
}
.pform .actions{grid-column:1/-1;display:flex;gap:12px;align-items:center;margin-top:4px;flex-wrap:wrap}
.pform button{font-family:inherit;cursor:pointer;border:none;padding:9px 20px;font-size:.9rem}
.pform .check{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:800}

/* sourcing room (photos-source.php) */
.psrc-import{font-family:inherit;cursor:pointer;border:none;padding:9px 20px;font-size:.88rem}
.lc-meta a{color:var(--op-ocean);font-weight:800}
.psrc-pd{
  display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.88rem;cursor:pointer;
  padding:7px 14px;border-radius:var(--radius-pill);background:var(--op-foam);white-space:nowrap;
}
.psrc-pd:has(input:checked){background:var(--op-ocean);color:var(--op-white)}
.psrc-pd input{accent-color:var(--op-white)}