/*--------------------------------------------------
Events – Pages
--------------------------------------------------*/
:is(.page-template-event-landing-page,
  .page-template-event-landing-page-por) #main {
  background-color: #fff
}

:is(.page-template-event-landing-page,
  .page-template-event-reg-options,
  .page-template-event-landing-page-por) #content_wp {
  left: 0;
  width: 100%;
}

:is(.page-template-event-landing-page,
  .page-template-event-reg-options,
  .page-template-event-landing-page-por) #content_cnt {
  padding: 0;
  width: 100%;
}

/*--------------------------------------------------
Events – General Styles
--------------------------------------------------*/
.eyebrow {
  color: var(--event-color-accent);
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 900;
  margin-bottom: var(--space-xxxs);
}

:is(.event_btn, .event_dropdown_btn .toggle) {
  background-image: linear-gradient(45deg,
      var(--event-color-accent),
      var(--event-color-accent-dark));
  color: #fff;
}

.event_btn:is(:hover, :active, :visited, :focus) {
  color: #fff;
}

:is(.page-template-event-landing-page) .btn_content {
  height: auto;
  line-height: 1;
  display: table;
  width: auto;
  padding: var(--space-sm) var(--space-md);
  font-size: .9em;
}

/* Event Section Header
------------------------------*/
.event_section_header {
  width: min(100%, calc(100% / 1.618));
  margin: 0 auto var(--space-xl);
  text-align: center
}

.event_section_header .title {
  margin-bottom: var(--space-xs);
  margin-inline: auto;
  font-size: var(--text-xl);
  font-weight: 900;
  text-wrap: balance;
}

.event_section_header .description {
  /* font-family: var(--font-secondary); */
  font-size: var(--text-body);
  font-style: italic;
  /*text-wrap: balance;*/
}

.event_section_header.special_header .title {
  font-family: var(--font-event);
}

.event_section_header.special_header .btn {
  margin-block: 0
}

/* Event Sub-Section Header
------------------------------*/
.event_subsection_header::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--gray-1)
}

.event_subsection_header {
  margin-bottom: var(--space-lg);
}

/*--------------------------------------------------
Event Banner
--------------------------------------------------*/
.event_banner {
  position: relative;
}

.event_banner::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.event_banner header {
  width: min(100%, 25em);
  margin: 0;
  position: relative;
  z-index: 1;
}

.event_banner header .title {
  font-size: var(--text-xxxl);
  line-height: 1;
  margin: var(--space-xxxs) 0;
  font-weight: 900;
}

.event_banner header .subtitle {
  text-wrap: balance;
}

/*----------------------------------------
 Event Home Banner
----------------------------------------*/
.event_home_banner::before {
  border-radius: var(--box-border-rad);
}

.event_home_banner {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  overflow: visible;
}

.event_home_banner header .title {
  margin: var(--space-xxs) auto var(--space-sm);
}

.event_home_banner .btns .dropdown_btn {
  width: min(100%, 45%);
}

.event_home_banner .dropdown_btn {
  margin: 0 auto;
}

/*----------------------------------------
 Event Hero Banner
----------------------------------------*/
.event_hero_banner > section {
  position: relative
}

.event_hero_banner .return_btn {
  position: absolute;
  left: var(--space-xl);
  top: var(--space-lg);
  margin: 0;
  width: min(100%, 7em);
}

.event_hero_banner header .event_btn {
  margin: var(--space-md) auto 0;
}

/*----------------------------------------
 Event Page Banner
----------------------------------------*/
.event_page_banner {
  margin-bottom: var(--space-xxl);
}

