/* style.css — Full updated gallery styles
   - Filenames removed everywhere
   - Lightbox nav visible on desktop, hidden on mobile
   - Heart on top-right (thumb + lightbox)
   - No big white "footer" under thumbnails
   Add <meta name="viewport" content="width=device-width, initial-scale=1"> in your HTML head.
*/

/* ========== variables & reset ========== */
:root{
  --bg: #f6f7f9;
  --muted: #7b8694;
  --accent: #e0245e;            /* heart color */
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
  --card-shadow: 0 12px 30px rgba(17,24,39,0.06);
  --card-shadow-2: 0 6px 18px rgba(17,24,39,0.05);
  --radius: 12px;
  --gap: 20px;
  --max-width: 1180px;
  --thumb-ratio: 4/5;           /* adjust if you want different thumb shape */
  --lightbox-max-width: 1200px;
  --transition-fast: 160ms;
}

/* base reset */
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  background: linear-gradient(180deg,#f7f8f9,var(--bg));
  color: #111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}
.container{ max-width:var(--max-width); margin:28px auto; padding:18px; }

/* ========== Header ========== */
.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:18px;
  text-align:center;
}
.brand h1{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.2px;
}
.brand p{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}
.actions{ display:none; }

/* ========== Grid ========== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  align-items:start;
  margin-top:10px;
}

/* ========== Thumbnail card ========== */
.thumb{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg,#fff,#fbfbfd);
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  min-height: 0;         /* avoid fixed empty white space */
}
.thumb:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px rgba(17,24,39,0.08); }

/* consistent thumbnail shape */
.thumb-img{
  display:block;
  width:100%;
  aspect-ratio: var(--thumb-ratio);
  object-fit: cover;
  vertical-align: middle;
  user-select:none;
  transition: transform .28s ease;
  background: #efefef;
}
.thumb:hover .thumb-img{ transform: scale(1.03); }

/* remove old footer area */
.thumb-footer{ display:none !important; }

/* HIDE ALL FILE/INDEX CAPTIONS EVERYWHERE (thumbnail and lightbox)
   This aggressively hides any captions that might be injected or named differently.
*/
.thumb-caption,
.thumb-meta,
.lb-caption,
.caption,
.file-name,
.img-filename,
.image-label {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* top-right overlay container (used to absolutely place buttons) */
.thumb-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;   /* let buttons inside be clickable via pointer-events:auto on button */
}

/* heart button (top-right) on thumbnails */
.thumb-overlay .heart-btn{
  position:absolute;
  top:10px;
  right:10px;
  pointer-events:auto;
  border:0;
  background: rgba(0,0,0,0.26);
  padding:8px;
  width:40px;
  height:40px;
  border-radius:10px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(4px);
  transition: transform .12s ease, background .12s ease, color .12s ease;
  font-size:16px;
  line-height:1;
  box-shadow: var(--card-shadow-2);
}
.thumb-overlay .heart-btn:active{ transform: scale(.96); }
.thumb-overlay .heart-btn.liked{
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(224,36,94,0.08);
}

/* small footer text below gallery */
.footer{ margin-top:28px; color:var(--muted); font-size:13px; text-align:center; }

/* ========== LIGHTBOX ========== */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition: opacity .18s ease;
  z-index:1400;
  background: rgba(0,0,0,0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.lightbox.open{ visibility:visible; opacity:1; }

/* panel fills and prevents page peek-through */
.lightbox-panel{
  position:relative;
  width:100%;
  height:100vh;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  padding:20px;
  box-sizing:border-box;
}

/* image box: contain so nothing is cropped */
.lb-img-wrap {
  position: relative;
  width: 100%;
  max-width: var(--lightbox-max-width);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 🚫 REMOVE weird transparent box behind image */
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}


/* show whole image with contain (no cropping) */
.lb-img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius:6px;
  transition: opacity .12s ease, transform .12s ease;
  opacity: 1;
  box-shadow: 0 4px 26px rgba(0,0,0,0.45);
}

/* caption hidden (we removed filenames) */
.lb-caption{ display:none !important; }

/* spinner while loading */
.lb-spinner{
  position:absolute;
  width:48px;height:48px;border-radius:50%;
  border:4px solid rgba(255,255,255,0.12);
  border-top-color:rgba(255,255,255,0.9);
  animation: spin 1s linear infinite;
  display:none;
  z-index:1302;
}
@keyframes spin{ to { transform:rotate(360deg); } }

/* ========== NAV BUTTONS: VISIBLE ON DESKTOP, HIDDEN ON MOBILE ========== */
/* Visible by default (desktop / large screens) */
.lb-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color:#fff;
  border:0;
  width:56px;
  height:56px;
  border-radius:8px;
  font-size:32px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  z-index:1300;
}
.lb-prev{ left:14px; }
.lb-next{ right:14px; }

