/* ============================================================
   GF Events Slider — base structural styles
   Colors, typography & spacing are controlled via Elementor.
   ============================================================ */

.gf-events-slider {
  display: flex;
  flex-wrap: wrap;
}

/* ── Left column ── */
.gf-es-left {
  flex: 0 0 340px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.gf-es-heading {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.gf-es-subtext {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 16px 0 0;
}

/* ── Navigation ── */
.gf-es-nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.gf-es-left .gf-es-nav {
  margin-top: auto;
}

.gf-es-nav .gf-es-prev,
.gf-es-nav .gf-es-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid #222;
  background: transparent;
  cursor: pointer;
  color: #222;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  padding: 0;
  line-height: 1;
  overflow: visible;
}

.gf-es-nav .gf-es-prev:hover,
.gf-es-nav .gf-es-next:hover {
  background: #222;
  color: #fff;
}

.gf-es-nav .gf-es-prev:disabled,
.gf-es-nav .gf-es-next:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.gf-es-prev i,
.gf-es-next i {
  font-size: 18px;
  line-height: 1;
}

.gf-es-prev svg,
.gf-es-next svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.gf-es-prev svg path,
.gf-es-next svg path {
  fill: #222;
}

.gf-es-prev:hover svg path,
.gf-es-next:hover svg path {
  fill: #fff;
}

/* Uploaded image/SVG inside nav buttons */
.gf-es-prev img,
.gf-es-next img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* ── Right column ── */
.gf-es-right {
  flex: 1;
  min-width: 0;
}

/* Show/hide navs via CSS variables set by Elementor responsive selector.
   Default: left nav visible, right nav hidden. */
.gf-es-nav--left  { display: var(--gf-nav-left,  flex); }
.gf-es-nav--right { display: var(--gf-nav-right, none); margin-top: 24px; justify-content: flex-start; }

/* ── Track & Slides ── */
.gf-es-track {
  position: relative;
}

.gf-es-slide {
  display: none;
}

.gf-es-slide.is-active {
  display: block;
}

.gf-es-slide.slide-in-next {
  animation: gfSlideInNext 0.3s ease both;
}

.gf-es-slide.slide-in-prev {
  animation: gfSlideInPrev 0.3s ease both;
}

@keyframes gfSlideInNext {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gfSlideInPrev {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Event row ── */
.gf-es-event {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #ddd;
  border-bottom-style: solid;
}

.gf-es-event:first-child {
  border-top: 1px solid #ddd;
}

/* ── Badge ── */
.gf-es-badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #4a5240;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Details ── */
.gf-es-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.gf-es-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

/* ── Meta row ── */
.gf-es-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}

.gf-es-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #555;
}

.gf-es-icon i {
  font-size: 15px;
  line-height: 1;
  color: currentColor;
}

.gf-es-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

/* ── Stacked (1-column) layout ──────────────────────────────
   .gf-es-layout-column  set by PHP class (desktop fallback)
   .gf-es-stacked        set by JS when computed flex-direction
                         is "column" at any breakpoint
   ─────────────────────────────────────────────────────────── */

/* No-JS fallback: PHP class still sets flex-direction */
.gf-es-layout-column {
  flex-direction: column;
}

/* Unwrap the left column so heading / subtext / nav become
   direct flex children of the main container and can be
   reordered independently of the event list. */
.gf-es-stacked .gf-es-left {
  display: contents;
}

.gf-es-stacked .gf-es-heading { order: 1; }
.gf-es-stacked .gf-es-subtext { order: 2; }
.gf-es-stacked .gf-es-right   { order: 3; width: 100%; }

/* In stacked mode, whichever nav is visible renders last — below events */
.gf-es-stacked .gf-es-nav--left,
.gf-es-stacked .gf-es-nav--right {
  order: 4;
  margin-top: 0;
  width: 100%;
}

/* ── Mobile default ── */
@media (max-width: 768px) {
  /* Default stacked layout on mobile (JS will add .gf-es-stacked) */
  .gf-events-slider {
    flex-direction: column;
  }

  .gf-es-heading {
    font-size: 2rem;
  }
}