/*--------------------------------------------------
Event – Clouds Frame
--------------------------------------------------*/
.clouds_frame_top::before,
.clouds_frame_bottom::after {
  content: "";
  width: 100%;
  aspect-ratio: 6/1;
  background-image: url('/wp-content/uploads/2025/06/Clouds-Frame-Bottom-1500x250-1.jpg');
  position: absolute;
  left: 0;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

.clouds_frame_bottom::after {
  bottom: 0;
}

.clouds_frame_top::before {
  top: 0;
  transform: rotate(180deg);
}

.wrapper.clouds_frame_top {
  margin-top: -8em;
  padding-top: 15em;
}

.wrapper.clouds_frame_bottom {
  margin-bottom: -8em;
  padding-bottom: 10em;
}


/*--------------------------------------------------
Event – Top Nav
--------------------------------------------------*/
.event_top_nav {
  padding: var(--space-xs) 0;
}

.event_top_nav a {
  display: block;
  padding: var(--space-sm);
  width: min(100%, 18em);
  text-decoration: none;
  color: var(--gray-10);
}

/*--------------------------------------------------
Event – Sticky Navigation
--------------------------------------------------*/
nav.event_nav {
  width: min(90%, 980px);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: var(--box-shadow);
  margin: var(--space-xxxxl) auto -4em;
  border-radius: 100px;
  border: 1px solid var(--gray-2);
}

nav.event_nav ul {
  /* justify-content: space-evenly; */
  --grid-space: 1em;
  gap: 1em;
}

nav.event_nav li {
  flex-grow: 1;
}

nav.event_nav li a {
  display: block;
  font-weight: 600;
  color: var(--color-primary-darker);
  text-decoration: none;
  border-radius: 50px;
  text-align: center;
}

nav.event_nav li a svg {
  opacity: .5;
  margin-right: var(--space-xxs);
}

nav.event_nav li a:is(:hover, :active) {
  background-color: var(--color-accent-lighter);
}

/*--------------------------------------------------
Event – Intro Quote
--------------------------------------------------*/
#event_intro {
  padding-top: var(--space-xl);
}

.event_intro_quote {
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  width: min(100%, 75em);
  margin: 0 auto;
}

/* Event Intro Quote Image
------------------------------*/
.event_intro_quote .image::before {
  content: "";
  display: block;
  width: 88%;
  padding-bottom: 88%;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  background-image: linear-gradient(to top,
      var(--color-accent-light),
      var(--color-accent-lighter));
}

.event_intro_quote .image {
  position: relative;
  border-radius: 100%;
  width: min(100%, 30%);
  overflow: hidden;
  aspect-ratio: 5/6
}

.event_intro_quote .image img {
  margin: 0 auto;
  width: min(100%, 95%);
  position: relative;
  bottom: -1.5em;
  left: .65em;
}

/* Event Intro Quote Content
------------------------------*/
.event_intro_quote .content {
  max-width: 48%
}

.event_intro_quote blockquote {
  margin: 0;
  text-wrap: balance;
}

.event_intro_quote .content blockquote p {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-style: italic;
  margin-bottom: 0;
}

.event_intro_quote figcaption {
  display: block;
  width: min(100%, 18em);
  bottom: calc(-1 * var(--space-lg));
  height: auto;
  aspect-ratio: 5/1;
  margin-inline: auto 0;
  position: relative;
  top: 1em;
}

/*--------------------------------------------------
Event – Intro Letter
--------------------------------------------------*/
.event_intro .images div {
  float: left;
  display: block;
  border-radius: var(--space-md);
}

.event_intro .images div:nth-child(1) {
  aspect-ratio: 3/4;
  width: 54%;
  margin-right: 5%;
}

.event_intro .images div:is(:nth-child(2), :nth-child(3)) {
  aspect-ratio: 5/4;
  width: 41%;
}

.event_intro .images div:nth-child(2) {
  margin-bottom: 5%;
}

/*--------------------------------------------------
Event – Features
--------------------------------------------------*/
.event_features > li {
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xxl);
}

.event_features > li:last-child {
  margin-bottom: 0
}

#event_options .event_features > li {
  align-items: flex-start;
}

/* Event Features Content
------------------------------*/
.event_features .content,
.event_features .image {
  width: calc(50% - var(--grid-space));
}

.event_features .content {
  width: calc(50% - var(--space-xl));
}

.event_features .title {
  font-weight: 900;
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}

.event_features li:nth-child(even) .content {
  -webkit-order: 1;
  order: 1;
}

/* Event Features Image
------------------------------*/
.event_features .image {
  aspect-ratio: 1.618/1;
  pointer-events: none !important;
}

.event_features li:nth-child(even) .image {
  -webkit-order: 2;
  order: 2;
}

/* SU Bookstore */
.event_features #bookstore .image {
  aspect-ratio: 720/847;
}

/*--------------------------------------------------
Event – Highlights
--------------------------------------------------*/
.event_highlights li .image {
  width: min(100%, var(--space-xxl));
  aspect-ratio: 1/1;
  padding: 0;
  border-radius: 100%;
  margin-bottom: var(--space-md);
}

.event_highlights li .title {
  text-wrap: balance;
  margin-bottom: var(--space-xxxs);
}

.event_highlights li .content .description {
  font-size: 1em;
  color: var(--gray-10);
  margin-bottom: 0;
}

/*--------------------------------------------------
Event – Details
--------------------------------------------------*/
.event_details_section > .col_minor {
  position: relative;
}

.event_details_section > .col_minor::after {
  content: '';
  display: block;
  position: absolute;
  right: -20px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--gray-1);
}

ul.event_details_list > .row {
  -webkit-align-items: flex-start;
  align-items: flex-start
}

ul.event_details_list li p:last-child {
  margin-bottom: 0;
}

.event_details_list li.cols_gr .image {
  aspect-ratio: 1.618/1;
}

.event_details_list li:not(.cols_gr) .image {
  aspect-ratio: 1/1;
}

.event_details_list li .content {
  padding-top: 0;
}

/*--------------------------------------------------
Event – Featured Dictations
--------------------------------------------------*/
.event_dictations {
  margin-bottom: var(--space-xl);
}

.event_dictations li::before {
  content: '';
  width: 90%;
  background-image: url('/wp-content/uploads/2024/11/Golden-Frame-400x500-1.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

.event_dictations li::before,
.event_dictations .portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.event_dictations li {
  position: relative;
  aspect-ratio: 5/6;
}

.event_dictations .portrait {
  aspect-ratio: 3/4;
  width: 63%;
  margin: 0 auto;
  box-shadow: inset 0 0 10px var(--gray-6);
  left: 49.69%;
  top: 50.1%;
  border-radius: 1px;
}

.event_dictations .name {
  position: absolute;
  bottom: -1.35em;
  font-family: var(--font-secondary);
  text-align: center;
  font-style: italic;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-size: .925em;
}

/*--------------------------------------------------
Event – Quote
--------------------------------------------------*/
.event_quote {
  background-attachment: fixed;
}

.event_quote::before {
  background-image: none;
  background-color: hsl(240, 60%, 8%);
  opacity: .8;
}

.event_quote_container {
  position: relative;
  z-index: 1;
  width: min(100%, 50em);
  text-align: center;
  margin: 0 auto;
}

.event_quote .gold_ring_cnt {
  max-width: var(--space-xxxl);
  margin: 0 auto var(--space-lg)
}

.event_quote .gold_ring::before {
  box-shadow: var(--box-shadow-white)
}

.event_quote :is(h2, h3, p, figcaption) {
  color: #fff
}

.event_quote blockquote {
  margin: 0;
}

.event_quote blockquote p {
  font-family: var(--font-secondary);
  font-style: italic;
}

/*--------------------------------------------------
Event – Pricing Tabs
--------------------------------------------------*/
.pricing_tabs_container {
  width: min(100%, 65em);
  margin: 0 auto;
}

.pricing_tabs {
  position: relative;
  transition: height 0.4s ease;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.pricing_tabs > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  margin: 0 auto;
  box-shadow: none;
  border: 1px solid var(--gray-2);
}

.pricing_tabs > li.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/*----------------------------------------
pricing tabs toggle
----------------------------------------*/
.pricing_toggle {
  position: relative;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--gray-2);
  border-radius: 50px;
  padding: var(--space-xxxs);
  background: #fff;
  box-shadow: var(--box-shadow-white);
  width: min(100%, 27em);
  margin: 0 auto var(--space-lg);
}

/* Hide the inputs */
.pricing_toggle input[type="radio"] {
  display: none;
}

/* Style labels as toggle buttons */
.pricing_toggle label {
  padding: var(--space-xs) var(--space-xxxxs);
  cursor: pointer;
  z-index: 1;
  text-align: center;
  flex: 1;
  font-weight: 600;
  font-size: var(--text-body);
}

.pricing_toggle svg {
  opacity: .5;
  margin-right: var(--space-xxxs);
}

/* Slider background */
.pricing_toggle .slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  background: var(--color-accent);
  z-index: 0;
  transition: transform 0.3s ease;
}

