/* kusio.net — components
   Styling for the markup built in index.html's renderGallery() and renderHighlights().
   These elements are generated from data/gallery.json and data/highlights.json, so their
   styling is written once here rather than repeated per tile in the generated string.
   Hover and open/close motion is still GSAP writing inline transforms over the top. */

/* ---------- 02/1 Select highlights ---------- */
.hl-line{
  display:block;
  border-top:1px solid var(--border);
  padding:16px 0;
  font:500 17px/1.35 Archivo,sans-serif;
  color:var(--text-bright);
}
.hl-tag{
  display:block;
  margin-top:4px;
  text-align:right;
  white-space:nowrap;
  font-weight:700;
  color:var(--lime);
}

/* ---------- 02/2 Design samples ---------- */
.gal-row{
  border-bottom:1px solid var(--border);
  padding:20px 0;
}
.gal-row:last-child{
  border-bottom:0;
  padding:20px 0 0;
}
.gal-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  cursor:pointer;
}
.gal-name{
  flex:0 1 300px;
  font:900 clamp(22px,2.4vw,30px)/1 Heuvel,Archivo,sans-serif;
  color:var(--paper);
}
.gal-row--open .gal-name{ color:var(--lime) }
.gal-meta{
  flex:1 1 200px;
  font:600 12px/1.4 Archivo,sans-serif;
  letter-spacing:.1em;
  color:var(--muted-on-dark);
}
.gal-sign{
  position:relative;
  flex:none;
  width:24px;
  height:24px;
  color:var(--muted-on-dark);
}
.gal-row--open .gal-sign{ color:var(--lime) }
.gal-sign i{
  position:absolute;
  background:currentColor;
}
.gal-sign i:first-child{ left:0; top:11px; width:24px; height:2px }
.gal-sign i:last-child{ left:11px; top:0; width:2px; height:24px }
.gal-body{ overflow:hidden; height:0 }
.gal-row--open .gal-body{ overflow:visible; height:auto }
.gal-grid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:20px;
  align-items:flex-start;
  justify-content:center;
}
.gal-count{
  margin-top:10px;
  font:600 12px/1 Archivo,sans-serif;
  letter-spacing:.14em;
  color:var(--muted-on-dark);
}

/* ---------- gallery tile ---------- */
.tile{
  position:relative;
  width:min(280px,100%);
  aspect-ratio:14/11;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:var(--panel);
}
.tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.tile-cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:var(--well);
  border-top:1px solid var(--border);
  padding:10px 12px;
  font:400 12px/1.4 Archivo,sans-serif;
  color:var(--text-on-dark);
  opacity:0;
  transform:translateY(100%);
  pointer-events:none;
}