/*------------------------------------------------------------
Event Landing Page 
------------------------------------------------------------*/
.note {
  background-color: var(--color-secondary-lighter);
  margin: var(--space-lg) auto;
  display: flex;
  align-items: center;
  gap: 1em;
  overflow: hidden;
  border: 1px solid var(--color-secondary-dark);
  border-radius: var(--space-md);
  padding: var(--space-sm);
}

.note .text {
  margin: 0;
  text-align: left;
  width: calc(100% - var(--space-lg));
}

.note .text p:last-of-type {
  margin-bottom: 0;
}

.note .icon {
  background-color: var(--color-secondary-darker);
  color: var(--color-secondary-lighter);
  width: var(--space-lg);
  aspect-ratio: 1;
  position: relative;
  font-size: var(--text-lg);
  border-radius: var(--space-xxs);
}

.note .icon svg {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

/*--------------------------------------------------
Event Brand
--------------------------------------------------*/
.event_brand_wp {
  background-color: var(--color-secondary-light);
  padding: 0;
}

.event_brand_wp .logo {
  width: 18em;
  aspect-ratio: 4/1;
  display: block;
  margin: 1em 0;
  filter: brightness(0) saturate(100%) invert(32%) sepia(15%) saturate(3050%) hue-rotate(230deg) brightness(87%) contrast(95%);
}

/*--------------------------------------------------
Event Hero
--------------------------------------------------*/
.event_hero_wp {
  padding: 0;
}

.event_hero_wp::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.event_hero {
  aspect-ratio: 2/1;
  overflow: hidden;
  width: min(100%, 1280px);
  display: flex;
  margin: 0 auto;
  position: relative;
  align-content: center;
  padding-inline: var(--space-xl);
  border-radius: var(--space-xl);
}

.event_hero::before {
  content: "";
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/*----------------------------------------
Event Hero – Background
----------------------------------------*/
.event_hero picture {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  top: 0;
  left: 0;
}

.event_hero picture img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/*----------------------------------------
Event Hero – Header
----------------------------------------*/
.event_hero header {
  margin-inline: auto 0;
  width: min(100%, 30em);
  z-index: 2;
  align-self: center;
}

.event_hero .title {
  font-size: var(--text-xxl);
  margin: 0;
}

.event_hero .type {
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
  color: var(--color-accent-light);
}

.event_hero .subtitle {
  margin-block: 0 1em;
}

.event_hero .description {
  font-size: var(--text-md);
  margin: 0;
}

.event_hero .details {
  font-weight: 400;
  font-size: 1em;
  display: flex;
  flex-wrap: nowrap;
  gap: 1em;
  margin-bottom: 1em;
}

.event_hero .details svg {
  opacity: 0.45;
  margin-right: 0;
}

.event_hero .btns {
  gap: 1em;
  margin-top: var(--space-lg);
}

.event_hero .btns > a {
  margin: 0;
  flex: 1;
}

/*--------------------------------------------------
Current – Event Hero
--------------------------------------------------*/
.klf_grail .event_hero_wp::before {
  background: linear-gradient(to bottom, var(--color-secondary-light) 85%, var(--transparent) 0);
}

.klf_grail .event_hero::before {
  background: linear-gradient(to left, #392273 0%, #50398f 40%, #683d99 48%);
  clip-path: ellipse(50% 100% at 100% 50%);
  left: initial;
  right: 0;
  width: 100%;
}

.klf_grail .event_hero header {
  width: min(100%, 31em);
}

.klf_grail .event_hero :is(.title, .subtitle) {
  color: hsl(37, 87%, 91%);
}

.klf_grail .event_hero :is(.details, .description, .notice) {
  color: #fff;
}

.klf_grail .event_hero .title {
  font-family: var(--font-banner);
  font-size: 5em;
  letter-spacing: 1px;
  line-height: 1.15;
}

.klf_grail .event_hero .title span {
  font-style: italic;
  font-size: var(--text-xxs);
  font-weight: 400;
}

.klf_grail .event_hero .subtitle {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 400;
  margin-block: 0 var(--space-sm);
}

.klf_grail .event_hero .notice {
  background-color: var(--color-secondary-dark);
  border-radius: 1em;
  padding: var(--space-sm);
  text-align: center;
  color: var(--color-primary);
  font-weight: 400;
  line-height: 1.5;
  margin: var(--space-md) auto 0;
  font-size: 1em;
}

/*--------------------------------------------------
Event Collage
--------------------------------------------------*/
.event_collage .images {
  --grid-gap: var(--space-md);
  display: grid;
  grid-gap: var(--grid-gap);
  width: min(100%, 45%);
  position: relative;
  padding: 0;
}

.event_collage .images li {
  border-radius: var(--space-sm);
  position: relative;
  box-shadow: var(--box-shadow);
}

.event_collage .content .title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--text-xxl);
  text-wrap: balance;
}

:where(.event_intro, .event_location) .content {
  padding-left: var(--space-xl);
}

/*--------------------------------------------------
Event Intro
--------------------------------------------------*/
.event_intro_wp {
  padding-top: var(--space-xxxl);
}

.event_intro .images {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  aspect-ratio: 1;
}

.event_intro .images li:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/5;
  top: calc(-1 * var(--grid-gap));
}
.event_intro .images li:nth-child(2) {
  grid-column: 1/4;
  grid-row: 5/7;
  top: calc(-1 * var(--grid-gap));
}
.event_intro .images li:nth-child(3) {
  grid-column: 4/7;
  grid-row: 1/3;
}
.event_intro .images li:nth-child(4) {
  grid-column: 4/7;
  grid-row: 3/7;
}

