/* =============================================================================
   Finish Grid — [finish_grid] shortcode
   ============================================================================= */

.fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---- Card ---- */

.fgrid-item {
  background-color: #fff;
  border: 1px solid rgba(116, 140, 164, 0.2);
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px);
}

.fgrid.is-visible .fgrid-item {
  animation: fgrid-fade-in 0.6s ease forwards;
}

@keyframes fgrid-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Swatch ---- */

.fgrid-swatch {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}

.fgrid-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Finish gradients ---- */

.fgrid-swatch--chrome {
  background:
    linear-gradient(180deg,
      #f8f8f8 0%,
      #ffffff 18%,
      #d8d8d8 38%,
      #ebebeb 55%,
      #c8c8c8 72%,
      #e8e8e8 100%
    );
}

.fgrid-swatch--brushed-nickel {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg,
      #a8a8a8 0%,
      #c2c2c2 25%,
      #959595 50%,
      #b8b8b8 75%,
      #a0a0a0 100%
    );
}

.fgrid-swatch--matte-black {
  background: linear-gradient(160deg,
    #222222 0%,
    #2e2e2e 40%,
    #1a1a1a 70%,
    #252525 100%
  );
}

.fgrid-swatch--brushed-gold {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg,
      #c9a84c 0%,
      #e0c06a 25%,
      #b8923e 50%,
      #d4b05a 75%,
      #c0983e 100%
    );
}

.fgrid-swatch--oil-rubbed-bronze {
  background: linear-gradient(160deg,
    #3a2410 0%,
    #5a3820 28%,
    #4a2e18 55%,
    #6a4428 75%,
    #3e2812 100%
  );
}

.fgrid-swatch--polished-nickel {
  background: linear-gradient(180deg,
    #ececec 0%,
    #f8f8f8 20%,
    #e0e0e0 42%,
    #f2f2f2 62%,
    #dcdcdc 80%,
    #eeeeee 100%
  );
}

.fgrid-swatch--brushed-stainless {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg,
      #b0b8be 0%,
      #cdd3d8 22%,
      #9fa7ad 45%,
      #bec5ca 68%,
      #a8b0b6 100%
    );
}

.fgrid-swatch--bronze {
  background: linear-gradient(160deg,
    #7c4f2a 0%,
    #a06a3a 25%,
    #8a5830 50%,
    #b87840 72%,
    #7a4c28 100%
  );
}

/* ---- Footer row ---- */

.fgrid-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fgrid-name {
  font-size: 1.05rem;
  font-weight: 400;
  color: #0C244A;
  margin: 0;
  line-height: 1.2;
}

.fgrid-num {
  font-size: 0.78rem;
  color: #4a7fa5;
  font-weight: 400;
  flex-shrink: 0;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
  .fgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .fgrid {
    grid-template-columns: 1fr;
  }
}