/* =========================================================
   Portfolio galleries — Weddings & Engagements / Portraits
   Photos load straight from Zenfolio. Uses the site's tokens (main.css).
   ========================================================= */

.pf{background:var(--paper);padding:0 0 clamp(60px,8vw,120px)}

/* ---------- category tabs (stick under the frosted header) ---------- */
.pf-tabs{
  position:sticky;top:var(--pf-top,76px);z-index:40;
  background:rgba(255,253,251,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.pf-tabs-inner{
  display:flex;gap:clamp(18px,3vw,44px);justify-content:center;
  max-width:1800px;margin:0 auto;padding:0 var(--pf-side);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pf-tabs-inner::-webkit-scrollbar{display:none}
.pf-tab{
  flex:none;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);padding:20px 2px 18px;position:relative;white-space:nowrap;
  transition:color .4s var(--ease);
}
.pf-tab .pf-count{
  font-family:var(--accent);font-style:italic;font-weight:500;font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--blush-deep);margin-left:.5em;
}
.pf-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.pf-tab:hover{color:var(--ink)}
.pf-tab[aria-selected="true"]{color:var(--ink)}
.pf-tab[aria-selected="true"]::after{transform:scaleX(1)}
.pf-tab:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

/* ---------- the grid ---------- */
/* Side margins as in the gallery app: 40 px on a computer, 8 px on a phone. */
.pf{--pf-side:40px}
@media (max-width:699px){.pf{--pf-side:8px}}
.pf-intro{
  padding:clamp(28px,4vw,52px) var(--pf-side) clamp(18px,2.4vw,30px);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
}
.pf-intro h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.pf-intro h2 em{color:var(--blush-deep)}
.pf-intro p{margin:0;color:var(--ink-soft);font-size:.92rem}
.pf-grid{position:relative;padding:0 var(--pf-side)}
.pf-grid:focus-visible{outline:none}
/* Groups overlap where the columns stagger; only the photos themselves take clicks. */
.pf-box{position:absolute;left:var(--pf-side);right:var(--pf-side);pointer-events:none}
.pf-box .pf-tile{pointer-events:auto}

.pf-tile{
  position:absolute;display:block;padding:0;border:0;margin:0;cursor:zoom-in;border-radius:0;
  background:var(--cream-2);overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.pf-tile img{
  width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 200ms ease;
}
.pf-tile img.in{opacity:1}
.pf-tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px;z-index:1}
.pf-tile.failed::after{
  content:"Tap to retry";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- full screen button (right end of the tab bar) ---------- */
.pf-full{
  position:absolute;right:clamp(10px,2.2vw,36px);top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.6em;appearance:none;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:.7em 1.2em;
  font-family:var(--body);font-weight:700;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pf-full svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.pf-full:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pf-full:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:1100px){
  .pf-full span{display:none}
  .pf-full{padding:.75em;right:8px;box-shadow:-14px 0 12px var(--paper)}
  .pf-tabs-inner{padding-right:58px}
}

.pf-empty{max-width:640px;margin:60px auto;text-align:center;color:var(--ink-soft)}

/* ---------- closing invitation ---------- */
.pf-close{text-align:center;padding:clamp(56px,7vw,96px) var(--gut) 0}
.pf-close h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:.5em}
.pf-close h2 em{color:var(--blush-deep)}
.pf-close p{color:var(--ink-soft);max-width:44ch;margin:0 auto 1.8em}

/* ---------- full-screen viewer ---------- */
.pf-viewer{
  position:fixed;inset:0;z-index:2000;background:rgba(22,19,17,.97);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease);touch-action:pan-y;
}
.pf-viewer.open{display:flex}
.pf-viewer.shown{opacity:1}
.pf-viewer img{
  max-width:calc(100vw - 2*clamp(12px,7vw,110px));max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);transition:opacity .25s var(--ease);
}
.pf-viewer img.loading{opacity:.35}
.pf-vbtn{
  position:absolute;appearance:none;border:0;background:none;color:#f7f2ec;cursor:pointer;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  transition:background .3s var(--ease);
}
.pf-vbtn:hover{background:rgba(255,255,255,.08)}
.pf-vbtn:focus-visible{outline:2px solid #f7f2ec;outline-offset:2px}
.pf-vbtn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4}
.pf-prev{left:clamp(4px,2vw,30px);top:50%;transform:translateY(-50%)}
.pf-next{right:clamp(4px,2vw,30px);top:50%;transform:translateY(-50%)}
.pf-x{right:clamp(4px,2vw,30px);top:clamp(4px,2vw,24px)}
.pf-vcount{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vh,30px);text-align:center;
  color:rgba(247,242,236,.75);font-family:var(--accent);font-style:italic;font-size:1.05rem;letter-spacing:.04em;
}
@media (max-width:640px){
  .pf-prev,.pf-next{display:none}
  .pf-viewer img{max-width:100vw;max-height:calc(100dvh - 110px)}
  .pf-tabs-inner{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .pf-tile img,.pf-viewer,.pf-tab::after{transition:none}
}

/* ---------- without JavaScript: the first photos of each category ---------- */
.pf-noscript{padding:0 var(--pf-side)}
.pf-noscript h2{font-size:1.6rem;margin:32px 0 14px}
.pf-noscript div{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:3px}
.pf-noscript img{width:100%;height:auto}