/* container + spacing */
.sg-container { padding: 32px 4%; }

/* title + subtitle (no font-family/size overrides -> system defaults) */
#sg-finishes-title { text-align: center; margin: 8px 0 6px; }
.sg-subtitle { text-align: center; margin: 0 0 18px; color: #444; }

/* grid: 12 columns for precise maths, fixed row-height */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 160px;
  gap: 12px;
}

/* tile basics */
.sg-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.sg-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.sg-tile:hover img { transform: scale(1.03); }

/* bottom label */
.sg-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px;
  text-align: center;
  background: rgba(0,0,0,0.50);
  color: #fff;
  display: block;
  white-space: normal;
  font-weight: 500;
}

/* === explicit placements: these ensure every grid cell is used (no gaps) === */
/* Row 1-2 */
.sg-polished { grid-column: 1 / span 6; grid-row: 1 / span 2; }   /* 6 cols x 2 rows */
.sg-honed   { grid-column: 7 / span 3; grid-row: 1 / span 2; }   /* 3 cols x 2 rows */
.sg-leathered { grid-column: 10 / span 3; grid-row: 1 / span 1; } /* top-right */
.sg-flamed    { grid-column: 10 / span 3; grid-row: 2 / span 1; } /* below leathered */

/* Row 3 (three equal tiles, each 4 columns) */
.sg-sand       { grid-column: 1 / span 4; grid-row: 3 / span 1; }
.sg-unpolished { grid-column: 5 / span 4; grid-row: 3 / span 1; }
.sg-brushed    { grid-column: 9 / span 4; grid-row: 3 / span 1; }

/* Row 4 (6 + 3 + 3 columns) */
.sg-lapotra { grid-column: 1 / span 6; grid-row: 4 / span 1; }
.sg-bush    { grid-column: 7 / span 3; grid-row: 4 / span 1; }
.sg-blog    { grid-column: 10 / span 3; grid-row: 4 / span 1; }

/* Responsive: at smaller widths we remove explicit placement so tiles flow by DOM order */
@media (max-width: 1024px) {
  .sg-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
  }
  .sg-grid .sg-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Mobile-friendly tweaks */
@media (max-width: 700px) {
  .sg-container {
    padding-bottom: 48px;
  }
  .sg-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto; /* let rows grow with content */
  }
  .sg-grid .sg-tile {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 4px; /* easier tap targets */
    box-sizing: border-box;
  }
  .sg-tile img {
    height: auto; /* avoid cropping images */
  }
  .sg-label {
    padding: 8px;
    font-size: 1rem;
    line-height: 1.2;
  }
}