/* ============================================================
   IHE.css  —  EDMO Event Detail Page
   Loaded by IHE.php via the enqueue in functions.php.
   Primary: #5B2B74 (Purple) | Teal: #0D8F84 | Gold: #F5A623
   Font: Sora
   ============================================================
   IMPORTANT — READ BEFORE OVERWRITING
   This file was built from the event-page CSS you pasted in chat.
   If the IHE.css currently on your server has diverged from that,
   diff the two first rather than replacing wholesale. The four
   changes that actually matter are listed under LAYOUT FIXES below.
   ============================================================
   Removed from the original: six unscoped rules that were leaking
   into the WordPress theme and breaking the Elementor footer:

     REMOVED  *, *::before, *::after { margin:0; padding:0; ... }
     REMOVED  html { scroll-behavior: smooth }
     REMOVED  body { ... }
     REMOVED  nav { ... }   <-- painted the footer's <nav> columns white
     REMOVED  .nav-logo .nav-logo-sub .nav-event-badge .nav-cta
              @keyframes blink        (dead code — theme header replaced it)
     REMOVED  section { padding: 88px 56px }
     REMOVED  .container { ... }      (unused here, collides with Bootstrap)
     REMOVED  from @media 1000px: nav{}, section{}, .nav-event-badge{}

   Everything else — every colour, size, layout value — is untouched.

   LAYOUT FIXES (schedule section):
     .schedule-inner  max-width 1100px -> 100%, margin 0 auto -> 0
                      (grid was capped, leaving dead space on the right)
     .schedule-inner  1fr 1fr -> minmax(0,1fr) minmax(0,1fr)
     .schedule-form   + min-width: 0 / max-width: 100%
     .forminator-*    + min-width: 0 / max-width: 100%
                      (the last three stop the form overflowing on mobile)
     align-items      center -> start  (pins the text column to the top)

   FORM FIXES (Forminator, inside .schedule-form):
     .forminator-row  negative-margin gutters zeroed, gap: 0 18px
                      (two-column rows no longer sit narrower than
                       single-column ones — uniform left/right edges)
     .forminator-col  flex: 1 1 0, padding zeroed
     .forminator-row:last-of-type  margin-bottom: 0
     submit button    margin-top 16px -> 28px, margin-bottom 0 !important
     .schedule-form   padding 36px 32px -> 36px 32px 24px
     form wrapper     margin-bottom: 0  (closes the gap under Submit)

   NOTE: the "Edit form" link below the button is Forminator's
   admin-only shortcut. Logged-out visitors never see it, so check
   the real spacing in a private window before tightening further.
   ============================================================
   THIS REVISION — narrower page gutters + a bigger hero slider:
     :root  --page-pad  32px -> 16px
     :root  --col-gap   48px -> 40px
     :root  --page-max  1720px -> 1860px
     + one appended block at the very bottom of the file
       (EDGE + SLIDER EXPANSION) holding the rest of the change.
     Nothing else in the file was touched.
   ============================================================ */

:root {
  --purple:       #5B2B74;
  --purple-light: #7B3FA0;
  --purple-dark:  #3D1A50;
  --purple-pale:  rgba(91,43,116,0.08);
  --teal:         #0D8F84;
  --teal-light:   #12b5a8;
  --gold:         #F5A623;
  --navy:         #0B1F3A;
  --white:        #FFFFFF;
  --off-white:    #F8F5FC;
  --gray-100:     #F0EBF7;
  --gray-200:     #DDD5EA;
  --gray-400:     #9B89B0;
  --gray-600:     #5C4D6E;
  --dark:         #0D0612;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    20px;

  /* ---- LAYOUT ----------------------------------------------------
     One set of numbers drives page margins and column spacing on BOTH
     the hero and the schedule section, so they line up with each other.
     Change --page-pad and every left/right edge on the page moves together. */
  --page-pad:  48px;   /* uniform left + right margin, whole page */
  --card-w:    560px;  /* event card width */
  --col-gap:   40px;   /* gap between the two columns (was 48px) */
  --page-max:  1860px; /* content width cap — stops the hero stretching on wide screens (was 1720px) */
}

/* Scoped replacement for the old global reset + body font */
.hero, .schedule,
.hero *, .schedule *,
.hero *::before, .hero *::after,
.schedule *::before, .schedule *::after {
  box-sizing: border-box;
}

