/* === Square Masonry (Jenga) Grid — WHITE Cards ===
   - Small: 1x1
   - Medium: 2x2 (MAX)
   - Random order handled by script in index.html
   - White cards, subtle shadows, gradient titles, thumbnail support
*/
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  grid-auto-flow:dense;
  gap:18px;
  max-width:1400px;
  padding:0 20px;
  margin:0 auto;
}

.blog-tile{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  color:#333;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-tile::before{ content:none; } /* ensure no old overlays */

.blog-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

/* Inner content */
.tile-image{
  display:flex; align-items:center; justify-content:center;
  width:60%; height:60%;
  margin-bottom:14px;
  border-radius:12px;
  background:#f9f9f9;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.06);
}
.tile-image i{ font-size:clamp(36px,6vw,52px); opacity:.9; }

/* Thumbnail support */
.tile-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* Title — gradient to match site heading */
.blog-tile h3{
  margin:0;
  padding:0 10px;
  font-weight:600;
  line-height:1.3;
  font-size:clamp(16px,1.6vw,20px);
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* Size variations (MEDIUM is the max) */
.blog-tile.small{  grid-column:span 1; grid-row:span 1; }
.blog-tile.medium{ grid-column:span 2; grid-row:span 2; }

/* Scale inner elements on medium tiles */
.blog-tile.medium h3{ font-size:clamp(18px,1.8vw,22px); }
.blog-tile.medium .tile-image{ width:65%; height:65%; }
.blog-tile.medium .tile-image i{ font-size:clamp(44px,7vw,68px); }

/* Responsive */
@media (max-width:1024px){
  .blog-grid{ gap:16px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .blog-tile.medium{ grid-column:span 2; grid-row:span 2; }
}
@media (max-width:760px){
  .blog-grid{ gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); padding:0 14px; }
  .blog-tile,
  .blog-tile.medium{ grid-column:span 1; grid-row:span 1; }
}