/* =============================================================
   NICHENCY — CARDS
   components/cards.css
   ============================================================= */

/* ── GENERIC CARD ── */
.card { background: #fff; padding: 36px; border-radius: 12px; border: 1px solid var(--border); transition: border-color .2s; }
.card:hover { border-color: var(--dark-blue); }
.card h4 { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 20px; }
.card-dark { background: var(--dark-blue) !important; border: none !important; }
.card-dark h4 { color: var(--hero-bg); }
.card-dark p { color: rgba(239,251,248,0.75); }
.card-dark .drift-list li { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid rgba(239,251,248,0.4); color: rgba(239,251,248,0.85); }

/* ── TESTIMONIAL CARDS ── */
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testi-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 36px; position: relative; }
.testi-card::before { content: '"'; font-family: 'Inter', sans-serif; font-size: 5rem; color: var(--hero-bg); position: absolute; top: 16px; left: 28px; line-height: 1; }
.testi-card p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; padding-top: 40px; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); flex-shrink: 0; }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--dark-blue); display: block; }
.testi-role { font-size: 13px; color: var(--muted); }

/* ── CLIENT LOGO CARDS ── */
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }
.client-logo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.client-logo:hover { border-color: var(--dark-blue); box-shadow: 0 4px 16px rgba(19,15,73,0.08); }
.client-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* contain not cover — logos must never be cropped */
  object-position: center;
  display: block;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter .2s, opacity .2s;
}
.client-logo:hover img { filter: grayscale(0%); opacity: 1; }

/* ── PORTFOLIO CARDS ── */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portfolio-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.portfolio-card:hover { border-color: var(--dark-blue); transform: translateY(-4px); }
.portfolio-thumb { height: 200px; overflow: hidden; background: var(--hero-bg); border-radius: 10px 10px 0 0; }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .3s; }
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.04); }
.portfolio-info { padding: 24px; }
.portfolio-tag { font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.portfolio-info h4 { font-size: 1rem; font-weight: 700; color: var(--dark-blue); margin: 0; }
.portfolio-cta { text-align: center; margin-top: 40px; }