/* Move slider */
.pricing_toggle input:nth-of-type(1):checked ~ .slider {
  transform: translateX(0%);
}

.pricing_toggle input:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}

.pricing_toggle input:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}

/* pricing tabs content
----------------------------------------*/
.pricing_tabs li .content {
  padding-block: 1em;
}

.pricing_tabs header .title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

/* pricing tabs price options
----------------------------------------*/
.pricing_tabs .price_options {
  --grid-space: 1em;
  width: min(100%, 28em);
  margin: 0;
  text-align: center;
}

.pricing_tabs .price_option .heading {
  font-weight: 800;
  text-wrap: balance;
  margin-bottom: 0;
}

.pricing_tabs .price_option .price {
  font-size: var(--text-xxxl);
  color: var(--event-color-accent);
  position: relative;
}

.pricing_tabs .price_option .price::before {
  content: "$";
  position: relative;
  font-size: var(--text-xxs);
  top: -.5em;
  left: .25em;
}


/* single price option */
.pricing_tabs .price_options.single {
  text-align: left;
}

.pricing_tabs .price_options.single li {
  padding: var(--grid-space);
}


/* pricing tabs button
----------------------------------------*/
.pricing_tabs .content .btns {
  margin-block: var(--space-md) var(--space-lg);
}

.pricing_tabs .content .btns :is(.btn, .dropdown_btn) {
  margin: 0;
}

/* pricing tabs bullets
----------------------------------------*/
.pricing_tabs .bullets {
  padding-left: var(--space-sm);
}

.pricing_tabs .bullets li {
  margin-bottom: var(--space-xs);
}

.pricing_tabs .bullets svg {
  opacity: .5;
  margin-right: var(--space-xs);
  color: var(--event-color-accent-light);
}


/*--------------------------------------------------
Event – Modal
--------------------------------------------------*/
.event_modal .container {
  padding-inline: var(--space-xl);
}

.event_modal .copy_text_btn {
  margin: var(--space-sm) 0;
}

/*--------------------------------------------------
Event – FAQ
--------------------------------------------------*/
.faq_list {
  width: min(100%, 45em);
  margin: var(--space-xl) auto
}

.faq_list ._accordion header::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--gray-2);
}

.faq_list ._accordion header {
  padding: var(--space-md) 0
}

/*--------------------------------------------------
Event – Current Styles
--------------------------------------------------*/
#fall {
  --event-color: hsl(278, 40%, 48%);
  --event-color-light: hsl(273, 72%, 98%);
  --event-color-dark: hsl(273, 50%, 38%);
}

#fall .event_color_light {
  background-color: var(--event-color-light)
}

#fall .event_color_accent {
  background-color: var(--event-color-accent)
}

#fall .event_color_dark {
  background-color: var(--event-color-dark);
}

#fall .eyebrow {
  color: var(--event-color-accent);
}

#fall .event_btn {
  color: var(--color-text);
  background-image: linear-gradient(to bottom,
      var(--color-accent-light),
      var(--color-accent));
  box-shadow: 3px 6px 12px hsla(45, 62%, 10%, .12);
  /*border-color: var(--color-secondary-lighter);*/
  border-width: 0;
}

/* Fall Event Banner
----------------------------------------*/
#fall .event_banner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/wp-content/uploads/2025/09/Pearl-Gradient-Background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: linear-gradient(to right, #fff 40%, transparent 60%);
}

#fall .event_banner.clouds_frame_bottom::after {
  bottom: -4em;
}


#fall .event_banner header {
  width: min(100%, 38em);
  text-align: center;
  margin-block: var(--space-lg) 0;
}

#fall .event_banner :is(.subtitle, .dates, .event_name) {
  color: hsl(208 80% 30%);
}

#fall .event_banner .title {
  font-size: 1.1em;
  font-family: var(--font-event);
  font-weight: 400;
  margin-block: -.25em 1em;
  line-height: 1.125;
}

#fall .event_banner .title span {
  display: block;
}

#fall .event_banner .title span:nth-child(2),
#fall .event_banner .title span:nth-child(3) {
  text-transform: uppercase;
}

#fall .event_banner .title span:nth-child(1),
#fall .event_banner .title span:nth-child(3) {
  font-weight: 600;
}

#fall .event_banner .title span:nth-child(1) {
  font-size: 2em;
}


#fall .event_banner .title span:nth-child(2) {
  font-size: 3.75em;
  font-weight: 700;
}

#fall .event_banner .title span:nth-child(3) {
  font-size: 2.8em;
}

#fall .event_banner .subtitle {
  font-size: var(--text-lg);
  font-family: var(--font-secondary);
  font-style: italic;
  text-wrap: balance;
  line-height: 1.25;
}

#fall .event_banner .event_name {
  font-size: var(--text-md);
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 auto var(--space-md);
}

#fall .event_hero_banner {
  aspect-ratio: 1500/860;
  background-position-y: -1.5em;
}

#fall .event_banner header .btns {
  width: min(100%, 33em);
  margin: 0 auto;
}

#fall .event_banner header .btn_secondary {
  background-color: #fff;
  background-image: none
}

/* Fall Event Home Banner
----------------------------------------*/
#fall .event_home_banner {
  aspect-ratio: 5/2;
  background-size: 80%;
  background-position-x: right;
  align-content: center;
}

#fall .event_home_banner::before {
  mask-image: linear-gradient(to right, #fff 51%, transparent 60%);
}

#fall .event_home_banner header {
  width: min(100%, 27em);
  margin-block: 0;
}

#fall .event_home_banner .title {
  font-size: .7em;
  margin-bottom: var(--space-lg);
}

#fall .event_home_banner .event_name {
  margin-bottom: var(--space-xxxxs);
}

#fall .event_home_banner .dates {
  margin-bottom: var(--space-md);
}

#fall .event_home_banner .dates svg {
  opacity: .5;
  margin-right: var(--space-xxxxs);
}

#fall.event_home_banner .dropdown_btn :is(.toggle, .menu) {
  box-shadow: 3px 6px 12px hsla(45, 62%, 10%, .12);
}

/* Spanish Tweaks
----------------------------------------*/
#fall.lang_spa .event_hero_banner .title {
  font-size: 1em;
}

#fall.lang_spa .event_banner .title span:nth-child(3) {
  font-size: 2.45em;
}

/* Summer Event Page Banner
----------------------------------------*/
#summer .event_page_banner {
  aspect-ratio: 4/1;
}

#summer .event_page_banner header {
  width: min(100%, 28em);
}

#summer .event_page_banner .title {
  font-size: 4.25em;
  position: relative;
  top: -.25em;
}

#summer .event_page_banner .event_name {
  color: #fff;
  text-transform: uppercase;
}

#summer.lang_spa .event_page_banner .title {
  font-size: 4.25em;
}

/* Summer Event Hub Banner
----------------------------------------*/
#summer .event_hub_banner {
  aspect-ratio: unset;
  padding: var(--space-xl);
  overflow: visible;
}

#summer .event_hub_banner::before {
  background-image: linear-gradient(to right, hsl(273, 54%, 33%) 0%, hsl(273, 60%, 44%) 50%, var(--transparent) 75%);
  border-radius: var(--box-border-rad)
}

#summer .event_hub_banner header {
  text-align: left;
}

#summer .event_hub_banner .eyebrow {
  color: var(--color-accent);
}

#summer .event_hub_banner .title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xxs);
  line-height: 1.125;
}

