/* grid based changes to see if this works or not */

:root{
  --max-width:1200px;
  --accent:#ff3f00;
  --body:#202828;
  --muted:#666666b9;
}
*{box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color:var(--body);
  margin:0;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 40px;
  border-bottom:0px solid #eee;
}
.brand .site-title a img{max-height: 57px;}
.brand h1{margin:20px 0 0;font-weight:10;letter-spacing:1px}
.brand .tag{margin:2px 20px 0;color:var(--accent);font-weight:500;font-size:0.9rem}
.site-nav a{margin-left:20px;font-size:0.9rem;color:var(--muted);text-decoration:none;opacity:0.9}
.site-nav:hover a{color:var(--accent)}
.content{max-width:97%;margin:40px auto; padding:0 5px}
.intro .lead{font-size:1.1rem;color:var(--body);text-align:center;margin-bottom:3px}
.intro .note{font-size:0.9rem;color:var(--muted);text-align:center;margin-bottom:90px}

.site-footer{
  display: block;
  left: 0;
  bottom: 0%;
  width: 100%;
  background-color: rgb(255, 255, 255);
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
  border-top:0.6px solid var(--muted);
}

/* Container grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 30px;
  max-width: var(--max-width, 1200px);
  grid-row-gap: 60px;
  place-content: center;
  justify-content: center;
  margin: 0 auto;
}

/* Card base */
.card {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  max-height:  380px;
  text-decoration: none;
  color: inherit;
  max-width: auto;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

/* Thumbnail with fixed aspect ratio */
.card .thumb {
  width: 100%;
  display: inherit;
  overflow: hidden;
  aspect-ratio: auto;
  position: sticky;
  align-self: center;
  transition: transform .5s ease;
}

/* Wide / wider spans for grid */
.card.wide {
  grid-column: span 2;
}
.card.wider {
  grid-column: span 3;
}
.card.widest {
  grid-column: span 4;
}

.card .thumb img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}

.image-row {
  display: flex;
  align-items: center; /* vertical alignment */
  
}
.image-row .card {
  flex-grow: 1;
  max-height: 380px;
}

.flex-row {
  display: flex;
  align-items: center;
  height: 380px; /* fixed row height */
}

.flex-row img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}


/* Hover scale inside cutout */
.card:hover .thumb {
  transform: scale(1.05);
}

.card .meta{margin-top:15px}
.card .title{font-size:0.0rem;margin:0px}
.card .short{color:var(--body);margin-top:0px;font-size:0rem}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding-top:100px;background:rgba(255, 255, 255, 0.966);overflow:auto;width:100%;height:100%;z-index:1000;
}
.lightbox.hidden{display:none}
.lb-inner{max-width:90vw;max-height:90vh;place-content:center;text-align:center;color:#707070}
.lb-inner img{max-width:80vw;max-height:80vh;width:auto;height:auto;aspect-ratio:auto;place-content:center;object-fit:contain;border-radius:3px}
.lb-close
{
  position:absolute;
  background: #ffffff;
  border: 5px;
  border-radius: 15px;
  color:#ff3f00;
  font-size:32px;
  cursor:pointer;
  
}
.lb-close{right:25px;top:18px}
.btn{display:none;padding:8px 8px;border-radius:4px;background:#ffffff;text-align:center;color:#ffffff;text-decoration:none;margin-top:12px}

/* responsive tweaks */
@media (max-width:600px){

  .intro .lead{font-size:small;margin-bottom:9px;padding-left:15px;padding-right:15px}
  .intro .note{font-size:smaller;color:var(--body);margin-bottom:60px;padding-left:15px;padding-right:15px}
  .site-header{flex-direction:column;align-items:center;padding:2px}
  .site-nav{margin-top:20px;font-size:x-small;}
  .grid{gap:25px;display:flex;flex-direction:column;flex-wrap:wrap;justify-items:center;}
  .card {max-height:100%;max-width:75%;}
  .site-footer{font-size:small;padding-left:15px;padding-right:15px}
  body.lb-open {overflow: hidden}


}