/* ======================================== Events Hero =================================== */

.Events-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  margin: 80px 0px 0px;
}

@media (max-width: 768px) {
  .Events-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 40px 0px 0px;
  }
}

.Events-hero__text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.Events-hero__image {
  max-width: 352px;
  height: auto;
}

@media (max-width: 768px) {
  .Events-hero__image {
    max-width: unset;
  }
}

/* ---------------------------------------- Events Conference ----------------------------------- */

.Events-hero--conference {
  display: grid;
  grid-template-columns: 64fr 45fr;
  grid-template-areas:
    "text image"
    "conference image";
  column-gap: 32px;
  row-gap: 40px;
  margin: 80px 0px 0px;
}

@media (max-width: 768px) {
  .Events-hero--conference {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image"
      "conference";
    margin: 40px 0px 0px;
    row-gap: 24px;
  }
}

.Events-hero__conference-image {
  grid-area: image;
  border-radius: 24px;
}

@media (max-width: 768px) {
  .Events-hero__conference-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
    overflow: hidden;
    padding-top: 66px;
  }
}

.Events-hero__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 24px;
}

.Events-hero__conference {
  grid-area: conference;
}

.conference {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid #B8C5D3;
}

.conference__title-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conference__chips {
  display: flex;
  gap: 16px;
}

@media (max-width: 768px) {
  .conference__chips {
    flex-direction: column;
  }
}

.conference p.body-m {
  color: var(--capti-color--text-secondary);
}

.conferences__representatives-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

.conferences__representatives {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .conferences__representatives {
    align-items: center;
  }
}


/* ======================================== Events Content =================================== */

.Events-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  margin: 80px 0px;

}

/* ======================================== Events Content WCAG Structure =================================== */

.Events-content__tabs-container {
  position: relative;
}

.Events-content__tabs {
  position: relative;
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.Events-content__tabs li[role="presentation"] {
  flex: 1;
}

.Events-content__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 66px;
  border: none;
  border-bottom: 1px solid #000;
  background-color: unset;
  cursor: pointer;
  font-size: 28px;
  line-height: 34px;
  color: inherit;
  text-decoration: none;
  font-family: inherit;
}

/* Active state styles - compatible with both old and new class structure */
.Events-content__tab--active,
.Events-content__tab.active {
  border-bottom: 6px solid #000;
  font-weight: 600;
}

/* Focus styles for accessibility */
.Events-content__tab:focus {
  outline: none;
}

.Events-content__tab:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Remove click effects */
.Events-content__tab:active {
  outline: none;
  background-color: transparent;
  border-color: transparent;
}

/* Panel container */
.Events-content__panels {
  margin-top: 80px;
  position: relative;
  /* overflow: hidden;*/
}

.Events-content__events {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 100%;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
}

.Events-content__events:focus {
  outline: none;
}

/* No animation - instant switching */
.Events-content__events:not(.active) {
  display: none;
}

.Events-content__events.active {
  display: flex;
}

/* List styles for webinar cards container */
.Events-content__events ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.Events-content__events li[tabindex="-1"] {
  outline: none;
}

.Events-content__events li[tabindex="-1"]:focus {
  outline: 2px solid #0B73EB;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ------------------------ Event card ------------------- */

.event-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-areas:
    "image text";
  gap: 32px;
  padding: 32px;
  border-radius: 32px;
  border: 1px solid var(--Outline-Medium, #B8C5D3);
}

@media (max-width: 768px) {
  .event-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "text";
  }
}

.event-card__image-block {
  position: relative;
  grid-area: image;
}

.event-card__image-block-bage {
  position: absolute;
  top: 16px;
  left: -12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--Background-Brand, #0B73EB);
  color: var(--capti-color--white);
}

.event-card__content {
  display: flex;
  grid-area: text;
  flex-direction: column;
  gap: 16px;
}

.event-card__title-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-card__title-block h3 {
  color: var(--capti-color--brand-violet);
}

.event-card__content-footer {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .event-card__content-footer {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }
}

.event-card__speakers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .event-card__speakers-title {
    display: none;
  }
}

.event-card__bullet-points-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.event-card__bullet-points-block--one-row {
  grid-template-rows: 1fr;
}

.event-card__bullet-point {
  display: flex;
  gap: 12px;
  align-items: center;
}

.event-card__bullet-point-image {
  height: 66px;
  width: 66px;
  min-height: 66px;
  min-width: 66px;
  border-radius: 66px;
  background-color: lightgrey;
}

@media (max-width: 768px) {
  .event-card__bullet-point-image {
    height: 32px;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }
}


.event-card__bullet-point-speaker-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-card__bullet-point-speaker {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

@media (max-width: 768px) {
  .event-card__bullet-point-speaker {
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
  }
}

@media (max-width: 768px) {
  .event-card__bullet-point-speaker-position {
    display: none;
  }
}

.event-card__bullet-point-more {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.event-card__content-footer-action-text {
  color: var(--capti-color--text-secondary);
  text-align: right;
  max-width: 246px;
  width: 246px;
}

/* ======================================== No Events =================================== */

.Events-content__no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.Events-content__calendar-blocked-block {
  position: relative;
}

.Events-content__calendar-blocked-picture {
  width: 200px;
  height: 200px;
}

.Events-content__calendar-blocked-spot_01 {
  width: 310px;
  height: 310px;
  position: absolute;
  z-index: -1;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Events-content__no-events h2.h2,
.Events-content__no-events p.h5 {
  text-align: center;
}

.Events-content__no-events p.h5 {
  color: var(--capti-color--text-disabled);
}

/* ======================================== Sing Up =================================== */

/* ========================= MailChimp Form Component - Article Context ========================== */

/* Article Context - when form appears in articles */
/* These styles are specific to when the form appears in articles context */
.sing-up {
  position: relative;
  display: grid;
  grid-template-columns: 248px 1fr;
  padding: 48px 16px;
  margin: 120px 0 0;
  gap: 24px;
  align-items: self-start;
  border-radius: 24px;
  background:
    linear-gradient(90deg,
      var(--Brand-Green, rgba(73, 131, 79, 0.18)) 0%,
      var(--Brand-Orange, rgba(242, 153, 74, 0.18)) 100%),
    var(--Background-Default, #fff);
  min-height: 264px;
  scroll-margin-top: 112px;
  /* Increased by 32px for higher scroll position */
}

.sing-up__texts {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 16px;
}

.sing-up__texts-contnet {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
  width: 100%;
}

.sing-up__texts-contnet>h2.h5 {
  text-align: center;
  margin: 0;
}

/* Bell ringing animation for articles context */
@keyframes ring-bell {

  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(10deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(6deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(2deg);
  }

  60% {
    transform: rotate(-1deg);
  }

  70% {
    transform: rotate(1deg);
  }

  80% {
    transform: rotate(0deg);
  }
}

/* Bell ringing state for articles context */
.sing-up__yellow-bell.ringing {
  animation: ring-bell 0.8s ease-in-out;
  transform-origin: center top;
}

@media (max-width: 600px) {
  .sing-up {
    grid-template-columns: 1fr;
    border-radius: 0;
    margin: 40px 0;
    margin-left: -16px;
    margin-right: -16px;
    width: unset;
  }

  .sing-up__yellow-bell {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 60px;
    height: auto;
  }
}