/* =============================================================
   Finnt Team Members – finnt-team-members.css
   ============================================================= */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --finnt-accent:        #0a9e8a;   /* teal arrows / icons */
  --finnt-accent-hover:  #087a6b;
  --finnt-card-bg:       #f5f6f7;
  --finnt-card-radius:   14px;
  --finnt-img-radius:    12px;
  --finnt-name-color:    #111;
  --finnt-contact-color: #444;
  --finnt-contact-hover: #0a9e8a;
  --finnt-font-family:   'Power Grotesk', sans-serif;
  --finnt-font-name:     700 1.1rem/1.3 'Power Grotesk', sans-serif;
  --finnt-font-role:     400 0.85rem/1.4 'Power Grotesk', sans-serif;
  --finnt-font-contact:  400 1rem/1.4 'Power Grotesk', sans-serif;
  --finnt-shadow:        0 2px 12px rgba(0,0,0,.07);
  --finnt-shadow-hover:  0 6px 24px rgba(0,0,0,.12);
}

/* ── Global font override for all finnt elements ─────────────── */
.finnt-member {
  font-family: 'Power Grotesk', sans-serif !important;
}

.finnt-member .finnt-member__contacts a{
	font-family: "Montserrat", sans-serif;
}

/* ── Single card ─────────────────────────────────────────────── */
.finnt-member {
  background: var(--finnt-card-bg);
  border-radius: var(--finnt-card-radius);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
  display: flex;
  flex-direction: column;
}
/* .finnt-member:hover {
  box-shadow: var(--finnt-shadow-hover);
  transform: translateY(-3px);
} */

/* Image area – fixed 314×350 px ratio */
.finnt-member__image-wrap {
  width: 100%;
  aspect-ratio: 314 / 350;
  overflow: hidden;
  border-radius: var(--finnt-img-radius) var(--finnt-img-radius) 0 0;
  background: #ddd;
}
.finnt-member__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}
.finnt-member:hover .finnt-member__photo {
  transform: scale(1.04);
}

/* Body */
.finnt-member__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finnt-member__name {
  font: var(--finnt-font-name);
  color: var(--finnt-name-color);
  margin: 0 0 2px;
}
.finnt-member__role {
  font: var(--finnt-font-role);

  margin: 0;
}

/* Contacts */
.finnt-member__contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.finnt-member__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--finnt-font-contact);
  color: var(--finnt-contact-color);
  text-decoration: none;
  transition: color .2s;
}
.finnt-member__contact:hover {
  color: var(--finnt-contact-hover);
}
.finnt-member__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 18px;
}

/* =============================================================
   GRID layout
   ============================================================= */
.finnt-team-grid {
  display: grid;
  grid-template-columns: repeat( var(--finnt-grid-cols, 4), 1fr );
  gap: var(--finnt-grid-gap, 24px);
}

@media (max-width: 1024px) {
  .finnt-team-grid {
    grid-template-columns: repeat( var(--finnt-grid-cols-tablet, 2), 1fr );
  }
}
@media (max-width: 640px) {
  .finnt-team-grid {
    grid-template-columns: repeat( var(--finnt-grid-cols-mobile, 1), 1fr );
  }
}

/* =============================================================
   CAROUSEL layout
   ============================================================= */
.finnt-carousel-wrap {
  position: relative;
}

/* Navigation row (arrows top-right, matching the screenshot) */
.finnt-carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}
.finnt-carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;


  background: none;
  border: none;
  box-shadow: none;

  cursor: pointer;
  transition: opacity .2s, transform .2s;
  padding: 0;
}
.finnt-carousel__btn:hover:not(:disabled) {
  opacity: .7;
  transform: scale(1.1);
}
.finnt-carousel__btn img {
  width: 100%;
  height: 100%;
  display: block;
}
.finnt-carousel__btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Track + overflow clip */
.finnt-carousel {
  overflow: hidden;
}
.finnt-carousel__track {
  display: flex;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* Each slide */
.finnt-carousel__slide {
  flex-shrink: 0;
  /* width & gap set via JS as inline style */
  box-sizing: border-box;
}
.finnt-carousel__slide .finnt-member {
  height: 100%;
}

/* Dots */
.finnt-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.finnt-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.finnt-carousel__dot.is-active {
  background: var(--finnt-accent);
  transform: scale(1.35);
}

/* ── Card permalink links ─────────────────────────────────────── */
.finnt-member__image-link {
  display: block;
  text-decoration: none;
}
.finnt-member__name-link {
  color: var(--finnt-name-color);
  text-decoration: none;
  transition: color .2s;
}
.finnt-member__name-link:hover {
  color: var(--finnt-contact-hover);
}

/* ── LinkedIn contact link ────────────────────────────────────── */
.finnt-member__contact--linkedin {
  color: #444444;
}
.finnt-member__contact--linkedin:hover {
  color: #0a66c2;
}
.finnt-member__contact--linkedin {
    color: #444444;
}

.finnt-member__contact--linkedin:hover {
    color: #0a9e8a;
}