/* ==========================================================================
   Rang Mitra Painting — Cards (cards.css)
   Reusable card components: space, texture, colour-combination, paint-shade,
   project, service, and review cards.
   ========================================================================== */

/* Generic media card shell used across sections */
.media-card {
  flex: none;
  width: 230px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.media-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.media-card__img {
  width: 100%; height: 150px; object-fit: cover;
  background: linear-gradient(135deg, #ece7fb, #e3eeff);
}
.media-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.media-card__title { font-size: 0.98rem; font-weight: 700; }
.media-card__sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Texture card (square swatch + label)
   -------------------------------------------------------------------------- */
.texture-card {
  flex: none;
  width: 120px;
  text-align: center;
}
.texture-card__swatch {
  width: 120px; height: 120px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  background-size: cover; background-position: center;
  overflow: hidden;                 /* clip the optional photo to rounded corners */
  transition: transform var(--transition), box-shadow var(--transition);
}
/* Optional real photo on a texture swatch (CSS gradient shows as fallback) */
.texture-card__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.texture-card:hover .texture-card__swatch { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.texture-card.is-selected .texture-card__swatch { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.texture-card__label { font-size: 0.78rem; font-weight: 600; margin-top: var(--space-2); }

/* Procedurally-styled texture fills (no image assets needed) */
.tx-smooth   { background: linear-gradient(135deg,#fdfdfd,#eef0f4); }
.tx-royale   { background:
                 radial-gradient(circle at 30% 30%, #fff 0 6px, transparent 7px) ,
                 radial-gradient(circle at 70% 65%, #fff 0 5px, transparent 6px),
                 linear-gradient(135deg,#b9a4f5,#8a72f6); background-size:24px 24px,28px 28px,cover; }
.tx-stucco   { background:
                 repeating-linear-gradient(45deg,#f2f2f4 0 6px,#e7e7ec 6px 12px); }
.tx-concrete { background:
                 linear-gradient(135deg,#cfd2d8,#9ca0aa);
                 box-shadow: inset 0 0 24px rgba(0,0,0,0.15); }
.tx-brick    { background:
                 repeating-linear-gradient(0deg,#9c4a32 0 14px,#8a3f29 14px 16px),
                 repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.15) 38px 40px);
                 background-blend-mode: multiply; }
.tx-stone    { background:
                 conic-gradient(from 45deg,#cdbfa8,#b7a888,#cdbfa8);
                 box-shadow: inset 0 0 20px rgba(120,100,70,.4); }
.tx-sponge   { background:
                 radial-gradient(circle at 20% 30%, #fff6e6 0 12%, transparent 13%),
                 radial-gradient(circle at 75% 60%, #fdeccb 0 14%, transparent 15%),
                 linear-gradient(135deg,#f7e6c4,#efd6a8); }
.tx-marble   { background:
                 linear-gradient(135deg,#fdfdfd 0%,#e9ecf1 50%,#f6f7fa 100%);
                 box-shadow: inset -10px -10px 30px rgba(180,190,210,.4); }
.tx-metallic { background: linear-gradient(135deg,#d9dde6,#9aa3b5 45%,#eef1f6 70%,#aab1c2); }
.tx-designer { background:
                 repeating-linear-gradient(135deg,#e7defb 0 10px,#d8c9f8 10px 20px); }
.tx-lime     { background:
                 radial-gradient(circle at 25% 20%, #fbf6ec 0 18%, transparent 19%),
                 radial-gradient(circle at 72% 58%, #f1e6d2 0 22%, transparent 23%),
                 radial-gradient(circle at 50% 88%, #e9dcc4 0 16%, transparent 17%),
                 linear-gradient(135deg,#f6eddd,#e6d8bf);
                 box-shadow: inset 0 0 18px rgba(150,130,90,.25); }
.tx-travertine { background: linear-gradient(135deg,#efe6d6,#d8c7a8); box-shadow: inset 0 0 16px rgba(150,120,80,.3); }
.tx-suede      { background: linear-gradient(135deg,#c9b8a8,#a8917c); box-shadow: inset 0 0 18px rgba(90,70,50,.25); }
.tx-sandstone  { background: repeating-linear-gradient(0deg,#e8d8bf 0 8px,#dcc9a8 8px 16px); }
.tx-venetian   { background: linear-gradient(135deg,#f3ede1 0%,#cdbfa6 50%,#f0e8d8 100%); box-shadow: inset -8px -8px 24px rgba(160,140,100,.35); }
.tx-pearl      { background: linear-gradient(135deg,#fdfbf7,#e9e2d6 60%,#f7f2e9); box-shadow: inset 0 0 16px rgba(200,190,170,.4); }
.tx-rustic     { background: conic-gradient(from 30deg,#b08a5e,#8f6a42,#b08a5e); box-shadow: inset 0 0 20px rgba(80,50,20,.4); }
.tx-linen      { background:
                   repeating-linear-gradient(0deg,#f2ece0 0 3px,#e7dccb 3px 6px),
                   repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.03) 3px 6px); }
.tx-cement     { background: linear-gradient(135deg,#d2d4d7,#a8abb0); box-shadow: inset 0 0 22px rgba(0,0,0,.18); }

/* --------------------------------------------------------------------------
   Colour-combination card (room image + 4-swatch palette strip)
   -------------------------------------------------------------------------- */
.combo-card {
  flex: none;
  width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.combo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.combo-card__img { width: 100%; height: 140px; object-fit: cover; background: #efeafb; }
.combo-card__palette { display: flex; height: 26px; }
.combo-card__palette span { flex: 1; }
.combo-card__body { padding: var(--space-3) var(--space-4); }
.combo-card__title { font-size: 0.92rem; font-weight: 700; }
.combo-card__sub { font-size: 0.76rem; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Paint-shade card (colour block + name + code)
   -------------------------------------------------------------------------- */
.shade-card {
  flex: none;
  width: 116px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.shade-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.shade-card__swatch { height: 86px; }
.shade-card__body { padding: 10px 12px 12px; }
.shade-card__name { font-size: 0.82rem; font-weight: 700; }
.shade-card__code { font-size: 0.72rem; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Service card (icon + title + text) — used on Home & Services pages
   -------------------------------------------------------------------------- */
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(108,76,241,.4); }
.service-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--gradient-brand);
  color: #fff;
  margin-bottom: var(--space-4);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card__title { font-size: 1.1rem; margin-bottom: var(--space-2); }
.service-card__text { color: var(--color-text-muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Review card
   -------------------------------------------------------------------------- */
.review-card {
  flex: none;
  width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.review-card__stars { color: #FBBF24; letter-spacing: 2px; margin-bottom: var(--space-3); }
.review-card__text { color: var(--color-text); font-size: 0.95rem; margin-bottom: var(--space-4); }
.review-card__person { display: flex; align-items: center; gap: var(--space-3); }
.review-card__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.review-card__name { font-weight: 700; font-size: 0.92rem; }
.review-card__role { font-size: 0.8rem; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Brand shade blocks (homepage: Luxury / Premium / Economic paint tiers)
   -------------------------------------------------------------------------- */
.shade-brand__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: 2px;
}
.shade-brand__name { font-size: 1.05rem; font-weight: 700; }
.shade-brand__count {
  font-size: 0.75rem; font-weight: 700; color: var(--color-primary);
  background: rgba(108, 76, 241, .1); padding: 3px 10px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.shade-brand__note { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.shade-brand__disclaimer { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Builder card (homepage: "Builders Who Work With Us")
   -------------------------------------------------------------------------- */
.builder-card {
  flex: none;
  width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.builder-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.builder-card__logo {
  width: 100%; height: 76px; object-fit: contain;
  margin-bottom: var(--space-3);
}
.builder-card__initials {
  display: grid; place-items: center;
  width: 60px; height: 60px; margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  font-weight: 800; font-size: 1.1rem;
}
.builder-card__name { font-size: 0.95rem; font-weight: 700; }
.builder-card__sub { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }