/*
 * PMI Events — events.css v1.0.0
 *
 * Pixel measurements from reference screenshot:
 *
 * SECTION:        white #fff, padding 64px top / 72px bottom
 * HEADER ROW:     flex space-between, items align-end
 * HEADING:        43px / 800 / #111111 / left
 * VIEW ALL LINK:  14px / 500 / #1a8fe8 / align-end
 * HEADER→GRID:    48px gap
 *
 * CARD:           white bg, 1px solid #dde3ee, radius 6px
 * CARD STRIP:     height 46px, bg #f0f4f9, padding 0 20px
 *   type label:   10px / 600 / uppercase / ls 0.10em / #7a8fa8
 *   date:         11.5px / 700 / #1a8fe8
 *   strip border: border-bottom 1px solid #dde3ee
 * CARD BODY:      padding 24px
 *   title:        19.5px / 800 / #111111 / lh 1.22 / mb 14px
 *   desc:         13.5px / #606672 / lh 1.55 / mb 16px
 *   location:     13px / #8a9bb5, icon same colour / mb 20px
 *   button:       full-width / h 48px / bg #0f2d58 / white / 14px 600 / radius 4px
 */

/* ── Scope & reset ─────────────────────────────────────────────────────────── */
.pmiev-section,
.pmiev-section *,
.pmiev-section *::before,
.pmiev-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_events_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmiev-section),
.e-con:has(.pmiev-section) {
  padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
}

/* ── Section ────────────────────────────────────────────────────────────────── */
.pmiev-section {
  background-color: #ffffff;
  padding-top:    64px;
  padding-bottom: 72px;
  width: 100%;
  display: block;
}

/* ── Container ─────────────────────────────────────────────────────────────── */
.pmiev-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER ROW
   Flex row: heading left, "View Full Calendar →" right, aligned bottom.
══════════════════════════════════════════════════════════════════ */
.pmiev-header {
  display:         flex;
  align-items:     flex-end;  /* both baseline-align to bottom of heading */
  justify-content: space-between;
  gap:             24px;
  margin-bottom:   48px;
}

.pmiev-heading {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      43px;
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -0.02em;
  color:          #111111;
  text-align:     left;
  flex:           1;
  /* WP guard */
  text-transform: none;
  border: none;
  padding: 0;
}

/* "View Full Calendar →" link — right side, baseline-aligned */
.pmiev-view-all {
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     500;
  color:           #1a8fe8;     /* PMI bright blue */
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  padding-bottom:  6px;         /* fine-tune vertical alignment with heading */
  transition:      color 0.18s ease, opacity 0.18s ease;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
}

.pmiev-view-all:hover {
  color:   #1279cc;
  opacity: 0.85;
  text-decoration: underline;
}
.pmiev-view-all:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 3px;
  border-radius:  2px;
}

/* ══════════════════════════════════════════════════════════════════
   3-COLUMN GRID
══════════════════════════════════════════════════════════════════ */
.pmiev-grid {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           20px;
  align-items:   stretch;
}

/* ══════════════════════════════════════════════════════════════════
   EVENT CARD
   White background, 1px border, 6px radius.
   Full card is a block. Top strip + body structure.
══════════════════════════════════════════════════════════════════ */
.pmiev-card {
  background:     #ffffff;
  border:         1px solid #dde3ee;
  border-radius:  6px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     box-shadow 0.20s ease, border-color 0.20s ease;
}

.pmiev-card:hover {
  box-shadow:   0 6px 24px rgba(0, 43, 100, 0.10);
  border-color: #c4cee0;
}

/* ── Card strip ────────────────────────────────────────────────────────────────
   Light blue-grey strip at top. Type label left, date right.             */
.pmiev-card__strip {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          46px;
  padding:         0 20px;
  background:      #f0f4f9;    /* light blue-grey strip */
  border-bottom:   1px solid #dde3ee;
  flex-shrink:     0;
}

/* Event type — "EXECUTIVE FORUM", "CONFERENCE" etc. */
.pmiev-card__type {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          #7a8fa8;    /* muted blue-grey */
  line-height:    1;
}

/* Date — "12 OCT 2026" in PMI blue */
.pmiev-card__date {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      11.5px;
  font-weight:    700;
  color:          #1a8fe8;    /* PMI bright blue */
  letter-spacing: 0.02em;
  line-height:    1;
}

/* ── Card body ─────────────────────────────────────────────────────────────────
   White area. Flex column — button pins to bottom.                      */
.pmiev-card__body {
  padding:        24px;
  display:        flex;
  flex-direction: column;
  flex:           1;          /* stretch card body to fill available height */
}

/* Event title */
.pmiev-card__title {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      19.5px;
  font-weight:    800;
  line-height:    1.22;
  letter-spacing: -0.01em;
  color:          #111111;
  margin-bottom:  14px;
  /* WP guard */
  text-transform: none;
  border: none;
  padding: 0;
}

/* Event description */
.pmiev-card__desc {
  font-family:   'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:     13.5px;
  font-weight:   400;
  line-height:   1.55;
  color:         #606672;
  margin-bottom: 16px;
  flex:          1;           /* pushes location + button to bottom */
  padding: 0;
}

/* Location row — pin icon + text */
.pmiev-card__location {
  display:       flex;
  align-items:   center;
  gap:           6px;
  font-family:   'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:     13px;
  font-weight:   400;
  color:         #8a9bb5;
  margin-bottom: 20px;
  line-height:   1;
  padding: 0;
}

.pmiev-card__location-icon {
  width:       12px;
  height:      12px;
  flex-shrink: 0;
  color:       #8a9bb5;     /* same as text */
  display:     block;
}

/* Register button — full width, deep navy */
.pmiev-card__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          48px;
  padding:         0 16px;
  background:      #0f2d58;   /* deep PMI navy — matches why panel */
  border:          none;
  border-radius:   4px;
  color:           #ffffff;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     600;
  letter-spacing:  0.01em;
  text-decoration: none;
  text-align:      center;
  cursor:          pointer;
  margin-top:      auto;     /* pin button to bottom of flex body */
  transition:
    background-color 0.18s ease,
    transform        0.15s ease,
    box-shadow       0.18s ease;
}

.pmiev-card__btn:hover {
  background: #1a4a82;       /* lighter navy on hover */
  transform:  translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 45, 88, 0.35);
}

.pmiev-card__btn:active { transform: translateY(0); }

.pmiev-card__btn:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .pmiev-inner   { padding: 0 24px; }
  .pmiev-heading { font-size: 36px; }
  .pmiev-section { padding-top: 52px; padding-bottom: 60px; }
}

@media (max-width: 900px) {
  .pmiev-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pmiev-heading { font-size: 28px; }
  .pmiev-section { padding-top: 44px; padding-bottom: 52px; }
  .pmiev-header  { margin-bottom: 36px; }
}

@media (max-width: 640px) {
  .pmiev-inner     { padding: 0 20px; }
  .pmiev-section   { padding-top: 36px; padding-bottom: 44px; }
  .pmiev-header    { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .pmiev-view-all  { padding-bottom: 0; }
  .pmiev-heading   { font-size: 24px; }
  .pmiev-grid      { grid-template-columns: 1fr; gap: 12px; }
  .pmiev-card__title { font-size: 17px; }
}

@media (max-width: 420px) {
  .pmiev-inner   { padding: 0 16px; }
  .pmiev-heading { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmiev-card, .pmiev-card__btn { transition: none; transform: none !important; }
}