.hero, .schedule {
  background: #e9dbf2;

  /* Same full-bleed + same gutter formula as .hero — this is what makes the
     two sections share left and right edges. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px max(var(--page-pad), calc((100vw - var(--page-max)) / 2));

  position: relative;
  overflow: hidden;
}

/* ============ HERO ============ */
.hero {
  background: linear-gradient(30deg, #7502af 10%, #5a0b85 90%);

  /* Full-bleed, then the side gutter comes from padding — NOT from an inner
     max-width + margin:auto. Centring an inner box inside a negative-margin
     full-bleed parent gave the hero and schedule different edges. One shared
     formula on both sections guarantees they line up. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 90px max(var(--page-pad), calc((100vw - var(--page-max)) / 2)) 80px max(var(--page-pad), calc((100vw - var(--page-max)) / 2));

  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
  border-radius: 50%;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  border-radius: 50%;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.hero-inner {
  max-width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.hero-left { }

/* Row holding the event card + slider side by side, tops aligned */
.hero-detail-row {
  /* One child now — .event-card holds both the details and the slider. */
  display: block;
  width: 100%;
  margin-top: 70px;
}

.hero-detail-row .event-card {
  background: #e9dbf2;
  border: 1px solid rgba(91,43,116,0.15);
  border-radius: var(--radius-lg);
  padding: 32px 60px 32px 32px;   /* extra right padding for the next arrow */
  width: 100%;

  /* Details left, slider right — both inside the one lavender card, so the
     purple gap between them is gone and the card wraps the image. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;            /* room for the prev arrow to sit in */
  align-items: stretch;
  overflow: visible;    /* arrows sit outside the image — don't clip them */
}

.event-card .hero-slider {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 340px;   /* floor — .hero-slide children are absolute, so the
                          slider has no intrinsic height of its own */
  aspect-ratio: auto;  /* height comes from the card row instead */
  align-self: stretch;
  margin: 0;
  border-radius: 14px;
  overflow: visible;   /* arrows sit outside — must not be clipped */
}

/* Slider is a direct child of .hero (full-width), pinned to the right.
   Adjust `right` / `top` to nudge its position. */
/* .hero > .hero-slider is GONE.
   The slider now lives inside .hero-detail-row alongside the event card, so
   the gap between them is flex `gap` — one value, correct at every width.
   Absolute positioning could never reliably relate to an element it wasn't
   grouped with; each calc worked at one viewport and broke at another. */


/* ===== HERO IMAGE SLIDER ===== */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 740px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}

/* Pages whose banner art is wider than the box: show it all, no crop.
   EDUCAUSE has no marker class, so it still crops — add .educause-page
   here AND to <section class="hero"> if you want that changed. */
.nash-page .hero-slide img,
.aacrao-page .hero-slide img,
.sacrao-page .hero-slide img,
.gsv-page .hero-slide img {
  object-fit: contain;
  object-position: center;
  background: #0e0a2a;
}

/* NOTE: the prev/next chevrons were removed from IHE.php — the slider is
   autoplay-only now. All .hero-slider-arrow rules have been deleted with
   them. If you ever put the buttons back, they need re-adding here. */

/* Force hero text content to the left, overriding theme centering */
.hero .hero-inner,
.hero .hero-left {
  text-align: left !important;
  align-items: flex-start !important;
}
.hero .hero-left {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.hero .hero-left h1 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.hero .hero-ctas {
  margin-left: 0 !important;
  padding-left: 0 !important;
  
}

/* justify-self: start in the block above sizes a grid item to its CONTENT.
   That collapsed .hero-left to ~776px, so .hero-detail-row's 1fr column only
   had ~268px left for the slider. It must stretch to fill the column. */
.hero .hero-left {
  justify-self: stretch !important;
  width: 100%;
}

.hero-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 24px;
}

.hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  text-align: left !important;
}

.hero h1 span { color: var(--gold); }

.hero-desc {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  /* justify-content is set by the centring block at the end of this file.
     It used to be `flex-start !important` here, which fought it. */
}

.btn-white {
  background: var(--white);
  color: var(--purple);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.02em;
}

.btn-white:hover { background: var(--off-white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.2); }

.btn-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.8);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-outline-white:hover { border-color: rgba(255,255,255,0.7); color: var(--white); }

/* .event-card is defined once, on .hero-detail-row .event-card above —
   an earlier duplicate here still carried the old side-by-side values
   (padding: 32px 80px, width: var(--card-w)) and has been removed. */

.event-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.event-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 20px;
}

.event-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* WordPress replaces emoji characters with <img class="emoji"> and sets
   width / height / max-width to 1em !important, so font-size does nothing
   to them. All three have to be overridden. Scoped so it only affects
   the event-detail icons. */


.event-detail:last-child { margin-bottom: 0; }

.event-detail-icon {
  width: 44px; height: 48px;
  background: rgba(91,43,116,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.event-detail-icon img.emoji {
  width: 26px !important;
  height: 30px !important;
  max-width: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
}



.event-detail-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 0;
  line-height:1;
 
	
}

.event-detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
   margin-top:8px;
}

.booth-highlight {
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-top: 20px;
  text-align: left;

  /* was display: block, which stretched it to the full column width.
     inline-block + fit-content sizes it to its own text so its right edge
     sits in line with the detail values above rather than overshooting them. */
  display: inline-block;
  width: fit-content;
  min-width: 220px;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.booth-highlight-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 1.0;
}

.booth-highlight-num {
  font-size: 20px;      /* sized for "LUNCH SPONSORS", not a 2-digit booth no. */
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  margin-top: 2px;
}

/* ============ STATS STRIP ============ */
/* Kept for reference — the STATS STRIP section is currently an empty
   comment in the PHP, so none of this renders. */
.stats-strip {
  background: var(--navy);
  padding: 32px 56px;
}

.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  text-align: center;
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  display: block;
  line-height: 1;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.stat-num span { color: var(--gold); }

.stat-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}




/* ============ SECTION BASE ============ */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--purple-pale);
  border: 1px solid rgba(91,43,116,0.2);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 16px;
}

.section-tag::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--purple);
  border-radius: 50%;
}

.section-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.section-title span { color: var(--purple); }

.section-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.75;
  max-width: 580px;
}

/* ============ ABOUT EVENT ============ */
.about-event { background: var(--white); padding: 88px 56px; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-visual {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}

.about-visual::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
  border-radius: 50%;
}

.about-visual-title {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
}

.about-visual-event {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  position: relative;
}

.about-visual-event span { color: var(--gold); }

.about-visual-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.about-visual-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}

.about-visual-detail-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.about-right { }

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-100);
}

.about-feature:first-child { padding-top: 0; }
.about-feature:last-child { border-bottom: none; }

.about-feature-icon {
  width: 42px; height: 42px;
  background: var(--purple-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.about-feature-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

.about-feature-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ============ WHAT TO EXPECT ============ */
.expect { background: var(--off-white); padding: 88px 56px; }

.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.expect-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.expect-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--purple), var(--teal));
  opacity: 0;
  transition: opacity 0.3s;
}

.expect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(91,43,116,0.1);
  border-color: rgba(91,43,116,0.2);
}

.expect-card:hover::before { opacity: 1; }

.expect-num {
  font-family: 'Sora', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--gray-100);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.expect-icon {
  width: 44px; height: 44px;
  background: var(--purple-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.expect-title {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.expect-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.65;
}

/* ============ PRODUCTS ============ */
.products { background: var(--white); padding: 88px 56px; }

.products-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: flex-start;
  margin-bottom: 52px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: all 0.3s;
}




.product-card:hover {
  background: var(--purple-pale);
  border-color: rgba(91,43,116,0.25);
  transform: translateY(-3px);
}

.product-suite {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 6px;
}

.product-icon {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.product-name {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}

.product-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.5;
}

/* ============ MEET THE TEAM ============ */
.team { background: var(--off-white); padding: 88px 56px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s;
}

.team-card:hover {
  border-color: rgba(91,43,116,0.25);
  box-shadow: 0 12px 32px rgba(91,43,116,0.08);
}

.team-avatar {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin: 0 auto 14px;
}

.team-name {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.team-role {
  font-size: 12px;
  font-weight: 400;
  color: var(--purple);
  margin-bottom: 12px;
}

.team-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ============ SCHEDULE MEETING ============ */
.schedule {
  background: #e9dbf2;
  padding: 80px var(--page-pad);
  position: relative;
  overflow: hidden;
}

.schedule::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(170,73,219,0.10) 0%, transparent 65%);
  border-radius: 50%;
}

.schedule::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(170,73,219,0.10) 0%, transparent 65%);
  border-radius: 50%;
}

.schedule-inner {
  max-width: 100%;
  margin: 0;
  display: grid;

  /* Left column sized to its content rather than a bare 1fr — with 1fr 1fr
     the text column held ~450px of text in ~950px of space, and the leftover
     read as a large gap before the form. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
  position: relative;
  z-index: 1;
}

.schedule-left .section-title { color: var(--purple-dark); }
.schedule-left .section-desc { color: var(--purple); }

.schedule-benefits {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--purple-dark);
  font-weight: 400;
}

.schedule-benefit-check {
  width: 20px; height: 20px;
  background: rgba(91,43,116,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--purple);
  flex-shrink: 0;
}

.schedule-form {
  background: #AA49DB;
  border: 1.5px solid #AA49DB;
  border-radius: var(--radius-lg);
  padding: 36px 32px 5px;   /* 3rd value = bottom. Drop to 20px for tighter. */
  width: 100%;
  min-width: 0;      /* lets the card shrink with its grid column */
  max-width: 100%;   /* never wider than the column */
}

.form-title {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.form-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.form-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.form-input, .form-select {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 400;
  outline: none;
  transition: all 0.3s;
  width: 100%;
}

.form-input::placeholder { color: var(--gray-400); }

.form-input:focus, .form-select:focus {
  border-color: var(--purple);
  background: rgba(91,43,116,0.04);
  box-shadow: 0 0 0 3px rgba(91,43,116,0.1);
}

.form-select { appearance: none; cursor: pointer; }
.form-select option { background: var(--white); color: var(--navy); }

.form-submit {
  width: 100%;
  background: #e9dbf2;
  color: #1a1a1a;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 28px;
  transition: all 0.3s;
  letter-spacing: 0.02em;
}

.form-submit:hover {
  background: #dcc8ec;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(170,73,219,0.3);
}

/* ============ FORMINATOR FORM (inside .schedule-form) ============ */
/* Make the embedded Forminator form match the purple card. Scoped so it
   only affects this form. !important is used because Forminator ships its
   own stylesheet that often wins on specificity. */

.schedule-form .forminator-ui.forminator-custom-form,
.schedule-form .forminator-row,
.schedule-form .forminator-field {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Forminator's own column grid uses negative margins (row: 0 -10px,
   col padding: 0 10px). Capping the row at max-width:100% squeezed the
   two-column rows narrower than the single-column ones, which is what
   made First/Middle/Last Name stop short of the fields below.
   Zero the gutters and use gap instead so every row shares one left
   and right edge. Change the 18px to retune all spacing at once. */
.schedule-form .forminator-ui,
.schedule-form .forminator-field {
  min-width: 0 !important;
  max-width: 100% !important;
}

.schedule-form .forminator-row {
  margin: 0 0 18px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 18px !important;
}

.schedule-form .forminator-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

/* the row owns all vertical spacing now */
.schedule-form .forminator-field,
.schedule-form .forminator-field-wrapper {
  margin-bottom: 0 !important;
}

.schedule-form .forminator-input,
.schedule-form .forminator-textarea,
.schedule-form select {
  width: 100% !important;
}

/* no trailing gap after the final row, so the button sits flush
   against the card's bottom padding */
.schedule-form .forminator-row:last-of-type { margin-bottom: 0 !important; }

/* Forminator puts a bottom margin on the <form> wrapper itself, which
   the row and button rules never touch. This is the rest of the gap
   under the Submit button. */
.schedule-form .forminator-ui.forminator-custom-form,
.schedule-form form.forminator-ui,
.schedule-form .forminator-response-message {
  margin-bottom: 0 !important;
}

/* labels */
.schedule-form .forminator-label {
  color: var(--white) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

/* required asterisk */
.schedule-form .forminator-required,
.schedule-form .forminator-label .forminator-required { color: var(--gold) !important; }

/* text / email inputs and the select */
.schedule-form .forminator-input,
.schedule-form input[type="text"].forminator-input,
.schedule-form input[type="email"].forminator-input,
.schedule-form .forminator-textarea,
.schedule-form .forminator-select,
.schedule-form select,
.schedule-form .select2-container--default .select2-selection--single {
  background: var(--white) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  height: auto !important;
  color: var(--navy) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

/* select2 (Forminator's styled dropdown) text + arrow alignment */
.schedule-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--navy) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}
.schedule-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

/* placeholders */
.schedule-form .forminator-input::placeholder,
.schedule-form .forminator-textarea::placeholder { color: var(--gray-400) !important; }

/* focus state */
.schedule-form .forminator-input:focus,
.schedule-form .forminator-textarea:focus,
.schedule-form .forminator-select:focus,
.schedule-form select:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(91,43,116,0.1) !important;
  outline: none !important;
}

