/* ============================================================
   HOMEPAGE WEBINAR POPUP
   Enqueued only on is_front_page(). Same open/close overlay mechanism
   as the existing #contentModal (fixed inset, dark blurred backdrop,
   .open toggles display) — a separate overlay rather than reusing
   #contentModal itself, since that one's already wired for dynamic
   Industries/Case Study card content and has its own simpler text
   styling (.modal-h2 etc.) that this two-column marketing layout
   would clash with.

   Brand tokens matched to the other rebuilt pages (Contact, Blog,
   Single Post, Agentforce): #0D1B2E ink / #004195 blue / #01AEF0 cyan.
============================================================ */

.kd-webinar-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(13,27,46,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kd-webinar-popup-overlay.open { display: flex; }

.kd-webinar-popup-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  max-width: 995px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 40px 80px rgba(13,27,46,0.35);
}
.kd-webinar-popup-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  background: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  color: #0D1B2E;
  cursor: pointer;
  transition: background .2s ease;
}
.kd-webinar-popup-close:hover { background: rgb(1 174 240); color: #fff; }

/* Decorative background shapes (real Figma export assets, not CSS) —
   absolutely positioned behind the grid, clipped to the box's rounded
   corners by its overflow. Pointer-events off so they never intercept
   clicks meant for the content above them.

   These are NOT the same spot — Clip-path-group-1 (the diagonal sheen)
   sits in the gap between the heading text and the photos, per the
   Figma inspector (295.28 x 135.45, left 266.58px); Clip-path-group
   (the building photo) stays pinned to the top-right corner. Both were
   previously pinned to top:0;right:0 together, which meant the opaque
   building photo painted over the sheen and hid it completely. */
.kd-webinar-popup-bg-streak,
.kd-webinar-popup-bg-building {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
}
.kd-webinar-popup-bg-streak {
  top: 0;
  left: 267px;
  width: 295px;
  opacity: 0.9;
}
.kd-webinar-popup-bg-building { top: 0; right: 0; width: 380px; }

.kd-webinar-popup-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  padding: 22px;
  /* start, not center — with center, growing either column's content
     (e.g. padding on .kd-webinar-popup-pills) re-centers that whole
     column and drags the photos above it up/down as a side effect. */
  align-items: start;
}

.kd-webinar-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 10px;
  border-radius: 40px;
  background: #01AEF0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.kd-webinar-popup-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}

.kd-webinar-popup-eyebrow {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #004195;
  line-height: 34px;
}
.kd-webinar-popup-title {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 45px;
  color: #004195;
  margin: 4px 0 8px;
}
.kd-webinar-popup-accent { color: #01AEF0; }

.kd-webinar-popup-desc {
  font-size: 16px;
  line-height: 26px;
  color: #004195;
  font-weight: 400;
  margin: 0 0 24px;
  max-width: 46ch;
}

.kd-webinar-popup-meta {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
}
.kd-webinar-popup-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kd-webinar-popup-meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(1,174,240,0.12);
  color: #004195;
  flex-shrink: 0;
}
.kd-webinar-popup-meta-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    color: #004195;
    text-transform: uppercase;
}
.kd-webinar-popup-meta-text span {
    font-size: 13px;
    color: #004195;
    font-weight: 400;
    line-height: 23px;
}

.kd-webinar-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 10px;
  background: #0B2A6B;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.kd-webinar-popup-cta:hover { background: #004195; }

.kd-webinar-popup-speakers {
  display: flex;
  gap: 14px;
  margin-bottom: 0px;
  margin-top: 50px;
}
/* Exact spec from Figma inspector: 180x232 card, 1.69px white border,
   this specific drop shadow, 13.55px radius. The white border matters
   visually, not just decoratively — it's what separates each card from
   the blue building photo bleeding behind them in the top-right corner. */
.kd-webinar-popup-speaker {
  /* No fixed width, so the two cards share .kd-webinar-popup-speakers'
     row equally instead of shrinking to their own content and leaving
     blank space on the right (most visible on tablet, where that row
     is much wider than the old 2-column desktop layout). */
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1.69px solid #fff;
  border-radius: 13.55px;
  box-shadow: -0.85px 5.08px 16.09px 0px rgba(0,0,0,0.10);
  box-sizing: border-box;
  padding: 2px 2px 0;
  overflow: hidden;
}
.kd-webinar-popup-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 11px 11px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #004195 0%, #01AEF0 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
}
.kd-webinar-popup-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-webinar-popup-speaker-body { padding: 12px 12px 14px; }
.kd-webinar-popup-speaker-name {
  font-size: 16px;
  font-weight: 700;
  color: #004195;
  margin-bottom: 4px;
}
.kd-webinar-popup-speaker-title {
    font-size: 12px;
    color: #004195;
    line-height: 20px;
    font-weight: 500;
}
.kd-webinar-popup-speaker-bar {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #01AEF0;
  margin-top: 8px;
}

/* Wraps like a tag cloud (2 pills on the first row, the longer third
   one wrapping to its own row) — matches the reference design; these
   are NOT full-width stacked rows. */
.kd-webinar-popup-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  /* The grid's own padding got tightened to 22px, which left these
     pills sitting almost flush against the box's bottom edge — this
     restores clearance without touching that padding everywhere else. */
  margin-bottom: 3px;
}
.kd-webinar-popup-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
    padding: 6px 16px;
    border-radius: 24px;
    background: #F0F6FF;
  font-size: 13px;
  font-weight: 700;
  color: #004195 !important;
  white-space: nowrap;
}
.kd-webinar-popup-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #01AEF0;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  /* Flatten .kd-webinar-popup-left/-right (display:contents removes just
     the wrapper divs from layout, keeping their children in place) so the
     CTA button — normally inside -left, before the speakers/pills that
     live in -right — can be pushed after them with `order`. Desktop is
     untouched: this whole block only applies at this breakpoint, and
     `order` has no effect until the parent is actually flex/grid. */
  .kd-webinar-popup-grid {
    display: flex;
    flex-direction: column;
    /* The base rule's align-items:start (needed for the desktop grid)
       otherwise carries over here too — leaving every flattened child,
       .kd-webinar-popup-speakers included, sized to its own content and
       left-aligned instead of stretched to the full row width. */
    align-items: stretch;
    gap: 0;
    padding: 35px 25px;
  }
  .kd-webinar-popup-left,
  .kd-webinar-popup-right {
    display: contents;
  }
  .kd-webinar-popup-badge,
  .kd-webinar-popup-cta {
    /* Stretch is right for the speakers/pills rows, but the badge and
       the CTA are pill/button shapes meant to size to their own content
       — without this they'd stretch to the full row width too. */
    align-self: flex-start;
  }
  .kd-webinar-popup-cta {
    order: 10;
    margin-top: 20px;
  }
  .kd-webinar-popup-title { font-size: 28px; }
  .kd-webinar-popup-desc { max-width: none; }
  .kd-webinar-popup-speakers { margin-top: 8px; }
  /* Single-column layout puts text directly under these shapes — too
     cramped/distracting at this width, so hide rather than shrink. */
  .kd-webinar-popup-bg-streak,
  .kd-webinar-popup-bg-building { display: none; }
}
@media (max-width: 480px) {
  .kd-webinar-popup-meta { flex-direction: column; gap: 14px; }
  .kd-webinar-popup-speakers { flex-direction: column; }
  /* At this width even one pill's text can be wider than the column —
     let it wrap instead of forcing an overflow scroll. */
  .kd-webinar-popup-pill { white-space: normal; }
}