/* ============================================================
   Keynote Speaker Reviews carousel — gst-* namespace
   Palette pulled from the site: accent #ef4e41, dark #171717,
   rule #acacac, light surface #f8f7f7.
   Base slick.css only ships on this site (no theme), so arrows,
   dots AND the equal-height plumbing are all defined here.
   ============================================================ */

.gst-section {
  padding: 50px 0 60px;
  background-color: #f8f7f7;   /* site light-surface grey — makes white cards pop */
  border-top: 1px solid #eae9e9;
  border-bottom: 1px solid #eae9e9;
}

/* Heading — mirrors the site's .sections-title-h3 motif, self-contained
   so it renders identically on the root page and the /event subfolder. */
.gst-title {
  position: relative;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 34px;
}
.gst-title h3 {
  font-size: 20px;
  margin: 0;
  color: #171717;
  text-align: center;
}
.gst-title:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -135px;
  height: 1px;
  width: 270px;
  background-color: #acacac;
}
.gst-title:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin-left: -15px;
  height: 4px;
  width: 30px;
  background-color: #ef4e41;
}

/* --- Carousel shell: leave room for the side arrows --- */
.gst-carousel {
  position: relative;
  margin: 0 auto;
  padding: 0 46px;
  max-width: 960px;
}
.gst-carousel .slick-list { margin: 0; }

/* --- Equal-height plumbing (required rules included) --- */
.gst-carousel .slick-track { display: flex !important; }   /* required */
.gst-carousel .slick-slide { height: auto; float: none; }  /* required: height auto */
.gst-carousel .slick-slide,
.gst-carousel .gst-slide { display: flex; }

/* Each slide is a full-width, centered flex cell. No vertical margin
   anywhere on the card -> nothing overflows -> nothing gets clipped. */
.gst-slide {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 4px;
}

.gst-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;   /* required */
  flex: 1 1 auto;
  width: 100%;
  max-width: 780px;
  padding: 32px 34px;
  background: #ffffff;
  border: 1px solid #eae9e9;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(23, 23, 23, 0.07);
  box-sizing: border-box;
  text-align: left;
}

/* Stars + quote pinned to the top */
.gst-stars {
  flex: 0 0 auto !important;
  color: #ef4e41;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.gst-quote {
  flex: 0 0 auto !important;   /* required */
  position: relative;
  color: #5c5c5c;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
  padding-left: 28px;
}
.gst-quote:before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: -12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 52px;
  line-height: 1;
  color: #ef4e41;
  opacity: 0.28;
}

/* Photo + name/role/country pinned to the bottom */
.gst-person {
  margin-top: auto !important;   /* required */
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #f0efef;
}

.gst-photo {
  height: 66px;
  width: 66px;
  min-width: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ef4e41;
}

.gst-meta { line-height: 1.35; }

.gst-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #171717;
}

.gst-role {
  margin: 3px 0 0;
  font-size: 13px;
  color: #5c5c5c;
}

.gst-country {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #ef4e41;
}

/* ---------------------------------------------------------------
   Slick arrows — fully self-styled (site ships base slick.css only)
   --------------------------------------------------------------- */
.gst-carousel .slick-prev,
.gst-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  height: 42px;
  width: 42px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  background: #ffffff !important;
  border: 1px solid #eae9e9 !important;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(23, 23, 23, 0.08);
  transition: background .2s ease, border-color .2s ease;
}
.gst-carousel .slick-prev { left: 0; }
.gst-carousel .slick-next { right: 0; }
.gst-carousel .slick-prev:hover,
.gst-carousel .slick-next:hover,
.gst-carousel .slick-prev:focus,
.gst-carousel .slick-next:focus {
  background: #ef4e41 !important;
  border-color: #ef4e41 !important;
  outline: none;
}
.gst-carousel .slick-prev:before,
.gst-carousel .slick-next:before {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 40px;
  color: #171717;
  opacity: 1;
}
.gst-carousel .slick-prev:hover:before,
.gst-carousel .slick-next:hover:before,
.gst-carousel .slick-prev:focus:before,
.gst-carousel .slick-next:focus:before {
  color: #ffffff;
}
.gst-carousel .slick-prev:before { content: "\2039"; }   /* ‹ */
.gst-carousel .slick-next:before { content: "\203A"; }   /* › */
.gst-carousel .slick-prev.slick-disabled,
.gst-carousel .slick-next.slick-disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------
   Slick dots — self-styled (kills the raw "1" button box)
   --------------------------------------------------------------- */
.gst-carousel .slick-dots {
  display: block;
  width: 100%;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.gst-carousel .slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
}
.gst-carousel .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.gst-carousel .slick-dots li button:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #acacac;
  opacity: 1;
  transition: background .2s ease;
}
.gst-carousel .slick-dots li.slick-active button:before { background: #ef4e41; }

@media (max-width: 767px) {
  .gst-carousel { padding: 0 34px; }
  .gst-card { padding: 26px 22px; }
  .gst-quote { font-size: 15px; }
}