/* submit button — match the "Reserve My Slot" look */
.schedule-form .forminator-button-submit,
.schedule-form button.forminator-button {
  width: auto !important;
  min-width: 220px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #F5A623 !important;
  color: #3D1A50 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px !important;
  margin-top: 28px !important;
  margin-bottom: 0 !important;   /* needs !important — Forminator's own
                                    stylesheet wins against a bare 0px */
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.schedule-form .forminator-button-submit:hover,
.schedule-form button.forminator-button:hover {
  background: #dcc8ec !important;
  transform: translateY(-1px) !important;
}

/* ============ WHY EDMO ============ */
.why { background: var(--white); padding: 88px 56px; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.why-card {
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.3s;
}

.why-card:hover {
  background: var(--purple-pale);
  border-color: rgba(91,43,116,0.2);
}

.why-icon {
  width: 40px; height: 40px;
  background: var(--purple);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.why-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}

.why-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ============ CTA BANNER ============ */
.cta-banner {
  background: var(--off-white);
  border-top: 1px solid var(--gray-200);
  padding: 72px 56px;
}

.cta-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cta-banner-text h2 {
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.cta-banner-text h2 span { color: var(--purple); }

.cta-banner-text p {
  font-size: 15px;
  font-weight: 300;
  color: var(--gray-600);
}

.cta-banner-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.btn-purple {
  background: var(--purple);
  color: var(--white);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-purple:hover { background: var(--purple-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(91,43,116,0.25); }

.btn-outline-purple {
  background: transparent;
  color: var(--purple);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--purple);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-outline-purple:hover { background: var(--purple-pale); }

/* ============ FOOTER ============ */
/* Template footer removed — the previous unscoped `footer { background: var(--navy) }`
   rule was leaking navy onto the WordPress theme footer, so it has been removed.
   The `nav { }` block that used to sit at the top of this file was removed for
   the same reason: the Elementor footer's columns are <nav> elements, and it was
   painting them white, squashing them to 68px and flexing them apart. */

/* ============ RESPONSIVE ============ */
/* ============================================================
   RESPONSIVE
   Structure being sized here:
     .hero > .hero-inner > .hero-left > .hero-detail-row > .event-card
     .event-card = 2-col grid: .event-card-info | .hero-slider
   ============================================================ */

/* --- 1100px: the card's two columns get too narrow — stack them --- */
@media (max-width: 1100px) {
  .hero .hero-detail-row > .event-card,
  .event-card {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .event-card .hero-slider {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;   /* no second column to match, so use the ratio */
  }
}

/* --- 1000px: tighten page gutters and stack the schedule --- */
@media (max-width: 1000px) {
  :root { --page-pad: 32px; --col-gap: 32px; }

  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-detail-row .event-card { padding: 24px 48px; }

  .schedule-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .about-event, .expect, .products, .team, .why { padding: 64px 24px; }
  .about-grid    { grid-template-columns: 1fr; gap: 40px; }
  .expect-grid   { grid-template-columns: 1fr 1fr; }
  .products-intro{ grid-template-columns: 1fr; gap: 32px; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .team-grid     { grid-template-columns: 1fr 1fr; }
  .stats-inner   { grid-template-columns: 1fr 1fr; }
  .cta-banner-inner { flex-direction: column; text-align: center; }
  .cta-banner-buttons { justify-content: center; }
  .stats-strip { padding: 32px 24px; }
  .cta-banner  { padding: 56px 24px; }
}

/* --- 768px: smaller type, roomier tap targets --- */
@media (max-width: 768px) {
  .hero h1 { font-size: 34px; letter-spacing: -0.5px; }

  .hero-detail-row .event-card { padding: 20px 44px; gap: 20px; }
  .event-card-info { justify-content: flex-start; }

  .event-detail-icon  { width: 30px; height: 30px; }
  .event-detail-value { font-size: 14px; }

  .booth-highlight { width: 100%; min-width: 0; }   /* full width reads better once stacked */

  .event-card .hero-slider { aspect-ratio: 16 / 10; }
}

/* --- 640px: single-column everything --- */
@media (max-width: 640px) {
  :root { --page-pad: 20px; }

  .hero h1 { font-size: 30px; line-height: 1.15; }
  .hero-ctas { flex-direction: column; gap: 12px; width: 100%; }
  .hero-ctas .btn-white,
  .hero-ctas .btn-outline-white { width: 100%; text-align: center; }

  .expect-grid, .products-grid, .team-grid, .why-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .schedule-form { padding: 28px 20px 1px; }
}

/* --- 400px --- */
@media (max-width: 400px) {
  .hero h1 { font-size: 26px; }
  .stats-inner { grid-template-columns: 1fr; }
  .hero-detail-row .event-card { padding: 16px 36px; }
  .booth-highlight-num { font-size: 18px; }
}

/* ============================================================
   HERO WIDTH CHAIN — must stay last in the file.

   Every ancestor between .hero and .event-card has to be full width or the
   grid columns downstream get starved. .hero-left in particular is a grid
   item, and the text-alignment block earlier sets justify-self: start on its
   siblings, which sizes an item to its CONTENT rather than its column.

   NOTE: no grid-template-columns here on purpose — an !important column
   declaration would outrank the media queries and keep the card two-column
   on phones.
   ============================================================ */
.hero .hero-inner {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.hero .hero-inner > .hero-left {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  display: block !important;
  float: none !important;
}

.hero .hero-left > .hero-detail-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.hero .hero-detail-row > .event-card {
  width: 100% !important;
  max-width: 100% !important;
}

.hero .event-card > .hero-slider {
  max-width: none !important;
  min-width: 0 !important;
}

/* ============================================================
   HERO HEADING + BUTTONS — centred.
   Overrides the text-align:left block earlier in the file.
   The card below is untouched and stays full width.
   ============================================================ */
.hero .hero-left h1,
.hero .hero-left .hero-desc,
.hero .hero-left .hero-event-tag {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero .hero-left .hero-ctas {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

@media (max-width: 640px) {
  .hero .hero-left .hero-ctas { flex-direction: column !important; }
}

/* ============================================================
   EDGE + SLIDER EXPANSION  —  keep this block LAST.

   Two things happen here:
     1. the event card gives more of its width to the image column
     2. the schedule text/form columns move closer together

   Scoped to min-width breakpoints so it can never override the
   stacking rules in the max-width media queries above.
   ============================================================ */

@media (min-width: 1101px) {

  /* The card's padding moves OFF the card and onto the text column only.
     With zero padding on the right/top/bottom the image column runs to the
     card's own border, so there is no lavender left around it. */
  .hero .hero-detail-row > .event-card {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 48px;                 /* space between the details and the image */
    padding: 0 0 0 48px;       /* left inset for the text; image bleeds out */
    align-items: stretch;
    overflow: hidden;          /* clips the image to the card's rounded corner */
  }

  /* the text column supplies its own top/bottom breathing room */
  .hero .event-card > .event-card-info {
    padding: 44px 0;
  }

  /* Fills the column edge to edge. .hero-slide children are absolutely
     positioned, so the slider has no height of its own — min-height is the
     floor that decides how tall the card gets. */
  .hero .event-card > .hero-slider {
    height: 100%;
    min-height: 520px;
    margin: 0;
    border: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    overflow: hidden;
  }

  .hero .event-card > .hero-slider .hero-slide,
  .hero .event-card > .hero-slider .hero-slide img {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}

/* The GSV banner was set to object-fit: contain further up, which letterboxes
   it and leaves dead space above and below inside the taller box. cover fills
   it. Delete this rule if a future GSV image is text-heavy art that can't crop. */
.gsv-page .hero-slide img {
  object-fit: cover;
  object-position: center;
}

/* Schedule section: pull the form column left, closer to the text. */
@media (min-width: 1001px) {
  .schedule-inner {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
  .schedule-left .section-desc { max-width: 520px; }
}

/* ============================================================
   SLIDER-EDGE ALIGNMENT  —  keep this block last.

   One number drives all of it: --slider-edge, the distance from the
   content's left edge to the LEFT edge of the hero image.

   Where it comes from — the card is:
     48px left inset | 0.86fr | 48px gap | 1.14fr
   so the image starts at  48 + 48 + 0.86/(0.86+1.14) x (100% - 96px)
   which reduces to 43% + 55px.

   If you retune the card's columns, gap or padding in the block above,
   recompute this or the alignment drifts.
   ============================================================ */
@media (min-width: 1101px) {

  .hero, .schedule { --slider-edge: calc(43% + 55px); }

  /* Heading + buttons sit in the zone that ENDS at the image's left edge,
     centred inside it rather than across the whole page. */
  .hero .hero-left .hero-desc,
  .hero .hero-left .hero-event-tag,
  .hero .hero-left .hero-ctas {
    width: var(--slider-edge) !important;
    max-width: var(--slider-edge) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* .hero-desc carries its own max-width: 540px further up, which would
     win and keep it narrow. */
  .hero .hero-left .hero-desc { max-width: var(--slider-edge) !important; }

  /* the tag is inline-flex, so it centres via its own text box */
  .hero .hero-left .hero-event-tag {
    display: flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--slider-edge) !important;
  }

  /* Form column starts exactly where the image does. Left column therefore
     equals --slider-edge minus the gap that follows it. */
  .schedule-inner {
    grid-template-columns: calc(var(--slider-edge) - var(--col-gap)) minmax(0, 1fr);
    --col-gap: 48px;
    gap: var(--col-gap);
  }

  .schedule-left .section-desc { max-width: 100%; }
}

/* --- H1: full size, centred on the page ---------------------------
   This replaces four earlier stacked h1 overrides that each undid the
   one before (zone-width cap -> 46px -> max-content + translate -12%
   -> centred). Only the final state survives, stated once.

   The heading is NOT tied to --slider-edge: it spans the full content
   width and centres normally at 60px, which is what keeps it on two
   lines. The buttons below are anchored to the seam independently.
   ------------------------------------------------------------------ */
@media (min-width: 1101px) {
  .hero .hero-left h1 {
    font-size: clamp(36px, 5vw, 60px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    text-align: center !important;
  }
}

/* --- CTA gap centred on the card's seam ---------------------------
   The 14px gap between the two buttons straddles --slider-edge, i.e.
   the line where the lavender details half meets the photo.

   Done as a 2-column grid rather than flex so the split point is an
   explicit number: column 1 ends 7px BEFORE the seam, the 14px gap
   spans it, column 2 starts 7px after. Button 1 is pushed to the end
   of its column, button 2 to the start of its own, so their inner
   edges are the ones that land on those marks.

   If you change the 14px, change both halves (7px = gap / 2).
   ------------------------------------------------------------------ */
@media (min-width: 1101px) {
  .hero .hero-left .hero-ctas {
    display: grid !important;
    grid-template-columns: calc(var(--slider-edge) - 7px) minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: initial !important;   /* undoes the earlier flex-end */
    align-items: center !important;
  }

  .hero .hero-left .hero-ctas > *:nth-child(1) { justify-self: end !important; }
  .hero .hero-left .hero-ctas > *:nth-child(2) { justify-self: start !important; }
}

/* --- Image column stops shrinking ---------------------------------
   Both card columns used to be fractional (0.86fr / 1.14fr), so any
   width the window lost was shared between them and the photo kept
   getting smaller and more cropped.

   Now the image column is a clamp: it holds 56% on a wide screen but
   never drops below 620px, and never grows past 1005px. The details
   column takes the remainder, which is fine — it's text and reflows.

   --slider-edge is redefined off the same number so the CTA gap and
   the schedule form stay locked to the seam. Keep these two in sync:
   the edge is always "everything that isn't the image column".
   ------------------------------------------------------------------ */
@media (min-width: 1101px) {

  .hero, .schedule {
    --img-col:     clamp(620px, 56%, 1005px);
    --slider-edge: calc(100% - var(--img-col));
  }

  .hero .hero-detail-row > .event-card {
    grid-template-columns: minmax(0, 1fr) var(--img-col) !important;
    gap: 0 !important;          /* the image column now runs to the seam */
    padding: 0 0 0 48px !important;
  }

  /* the text column keeps its own right-hand breathing room, since the
     card's gap is gone */
  .hero .event-card > .event-card-info { padding-right: 48px; }

  /* --- why the button row uses a DIFFERENT number ------------------
     A percentage grid track resolves against the element's CONTENT box.
     Inside the card that box is (width - 48px padding - 2px borders), so
     the real image column is 0.56 x (W - 50), not 0.56 x W. .hero-ctas has
     no padding, so its own 56% would be 28px too wide and the gap would
     sit right of the seam.

     Subtracting 28px (= 0.56 x 50) makes the button row measure the same
     column the card actually drew. If the card's left padding changes,
     this correction changes with it: 0.56 x (padding + 2). */
  .hero .hero-left .hero-ctas {
    --img-col:     clamp(620px, calc(56% - 28px), 1005px);
    --slider-edge: calc(100% - var(--img-col));
  }

  /* Height follows width instead of a fixed floor, so the crop stays
     the same shape at every size rather than getting tighter. */
  .hero .event-card > .hero-slider {
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
    align-self: stretch;
  }
}

/* ============================================================
   EVENT PANEL SEPARATED FROM THE PHOTO   —  keep this block LAST.

   NOTE ON THE PREVIOUS REVISION
   The block that used to sit here forced the card to stack below
   1450px and gave the photo a fixed 1005x628 box. Your screenshots at
   a 1226px window still show the card SIDE BY SIDE, which means that
   block was never running on the server. It has been removed rather
   than left in to fight whatever is live. The layout is back to the
   clamp version above: the image column is
   clamp(620px, 56%, 1005px) and stays two-column down to 1100px.

   WHAT THIS BLOCK DOES
   The lavender was painted on .event-card, which spans BOTH columns —
   that is the only reason the details and the photo read as one card.
   Moving it to .event-card-info gives the details their own block with
   purple showing between it and the photo.

   The panel is then narrowed by 74px. That number is the offset
   between the card's text column and the schedule's text column below:
   the card's 48px padding and 1px borders shrink the box its own
   percentage resolves against, so its column ends ~74px to the right of
   where the schedule's does. Taking 74px off the panel lines the two
   right edges up and creates the gap before the photo at the same time.

   WHY THE PHOTO CANNOT MOVE
   background and border are paint, not layout. width is set on the
   panel itself, which is inside its own grid column. The card's
   padding, its grid-template-columns and the image track are all left
   untouched — so the slider keeps its exact size and position.

   If the right edges still do not line up, adjust ONLY the 74px.
   ============================================================ */

@media (min-width: 1101px) {

  .hero .hero-detail-row > .event-card {
    background: transparent !important;
    border: none !important;
	  padding-left:0!important;
  }

  .hero .event-card > .event-card-info {
    background: #e9dbf2;
    border: 1px solid rgba(91,43,116,0.15);
    border-radius: var(--radius-lg);
    padding: 32px 36px !important;
    width: calc(100% - 74px) !important;
    max-width: calc(100% - 74px) !important;
    margin-right: auto;
    align-self: stretch;      /* panel height follows its text, not the photo */
  }

  /* the photo is its own element now, so all four corners round */
  .hero .event-card > .hero-slider,
  .hero .event-card > .hero-slider .hero-slide,
  .hero .event-card > .hero-slider .hero-slide img {
    border-radius: var(--radius-lg) !important;
  }
}

/* ============================================================
   MOBILE / TABLET: SAME SEPARATION AS DESKTOP   (keep last)

   The block above is scoped to min-width 1101px, so below that the
   lavender was still painted on .event-card — which wraps the details
   AND the photo — and the two read as one merged card.

   Same treatment here: the paint moves onto .event-card-info.

   Two deliberate omissions:
     - no width on the panel. Stacked, it should fill the column.
     - nothing touches .event-card's padding. The slider sits inside
       that padding, so changing it resizes the photo. That was the
       cause of the "slider keeps changing size" problem earlier.
   ============================================================ */
@media (max-width: 1100px) {

  .hero .hero-detail-row > .event-card {
    background: transparent !important;
    border: none !important;
    gap: 28px !important;      /* vertical space between panel and photo */
  }

  .hero .event-card > .event-card-info {
    background: #e9dbf2;
    border: 1px solid rgba(91,43,116,0.15);
    border-radius: var(--radius-lg);
    padding: 28px 24px !important;
  }

  /* the photo is standalone now, so all four corners round */
  .hero .event-card > .hero-slider,
  .hero .event-card > .hero-slider .hero-slide,
  .hero .event-card > .hero-slider .hero-slide img {
    border-radius: var(--radius-lg) !important;
  }
}

/* --- less air between the photo and the schedule section ---------- */
@media (max-width: 1100px) {
  .hero { padding-bottom: 40px !important; }
}

@media (max-width: 640px) {
  .hero { padding-bottom: 28px !important; }
}