/* ==========================================================================
   NexovaVoice — Customers / Resources listing page
   Loaded after styles.css + product.css; reuses their tokens and components.
   ========================================================================== */

/* ==========================================================================
   Hero — headline block + decorative card stack
   ========================================================================== */
.res-hero {
  position: relative; overflow: clip;
  padding: 148px 0 84px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
}
.res-hero-bg { position: absolute; inset: 0; pointer-events: none; }

.res-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px;
}
.res-hero-header h1 {
  max-width: 840px;
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--ink);
}
.res-hero-desc { max-width: 660px; margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* --- card-stack illustration (flex row, centre card raised) --- */
.res-hero-visual {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 20px; width: 100%; max-width: 560px; margin: 0 auto;
}
.rhv-card {
  position: relative; flex: 1 1 0; min-width: 0;
  display: grid; align-content: start; gap: 9px;
  padding: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.rhv-left, .rhv-right { margin-top: 64px; }
.rhv-center {
  flex: 1.15 1 0;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.rhv-tag { display: block; width: 42%; height: 6px; border-radius: 3px; background: rgba(12, 15, 18, 0.16); }
.rhv-tag.is-strong { width: 46%; background: rgba(12, 15, 18, 0.30); }
.rhv-l { display: block; height: 5px; border-radius: 3px; background: rgba(12, 15, 18, 0.09); }
.rhv-l.is-short { width: 64%; }
.rhv-pill { display: block; width: 44%; height: 14px; margin-top: 5px; border-radius: 7px; background: rgba(12, 15, 18, 0.06); }
.rhv-pill.is-strong { width: 48%; background: rgba(12, 15, 18, 0.13); }

/* ==========================================================================
   Story grid — image on top, copy beneath
   ========================================================================== */
.res-library { background: #fff; }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.res-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.res-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.res-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.res-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.res-card:hover .res-media img { transform: scale(1.04); }

.res-body { flex: 1; display: flex; flex-direction: column; padding: 26px; }
.res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 16px; }
.res-kicker {
  flex: 1 1 160px; min-width: 0;
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink);
}
.res-tag {
  flex: 0 0 auto; max-width: 100%; text-align: center; line-height: 1.35;
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  background: var(--soft-2); padding: 5px 12px; border-radius: 999px;
}
.res-title { font-size: 19px; line-height: 1.4; }
.res-desc { margin-top: 22px; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.res-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .res-hero { padding: 126px 0 64px; }
  .res-hero-grid { gap: 40px; }
  .res-hero-visual { max-width: 440px; gap: 14px; }
}

@media (max-width: 680px) {
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .res-hero-visual { max-width: 360px; gap: 10px; }
  .rhv-left, .rhv-right { margin-top: 48px; }
  .rhv-card { padding: 14px; gap: 7px; }
  .res-body { padding: 22px; }
  .res-title { font-size: 18px; }
}