/*--------------------------------------------------
Event Location
--------------------------------------------------*/
.event_location .images {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 1fr);
  aspect-ratio: 4/3;
}

.event_location .images li:nth-child(1) {
  grid-column: 1/6;
  grid-row: 1/6;
}
.event_location .images li:nth-child(2) {
  grid-column: 6/9;
  grid-row: 1/6;
}
.event_location .images li:nth-child(3) {
  grid-column: 1/4;
  grid-row: 6/11;
}
.event_location .images li:nth-child(4) {
  grid-column: 4/9;
  grid-row: 6/11;
}

/*--------------------------------------------------
Event Highlights
--------------------------------------------------*/
.highlights {
  --highlight-gap-row: 4em;
  --highlight-gap-col: var(--space-xl);
  --highlight-cols: 2;
  gap: var(--highlight-gap-row) var(--highlight-gap-col);
  margin: 0;
  justify-content: center;
}

.highlights li {
  flex: 0 0 calc((100% - (var(--highlight-gap-col) * (var(--highlight-cols) - 1))) / var(--highlight-cols));
  border: 1px solid var(--gray-3);
  border-radius: var(--space-lg);
  position: relative;
  padding: 3.75em var(--space-lg) var(--space-lg);
  box-shadow: var(--box-shadow);
  background-color: #fff;
}

.highlights .image {
  width: var(--space-xxl);
  aspect-ratio: 1;
  position: absolute;
  top: -2.5em;
  left: var(--space-lg);
}

.highlights .title {
  font-size: var(--text-md);
  font-weight: 600;
  text-wrap: balance;
  margin-bottom: var(--space-xxxs);
}

.highlights .description {
  font-size: 0.95em;
  margin: 0;
}

/*--------------------------------------------------
Event Details
--------------------------------------------------*/
.event_details {
  margin: 0 auto;
  width: min(100%, 58em);
  background-color: #fff;
  padding: var(--space-xl);
  border-radius: var(--space-lg);
}

.event_details > li:not(:last-of-type) {
  margin-block: 0 var(--space-xxl);
}

.event_details li :where(ul, ol) {
  margin: 0;
}

.event_details li h4 {
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1em;
}

.event_details li strong {
  font-weight: 600;
}

.event_details li .icon {
  font-size: var(--text-lg);
  background-color: var(--color-accent-lighter);
  color: var(--color-accent);
  border-radius: 100%;
  aspect-ratio: 1;
  width: var(--space-lg);
  position: relative;
  margin-right: var(--space-xxs);
}

.event_details li .icon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*--------------------------------------------------
Event Registration
--------------------------------------------------*/
.event_reg_wp {
  overflow: visible;
  padding-top: 0;
  background-color: hsl(270, 64%, 23%);
}