#summer .event_hub_banner .btns {
  justify-content: space-between;
  width: min(100%, 400px);
  margin-top: var(--space-lg);
}

#summer .event_hub_banner .btns :is(.btn, .dropdown_btn) {
  margin: 0;
  width: min(100%, 47.5%);
  max-width: 100%;
}

#summer .event_hub_banner .dropdown_btn :is(.toggle, .menu) {
  box-shadow: 3px 6px 12px hsla(45, 62%, 10%, .12);
}

#summer .event_hub_banner .gold_ring_cnt {
  display: none;
  max-width: 6em;
  position: absolute;
  left: 50%;
  top: -3em;
  transform: translateX(-50%);
}

#summer .event_hub_banner .gold_ring::before {
  box-shadow: 3px 6px 12px hsla(45, 62%, 10%, .12);
}


/* Summer Quote
----------------------------------------*/
#fall .event_quote::before {
  opacity: .65;
  background-color: hsl(245, 68%, 10%);
}

#fall .event_quote_container blockquote {
  width: 100%;
}

#fall .event_quote .gold_ring_cnt {
  max-width: 6.5em;
}

#fall .event_quote p {
  font-size: var(--text-lg);
}


/*----------------------------------------------------------
Responsive Styles
----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

  .event_intro_quote {
    flex-direction: column;
  }

  /*----------------------------------------
  Event – Intro
  ----------------------------------------*/
  .event_intro_quote :is(.image, .content) {
    margin: 0 auto;
  }

  .event_intro_quote .image {
    -webkit-order: 1;
    order: 1;
    width: min(100%, 18em)
  }

  .event_intro_quote .image img {
    bottom: -2em
  }

  .event_intro_quote .content {
    -webkit-order: 2;
    order: 2;
    width: 100%;
    max-width: 40em;
    padding-inline: 0
  }

  /*----------------------------------------
  Event – Intro Letter
  ----------------------------------------*/
  .event_intro {
    flex-direction: column;
  }

  .event_intro :is(.images, .content) {
    width: min(100%, 40em);
    margin: 0 auto;
    padding-bottom: 0;
  }

  /*----------------------------------------
  Event – Quote
  ----------------------------------------*/
  .event_quote {
    background-attachment: scroll
  }

  /*----------------------------------------
  Event – Dictations
  ----------------------------------------*/
  .event_dictations {
    width: min(100%, 40em);
    margin-inline: auto
  }

  .event_dictations li.col {
    width: calc(100% / 3);
    margin-bottom: var(--space-md);
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features li {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .event_features :is(.content, .image) {
    width: min(100%, 768px);
    margin: 0 auto;
  }

  .event_features :is(.image) {
    -webkit-order: 1;
    order: 1;
  }

  .event_features :is(.content),
  .event_features li:nth-child(2n) .content {
    -webkit-order: 2;
    order: 2;
  }

  /*----------------------------------------
  Event Current
  ----------------------------------------*/
  #fall :is(.event_home_banner, .event_hero_banner) {
    /* aspect-ratio: 3/4; */
    aspect-ratio: 1024/1365;
  }

  #fall :is(.event_home_banner, .event_hero_banner):before {
    mask-image: linear-gradient(to bottom, #fff 40%, transparent 60%);
  }


  #fall :is(.event_home_banner, .event_hero_banner) header {
    margin-inline: auto;
  }

  #fall .event_banner.clouds_frame_bottom::after {
    bottom: -1px;
    aspect-ratio: 8/1;
    background-size: cover;
  }

  /* Event – Home Banner 
  ----------------------------------------*/
  #fall .event_home_banner {
    background-position-x: center;
    background-size: cover;
    align-content: flex-start;
  }

  #fall .event_home_banner header {
    width: min(100%, 35em);
  }

  #fall .event_home_banner .title {
    font-size: .9em;
  }

}

/* #1200px */

