/* ══════════════════════════════
   RECOMMENDATIONS
══════════════════════════════ */
.rec-track { position: relative; background: transparent; border-radius: var(--card-radius); overflow: hidden; }
.rec-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0;
  background: transparent !important;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.25rem;
  overscroll-behavior-inline: contain;
}
.rec-scroll:active { cursor: grabbing; }
.rec-scroll::-webkit-scrollbar { display: none; }
.rec-list { display: flex; gap: 1.4rem; width: max-content; padding: 0.35rem 0.25rem 0.65rem; }

[data-theme="light"] .rec-track,
[data-theme="light"] .rec-scroll {
  background: transparent;
}

[data-theme="light"] .rec-list {
  padding-bottom: 0.4rem;
}

.rec-card {
  position: relative;
  width: 292px;
  min-width: 292px;
  min-height: 408px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem 1.05rem 1rem;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.rec-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); box-shadow: var(--glass-shadow-hover), 0 0 28px rgba(69,137,255,0.12); }
.rec-card:focus-visible { outline: none; transform: translateY(-6px); border-color: rgba(255,255,255,0.22); box-shadow: var(--glass-shadow-hover), 0 0 0 2px rgba(69,137,255,0.16); }
.rec-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 42%, rgba(69,137,255,0.12) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
}
.rec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-highlight);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.rec-card-glow { display: none; }
.rec-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.95rem; }
.rec-quote { color: var(--accent-light); font-size: 3.8rem; line-height: 0.8; font-family: var(--font-heading) !important; opacity: 0.65; }
.rec-relation { color: var(--text-secondary); font-size: 0.65rem; line-height: 1.4; text-align: right; max-width: 60%; font-family: var(--font-heading) !important; letter-spacing: var(--tracking-tight); }
.rec-company { display: block; margin-top: 0.24rem; color: var(--accent-light); font-weight: 700; }
.rec-highlight { position: relative; color: var(--text); font-size: 0.9375rem; font-weight: 400; line-height: 1.78; letter-spacing: 0.008em; margin: 0; padding-right: 0.4rem; z-index: 1; }
.rec-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.rec-info { position: relative; z-index: 1; max-width: 66%; }
.rec-name { color: var(--accent-light); font-weight: 700; font-size: 0.86rem; margin-bottom: 0.32rem; font-family: var(--font-heading) !important; letter-spacing: var(--tracking-tight); }
.rec-role { font-size: 0.75rem; font-weight: 500; color: var(--muted); line-height: 1.5; letter-spacing: 0.005em; }
.rec-avatar-wrap { width: 74px; height: 74px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, rgba(116,169,255,0.8), rgba(69,137,255,0.5)); box-shadow: 0 0 20px rgba(69,137,255,0.18); flex-shrink: 0; }
.rec-avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 50%; background: var(--surface); }

.rec-footer { margin-top: 1.75rem; }
.rec-li-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.375rem; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 0.8125rem; text-decoration: none; transition: all 0.2s; }
.rec-li-link:hover { border-color: var(--accent-border); color: var(--accent); }

@media (max-width: 900px) {
  .rec-card { width: 268px; min-width: 268px; min-height: 388px; padding: 1rem 0.95rem 0.9rem; }
  .rec-highlight { font-size: 0.88rem; line-height: 1.62; }
  .rec-avatar-wrap { width: 68px; height: 68px; }
}
@media (max-width: 540px) {
  .rec-list { gap: 1rem; }
  .rec-card { width: calc(100vw - 4rem); min-width: calc(100vw - 4rem); min-height: 372px; }
  .rec-relation { font-size: 0.7rem; max-width: 62%; }
  .rec-highlight { font-size: 0.84rem; }
  .rec-card-bottom { align-items: center; }
}