.event_reg_wp::before {
  content: "";
  width: 100%;
  aspect-ratio: 10/1;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/wp-content/uploads/2023/10/double-curved-border-purple.svg);
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-98%);
}

.event_reg .steps {
  padding-left: var(--space-lg);
  margin: 0;
  font-size: var(--text-body);
}

.event_reg .steps li {
  margin-bottom: 1em;
  position: relative;
  font-size: 0.925em;
}

.event_reg .steps li:last-of-type {
  margin-bottom: 0;
}

.event_reg .steps li svg {
  position: absolute;
  left: -1.75em;
  color: var(--color-secondary-dark);
  top: 0.45em;
}

/*--------------------------------------------------
Event Form
--------------------------------------------------*/
.event_reg .form .box {
  box-shadow: none;
  padding: var(--space-xl);
}

/* delete extra margin */
.event_reg .form div.wpforms-container-full {
  margin: 0 auto;
}

/* Event Form – Indicator
--------------------------------------------------*/
.event_reg div.wpforms-container-full .wpforms-form .wpforms-page-indicator {
  margin-bottom: var(--space-md);
}

.event_reg .form :is(.wpforms-page-indicator-page-title, .wpforms-page-indicator-steps) {
  font-weight: 600;
  font-size: var(--text-lg);
}

/* Event Form – Labels
--------------------------------------------------*/
.event_reg .form .wpforms-field-label {
  margin-bottom: var(--space-sm);
  hyphens: none !important;
  line-height: 1.5;
  font-weight: 600;
  text-wrap: balance;
}

/* Event Form – Descriptions
--------------------------------------------------*/
.event_reg .form .wpforms-field-description {
  color: var(--gray-9);
  margin: var(--space-md) 0 0;
  padding: 1em;
  hyphens: none !important;
  background-color: var(--color-primary-lightest);
  border-radius: var(--space-xxxs);
}

.event_reg .form .wpforms-field-description li {
  line-height: 1.5 !important;
}

/* Event Form – Radio Buttons
--------------------------------------------------*/
.event_reg .wpforms-field-radio ul {
  padding-left: var(--space-md) !important;
}

/* Event Form – Buttons 
--------------------------------------------------*/
.event_reg div.wpforms-container-full .wpforms-form :is(.wpforms-page-button, .wpforms-submit) {
  border-radius: 50px;
  font-weight: 600;
  font-size: 1em;
  padding: 0 var(--space-lg);
  height: 3em;
}

.event_reg div.wpforms-container-full .wpforms-form :is(.wpforms-page-button.wpforms-page-next) {
  background-color: var(--color-secondary-darker);
  color: var(--color-primary-darker);
}

.event_reg div.wpforms-container-full .wpforms-form :is(.wpforms-page-button.wpforms-page-prev) {
  background-color: var(--gray-3);
  color: var(--gray-8);
}

.event_reg div.wpforms-container-full .wpforms-form :is(button.wpforms-submit) {
  background: linear-gradient(to top, var(--color-accent) 70%, var(--color-accent-light) 90%);
  color: #fff;
  float: right;
  padding-inline: var(--space-xl);
  border: 3px solid var(--color-accent-lighter);
  text-shadow: var(--text-shadow);
  box-shadow: 4px 8px 16px hsla(290, 64%, 30%, 0.2);
}

.event_reg div.wpforms-container-full .wpforms-confirmation-scroll {
  background-color: var(--color-secondary-light);
  border-radius: var(--space-sm);
  padding: 1em;
  border: none;
  font-size: 0.975em;
}

