/* =================================================
   gallery.css — Grid, Lightbox, Album layout
   Don Macaron Gallery
   ================================================= */

/* ─ ALBUM GRID ────────────────────────────────────────────── */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3px; margin: 1rem 0;
}
@media (min-width:640px)  { .album-grid { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } }
@media (min-width:1024px) { .album-grid { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); } }
@media (min-width:1400px) { .album-grid { grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); } }

.album-card {
  position: relative; aspect-ratio: 4/3;
  overflow: hidden; border: 1px solid var(--border);
  cursor: pointer; background: var(--dim2);
  display: block; text-decoration: none;
  transition: border-color 0.15s;
}
.album-card:hover { border-color: var(--accent); z-index: 1; }
.album-card img   { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.35s ease; }
.album-card:hover img { transform: scale(1.04); }

/* ─ ALBUM OVERLAY ───────────────────────────────────────── */
.album-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  padding: 1.5rem 0.75rem 0.6rem;
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.album-card:hover .album-card-overlay { transform: translateY(0); }

body.names-always .album-card-overlay {
  transform: translateY(0) !important;
  background: linear-gradient(transparent 20%, rgba(0,0,0,0.82));
}

.album-card-no-cover {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem; color:var(--border2);
}
.album-card-no-cover .album-icon { font-size:2rem; }

/*
  Album title color:
  - Default: uses CSS var(--fg) (phosphor green)
  - Per-album: uses --album-title-color custom property set inline
    on .album-card-overlay via style attribute in template
  - Hover in always-visible mode: shifts to accent color
*/
.album-card-title {
  font-size: 1rem;
  color: var(--album-title-color, var(--fg));
  letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  transition: color 0.15s;
}
body.names-always .album-card:hover .album-card-title { color: var(--accent); }

.album-card-count { font-size: 0.78rem; color: var(--accent); margin-top: 0.2rem; }

/* ─ MEDIA GRID ────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 3px; margin: 1rem 0;
}
@media (min-width:640px)  { .media-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); } }
@media (min-width:1024px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); } }
@media (min-width:1400px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); } }

.media-thumb {
  position: relative; aspect-ratio: 1;
  overflow: hidden; border: 1px solid var(--border);
  cursor: pointer; background: var(--dim2); transition: border-color 0.12s;
}
.media-thumb:hover      { border-color: var(--accent); }
.media-thumb img        { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s ease; }
.media-thumb:hover img  { transform: scale(1.06); }
.media-thumb-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--border2); font-size:0.75rem; letter-spacing:0.1em; }

/* ─ LAZY FADE-IN ────────────────────────────────────────── */
.lazy-item { opacity:0; transform:translateY(8px); transition:opacity 0.35s ease, transform 0.35s ease; }
.lazy-item.visible { opacity:1; transform:translateY(0); }

/* ─ ALBUM PAGE HEADER ────────────────────────────────────── */
.album-header { margin-bottom: 1.5rem; }
.album-title  { font-size:2rem; letter-spacing:0.04em; margin-bottom:0.4rem; }
.album-desc   { color:var(--border2); font-size:0.9rem; margin-bottom:0.75rem; line-height:1.5; }
.album-meta   { font-size:0.8rem; color:var(--border2); display:flex; gap:1.5rem; flex-wrap:wrap; }

.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:var(--border2); margin-bottom:1.25rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--border2); } .breadcrumb a:hover { color:var(--accent); }
.breadcrumb-sep { color:var(--border); }

/* ─ LIGHTBOX ────────────────────────────────────────────── */
.lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.97); z-index:500;
  align-items:center; justify-content:center; flex-direction:column;
}
.lightbox.is-open { display:flex; }
.lightbox-img { max-width:90vw; max-height:78vh; object-fit:contain; border:1px solid var(--border); display:block; user-select:none; transition:opacity 0.2s; }
.lightbox-controls { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; background:linear-gradient(rgba(0,0,0,0.85), transparent); z-index:10; }
.lightbox-counter  { color:var(--border2); font-size:0.85rem; letter-spacing:0.1em; }
.lightbox-filename { color:var(--border2); font-size:0.8rem; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lightbox-close { background:none; border:1px solid var(--border2); color:var(--fg); font-family:var(--font); font-size:1rem; padding:0.2rem 0.7rem; cursor:pointer; letter-spacing:0.1em; transition:all 0.12s; }
.lightbox-close:hover { border-color:var(--accent); color:var(--accent); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.65); border:1px solid var(--border); color:var(--fg); font-family:var(--font); font-size:2rem; line-height:1; padding:0.6rem 1rem; cursor:pointer; transition:all 0.12s; user-select:none; z-index:10; }
.lightbox-nav:hover { border-color:var(--accent); color:var(--accent); }
.lightbox-prev { left:0.75rem; } .lightbox-next { right:0.75rem; }
.lightbox-bottom { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:0.75rem; padding:0.75rem 1rem; background:linear-gradient(transparent, rgba(0,0,0,0.9)); z-index:10; }
.lightbox-dl { background:none; border:1px solid var(--border2); color:var(--border2); font-family:var(--font); font-size:0.9rem; padding:0.3rem 0.9rem; cursor:pointer; text-decoration:none; display:inline-block; letter-spacing:0.06em; transition:all 0.12s; }
.lightbox-dl:hover   { border-color:var(--accent); color:var(--accent); }
.lightbox-dl.hi      { border-color:var(--fg); color:var(--fg); }
.lightbox-dl.hi:hover{ border-color:var(--accent); color:var(--accent); }

/* ─ SUB-ALBUMS ───────────────────────────────────────────── */
.sub-albums-section { margin-bottom:2rem; }
.sub-albums-label { font-size:0.85rem; color:var(--accent); letter-spacing:0.15em; margin-bottom:0.75rem; border-bottom:1px solid var(--border); padding-bottom:0.4rem; }

/* ─ MOBILE ───────────────────────────────────────────────── */
@media (max-width:640px) {
  .lightbox-nav { font-size:1.5rem; padding:0.4rem 0.7rem; }
  .lightbox-dl  { font-size:0.8rem; padding:0.25rem 0.6rem; }
  .lightbox-img { max-height:70vh; }
  .lazy-item    { opacity:1; transform:none; }
}