/* ===========================================================
   Events - "Upcoming Sessions & Workshops"
   A deep red panel with a centred carousel; the active slide is
   full size, its neighbours peek in from both edges.
   Motion + slide logic live in "FAS EV Sessions JS".
   Tree: ksecev > kevpanel > kevtop | kevviewport > kevtrack | kevnav
   =========================================================== */

/* ---------- the panel ---------- */
.elementor-element-kevpanel {
  position: relative;
  overflow: hidden !important;
  border-radius: 28px !important;
  background:
    radial-gradient(78% 120% at 88% -10%, rgba(224, 49, 43, .55), transparent 58%),
    radial-gradient(70% 100% at 4% 108%, rgba(150, 40, 32, .45), transparent 60%),
    linear-gradient(158deg, #7E1410 0%, #4A0F0D 46%, #240A09 100%);
}
.elementor-element-kevpanel > .elementor-element { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .elementor-element-kevpanel { border-radius: 20px !important; }
}

/* ---------- header ---------- */
.kev-label { position: relative; padding-left: 16px; opacity: .85; }
.kev-label .elementor-heading-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
}
.kev-title { margin-top: 18px !important; }
.kev-desc { max-width: 52ch; }
.kev-desc p { margin: 0; }

/* ---------- carousel ---------- */
.elementor-element-kevviewport {
  margin-top: 44px !important;
  overflow: hidden !important;
}
.elementor-element-kevtrack {
  flex-wrap: nowrap !important;
  will-change: transform;
}

.elementor-element-kevtrack > .e-con {
  position: relative;
  flex: 0 0 auto !important;
  width: 620px !important;
  max-width: none !important;
  min-height: 370px;
  border-radius: 20px !important;
  overflow: hidden;
  justify-content: flex-end !important;
  padding: 34px 36px !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .42;
  transform: scale(.9);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.elementor-element-kevtrack > .e-con.is-active { opacity: 1; transform: scale(1); }

/* scrim so the copy stays readable once a photo is dropped in
   (Elementor owns .e-con::before, hence the !important) */
.elementor-element-kevtrack > .e-con::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 10, 9, 0) 0%, rgba(20, 10, 9, .28) 58%, rgba(20, 10, 9, .72) 100%);
}
.elementor-element-kevtrack > .e-con > .elementor-element { position: relative; z-index: 1; }

.kev-date .elementor-heading-title {
  color: rgba(255, 255, 255, .78) !important;
  font-family: Inter, sans-serif;
  font-size: 13px;
  letter-spacing: .2px;
}
.kev-st .elementor-heading-title {
  color: #FFFFFF !important;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -.6px;
  max-width: 15ch;
}

/* the register pill floats in the slide's top right corner */
.elementor-element-kevtrack > .e-con .kev-reg {
  position: absolute;
  top: 26px;
  right: 28px;
  width: auto !important;
  z-index: 2;
}
.elementor-element-kevtrack > .e-con .kev-reg .elementor-button {
  background-color: #FFFFFF;
  color: #22100E;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 100px;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.elementor-element-kevtrack > .e-con .kev-reg .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .7);
}

