/* ============================================================
   What Global Speakers Say — carousel
   Self-contained. Palette pulled from the site:
     accent  #1C82C4   dark #1a1a1a   light-surface #f6f6f6
     rule    #d7e7f2   (soft accent-tinted grey)
   ============================================================ */

.gst-section {
  background: #f6f6f6;                 /* site light-surface grey */
  border-top: 1px solid #d7e7f2;       /* rule color */
  border-bottom: 1px solid #d7e7f2;
  padding: 56px 0 64px;
  font-family: "Poppins", "Segoe UI", sans-serif;
}
.gst-section * { box-sizing: border-box; }

/* --- Self-contained heading motif: centered h3 + short accent underline --- */
.gst-title {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 760px;
  padding: 0 16px;
}
.gst-title h3 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.gst-title .gst-underline {
  display: inline-block;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: #1C82C4;                 /* accent */
}
.gst-title p {
  margin: 14px 0 0;
  font-size: 15px;
  color: #5a5a5a;
}

/* --- Carousel frame (gutters hold the arrows) --- */
.gst-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 56px;                     /* side gutters for arrows */
  position: relative;
}

/* Equal-height carousel plumbing (required, verbatim) */
.gst-carousel .slick-track { display: flex !important; }
.gst-carousel .slick-slide { height: auto; }
.gst-card { display: flex; flex-direction: column; justify-content: flex-start !important; }
.gst-quote { flex: 0 0 auto !important; }
.gst-person { margin-top: auto !important; }

/* Slide wrapper: gap lives here as PADDING (not card margin) so the
   full-height card never overflows .slick-list{overflow:hidden}. */
.gst-slide { padding: 14px; height: 100%; }
.gst-carousel .slick-slide > div { height: 100%; }

/* Before slick initialises, lay the cards out as a graceful 2-col grid
   (avoids a flash of full-width stacked cards on slow JS). */
.gst-carousel:not(.slick-initialized) {
  display: flex;
  flex-wrap: wrap;
}
.gst-carousel:not(.slick-initialized) .gst-slide {
  flex: 0 0 50%;
  max-width: 50%;
}
@media (max-width: 767px) {
  .gst-carousel:not(.slick-initialized) .gst-slide { flex-basis: 100%; max-width: 100%; }
}

/* --- Card --- */
.gst-card {
  height: 100%;
  background: #ffffff;                 /* white so cards pop off the grey */
  border: 1px solid #e2edf5;
  border-radius: 16px;
  padding: 30px 28px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 55, 85, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gst-card::before {                    /* accent top bar */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1C82C4, #F5A623);
}
.gst-card::after {                     /* big watermark quote mark */
  content: "\201C";
  position: absolute;
  top: 6px; right: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px;
  line-height: 1;
  color: rgba(28, 130, 196, 0.10);
  pointer-events: none;
}
.gst-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(15, 55, 85, 0.14);
}

/* --- Stars + quote pinned top --- */
.gst-stars {
  color: #f5a623;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.gst-quote {
  color: #33313a;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 24px;
  position: relative;
  z-index: 1;
}

/* --- Person pinned bottom --- */
.gst-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid #e9f1f7;
}
.gst-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;   /* keep faces in frame for tall portraits */
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #1C82C4;
  background: #e9f1f7;
}
.gst-meta { min-width: 0; }
.gst-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 2px;
}
.gst-role {
  font-size: 12.5px;
  color: #6a6a72;
  line-height: 1.35;
  margin: 0;
}
.gst-country {
  display: inline-block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1C82C4;
  background: rgba(28, 130, 196, 0.10);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ============================================================
   Slick arrows + dots — base slick.css ships NONE, style here.
   Kill default button chrome first.
   ============================================================ */
.gst-carousel .slick-prev,
.gst-carousel .slick-next {
  background: #1C82C4 !important;
  border: 0 !important;
  font-size: 0;
  color: transparent;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(28, 130, 196, 0.32);
  transition: background .2s ease, transform .2s ease;
  padding: 0;
}
.gst-carousel .slick-prev:hover,
.gst-carousel .slick-next:hover { background: #14648f !important; }
.gst-carousel .slick-prev.slick-disabled,
.gst-carousel .slick-next.slick-disabled { display: none !important; }
.gst-carousel .slick-prev { left: -4px; }
.gst-carousel .slick-next { right: -4px; }

/* Chevron drawn with CSS borders (no icon font dependency) */
.gst-carousel .slick-prev::before,
.gst-carousel .slick-next::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  opacity: 1;
}
.gst-carousel .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); }
.gst-carousel .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); }

/* Dots */
.gst-carousel .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.gst-carousel .slick-dots li { margin: 0; width: auto; height: auto; }
.gst-carousel .slick-dots li button {
  background: #bcd8ea !important;      /* rule color */
  border: 0 !important;
  font-size: 0;
  color: transparent;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.gst-carousel .slick-dots li button::before { display: none !important; content: "" !important; }
.gst-carousel .slick-dots li.slick-active button {
  background: #1C82C4 !important;      /* accent when active */
  width: 26px;
  border-radius: 999px;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .gst-wrap { padding: 0 36px; }
  .gst-title h3 { font-size: 23px; }
  .gst-carousel .slick-prev { left: -10px; }
  .gst-carousel .slick-next { right: -10px; }
}