/* ===========================================================
   Chetna Hardware — Premium Metallic Finish Swatches
   Replaces flat finish images with CSS-rendered metal discs.
   Each disc uses layered gradients to mimic a real polished /
   brushed metal surface with highlight, body sheen & shadow.
   =========================================================== */

/* ---- Reset / clean the old project-card chrome ---- */
.project-area .project-card,
.project-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  text-align: center;
}

/* Kill the orange corner triangle that appears on hover */
.project-card::after,
.project-card:hover::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The thumb wrapper centres the disc — no grey box, no dark overlay */
.project-card__thumb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 30px 10px 30px !important;
  min-height: 300px;
}
/* Kill the dark hover overlay on the thumb */
.project-card__thumb::before,
.project-card:hover .project-card__thumb::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Name / tag block — CENTERED below the disc (override absolute positioning) */
.project-card__content {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: auto !important;
  transform: none !important;
}
.project-card__tag {
  display: inline-block !important;
  background: #E8A317 !important;
  color: #1a1a2e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}
.project-card__title {
  display: inline-block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
/* hide the optional link circle if present */
.project-card__link { display: none !important; }

/* Base disc */
.finish-swatch {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .finish-swatch {
  transform: scale(1.04) rotate(-2deg);
}

/* Glossy top highlight — gives the "polished" wet look.
   Present on glossy & PVD discs. */
.finish-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 90% at 30% 18%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.35) 14%,
      rgba(255, 255, 255, 0.06) 32%,
      rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
  z-index: 2;
}

/* Soft bottom contact shadow inside the disc for depth */
.finish-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(110% 80% at 70% 92%,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.12) 26%,
      rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  z-index: 1;
}

/* Matt variant — kill the glossy highlight, add fine grain */
.finish-swatch--matt::before {
  background:
    radial-gradient(120% 90% at 30% 20%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.05) 24%,
      rgba(255, 255, 255, 0) 44%);
}

/* Brushed texture overlay for the satin / brushed finishes */
.finish-swatch--brushed {
  background-blend-mode: overlay;
}
.finish-swatch--brushed > .finish-swatch__grain {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(0, 0, 0, 0.05) 3px);
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* ---------- METAL COLOURWAYS ----------
   Each colourway is a vertical "polished bar" gradient:
   dark edge → bright mid sheen → dark edge, tinted per metal. */

