/* =====================================================
   GLOBAL EVENT CARDS
===================================================== */

.aboutEventsList {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: stretch;

  gap: 18px;
}

/* =====================================================
   GLOBAL LATEST EVENTS
===================================================== */

.latestEvents {
  width: 100%;
}

.latestEventsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.latestEventsCard {
  --eventImageRotateX: 0deg;
  --eventImageRotateY: 0deg;
  --eventImageMoveX: 0px;
  --eventImageMoveY: 0px;
  --eventGlowX: 50%;
  --eventGlowY: 50%;
  --eventGlowOpacity: 0;
  --eventRippleX: 50%;
  --eventRippleY: 50%;
  position: relative;
  min-width: 0;
  min-height: 440px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  color: var(--colorText);
  text-decoration: none;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(59, 46, 34, 0);
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.5s ease;
}

.latestEventsCard::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  opacity: var(--eventGlowOpacity);
  background: radial-gradient(
    circle 150px at var(--eventGlowX) var(--eventGlowY),
    rgba(79, 95, 62, 0.17) 0%,
    rgba(79, 95, 62, 0.095) 24%,
    rgba(79, 95, 62, 0.035) 48%,
    rgba(79, 95, 62, 0) 72%
  );
  transition: opacity 0.5s ease;
}

.latestEventsCard::after {
  content: "";
  position: absolute;
  z-index: 9;
  left: var(--eventRippleX);
  top: var(--eventRippleY);
  width: 110px;
  height: 110px;
  border: 1px solid rgba(79, 95, 62, 0.24);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

.latestEventsCard.isRipple::after {
  animation: latestEventsRipple 0.58s ease-out forwards;
}

.latestEventsBorder {
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.latestEventsBorder span {
  position: absolute;
  display: block;
  background: rgba(79, 95, 62, 0.68);
}

.latestEventsBorderTop,
.latestEventsBorderBottom {
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}

.latestEventsBorderLeft,
.latestEventsBorderRight {
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.latestEventsBorderTop {
  top: 0;
  left: 0;
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.latestEventsBorderRight {
  top: 0;
  right: 0;
  transform-origin: center top;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s;
}

.latestEventsBorderBottom {
  right: 0;
  bottom: 0;
  transform-origin: right center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s;
}

.latestEventsBorderLeft {
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s;
}

.latestEventsImage {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--colorGrayLight);
  perspective: 900px;
}

.latestEventsImage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(59, 46, 34, 0) 55%,
    rgba(59, 46, 34, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}

.latestEventsImageFile,
.latestEventsImagePlaceholder {
  width: 100%;
  height: 100%;
  display: block;
}

.latestEventsImageFile {
  object-fit: cover;
  transform: perspective(900px)
    translate3d(var(--eventImageMoveX), var(--eventImageMoveY), 0)
    rotateX(var(--eventImageRotateX)) rotateY(var(--eventImageRotateY))
    scale(1.085);
  transform-origin: center;
  transition:
    transform 0.22s ease-out,
    filter 0.45s ease;
  will-change: transform;
}

.latestEventsImagePlaceholder {
  background: var(--colorGrayLight);
}

.latestEventsContent {
  position: relative;
  z-index: 2;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 18px 28px;
  background: transparent;
}

.latestEventsMeta {
  min-height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(200, 169, 106, 0.32);
}

.latestEventsReadingTime {
  font-family: var(--fontText);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--colorBrown);
}

.latestEventsDate {
  font-family: var(--fontText);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25em;
  color: rgba(59, 46, 34, 0.58);
}

.latestEventsTitle {
  margin: 0;
  font-family: var(--fontTitle);
  font-size: 25px;
  font-weight: 700;
  line-height: 1em;
  color: var(--colorText);
  transform: translateX(0);
  transition:
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.latestEventsDescription {
  margin-top: 9px;
  font-family: var(--fontText);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35em;
  color: rgba(59, 46, 34, 0.78);
  transform: translateX(0);
  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.latestEventsFlowLine {
  position: absolute;
  z-index: 1;
  left: -30px;
  right: -30px;
  bottom: -8px;
  height: 150px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.latestEventsFlowLineSvg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.latestEventsFlowLinePath {
  fill: none;
  stroke: var(--colorPrimary);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.88;
  transition:
    stroke-dashoffset 3.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.8s ease;
}

.latestEventsCard.isLeaving .latestEventsFlowLine {
  opacity: 0.2;
  transition: opacity 0.06s linear;
}

.latestEventsCard.isLeaving .latestEventsFlowLinePath {
  stroke-dashoffset: -1000;
  opacity: 0;
  transition:
    stroke-dashoffset 0.26s cubic-bezier(0.7, 0, 1, 0.3),
    opacity 0.12s linear 0.1s;
}

@media (hover: hover) and (pointer: fine) {
  .latestEventsCard:hover {
    background: #fbf8f1;
    transform: translateY(-2px) scale(1.012);
    box-shadow:
      0 18px 42px rgba(59, 46, 34, 0.085),
      0 5px 16px rgba(59, 46, 34, 0.035);
  }

  .latestEventsCard:hover::before {
    --eventGlowOpacity: 1;
  }

  .latestEventsCard:hover .latestEventsBorderTop,
  .latestEventsCard:hover .latestEventsBorderBottom {
    transform: scaleX(1);
  }

  .latestEventsCard:hover .latestEventsBorderLeft,
  .latestEventsCard:hover .latestEventsBorderRight {
    transform: scaleY(1);
  }

  .latestEventsCard:hover .latestEventsImage::after {
    opacity: 1;
  }

  .latestEventsCard:hover .latestEventsImageFile {
    filter: saturate(1.04) contrast(1.02);
  }

  .latestEventsCard:hover .latestEventsTitle {
    color: var(--colorPrimary);
    transform: translateX(3px);
  }

  .latestEventsCard:hover .latestEventsDescription {
    color: rgba(59, 46, 34, 0.68);
    transform: translateX(3px);
  }

  .latestEventsCard:hover .latestEventsFlowLine {
    opacity: 0.2;
  }

  .latestEventsCard:hover .latestEventsFlowLinePath {
    stroke-dashoffset: 0;
  }

  .latestEventsCard.isLeaving:hover .latestEventsFlowLinePath {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
}

@keyframes latestEventsRipple {
  0% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(0.2);
    box-shadow:
      0 0 0 0 rgba(79, 95, 62, 0.12),
      0 0 18px rgba(79, 95, 62, 0.08);
  }

  45% {
    opacity: 0.18;
    box-shadow:
      0 0 0 12px rgba(79, 95, 62, 0.08),
      0 0 28px rgba(79, 95, 62, 0.045);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5.8);
    box-shadow:
      0 0 0 24px rgba(79, 95, 62, 0),
      0 0 34px rgba(79, 95, 62, 0);
  }
}

@media (max-width: 1440px) {
  .latestEventsGrid {
    gap: 14px;
  }

  .latestEventsCard {
    min-height: 420px;
  }

  .latestEventsTitle {
    font-size: 23px;
  }

  .latestEventsFlowLine {
    height: 135px;
  }
}

@media (max-width: 1200px) {
  .latestEventsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .latestEventsCard {
    min-height: 430px;
  }

  .latestEventsImage {
    aspect-ratio: 1.52 / 1;
  }

  .latestEventsImageFile {
    transform: scale(1);
    will-change: auto;
  }

  .latestEventsTitle {
    font-size: 25px;
  }

  .latestEventsFlowLine {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .latestEventsGrid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .latestEventsCard {
    min-height: 410px;
    border-radius: 6px;
  }

  .latestEventsContent {
    padding: 15px 15px 26px;
  }

  .latestEventsMeta {
    margin-bottom: 16px;
    padding-bottom: 13px;
  }

  .latestEventsTitle {
    font-size: 24px;
  }

  .latestEventsDescription {
    font-size: 14px;
  }

  .latestEventsBorder {
    display: none;
  }

  .latestEventsFlowLine {
    left: -20px;
    right: -20px;
    bottom: -12px;
    height: 105px;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .latestEventsCard,
  .latestEventsImageFile,
  .latestEventsTitle,
  .latestEventsDescription,
  .latestEventsFlowLinePath,
  .latestEventsBorder span {
    transition: none;
  }

  .latestEventsImageFile {
    transform: scale(1);
    will-change: auto;
  }

  .latestEventsFlowLine,
  .latestEventsBorder {
    display: none;
  }

  .latestEventsCard::before,
  .latestEventsCard::after {
    display: none;
  }
}

.aboutEventsItem {
  --eventImageRotateX: 0deg;

  --eventImageRotateY: 0deg;

  --eventImageMoveX: 0px;

  --eventImageMoveY: 0px;

  --eventGlowX: 50%;

  --eventGlowY: 50%;

  --eventGlowOpacity: 0;

  --eventRippleX: 50%;

  --eventRippleY: 50%;

  position: relative;

  min-width: 0;

  min-height: 500px;

  height: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 8px;

  background: transparent;

  color: var(--colorText);

  text-decoration: none;

  transform: translateY(0) scale(1);

  box-shadow: 0 0 0 rgba(59, 46, 34, 0);

  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.5s ease;
}

.aboutEventsItem::before {
  content: "";

  position: absolute;

  z-index: 6;

  inset: 0;

  pointer-events: none;

  opacity: var(--eventGlowOpacity);

  background: radial-gradient(
    circle 150px at var(--eventGlowX) var(--eventGlowY),
    rgba(79, 95, 62, 0.17) 0%,

    rgba(79, 95, 62, 0.095) 24%,

    rgba(79, 95, 62, 0.035) 48%,

    rgba(79, 95, 62, 0) 72%
  );

  transition: opacity 0.5s ease;
}

.aboutEventsItem::after {
  content: "";

  position: absolute;

  z-index: 9;

  left: var(--eventRippleX);

  top: var(--eventRippleY);

  width: 110px;

  height: 110px;

  border: 1px solid rgba(79, 95, 62, 0.24);

  border-radius: 50%;

  pointer-events: none;

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.2);
}

.aboutEventsItem.isRipple::after {
  animation: aboutEventsRipple 0.58s ease-out forwards;
}

.aboutEventsHoverBorder {
  position: absolute;

  z-index: 8;

  inset: 0;

  border-radius: inherit;

  pointer-events: none;
}

.aboutEventsHoverBorder span {
  position: absolute;

  display: block;

  background: rgba(79, 95, 62, 0.68);
}

.aboutEventsHoverBorderTop,
.aboutEventsHoverBorderBottom {
  width: 100%;

  height: 1px;

  transform: scaleX(0);
}

.aboutEventsHoverBorderLeft,
.aboutEventsHoverBorderRight {
  width: 1px;

  height: 100%;

  transform: scaleY(0);
}

.aboutEventsHoverBorderTop {
  top: 0;

  left: 0;

  transform-origin: left center;

  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aboutEventsHoverBorderRight {
  top: 0;

  right: 0;

  transform-origin: center top;

  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.28s;
}

.aboutEventsHoverBorderBottom {
  right: 0;

  bottom: 0;

  transform-origin: right center;

  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s;
}

.aboutEventsHoverBorderLeft {
  bottom: 0;

  left: 0;

  transform-origin: center bottom;

  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.82s;
}

.aboutEventsImage {
  position: relative;

  z-index: 2;

  width: 100%;

  aspect-ratio: 1.52 / 1;

  flex-shrink: 0;

  overflow: hidden;

  background: var(--colorGrayLight);

  perspective: 900px;
}

.aboutEventsImage::after {
  content: "";

  position: absolute;

  z-index: 3;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(59, 46, 34, 0) 55%,

    rgba(59, 46, 34, 0.09) 100%
  );

  opacity: 0;

  transition: opacity 0.45s ease;
}

.aboutEventsImageFile,
.aboutEventsImagePlaceholder {
  width: 100%;

  height: 100%;

  display: block;
}

.aboutEventsImageFile {
  object-fit: cover;

  transform: perspective(900px)
    translate3d(var(--eventImageMoveX), var(--eventImageMoveY), 0)
    rotateX(var(--eventImageRotateX)) rotateY(var(--eventImageRotateY))
    scale(1.085);

  transform-origin: center;

  transition:
    transform 0.22s ease-out,
    filter 0.45s ease;

  will-change: transform;
}

.aboutEventsImagePlaceholder {
  background: var(--colorGrayLight);
}

.aboutEventsItemContent {
  position: relative;

  z-index: 2;

  min-height: 0;

  flex: 1;

  display: flex;

  flex-direction: column;

  padding: 20px 20px 32px 20px;

  background: transparent;
}

.aboutEventsMeta {
  min-height: 22px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px 18px;

  margin-bottom: 19px;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(200, 169, 106, 0.32);
}

.aboutEventsReadingTime {
  font-family: var(--fontText);

  font-size: 15px;

  font-weight: 700;

  line-height: 1.25em;

  color: var(--colorBrown);
}

.aboutEventsDate {
  font-family: var(--fontText);

  font-size: 12px;

  font-weight: 400;

  line-height: 1.25em;

  color: rgba(59, 46, 34, 0.58);
}

.aboutEventsItemTitle {
  margin: 0;

  font-family: var(--fontTitle);

  font-size: 28px;

  font-weight: 700;

  line-height: 1em;

  color: var(--colorText);

  transform: translateX(0);

  transition:
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aboutEventsDescription {
  margin-top: 10px;

  font-family: var(--fontText);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.3em;

  color: rgba(59, 46, 34, 0.78);

  transform: translateX(0);

  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aboutEventsFlowLine {
  position: absolute;

  z-index: 1;

  left: -30px;

  right: -30px;

  bottom: -8px;

  height: 150px;

  overflow: hidden;

  pointer-events: none;

  opacity: 0;

  transition: opacity 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aboutEventsFlowLineSvg {
  width: 100%;

  height: 100%;

  display: block;

  overflow: visible;
}

.aboutEventsFlowLinePath {
  fill: none;

  stroke: var(--colorPrimary);

  stroke-width: 1.55;

  stroke-linecap: round;

  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  stroke-dasharray: 1000;

  stroke-dashoffset: 1000;

  opacity: 0.88;

  transition:
    stroke-dashoffset 4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 2s ease;
}

.aboutEventsItem.isLeaving .aboutEventsFlowLine {
  opacity: 0.2;

  transition: opacity 0.06s linear;
}

.aboutEventsItem.isLeaving .aboutEventsFlowLinePath {
  stroke-dashoffset: -1000;

  opacity: 0;

  transition:
    stroke-dashoffset 0.26s cubic-bezier(0.7, 0, 1, 0.3),
    opacity 0.12s linear 0.1s;
}

@media (hover: hover) and (pointer: fine) {
  .aboutEventsItem:hover {
    background: #fbf8f1;

    transform: translateY(-2px) scale(1.012);

    box-shadow:
      0 18px 42px rgba(59, 46, 34, 0.085),
      0 5px 16px rgba(59, 46, 34, 0.035);
  }

  .aboutEventsItem:hover::before {
    --eventGlowOpacity: 1;
  }

  .aboutEventsItem:hover .aboutEventsHoverBorderTop,
  .aboutEventsItem:hover .aboutEventsHoverBorderBottom {
    transform: scaleX(1);
  }

  .aboutEventsItem:hover .aboutEventsHoverBorderLeft,
  .aboutEventsItem:hover .aboutEventsHoverBorderRight {
    transform: scaleY(1);
  }

  .aboutEventsItem:hover .aboutEventsImage::after {
    opacity: 1;
  }

  .aboutEventsItem:hover .aboutEventsImageFile {
    filter: saturate(1.04) contrast(1.02);
  }

  .aboutEventsItem:hover .aboutEventsItemTitle {
    color: var(--colorPrimary);

    transform: translateX(3px);
  }

  .aboutEventsItem:hover .aboutEventsDescription {
    color: rgba(59, 46, 34, 0.68);

    transform: translateX(3px);
  }

  .aboutEventsItem:hover .aboutEventsFlowLine {
    opacity: 0.2;
  }

  .aboutEventsItem:hover .aboutEventsFlowLinePath {
    stroke-dashoffset: 0;
  }

  .aboutEventsItem.isLeaving:hover .aboutEventsFlowLinePath {
    stroke-dashoffset: -1000;

    opacity: 0;
  }
}

@keyframes aboutEventsRipple {
  0% {
    opacity: 0.34;

    transform: translate(-50%, -50%) scale(0.2);

    box-shadow:
      0 0 0 0 rgba(79, 95, 62, 0.12),
      0 0 18px rgba(79, 95, 62, 0.08);
  }

  45% {
    opacity: 0.18;

    box-shadow:
      0 0 0 12px rgba(79, 95, 62, 0.08),
      0 0 28px rgba(79, 95, 62, 0.045);
  }

  100% {
    opacity: 0;

    transform: translate(-50%, -50%) scale(5.8);

    box-shadow:
      0 0 0 24px rgba(79, 95, 62, 0),
      0 0 34px rgba(79, 95, 62, 0);
  }
}

@media (max-width: 1440px) {
  .aboutEventsItem {
    min-height: 470px;
  }

  .aboutEventsItemTitle {
    font-size: 26px;
  }

  .aboutEventsFlowLine {
    height: 135px;
  }
}

@media (max-width: 1200px) {
  .aboutEventsList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aboutEventsItem {
    min-height: 460px;
  }

  .aboutEventsImageFile {
    transform: scale(1);

    will-change: auto;
  }

  .aboutEventsFlowLine {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .aboutEventsList {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .aboutEventsItem {
    min-height: 430px;

    border-radius: 6px;
  }

  .aboutEventsItemContent {
    padding: 15px 15px 28px 15px;
  }

  .aboutEventsMeta {
    margin-bottom: 16px;

    padding-bottom: 13px;
  }

  .aboutEventsReadingTime {
    font-size: 14px;
  }

  .aboutEventsItemTitle {
    font-size: 24px;
  }

  .aboutEventsDescription {
    font-size: 14px;
  }

  .aboutEventsFlowLine {
    left: -20px;

    right: -20px;

    bottom: -12px;

    height: 105px;

    opacity: 0;
  }

  .aboutEventsHoverBorder {
    display: none;
  }
}

@media (max-width: 420px) {
  .aboutEventsItem {
    min-height: 410px;
  }
}

@media (max-width: 500px) {
  .aboutEventsList {
    grid-template-columns: 1fr;

    gap: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aboutEventsItem,
  .aboutEventsImageFile,
  .aboutEventsItemTitle,
  .aboutEventsDescription,
  .aboutEventsFlowLinePath,
  .aboutEventsHoverBorder span {
    transition: none;
  }

  .aboutEventsImageFile {
    transform: scale(1);

    will-change: auto;
  }

  .aboutEventsFlowLine,
  .aboutEventsHoverBorder {
    display: none;
  }

  .aboutEventsItem::before,
  .aboutEventsItem::after {
    display: none;
  }
}

.eventsHero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: var(--colorText);
}

.eventsHeroBackground {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.eventsHeroOverlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(18, 15, 12, 0.92) 0%,
      rgba(18, 15, 12, 0.76) 24%,
      rgba(18, 15, 12, 0.45) 44%,
      rgba(18, 15, 12, 0.12) 68%,
      rgba(18, 15, 12, 0.02) 100%
    ),
    linear-gradient(
      180deg,
      rgba(18, 15, 12, 0.08) 0%,
      rgba(18, 15, 12, 0.04) 50%,
      rgba(18, 15, 12, 0.24) 100%
    );
}

.eventsHeroInner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.eventsHeroContent {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eventsHeroTitle {
  margin: 0;
  font-family: var(--fontTitle);
  font-size: 68px;
  font-weight: 700;
  line-height: 0.9em;
  color: var(--colorBackground);
}

.eventsHeroDescription {
  max-width: 540px;
  margin-top: 14px;
  font-family: var(--fontText);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35em;
  color: rgba(248, 246, 240, 0.82);
}

.eventsHeroButtons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.eventsHeroButton {
  min-width: 0;
}

.eventsHeroButtonSecondary {
  border: 1px solid rgba(248, 246, 240, 0.8);
  background: rgba(20, 14, 10, 0.28);
  color: var(--colorBackground);
  backdrop-filter: blur(8px);
}

.eventsArticles {
  position: relative;
  padding-top: 70px;
  padding-bottom: 100px;
  background: var(--colorBackground);
}

.eventsArticlesInner {
  position: relative;
}

.eventsArticlesHeader {
  margin-bottom: 36px;
}

.eventsArticlesStage {
  position: relative;
  min-height: 260px;
}

.eventsArticlesGrid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.eventsArticlesGrid .aboutEventsItem {
  min-height: 440px;
}

.eventsArticlesGrid .aboutEventsImage {
  aspect-ratio: 1.35 / 1;
}

.eventsArticlesGrid .aboutEventsItemContent {
  padding: 18px 18px 28px;
}

.eventsArticlesGrid .aboutEventsMeta {
  gap: 8px 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.eventsArticlesGrid .aboutEventsReadingTime {
  font-size: 13px;
}

.eventsArticlesGrid .aboutEventsDate {
  font-size: 11px;
}

.eventsArticlesGrid .aboutEventsItemTitle {
  font-size: 25px;
  line-height: 1em;
}

.eventsArticlesGrid .aboutEventsDescription {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.35em;
}

.eventsArticlesContent {
  position: relative;
  z-index: 1;
  min-height: 200px;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    filter 0.26s ease;
}

.eventsArticlesContent.isAjaxLeaving {
  opacity: 0;
  transform: translateY(-12px) scale(0.988);
  filter: blur(3px);
}

.eventsAjaxLoader {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(12px) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.3s ease;
}

.eventsArticles.isLoading .eventsAjaxLoader {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  transition-delay: 0.1s;
}

.eventsAjaxLoaderMark {
  position: relative;
  width: 58px;
  height: 58px;
}

.eventsAjaxLoaderRing {
  position: absolute;
  left: 50%;
  top: 50%;
  border-style: solid;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.eventsAjaxLoaderRingFirst {
  width: 58px;
  height: 58px;
  border-width: 1px;
  border-color: rgba(79, 95, 62, 0.14);
  border-top-color: var(--colorPrimary);
  border-right-color: rgba(79, 95, 62, 0.48);
  animation: eventsLoaderRotate 1.25s linear infinite;
}

.eventsAjaxLoaderRingSecond {
  width: 38px;
  height: 38px;
  border-width: 1px;
  border-color: rgba(140, 110, 74, 0.12);
  border-bottom-color: var(--colorBrown);
  border-left-color: rgba(140, 110, 74, 0.42);
  animation: eventsLoaderRotateReverse 1.65s linear infinite;
}

.eventsAjaxLoaderDot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--colorPrimary);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 6px rgba(79, 95, 62, 0.06),
    0 0 22px rgba(79, 95, 62, 0.16);
  animation: eventsLoaderPulse 1.5s ease-in-out infinite;
}

.eventsAjaxLoaderText {
  font-family: var(--fontText);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25em;
  color: var(--colorBrown);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.eventsAjaxCardEntering {
  opacity: 0;
  transform: translateY(34px) scale(0.965);
  filter: blur(5px);
  transition:
    opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.5s ease;
  transition-delay: calc(var(--eventsCardIndex, 0) * 80ms);
}

.eventsAjaxCardEntering.isAjaxVisible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.eventsPaginationWrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.eventsPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.eventsPaginationButton {
  position: relative;
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 13px;
  border: 1px solid rgba(79, 95, 62, 0.24);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 0 0 rgba(59, 46, 34, 0);
  font-family: var(--fontText);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--colorText);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.eventsPaginationButton::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(79, 95, 62, 0.1) 0%,
    rgba(79, 95, 62, 0) 70%
  );
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.eventsPaginationButton svg {
  position: relative;
  z-index: 2;
  transition: transform var(--transition);
}

.eventsPaginationButton.isActive {
  border-color: var(--colorPrimary);
  background: var(--colorPrimary);
  color: var(--colorBackground);
  box-shadow: 0 8px 20px rgba(59, 46, 34, 0.08);
  cursor: default;
}

.eventsPaginationButton:disabled {
  opacity: 0.35;
  cursor: default;
}

.eventsPaginationArrow {
  padding: 0;
}

.eventsPaginationDots {
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontText);
  font-size: 16px;
  color: rgba(59, 46, 34, 0.5);
}

.eventsArticlesEmpty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(79, 95, 62, 0.16);
  border-radius: 8px;
  background: #fbf8f1;
  text-align: center;
  color: var(--colorBrown);
}

.eventsArticlesEmptyText {
  font-family: var(--fontTitle);
  font-size: 28px;
  font-weight: 700;
  line-height: 1em;
  color: var(--colorText);
}

@keyframes eventsLoaderRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes eventsLoaderRotateReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes eventsLoaderPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.82);
    opacity: 0.65;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .eventsHeroButtonSecondary:hover {
    border-color: var(--colorBackground);
    background: var(--colorBackground);
    color: var(--colorText);
  }

  .eventsPaginationButton:not(.isActive):not(:disabled):hover {
    border-color: rgba(79, 95, 62, 0.68);
    background: #fbf8f1;
    color: var(--colorPrimary);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      0 12px 28px rgba(59, 46, 34, 0.08),
      0 4px 10px rgba(59, 46, 34, 0.03);
  }

  .eventsPaginationButton:not(.isActive):not(:disabled):hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .eventsPaginationArrow:first-child:not(:disabled):hover svg {
    transform: translateX(-3px);
  }

  .eventsPaginationArrow:last-child:not(:disabled):hover svg {
    transform: translateX(3px);
  }
}

@media (max-width: 1440px) {
  .eventsHeroTitle {
    font-size: 62px;
  }

  .eventsArticles {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .eventsArticlesGrid {
    gap: 14px;
  }

  .eventsArticlesGrid .aboutEventsItem {
    min-height: 420px;
  }

  .eventsArticlesGrid .aboutEventsItemTitle {
    font-size: 23px;
  }
}

@media (max-width: 1200px) {
  .eventsHero {
    height: 400px;
  }

  .eventsHeroTitle {
    font-size: 54px;
  }

  .eventsHeroContent {
    max-width: 530px;
  }

  .eventsHeroDescription {
    max-width: 500px;
    font-size: 15px;
  }

  .eventsArticles {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .eventsArticlesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eventsArticlesGrid .aboutEventsItem {
    min-height: 430px;
  }

  .eventsArticlesGrid .aboutEventsImage {
    aspect-ratio: 1.52 / 1;
  }

  .eventsArticlesGrid .aboutEventsItemTitle {
    font-size: 25px;
  }

  .eventsPaginationWrapper {
    margin-top: 40px;
  }

  .eventsAjaxCardEntering {
    transform: translateY(26px) scale(0.975);
    filter: blur(3px);
    transition-delay: calc(var(--eventsCardIndex, 0) * 65ms);
  }

  .eventsAjaxCardEntering.isAjaxVisible {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 700px) {
  .eventsHero {
    height: 520px;
  }

  .eventsHeroBackground {
    object-position: 62% center;
  }

  .eventsHeroOverlay {
    background: linear-gradient(
      180deg,
      rgba(18, 15, 12, 0.28) 0%,
      rgba(18, 15, 12, 0.56) 42%,
      rgba(18, 15, 12, 0.9) 100%
    );
  }

  .eventsHeroInner {
    align-items: flex-end;
    padding-bottom: 30px;
  }

  .eventsHeroContent {
    max-width: 100%;
  }

  .eventsHeroTitle {
    font-size: 46px;
    line-height: 0.92em;
  }

  .eventsHeroDescription {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.35em;
  }

  .eventsHeroButtons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
  }

  .eventsHeroButton {
    width: 100%;
  }

  .eventsArticles {
    padding-top: 40px;
    padding-bottom: 55px;
  }

  .eventsArticlesHeader {
    margin-bottom: 25px;
  }

  .eventsArticlesGrid {
    gap: 12px;
  }

  .eventsArticlesGrid .aboutEventsItem {
    min-height: 410px;
  }

  .eventsArticlesGrid .aboutEventsItemContent {
    padding: 15px 15px 26px;
  }

  .eventsArticlesGrid .aboutEventsItemTitle {
    font-size: 22px;
  }

  .eventsAjaxLoaderMark {
    width: 52px;
    height: 52px;
  }

  .eventsAjaxLoaderRingFirst {
    width: 52px;
    height: 52px;
  }

  .eventsAjaxLoaderRingSecond {
    width: 34px;
    height: 34px;
  }

  .eventsAjaxLoaderText {
    font-size: 11px;
  }

  .eventsPaginationWrapper {
    margin-top: 30px;
  }

  .eventsPagination {
    gap: 6px;
  }

  .eventsPaginationButton {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
  }

  .eventsPaginationDots {
    min-width: 20px;
  }

  .eventsArticlesEmpty {
    min-height: 220px;
  }

  .eventsArticlesEmptyText {
    font-size: 24px;
  }

  .eventsAjaxCardEntering {
    transform: translateY(20px) scale(0.985);
    filter: blur(2px);
    transition-delay: calc(var(--eventsCardIndex, 0) * 55ms);
  }

  .eventsAjaxCardEntering.isAjaxVisible {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 500px) {
  .eventsArticlesGrid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .eventsArticlesGrid .aboutEventsItem {
    min-height: 410px;
  }

  .eventsArticlesGrid .aboutEventsImage {
    aspect-ratio: 1.52 / 1;
  }

  .eventsArticlesGrid .aboutEventsItemTitle {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .eventsHero {
    height: 500px;
  }

  .eventsHeroTitle {
    font-size: 40px;
  }

  .eventsHeroDescription {
    font-size: 13px;
  }

  .eventsPaginationButton {
    min-width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eventsArticlesContent,
  .eventsAjaxLoader,
  .eventsAjaxLoaderRing,
  .eventsAjaxLoaderDot,
  .eventsAjaxCardEntering,
  .eventsPaginationButton,
  .eventsPaginationButton::before,
  .eventsPaginationButton svg {
    transition: none;
    animation: none;
    filter: none;
  }

  .eventsAjaxCardEntering {
    opacity: 1;
    transform: none;
  }

  .eventsArticlesContent.isAjaxLeaving {
    opacity: 0;
    transform: none;
    filter: none;
  }
}