/* close button (always visible) */
.lb-close{
  position:absolute;
  top:14px;
  right:14px;
  background:#111;
  color:#fff;
  border-radius:50%;
  width:44px;height:44px;border:0;font-size:18px;cursor:pointer;
  z-index:1303;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

/* heart in lightbox (top-right, near close) */
.lb-heart{
  position:absolute;
  right: clamp(12px, 6vw, 80px);
  top: 14px;
  z-index:1303;
  border:0;
  background: rgba(0,0,0,0.28);
  color:#fff;
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.lb-heart.liked{ color:var(--accent); background: rgba(255,255,255,0.06); box-shadow:0 8px 22px rgba(224,36,94,0.12); }

/* prevent background scrolling while lightbox open */
body.no-scroll{
  overflow:hidden !important;
  position:fixed !important;
  width:100% !important;
  top:0; left:0;
}

/* ========== Responsive tweaks ========== */
@media (max-width:1100px){
  .grid{ gap:16px; }
  .thumb-img{ aspect-ratio: var(--thumb-ratio); }
  .lb-img{ max-width: calc(100% - 48px); max-height: calc(100vh - 140px); }
}

/* ========== Mobile behavior ========== */
@media (max-width:640px){
  .header{ padding-bottom:6px; }
  .brand h1{ font-size:20px; }
  .brand p{ font-size:13px; color:var(--muted); }

  .lb-img {
  display: block;
  margin: 0 auto;
}

  /* 2 columns on phones, 1 on tiny */
  .grid{ grid-template-columns: repeat(2, 1fr); gap:14px; margin-top:8px; }
  @media (max-width:420px){ .grid{ grid-template-columns: 1fr; } }

  /* make thumbnails touch-friendly */
  .thumb-img{ aspect-ratio: var(--thumb-ratio); height:auto; }
  .thumb{ min-height:0; border-radius:12px; }

  /* larger heart inside thumbnail */
  .thumb-overlay .heart-btn{
    top:10px; right:10px; width:44px; height:44px; font-size:18px;
  }

  /* Lightbox: dark backdrop and panel fills viewport */
  .lightbox{
    align-items:flex-start;
    padding-top:12px;
    background: rgba(0,0,0,0.95) !important;
  }
  .lightbox-panel{ padding:10px; height:100vh; }

  .lb-img-wrap{ padding:8px; background: transparent !important; box-shadow:none !important; }
  .lb-img{
    max-width: calc(100% - 28px) !important;
    max-height: calc(100vh - 160px) !important;
    object-fit: contain;
    border-radius:8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  }

  /* *** CRITICAL: HIDE NAV BUTTONS ON MOBILE ONLY (keeps them on desktop) *** */
  .lb-nav,
  .lb-prev,
  .lb-next {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* controls: keep close + heart reachable but off the image a bit */
  .lb-close{ right:12px; top:12px; width:44px; height:44px; }
  .lb-heart{
    right: clamp(10px, 10vw, 64px);
    top:12px;
    width:44px; height:44px; font-size:20px;
  }

  .lb-caption{ left:12px; bottom:10px; font-size:13px; }

  body.no-scroll{ position:fixed; width:100%; top:0; left:0; }
  .container{ padding-bottom:26px; }
}

/* very small phones adjustments */
@media (max-width:420px){
  .grid{ gap:12px; }
  .thumb-img{ aspect-ratio: var(--thumb-ratio); }
  .thumb{ min-height:0; }
  .lb-img{ max-height: calc(100vh - 140px) !important; }
}

/* utility */
.hidden{ display:none !important; }

@media (min-width: 641px) {
  .lb-img-wrap {
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);  /* same dark box as before */
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.7);
  }

  .lb-img {
    max-width: 100%;
    max-height: calc(100vh - 200px); /* extra room */
    object-fit: contain;
    border-radius: 8px;
  }

  .lb-heart {
    top: 20px;
    right: 20px;
  }
}

/* === HOMEPAGE: gallery cards === */
.grid.gallery-list {
  /* turn the homepage into a nice card grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px;
}

.gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.gallery-figure{
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.gallery-figure:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px rgba(17,24,39,0.08); }

.gallery-cover-box{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;      /* change to 3/2 or 1/1 if you prefer */
  background: #efefef;
  display: grid;
  place-items: center;      /* centers the image when letterboxed */
}

/* constrain the cover image */
.gallery-cover{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* show entire image */
  display: block;
}

/* name under the cover */
.gallery-name{
  text-align: center;
  font-weight: 600;
  padding: 12px 12px 14px;
  color: #111;
}

/* small tweak so images/links on the left don’t appear */
.brand + .grid.gallery-list {
  margin-top: 16px;
}