/* ---------- prev / next ---------- */
.kev-nav { width: auto !important; cursor: pointer; }
.kev-nav .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  background: transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.kev-nav:hover .elementor-icon {
  background: #FFFFFF;
  color: #22100E !important;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}
.kev-nav .elementor-icon svg { width: 15px; height: 15px; fill: currentColor !important; }
.kev-nav.is-disabled { opacity: .32; pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .elementor-element-kevtrack > .e-con { width: 520px !important; min-height: 350px; }
  .kev-st .elementor-heading-title { font-size: 25px; }
}
@media (max-width: 767px) {
  .elementor-element-kevtrack > .e-con {
    width: 82vw !important;
    min-height: 320px;
    padding: 26px 24px !important;
  }
  .kev-st .elementor-heading-title { font-size: 21px; max-width: none; }
  .elementor-element-kevtrack > .e-con .kev-reg { top: 18px; right: 18px; }
  .elementor-element-kevtrack > .e-con .kev-reg .elementor-button { font-size: 12px; padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-kevtrack > .e-con { transition: none; }
}

/* ===========================================================
   PANEL REWORK
   Both dark panels now carry the hero's own recipe: charcoal at
   the top, a red glow rising from the bottom edge.
   =========================================================== */

.elementor-element-kevpanel,
.elementor-element-kqpanel {
  background: #131017 !important;
}
.elementor-element-kevpanel::after,
.elementor-element-kqpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(150% 62% at 50% 104%, rgba(224, 49, 43, .72) 0%, rgba(224, 49, 43, .46) 24%, rgba(224, 49, 43, .18) 46%, rgba(224, 49, 43, 0) 64%),
    linear-gradient(to top, rgba(224, 49, 43, .5) 0%, rgba(224, 49, 43, .24) 10%, rgba(224, 49, 43, 0) 28%),
    radial-gradient(120% 95% at 8% 4%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%);
}

/* ---------- Choose your path: two panels, no carousel ---------- */
.elementor-element-kevpanel { padding-bottom: 74px !important; }
.elementor-element-kevboxes { margin-top: 52px !important; }

.elementor-element-kevboxes > .e-con {
  position: relative;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(2px);
  transition: border-color .45s ease, background .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.elementor-element-kevboxes > .e-con:hover {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
  transform: translateY(-4px);
}

.kevb-tag .elementor-heading-title {
  color: rgba(255, 255, 255, .72) !important;
  font-family: Archivo, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.kevb-t { margin-top: 14px !important; }
.kevb-t .elementor-heading-title {
  color: #FFFFFF !important;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -.5px;
  max-width: 21ch;
}

.kevb-list { margin-top: 26px !important; }
.kevb-list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0; }
.kevb-list .elementor-icon-list-icon { display: none !important; }
.kevb-list .elementor-icon-list-item {
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.kevb-list .elementor-icon-list-item:last-child { border-bottom: 0; }
.kevb-list .elementor-icon-list-text {
  color: rgba(255, 255, 255, .8) !important;
  font-family: Inter, sans-serif;
  font-size: 15px;
  padding: 0 !important;
}


@media (max-width: 767px) {
  .elementor-element-kevboxes { margin-top: 34px !important; }
  .kevb-t .elementor-heading-title { font-size: 22px; max-width: none; }
}

/* ---------- Meet Karina panel ---------- */
.elementor-element-kqpanel {
  min-height: 80vh !important;
  align-items: stretch;
}

.kq-eyebrow { margin-bottom: 16px !important; }
.kq-title { margin-bottom: 22px !important; max-width: 19ch; }
.kq-body { max-width: 52ch; }
.kq-body p { margin: 0 0 14px; }
.kq-body p:last-child { margin-bottom: 0; }

.kq-pull {
  margin-top: 28px !important;
  padding-left: 20px;
  border-left: 2px solid #E0312B;
  max-width: 30ch;
}
.kq-cred { margin-top: 22px !important; }

.kq-btn { margin-top: 30px !important; }
.kq-btn .elementor-button {
  background-color: #E0312B !important;
  color: #FFFFFF !important;
  font-family: Archivo, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 15px 17px 15px 26px;
  border-radius: 100px;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.kq-btn .elementor-button-content-wrapper { gap: 12px; align-items: center; }
.kq-btn .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.kq-btn .elementor-button-icon svg { width: 11px; height: 11px; fill: currentColor !important; }
.kq-btn .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(224, 49, 43, .8);
}

/* the portrait floats inside the panel rather than bleeding to its edges */
.kq-pic { position: static !important; width: 100% !important; }
.kq-pic .elementor-widget-container,
.kq-pic figure,
.kq-pic a { height: auto !important; margin: 0 !important; }
.kq-pic img {
  width: 100% !important;
  height: auto !important;
  max-height: 62vh;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 22px;
  display: block;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}

@media (max-width: 767px) {
  .elementor-element-kqpanel { min-height: 0 !important; }
  .kq-title { max-width: none; }
  .kq-pull { max-width: none; }
  .kq-pic img { max-height: 380px; }
}

/* Choose your path is full black; kevpanel::after keeps no red, only the
   corner vignette that gives the panel some depth. */
.elementor-element-kevpanel::after {
  background: radial-gradient(120% 95% at 8% 4%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%) !important;
}

/* ---------- both dark panels go full bleed ----------
   full bleed, no rounded corners: the bone was showing through at the
   corners and breaking the edge-to-edge band. */
.elementor-element-kevpanel,
.elementor-element-kqpanel{border-radius:0!important}
@media (max-width:767px){
  .elementor-element-kevpanel,
  .elementor-element-kqpanel{border-radius:0!important}
}

/* Meet Karina drops the red the same way Choose your path did */
.elementor-element-kqpanel{background:#131017!important}
.elementor-element-kqpanel::after{
  background:radial-gradient(120% 95% at 8% 4%, rgba(0,0,0,.45), rgba(0,0,0,0) 55%)!important;
}

/* the panel watermark was almost invisible against the black */
.kpanel-wm .elementor-heading-title{
  -webkit-text-fill-color:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.05)!important;
  -webkit-text-stroke:1px rgba(255,255,255,.10);
}

/* ---------- panel watermark ----------
   The watermark fades downward: solid at the top of the letterforms,
   gone by the bottom. It also sits behind everything, because it was
   painting over the photograph and the button. */
.kpanel-wm{
  z-index:0!important;
  pointer-events:none!important;
}
.kpanel-wm .elementor-heading-title{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.35) 62%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.35) 62%,transparent 94%);
}
/* everything that is not the watermark sits above it */
.elementor-element-kevpanel > .e-con,
.elementor-element-kqpanel > .e-con{position:relative;z-index:2!important}
.elementor-element-kevpanel .elementor-widget:not(.kpanel-wm),
.elementor-element-kqpanel .elementor-widget:not(.kpanel-wm){position:relative;z-index:2}