@media only screen and (max-width: 1024px) {

  .event_intro_about,
  .event_details_section {
    flex-direction: column;
  }

  /*----------------------------------------
  Event – Intro Letter
  ----------------------------------------*/
  .event_intro_about > .col {
    width: 100%;
  }

  .event_intro_about .content {
    column-count: 1;
    width: min(100%, 40em);
    margin-inline: auto;
  }


  /*----------------------------------------
  Event – Highlights
  ----------------------------------------*/
  .event_highlights li.col {
    width: calc(100% /2)
  }

  /*----------------------------------------
  Event – Details
  ----------------------------------------*/
  .event_details_section > .col {
    width: min(100%, 50em);
    margin: 0 auto;
    padding-bottom: 0
  }

  .event_details_section > .col_minor::after {
    display: none
  }

  .event_details_section > .col_major {
    padding-inline: 0
  }


}

/* #1024px */

@media only screen and (max-width: 980px) {

  /*----------------------------------------
  Event – Sticky Nav
  ----------------------------------------*/
  nav.event_nav {
    display: none
  }

  #event_intro {
    padding-top: var(--space-xxl)
  }

  /*----------------------------------------
  Event – Section Header
  ----------------------------------------*/
  .event_section_header {
    width: min(100%, 40em);
  }

  .event_section_header .title {
    font-size: var(--text-lg);
  }

  .event_section_header.special_header .title {
    letter-spacing: 0;
  }

  .event_section_header .description {
    font-size: var(--text-body);
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features :is(.content, .image) {
    width: min(100%, 40em)
  }


  /*----------------------------------------
  Event – Pricing Tabs
  ----------------------------------------*/
  .pricing_tabs > li {
    flex-direction: column;
  }

  .pricing_tabs li .content {
    width: min(100%, 40em);
    padding-inline: 0;
    margin: 0 auto;
  }

  .pricing_tabs li header {
    text-align: center;
  }

  .pricing_tabs .content .btns :is(.btn, .dropdown_btn),
  .pricing_tabs .content .price_options {
    margin: 0 auto;
  }

  .pricing_tabs li .image {
    width: 100%;
    aspect-ratio: 2/1;
  }

  /* single price option */
  .pricing_tabs .price_options.single {
    text-align: center
  }

  /*----------------------------------------
  Event – Hub Banner
  ----------------------------------------*/
  #summer .event_hub_banner {
    background-image: none !important;
    padding: var(--space-lg);
  }

  #summer .event_hub_banner::before {
    background-image: linear-gradient(to top, hsl(273, 54%, 33%), hsl(273, 60%, 44%))
  }

  #summer .event_hub_banner .gold_ring_cnt {
    display: block;
  }

  #summer .event_hub_banner header {
    text-align: center;
    margin: 2.5em auto 0
  }

  #summer .event_hub_banner .btns {
    margin-inline: auto;
  }


}

/* #980px */

@media only screen and (max-width: 900px) {


  /*----------------------------------------
  Event – Banner
  ----------------------------------------*/
  .event_hero_banner .return_btn {
    top: var(--space-lg);
    left: var(--space-lg);
  }

  /* event page banner */
  #summer .event_page_banner {
    aspect-ratio: 3/1;
  }


}

/* #900px */


@media only screen and (max-width: 768px) {


  /*----------------------------------------
  Event Current – Banner
  ----------------------------------------*/
  #fall .event_banner .title {
    font-size: 1em;
  }

  #fall .event_home_banner .title {
    font-size: .8em;
  }

}

/* #768px */

