/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 11 2026 | 05:02:41 */
/* ============================================================
   Upcoming Events Carousel
   ============================================================ */

:root {
  --bg-top:        #29c4ec;
  --bg-bottom:     #1eb4e2;
  --card-w:        220px;
  --card-h:        290px;
  --gap:           12px;
  /* How much of the edge card stays visible as a "peek".
     Half a card, so the strip always looks like it continues. */
  --peek:          calc(var(--card-w) * .5);
  /* Desktop arc: how far the outermost cards drop below the centre one,
     and how far they tilt. Set to 0 on mobile to flatten the strip. */
  --arc-depth:     0px;
  --arc-tilt:      0deg;
  /* The fade reaches just past the peek, so the half-card is dimmed
     but still readable — it never fully vanishes before it's clipped. */
  --fade:          calc(var(--peek) + var(--gap));
  --ease:          cubic-bezier(.22, .61, .36, 1);
}

/* Registered so it can be transitioned — an unregistered custom
   property is an untyped token and jumps instead of animating. */
@property --hover-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ---------- Section / background ---------- */

.events {
  position: relative;
  overflow: hidden;
}

/* subtle starfield sparkle, like the reference */
.events::before,
.events::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

.events::before {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 33% 78%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 88%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 62%, rgba(255,255,255,.6),  transparent 60%);
  background-size: 420px 320px;
  opacity: .9;
}

.events::after {
  background-image:
    radial-gradient(1.2px 1.2px at 25% 55%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 35%, rgba(255,255,255,.4),  transparent 60%),
    radial-gradient(1.3px 1.3px at 45% 15%, rgba(255,255,255,.35), transparent 60%);
  background-size: 260px 210px;
  opacity: .8;
}

.events__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 8px;
}

/* ---------- Carousel shell ---------- */

.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Viewport: scrolls, and is masked so cards melt into the background
   at both ends. A plain 2-stop gradient leaves a visible seam because
   the alpha falloff is linear; the extra stops ease it out instead.
   The ramp reaches full opacity at --fade (just past the half-card
   peek), so the peeking card reads as dimmed rather than erased. */
.carousel__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 14px;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,.04)  calc(var(--fade) * .18),
    rgba(0,0,0,.14)  calc(var(--fade) * .34),
    rgba(0,0,0,.34)  calc(var(--fade) * .52),
    rgba(0,0,0,.62)  calc(var(--fade) * .70),
    rgba(0,0,0,.87)  calc(var(--fade) * .86),
    rgba(0,0,0,1)    var(--fade),
    rgba(0,0,0,1)    calc(100% - var(--fade)),
    rgba(0,0,0,.87)  calc(100% - var(--fade) * .86),
    rgba(0,0,0,.62)  calc(100% - var(--fade) * .70),
    rgba(0,0,0,.34)  calc(100% - var(--fade) * .52),
    rgba(0,0,0,.14)  calc(100% - var(--fade) * .34),
    rgba(0,0,0,.04)  calc(100% - var(--fade) * .18),
    rgba(0,0,0,0)    100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,.04)  calc(var(--fade) * .18),
    rgba(0,0,0,.14)  calc(var(--fade) * .34),
    rgba(0,0,0,.34)  calc(var(--fade) * .52),
    rgba(0,0,0,.62)  calc(var(--fade) * .70),
    rgba(0,0,0,.87)  calc(var(--fade) * .86),
    rgba(0,0,0,1)    var(--fade),
    rgba(0,0,0,1)    calc(100% - var(--fade)),
    rgba(0,0,0,.87)  calc(100% - var(--fade) * .86),
    rgba(0,0,0,.62)  calc(100% - var(--fade) * .70),
    rgba(0,0,0,.34)  calc(100% - var(--fade) * .52),
    rgba(0,0,0,.14)  calc(100% - var(--fade) * .34),
    rgba(0,0,0,.04)  calc(100% - var(--fade) * .18),
    rgba(0,0,0,0)    100%
  );
}

.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
  width: max-content;
}

/* ---------- Card ---------- */

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 14px;
  overflow: hidden;
  background: #0a6f96;
  /* Keep the blur tight. A wide blur bleeds past the card's own width,
     so neighbouring shadows overlap and merge into one continuous dark
     band across the bottom of the strip instead of reading per-card. */
  box-shadow: 0 3px 6px rgba(0, 44, 70, .22);
  transition: box-shadow .35s var(--ease), --hover-y .35s var(--ease);

  /* Arc placement (desktop only) is written to these by script.js.
     Composing them here — rather than letting JS write `transform`
     directly — keeps the hover lift from being clobbered by an
     inline style it can't override. */
  --arc-y:    0px;
  --arc-rot:  0deg;
  --hover-y:  0px;

  transform:
    translateY(calc(var(--arc-y) + var(--hover-y)))
    rotate(var(--arc-rot));
}

