/*
 * "Who We Work With" / Exhibitors section — static specimen.
 * Live Elementor container: elementor-element-5bfeafca (post 2086).
 * All values grounded in live computed styles + the per-page generated
 * stylesheet (post-2086.css), not guessed — see the dev-submission for
 * the full audit trail.
 *
 * Card overlay technique deliberately simplified from Elementor's own
 * implementation: live renders each card's text panel via a
 * `background_background: gradient` container setting that Elementor
 * expects its motion-effects frontend JS to apply to an injected
 * `.elementor-motion-effects-layer` child — that layer never appeared in
 * repeated automated testing this session (though a real-browser pass
 * earlier in this project did see it render). Rather than depend on that
 * JS machinery, this specimen applies the same gradient directly via
 * plain CSS on an absolutely-positioned panel — same visual result, no
 * JS dependency, matches how every other hardcoded section on this site
 * already works.
 */



.exhibitors {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--color-navy);
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* --- intro --- */
.exhibitors__intro {
  text-align: center;
  max-width: 748px;
}
.exhibitors__eyebrow {
  margin: 0 0 5px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--color-white);
}
.exhibitors__heading {
  margin: 0;
  max-width: 328px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--font-size-xxxl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xxxl);
  color: var(--color-orange);
}

/* --- card grid --- */
.exhibitors__grid {
  width: 100%;
  max-width: 1196px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.exhibitors__card {
  position: relative;
  overflow: hidden;
  height: 450px;
  border-radius: var(--radius-card);
  border: 2px solid transparent;
}
.exhibitors__card--blue {
  border-color: var(--color-blue);
  box-shadow: 0 0 10px var(--color-blue);
}
.exhibitors__card--orange {
  border-color: var(--color-orange);
  box-shadow: 0 0 15px var(--color-orange);
}
.exhibitors__card--dark {
  border-color: var(--color-ink);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.exhibitors__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exhibitors__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 40px;
}
.exhibitors__card--panel-left .exhibitors__panel {
  left: 0;
}
.exhibitors__card--panel-right .exhibitors__panel {
  right: 0;
  text-align: right;
}
.exhibitors__card--blue .exhibitors__panel {
  background: linear-gradient(90deg, var(--color-blue) 0%, transparent 100%);
}
.exhibitors__card--orange.exhibitors__card--panel-right .exhibitors__panel {
  background: linear-gradient(270deg, var(--color-orange) 0%, transparent 100%);
}
.exhibitors__card--dark .exhibitors__panel {
  background: linear-gradient(90deg, rgba(34, 34, 34, 0.96) 0%, transparent 100%);
}

.exhibitors__card-title {
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
  color: var(--color-white);
}
.exhibitors__card-body {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-white);
}

/* --- CTA --- */
.exhibitors__cta {
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1196px;
  margin-inline: auto;
}
.exhibitors__button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 10px 30px;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-button);
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.exhibitors__button:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

/* --- tablet (matches live: text panel becomes a full-width overlay) --- */
@media (max-width: 1024px) {
  .exhibitors__panel { width: 100%; }
  .exhibitors__card--panel-right .exhibitors__panel { text-align: left; }
}

/* --- mobile (confirmed live: card row does not stack to column, image
     stays 450px tall, panel is a full overlay — no horizontal overflow
     at 390px, verified via chrome-devtools emulation) --- */
@media (max-width: 767px) {
  .exhibitors {
    padding: 56px 16px;
  }
  .exhibitors__panel {
    padding: 20px;
  }
}

/* Responsive polish (ship pass) */
.exhibitors__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.exhibitors__card-title {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.5rem);
}
@media (max-width: 767px) {
  .exhibitors { padding: 56px 16px; }
  .exhibitors__panel { padding: 16px; }
  .exhibitors__cta { align-self: stretch; }
  .exhibitors__button { justify-content: center; width: 100%; }
}


/* Production: full-bleed navy; padding only, never box the section */
.exhibitors {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Beat Elementor kit-197 button styles (invisible text / crushed padding) */
.exhibitors a.exhibitors__button,
.exhibitors a.exhibitors__button:visited,
.exhibitors a.exhibitors__button:hover,
.exhibitors a.exhibitors__button:focus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 12px 28px !important;
  min-height: 44px !important;
  border: 1px solid var(--color-blue) !important;
  border-radius: var(--radius-button) !important;
  background: var(--color-blue) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-md) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: none !important;
}
.exhibitors a.exhibitors__button:hover,
.exhibitors a.exhibitors__button:focus {
  background: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-white) !important;
}
.exhibitors a.exhibitors__button svg,
.exhibitors a.exhibitors__button path {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: inherit !important;
}