/* =========================================================================
   FUN — Speaker Cards widget
   /wp-content/themes/<child>/assets/css/fun-speaker-cards.css

   Self-contained. Class prefix "fsc". Built to match the reference mockup:
   portrait image with icon buttons bottom-right, topic pills, name, tagline,
   divider, "Speaker profile / View →" footer. Every value here is a
   sensible default overridden by the widget's Style controls.
   ====================================================================== */

.fsc{ position:relative; }

.fsc-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

/* ------------------------------------------------------------- CARD */
.fsc-card{
  display:flex; flex-direction:column;
  background:#ffffff;
  border:1px solid #E4E9EF;
  border-radius:16px;
  overflow:hidden;
}

.fsc-card__media{
  position:relative;
  height:280px;
  border-radius:15px 15px 0 0;
  overflow:hidden;
  background:#EDF3FA;
}
.fsc-card__img{ width:100%; height:100% !important; object-fit:cover; object-position:center top; display:block; }
.fsc-card__ph{ position:absolute; inset:0; background:linear-gradient(150deg,#14508F,#2E6BAE); }

/* ------------------------------------------------------------- ICONS */
.fsc-icons{ position:absolute; right:14px; bottom:14px; z-index:2; display:flex; gap:8px; }
.fsc-icon{
  width:36px; height:36px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%;
  background:#ffffff; color:#16212C;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:background-color .18s ease, color .18s ease;
}
.fsc-icon svg{ width:16px; height:16px; }
.fsc-icon:hover{ background:#14508F; color:#fff; }

/* ------------------------------------------------------------- BODY */
.fsc-card__body{
  display:flex; flex-direction:column;
  padding:22px 22px 20px;
  flex:1 1 auto;
}

/* tags */
.fsc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.fsc-tag{
  display:inline-flex; align-items:center;
  padding:6px 14px; border-radius:999px;
  background:#EEF1F4; color:#16212C;
  font-size:12.5px; font-weight:600; line-height:1.2;
}

/* name + tagline */
.fsc-card__name{
  margin:0 0 4px; font-size:22px; line-height:1.2; font-weight:700; color:#16212C;
}
.fsc-card__tagline{
  margin:0; font-size:14.5px; line-height:1.5; color:#5C6976;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* divider */
.fsc-card__divider{ height:1px; background:#E4E9EF; margin:16px 0; }

/* footer row */
.fsc-card__footer{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.fsc-card__label{ font-size:14.5px; font-weight:700; color:#16212C; }
.fsc-card__view{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:700; color:#14508F; text-decoration:none;
  transition:color .18s ease;
}
.fsc-card__view svg{ width:16px; height:10px; transition:transform .2s ease; }
.fsc-card__view:hover{ color:#0D3767; }
.fsc-card__view:hover svg{ transform:translateX(3px); }

/* ---------------------------------------------------------- CAROUSEL */
.fsc--carousel .swiper{ --fsc-gap:24px; overflow:hidden; }

.fsc-dots{ margin-top:16px; text-align:center; position:static; }
.fsc-dots .swiper-pagination-bullet-active{ background:#F47B20; }

/* ------------------------------------------------------------ ARROWS */
.fsc-arrows{ display:inline-flex; gap:12px; }
.fsc-arrow{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  border:1.5px solid #16212C; border-radius:50%;
  background:transparent; color:#16212C; cursor:pointer;
  transition:background-color .18s ease, opacity .18s ease;
}
.fsc-arrow svg{ width:20px; height:20px; }
.fsc-arrow:hover{ background:#EAEAEA; }
.fsc-arrow.swiper-button-disabled{ opacity:.4; cursor:default; }

.fsc-arrows--top-right{ display:flex; justify-content:flex-end; margin-bottom:20px; }
.fsc-arrows--top-left{ display:flex; justify-content:flex-start; margin-bottom:20px; }
.fsc-arrows--bottom-center{ display:flex; justify-content:center; margin-top:20px; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1024px){
  .fsc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .fsc-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .fsc-icon,.fsc-card__view,.fsc-card__view svg{ transition:none !important; }
}