.card:hover {
  --hover-y: -6px;
  box-shadow: 0 7px 12px rgba(0, 44, 70, .28);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* dark scrim so the caption stays readable on any photo */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0)   38%,
    rgba(0,0,0,.18) 56%,
    rgba(0,0,0,.48) 74%,
    rgba(0,0,0,.72) 100%
  );
  pointer-events: none;
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 16px 18px;
}

.card__title {
  margin: 0 0 7px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.18;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.card__meta {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  opacity: .88;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ---------- Nav buttons (start / end of the carousel) ---------- */

.carousel__nav {
  flex: 0 0 auto;
  /* Themes set button { padding: 12px 24px; min-width: ... } which adds
     to the width and stretches this into an ellipse. Pin every box
     property rather than only width/height, and force border-box so
     any padding a theme does win stays inside the 38px. */
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  /* An <a> without href gets neither the pointer cursor nor a button's
     drag-select immunity, so both are asserted here. text-decoration
     covers themes that underline every link. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
  background: rgba(255, 255, 255, .92);
  color: #1595c6;
  box-shadow: 0 4px 14px rgba(0, 60, 90, .25);
  /* Themes also like `text-transform`, `font-size` and `line-height`
     on buttons; none affect an SVG-only button, but appearance:none
     stops UA/theme button chrome leaking in. */
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s var(--ease), transform .2s var(--ease), opacity .25s var(--ease);
}

/* :disabled is not carried here — it only matches form controls, so it
   never applied once the nav became an <a>, and the infinite loop has
   no end state to disable at. */
.carousel__nav:hover {
  background: #fff;
  transform: scale(1.08);
}

.carousel__nav:active { transform: scale(.96); }

/* Keyboard focus must stay visible: the element is reachable by Tab. */
.carousel__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.carousel__nav svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Responsive ---------- */

/* ---------- Desktop: curved / arc layout ---------- */

@media (min-width: 901px) {
  :root {
    --arc-depth: 92px;
    --arc-tilt:  11deg;
    /* Cards sit flush on desktop. Zeroed on the variable rather than
       on .carousel__track's `gap` alone, because cardStep() and the
       --peek/--fade maths all measure card width + this gap — setting
       only the track's gap would leave the scroll maths out of sync. */
    --gap: 0px;
  }

  /* Room for the outer cards to swing down into, and for rotated
     corners to sit inside the scroll box instead of being clipped. */
  .carousel__viewport {
    padding-bottom: calc(14px + var(--arc-depth));
  }

  /* Pivot near the bottom so the tilt fans the tops outward,
     keeping the lower edges roughly on the arc line. */
  .card {
    transform-origin: 50% 150%;
    /* With no gap the cards touch, so a blurred shadow falls on the
       neighbour rather than the background. Keep it tight and vertical
       so it reads as depth under the card, not grime between cards. */
    box-shadow: 0 4px 5px -2px rgba(0, 44, 70, .3);
  }

  .card:hover {
    box-shadow: 0 9px 12px -3px rgba(0, 44, 70, .34);
  }
}

@media (max-width:1024px){
  .carousel__track{
		gap:10px;
  }
}

@media (max-width: 640px) {
  :root {
    /* One full card centred, with a sliver of the previous and next
       either side. Derived from the viewport rather than fixed, so the
       centred card always fills the space it is given:
         card = 100vw - 2 x (sliver + gap)
       --peek is overridden to match the sliver, since the mask and the
       scroll maths both key off it. */
    --sliver:  58px;
    --gap:     10px;
    /* Capped, or at the top of this range (640px) the card would grow
       to run off the screen. */
    --card-w:  min(250px, calc(100vw - 2 * (var(--sliver) + var(--gap))));
    --card-h:  calc(var(--card-w) * 1.3);
    /* Whatever the card does not use, split between the two sides.
       Keeps the card centred once --card-w hits its cap. */
    --peek:    calc((100vw - var(--card-w)) / 2 - var(--gap));
  }

  .events { padding: 30px 0 44px; }
  .card__title { font-size: 16px; }

  /* Float the arrows over the strip. As flex siblings they were eating
     ~90px of a 430px screen, which is what stopped a whole card fitting. */
  .carousel { position: relative; }
	
  .carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    /* min/max must move together with width/height — the base rule
       pins all four, so setting width alone would be clamped back. */
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .82);
  }

  .carousel__nav--prev { left: 0px; }
  .carousel__nav--next { right: 0px; }

  .carousel__nav:hover { transform: translateY(-50%) scale(1.08); }
  .carousel__nav:active { transform: translateY(-50%) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
  .card, .carousel__nav, }