/**
 * Staff / team carousel — matches FCF reference (cream section, card photo + green band, round arrows).
 */

/**
 * Arrow colors follow horse-template _slick-slider.scss + :root
 * (--theme-color #344E41, --theme-color2 #FEE074, --secondary-color #588157).
 */
:root {
  --fcf-staff-bg: #ebe4d4;
  --fcf-staff-caption: #1e4a32;
  --fcf-staff-card-radius: 22px;
  --fcf-staff-arrow-size: 60px;
  --fcf-staff-arrow-icon-pad: 4px;
}

.fcf-staff-section {
  background-color: var(--fcf-staff-bg) !important;
  background-image: none !important;
}

.fcf-staff-section .container {
  overflow-x: visible;
}

.fcf-staff-section .title-area .sec-title,
.fcf-staff-section .title-area .sec-subtitle {
  color: var(--title-color, #1a1a1a);
}

/* Wrapper: gutter for arrows beside 1st / last visible cards (JS positions arrows) */
.fcf-staff-section .fcf-staff-carousel-wrap {
  overflow: visible;
  padding-left: clamp(48px, 5vw, 88px);
  padding-right: clamp(48px, 5vw, 88px);
}

/* Carousel track — clip so only N slides are visible (no peek of next/prev) */
.fcf-staff-section .fcf-staff-carousel {
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden;
}

.fcf-staff-section .fcf-staff-carousel .slick-slide {
  padding: 0 10px;
}

.fcf-staff-section .fcf-staff-carousel .slick-list {
  overflow: hidden !important;
}

/* Card */
.fcf-staff-card-link {
  color: inherit;
  border-radius: var(--fcf-staff-card-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fcf-staff-card-link:hover .fcf-staff-card,
.fcf-staff-card-link:focus-visible .fcf-staff-card {
  box-shadow: 0 12px 32px rgba(30, 74, 50, 0.2);
  transform: translateY(-3px);
}

.fcf-staff-card-link:focus-visible {
  outline: 3px solid var(--fcf-staff-caption);
  outline-offset: 4px;
}

.fcf-staff-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--fcf-staff-card-radius);
  overflow: hidden;
  background: var(--fcf-staff-caption);
  box-shadow: 0 8px 28px rgba(30, 74, 50, 0.12);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.fcf-staff-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #c4c4c4;
}

.fcf-staff-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--fcf-staff-card-radius) var(--fcf-staff-card-radius) 0 0;
}

.fcf-staff-card__caption {
  background-color: var(--fcf-staff-caption);
  padding: 18px 16px 22px;
  text-align: center;
  flex-shrink: 0;
}

.fcf-staff-card__name {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  font-family: var(--title-font, "Unbounded", sans-serif);
}

.fcf-staff-card__role {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--body-font, "Poppins", sans-serif);
}

/* CTA slide — same card shell, links to contact */
.fcf-staff-card--cta {
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fcf-staff-card--cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(30, 74, 50, 0.2);
}

.fcf-staff-card--cta:focus-visible {
  outline: 3px solid var(--theme-color2, #fee074);
  outline-offset: 4px;
}

.fcf-staff-card--cta .fcf-staff-card__role {
  opacity: 0.92;
}

/* Arrows: template slick-arrow — secondary ring, theme fill + white icon on hover */
.fcf-staff-section.arrow-wrap .slick-arrow {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--fcf-staff-arrow-size) !important;
  height: var(--fcf-staff-arrow-size) !important;
  margin-top: calc(var(--fcf-staff-arrow-size) / -2) !important;
  padding: var(--fcf-staff-arrow-icon-pad) !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  border: 1px solid var(--secondary-color, #588157) !important;
  color: var(--secondary-color, #588157) !important;
  box-shadow: none;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease,
    transform 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
}

.fcf-staff-section.arrow-wrap .slick-arrow:hover,
.fcf-staff-section.arrow-wrap .slick-arrow:focus-visible {
  background-color: var(--theme-color, #344e41) !important;
  color: var(--white-color, #fff) !important;
  border-color: transparent !important;
}

.fcf-staff-section.arrow-wrap .slick-arrow:focus-visible {
  outline: 2px solid var(--theme-color2, #fee074);
  outline-offset: 3px;
}

.fcf-staff-section.arrow-wrap .slick-arrow i {
  font-size: var(--icon-font-size, 20px);
}

/* left/right set by staff-carousel.js from first/last card bounds */
.fcf-staff-section .fcf-staff-carousel-wrap .slick-arrow.slick-prev,
.fcf-staff-section .fcf-staff-carousel-wrap .slick-arrow.slick-next {
  z-index: 4;
}

/* Section + container gutter so arrows have padding and don’t overlap cards */
.fcf-staff-section.team-layout1 {
  padding-left: clamp(16px, 5vw, 56px);
  padding-right: clamp(16px, 5vw, 56px);
}