/*------------------------------------------------------------
Responsive Styles
------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  /*--------------------------------------------------
  Event Brand
  --------------------------------------------------*/
  .event_brand_wp .logo {
    margin-inline: auto;
  }

  /*--------------------------------------------------
  Event Hero
  --------------------------------------------------*/
  .event_hero {
    width: min(100%, 60em);
    aspect-ratio: 3/4;
  }

  .event_hero header {
    width: min(100%, 30em);
    margin: var(--space-xl) auto 0;
    align-self: flex-start;
    text-align: center;
  }

  .event_hero :is(.btns, .details) {
    margin-inline: auto;
    justify-content: center;
  }

  /*--------------------------------------------------
  Event Collage
  --------------------------------------------------*/
  .event_collage {
    flex-direction: column;
  }

  .event_collage > .col {
    width: min(100%, 40em);
    margin: 0 auto;
  }

  .event_collage .images {
    max-width: 90%;
  }

  /*--------------------------------------------------
  Event Registration
  --------------------------------------------------*/
  .event_reg .row {
    flex-direction: column;
    align-items: center;
  }

  .event_reg :is(.content, .form) {
    width: min(100%, 50em);
  }

  /*--------------------------------------------------
  Event – KLF Grail
  --------------------------------------------------*/
  .klf_grail .event_hero::before {
    background: linear-gradient(to bottom, #392273 0%, #3d398f 30%, #683d99 45%);
    clip-path: ellipse(100% 42% at 50% 0%);
  }

  /* #1200px */
}

@media only screen and (max-width: 768px) {
  /*--------------------------------------------------
  Event – KLF Grail
  --------------------------------------------------*/
  .klf_grail .event_hero::before {
    clip-path: ellipse(100% 45% at 50% 0%);
  }

  .klf_grail .event_hero header .title {
    font-size: 4.5em;
  }

  .klf_grail .event_hero header .subtitle {
    font-size: var(--text-lg);
  }

  /* #768 px */
}

@media only screen and (max-width: 600px) {
  .section_header .title {
    font-size: var(--text-xxl);
    text-wrap: balance;
  }

  /* Event Hero
  --------------------------------------------------*/
  .event_hero {
    aspect-ratio: 1/2;
    padding-inline: 1em;
  }

  /* Event Highlights
  --------------------------------------------------*/
  .highlights {
    --highlight-cols: 1;
  }

  /* Event Details
  --------------------------------------------------*/
  .event_details {
    padding: var(--space-lg);
  }

  /* Event Registration
  --------------------------------------------------*/
  .event_reg .form .box {
    padding: var(--space-lg);
  }

  /*--------------------------------------------------
  Event – KLF Grail
  --------------------------------------------------*/
  .klf_grail .event_hero::before {
    clip-path: ellipse(100% 45% at 50% 0%);
  }

  /* #600px */
}

@media only screen and (max-width: 480px) {
  /* Event Brand
  --------------------------------------------------*/
  .event_brand_wp .logo {
    background-image: url(/wp-content/themes/klf_theme/assets/images/logo/klf-brandmark-white.svg) !important;
    aspect-ratio: 1;
    width: min(100%, var(--space-xl));
    margin-block: 1em 0;
    filter: none;
  }

  .klf_grail .event_brand_wp {
    background-color: #392273;
  }

  /* Event Hero
  --------------------------------------------------*/
  .event_hero_wp > section {
    width: 100%;
  }

  .event_hero {
    border-radius: 0;
  }

  /* Event Intro
  --------------------------------------------------*/
  .event_intro_wp {
    padding-top: var(--space-xxl);
  }

  .event_collage .title {
    font-size: var(--text-xl);
  }

  /* Event Registration
  --------------------------------------------------*/
  .event_reg .form :is(.wpforms-page-indicator-page-title, .wpforms-page-indicator-steps) {
    font-size: 1em;
  }

  #event_reg .form .wpforms-field .wpforms-one-half {
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-sm);
  }

  /* Event Details
  --------------------------------------------------*/
  .event_details li :where(ul, ol) {
    padding: 1em;
  }

  /* Event Registration
  --------------------------------------------------*/
  .event_reg .form .wpforms-field-label {
    text-wrap: auto;
  }

  .event_reg .wpforms-container .wpforms-field .wpforms-field-row .wpforms-one-half {
    width: 100%;
    padding: 0;
    margin-bottom: 1em;
  }

  /*--------------------------------------------------
  Event – KLF Grail
  --------------------------------------------------*/
  .klf_grail .event_hero::before {
    clip-path: ellipse(125% 40% at 50% 0%);
  }

  .klf_grail .event_hero header {
    margin-top: var(--space-md);
  }

  .klf_grail .event_hero header .title {
    font-size: 3.75em;
  }
  .klf_grail .event_hero header .subtitle {
    font-size: var(--text-md);
  }
  .klf_grail .event_hero header .details {
    font-size: 1em;
  }
  /* #480px */
}