/*
Theme Name: Hunter Hart Like Portfolio v15
Author: ChatGPT
Description: Sidebar + Masonry Grid + Lightbox (image-bounded zones) + Infinite Scroll.
Version: 15.0.0
Text Domain: hhlp
*/

:root{ --bg:#f7f7f7; --text:#111; --muted:#777; --gap:16px; --sidebar-w:220px; }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text); }

.site{ display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100vh; }
.sidebar{ position:sticky; top:0; align-self:start; padding:24px; border-right:1px solid #eaeaea; height:100vh; overflow:auto; background:#fff; }
.brand{font-weight:700;font-size:22px;margin-bottom:6px;}
.tagline{font-size:12px;color:var(--muted);margin-bottom:16px;}
.nav, .nav a{list-style:none;padding:0;margin:0;text-decoration:none;color:var(--text);}
.nav li{padding:6px 0;font-size:14px;}
.nav a:hover{opacity:.7}

/* Masonry via columns */
.grid-wrap{ padding:24px; }
.grid{ column-count:4; column-gap:var(--gap); }
@media (max-width:1200px){ .grid{ column-count:3; } }
@media (max-width:900px){ .site{grid-template-columns:1fr;} .sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid #eaeaea} .grid{ column-count:2; } }
@media (max-width:600px){ .grid{ column-count:1; } }

.card{ display:block; break-inside:avoid; margin-bottom:var(--gap); background:#fff; border-radius:0; box-shadow:0 1px 1px rgba(0,0,0,.04); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; }
.card img{ width:100%; height:auto; object-fit:contain; display:block; transition: transform .2s ease, filter .2s ease; }
.card:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.card:hover img{ filter:brightness(1.08); transform:scale(1.02); }

/* Lightbox */
.lightbox-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999; }
.lightbox-backdrop.open{ display:flex; }

.lightbox-wrapper{ position:relative; display:inline-block; }
.lightbox-image{ display:block; max-width:min(92vw,1600px); max-height:90vh; transition: filter .25s ease, transform .25s ease; }

/* Zones only over the image */
.lightbox-zone{ position:absolute; top:0; bottom:0; width:50%; z-index:10000; }
.lightbox-left{ left:0; cursor:w-resize; }
.lightbox-right{ right:0; cursor:e-resize; }

/* Disable lightbox hover brightening (effect is on thumbnails instead) */
.lightbox-left:hover ~ .lightbox-image,
.lightbox-right:hover ~ .lightbox-image{ filter:none !important; transform:none !important; }

.lightbox-close{ position:fixed; top:16px; right:16px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:0; padding:10px 14px; font-size:14px; cursor:pointer; }

.footer{ padding:24px; color:var(--muted); font-size:12px; text-align:center; }