/* COPPER */
.finish-swatch--copper {
  background: linear-gradient(160deg,
    #5e2a16 0%, #944221 14%, #c9703c 34%,
    #f0a368 50%, #c9703c 66%, #8a3d1e 86%, #4f2412 100%);
}
/* SATIN COPPER */
.finish-swatch--satin-copper {
  background: linear-gradient(160deg,
    #6a3a26 0%, #9c5d40 18%, #c08763 40%,
    #d9a684 52%, #b07a55 70%, #7c4a32 100%);
}
/* COPPER ANTIQUE */
.finish-swatch--copper-antique {
  background: linear-gradient(160deg,
    #2c1810 0%, #4a2a18 22%, #6e4023 46%,
    #8a5631 56%, #4d2c19 74%, #2c1810 100%);
}
/* RUSTIC COPPER */
.finish-swatch--rustic-copper {
  background: linear-gradient(160deg,
    #3a2014 0%, #6b3a22 26%, #9c5e3a 50%,
    #7a4528 64%, #4a2716 82%, #2a160d 100%);
}
/* COPPER EDGE */
.finish-swatch--copper-edge {
  background: linear-gradient(160deg,
    #2a1810 0%, #5a3320 30%, #b5774a 52%,
    #6a3d24 72%, #2f1b11 100%);
}

/* BRASS */
.finish-swatch--brass {
  background: linear-gradient(160deg,
    #6e5a16 0%, #a8861f 16%, #d8b73f 36%,
    #f3e08a 50%, #d8b73f 64%, #9c7c1c 84%, #5e4d12 100%);
}
/* SATIN BRASS */
.finish-swatch--satin-brass {
  background: linear-gradient(160deg,
    #7a6a32 0%, #a8954f 20%, #cbb878 42%,
    #ddcf9b 52%, #b6a263 70%, #7e6d36 100%);
}
/* BRASS ANTIQUE */
.finish-swatch--brass-antique {
  background: linear-gradient(160deg,
    #2e2710 0%, #4c4019 24%, #6e5d28 46%,
    #8a7636 56%, #524619 74%, #2c2510 100%);
}
/* BRASS EDGE */
.finish-swatch--brass-edge {
  background: linear-gradient(160deg,
    #2c2510 0%, #564818 30%, #b89a44 52%,
    #5e4f1d 72%, #2e2711 100%);
}

/* SATIN STEEL */
.finish-swatch--steel {
  background: linear-gradient(160deg,
    #6f7378 0%, #989da3 18%, #c3c8cd 40%,
    #e3e7ea 52%, #b4b9bf 70%, #797e84 100%);
}
/* SATIN CHROME */
.finish-swatch--chrome {
  background: linear-gradient(160deg,
    #5b6066 0%, #8d949b 14%, #cfd6dd 34%,
    #ffffff 50%, #c2c9d0 64%, #828990 86%, #4e5359 100%);
}

/* GRAPHITE */
.finish-swatch--graphite {
  background: linear-gradient(160deg,
    #232629 0%, #3a3e43 22%, #565b61 46%,
    #6b7178 54%, #41464b 72%, #232629 100%);
}
/* SATIN GRAPHITE */
.finish-swatch--satin-graphite {
  background: linear-gradient(160deg,
    #2b2e31 0%, #44484c 24%, #5d6165 48%,
    #6e7276 56%, #4a4e52 74%, #2d3033 100%);
}
/* JET BLACK */
.finish-swatch--black {
  background: linear-gradient(160deg,
    #0c0c0e 0%, #1d1d20 28%, #303034 50%,
    #1d1d20 72%, #0a0a0c 100%);
}

/* ROSE GOLD */
.finish-swatch--rose-gold {
  background: linear-gradient(160deg,
    #7a4536 0%, #b07560 16%, #d8a08c 36%,
    #f3cdbe 50%, #d8a08c 64%, #a96e59 84%, #6e3e30 100%);
}
/* SATIN ROSE GOLD */
.finish-swatch--satin-rose-gold {
  background: linear-gradient(160deg,
    #835246 0%, #ab7d6e 20%, #cba596 42%,
    #dcbcae 52%, #b58675 70%, #7e4f43 100%);
}
/* GOLD (PVD) */
.finish-swatch--gold {
  background: linear-gradient(160deg,
    #7a5e0f 0%, #b8901c 16%, #e6bb35 36%,
    #ffe98a 50%, #e6bb35 64%, #a87f17 84%, #6b520d 100%);
}
/* SATIN GOLD (PVD) */
.finish-swatch--satin-gold {
  background: linear-gradient(160deg,
    #856c2a 0%, #b39646 20%, #d4bb6f 42%,
    #e6d49a 52%, #bda35a 70%, #836a2c 100%);
}

/* Responsive disc sizing */
@media (max-width: 575px) {
  .project-card__thumb { min-height: 240px; padding: 22px; }
  .finish-swatch { width: 170px; height: 170px; }
}

/* ===========================================================
   FINISHES PAGE (team-card grid layout)
   =========================================================== */
/* Centre the disc, kill the orange/black radial glows & clip shape */
.team-card__image__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  padding: 24px 0 28px !important;
}
.team-card__image__item::before,
.team-card__image__item::after,
.team-card:hover .team-card__image__item::before,
.team-card:hover .team-card__image__item::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.team-card__image::after,
.team-card:hover .team-card__image::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}
/* image-item holds the disc; ensure disc sizing here too */
.team-card__image__item .finish-swatch {
  width: 200px;
  height: 200px;
  max-width: 80%;
}
.team-card:hover .finish-swatch {
  transform: scale(1.04) rotate(-2deg);
}
/* content already centered in cilox; just tidy spacing & colours */
.team-card__content { text-align: center !important; }
.team-card__title { margin-bottom: 6px !important; }
.team-card__title a { background: none !important; }
.team-card__title a:hover { color: #E8A317 !important; }
.team-card__designation {
  color: #E8A317 !important;
  background: transparent !important;
}
@media (max-width: 575px) {
  .team-card__image__item .finish-swatch { width: 160px; height: 160px; }
}