@media only screen and (max-width: 600px) {

  /*----------------------------------------
  Event – Clouds Frame
  ----------------------------------------*/
  .clouds_frame_top::before,
  .clouds_frame_bottom::after {
    background-image: url(/wp-content/uploads/2025/06/Clouds-Frame-Bottom-600x200-1.jpg);
    aspect-ratio: 3/1;
  }


  .wrapper.clouds_frame_top {
    padding-top: 10em;
  }

  .wrapper.clouds_frame_bottom {
    padding-bottom: 8em;
  }

  /*------------------------------
  Event Landing Page
  ------------------------------*/
  .event_highlights li.col,
  .event_details_section .event_details_list .content {
    width: 100%
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features .image {
    max-width: 90%;
  }

  /*----------------------------------------
  Event – Details
  ----------------------------------------*/
  .event_details_section .event_details_list > .row {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .event_details_section .event_details_list .content {
    padding: var(--space-md) 0 0 0;
  }

  /* event details list images */
  .event_details_list li.cols_p4 .image {
    width: min(100%, 12em)
  }

  .event_details_list li.cols_gr .image {
    width: min(100%, 20em)
  }

  /*----------------------------------------
  Event Current – Banner
  ----------------------------------------*/
  #fall .event_hero_banner {
    aspect-ratio: 1/2;
  }

  #fall .event_banner::before {
    mask-image: linear-gradient(to bottom, #fff 35%, transparent 45%);
  }

  #fall .event_banner.clouds_frame_bottom::after {
    aspect-ratio: 4/1;
  }

  #fall .event_banner header {
    margin-block: 0;
  }

  #fall .event_banner .title,
  #fall.lang_spa .event_hero_banner .title {
    font-size: .75em;
  }

  #fall .event_banner .event_name {
    font-size: var(--text-body);
    text-wrap: balance;
    font-weight: 600;
  }

}

/* #600px */

@media only screen and (max-width: 480px) {


  /*----------------------------------------
  Event – Banner
  ----------------------------------------*/
  :is(.event_home_banner, .event_hero_banner) {
    /* aspect-ratio: 4/5  major third */
    /* aspect-ratio: 3/4; */
    aspect-ratio: 1/2;
  }

  .event_home_banner {
    padding: var(--space-lg);
  }

  .event_home_banner .btns {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .event_home_banner .btns .dropdown_btn {
    width: 100%;
    max-width: 75%;
  }

  .event_home_banner .dropdown_btn :is(.dropdown_btn_toggle) {
    height: 3.5em;
    line-height: 3.5;
  }

  .event_home_banner .btns .dropdown_btn:first-child {
    margin-bottom: var(--space-md);
    z-index: 3;
  }

  /*----------------------------------------
  Event – Quote
  ----------------------------------------*/
  .event_quote_container blockquote p {
    text-align: left;
  }

  /*----------------------------------------
  Event – Modal
  ----------------------------------------*/
  .event_modal .container {
    padding-top: var(--space-lg);
    padding-inline: var(--space-md);
  }

  .event_modal .content {
    padding: 0;
    text-align: left;
  }

  /*----------------------------------------
  Event Current
  ----------------------------------------*/

  /* Event – Home Banner 
  ----------------------------------------*/
  #fall .event_home_banner {
    aspect-ratio: 1/2;
  }

  #fall .event_home_banner header {
    margin-block: var(--space-md) 0;
  }

  #fall .event_home_banner .title {
    font-size: .65em;
  }

  /* Event – Page Banner 
  ----------------------------------------*/
  #summer .event_page_banner {
    aspect-ratio: 1.618/1;
  }

  #summer .event_page_banner .title {
    font-size: 3.5em;
  }

  #fall .event_quote p {
    font-size: var(--text-md);
  }


}

/* #480px */

@media only screen and (max-width: 400px) {


  /*----------------------------------------
  Event Current – Banner
  ----------------------------------------*/
  #fall .event_hero_banner {
    padding-top: 6.5em;
  }

  #fall .event_banner .title,
  #fall.lang_spa .event_hero_banner .title {
    font-size: .675em;
  }

  #fall .event_banner .subtitle {
    font-size: var(--text-md);
  }

  /* Event – Home Banner
  ----------------------------------------*/
  #fall .event_home_banner .title {
    font-size: .6em;
  }

  /* Event – Hub Banner
  ----------------------------------------*/
  #summer .event_hub_banner {
    margin-top: var(--space-xl);
  }

  #summer .event_hub_banner .btns :is(.btn, .dropdown_btn) {
    width: 100%;
    margin-bottom: var(--space-md);
  }

  #summer .event_hub_banner .btns :is(.btn, .dropdown_btn .toggle) {
    height: 3.25em;
    line-height: 3.25;
  }


}

/* #400px */