/* ===== tokens ===== */
.custom-upcoming-events{
  --icon-col: 36px;         /* shared icon-col width (both rows) */
  --gap: 12px;              /* row gap */
  --pill-pad: 17px 21px;    /* date pill padding */
}

/* ===== card base ===== */
.custom-upcoming-events .has-azureish-white-background-color{
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.custom-events-right .has-azureish-white-background-color + .has-azureish-white-background-color{
  margin-top: 20px;
}

/* ===== date pill (top-right, all cards) ===== */
.custom-upcoming-events .has-azureish-white-background-color p.has-dark-cerulean-background-color{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--pill-pad);
  min-width: 58px;
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 0 !important;
  border-bottom-left-radius: 5px !important;
  color: #ffffff;
}

/* ===== left cards: collapse empty right column ===== */
.custom-events-left
.has-azureish-white-background-color
> .wp-block-columns
> .wp-block-column.event-col{
  flex: 1 1 auto;
  max-width: 100%;
}

.custom-events-left
.has-azureish-white-background-color
> .wp-block-columns
> .wp-block-column:last-child{
  flex: 0 0 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: contents;
}

/* ===== arrows (both sides) ===== */
.custom-upcoming-events a[aria-label^="Open event"]{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  line-height: 0;
}

.custom-upcoming-events a[aria-label^="Open event"] svg{
  position: static !important;
}

.custom-upcoming-events a[aria-label^="Open event"] svg path{
  stroke: var(--wp--preset--color--dark-cerulean);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== right cards: shared spacing + alignment across rows ===== */
.custom-events-right .right-card .wp-block-columns{
  gap: var(--gap);
  align-items: center;
  margin: 0 !important;
}

/* Row 1 first col (icon) */
.custom-events-right
.right-card
> .wp-block-group:first-child
.wp-block-columns
> .wp-block-column:first-child{
  flex: 0 0 var(--icon-col);
  max-width: var(--icon-col);
}

/* Row 2 first col (icon) */
.custom-events-right .right-card .custom-icon-column{
  flex: 0 0 var(--icon-col);
  max-width: var(--icon-col);
  min-width: var(--icon-col);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ===== text trims ===== */
.custom-events-right .right-card p.has-quartz-color,
.custom-events-right .right-card p.has-small-font-size{
  margin: 0 !important;
}

/* ===== meta line with icons ===== */

/* meta line: keep inline with surrounding text */
.adgc-meta__item{
  display: inline-flex;
  gap: .45rem;
}

/* if any UA/builder injects margins on the <p>, kill them */
.adgc-meta p{
  margin: 0;
}

/* tighten gap between title row and meta row */
.custom-events-right
.right-card
> .wp-block-group.is-layout-flex
+ .wp-block-group.is-layout-flex{
  margin-top: 12px !important;
}

/* ============================================================
   Annual Meeting hero full-image card (legacy)
   ============================================================ */

.custom-upcoming-events
.has-azureish-white-background-color.adgc-hero-fullimg{
  padding: 0;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
}

.custom-upcoming-events .adgc-hero-fullimg__link{
  display: block;
  border-radius: 5px;
  overflow: hidden;
}

.custom-upcoming-events .adgc-hero-fullimg__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Base hero card
   ============================================================ */

.custom-upcoming-events .adgc-hero-card{
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
  padding: 0;
}

.custom-upcoming-events .adgc-hero-card__link{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* base bg image */
.custom-upcoming-events .adgc-hero-card__bg img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   New hero overlay card (Annual Meeting with home_img_url)
   ============================================================ */

/* overlay on top of the image */
.custom-upcoming-events .adgc-hero-card__overlay{
  position: absolute;
  inset: 0;
  padding: 18px 120px 18px 20px;  /* right padding ≈ pill width + gap */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.15) 65%,
    rgba(0,0,0,0.00) 100%
  );
}

/* date pill in the top-right, same geometry as global pill */
.custom-upcoming-events .adgc-hero-card__pill{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--pill-pad);
  min-width: 58px;
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 0 !important;
  border-bottom-left-radius: 5px !important;
}

/* --- HERO: icon top-left --- */
.custom-upcoming-events .adgc-hero-card__icon{
  position: absolute;
  top: 18px;
  left: 20px;
  flex: 0 0 auto;
  max-width: none;
  color: #fff;
}

/* ensure icon + text visible on dark background */
.custom-upcoming-events .adgc-hero-card .adgc-ico{
  color: #ffffff;
}

/* --- HERO: bottom strip with title + arrow --- */
.custom-upcoming-events .adgc-hero-card__overlay-inner{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 12px 18px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 12px;

  /* translucent dark box over the image */
  background: rgba(0, 0, 0, 0.25);
}

.custom-upcoming-events .adgc-hero-card__text{
  flex: 1 1 auto;
}

.custom-upcoming-events .adgc-hero-card__title{
  margin: 0;
  color: #fff;
}

.custom-upcoming-events .adgc-hero-card__meta{
  margin: 0;
  color: #f0f4f8;
  font-size: 0.9rem;
}

/* arrow sits on the right in that strip */
.custom-upcoming-events .adgc-hero-card__arrow{
  flex: 0 0 auto;
  margin-left: 8px;
  line-height: 0;
}

.custom-upcoming-events .adgc-hero-card__arrow svg{
  width: 32px;
  height: 32px;
}

.custom-upcoming-events .adgc-hero-card__arrow svg path{
  stroke: #ffffff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Equal-height hero cards on the LEFT only
   ============================================================ */

/* The flex wrapper that holds the two hero cards */
.custom-upcoming-events .custom-events-left > .wp-block-group.is-layout-flex{
  display: flex;
  align-items: stretch;   /* children stretch to same height */
}

/* Each hero card shares the available height */
.custom-upcoming-events
  .custom-events-left > .wp-block-group.is-layout-flex > .wp-block-group.adgc-hero-card{
  flex: 1 1 0;
}

/* Non-overlay hero: make the graphic fill the stretched card */
.custom-upcoming-events .adgc-hero-card--no-overlay{
  display: flex;
}

.custom-upcoming-events .adgc-hero-card--no-overlay .adgc-hero-card__link{
  flex: 1 1 auto;
  display: block;
}

.custom-upcoming-events
  .adgc-hero-card--no-overlay .adgc-hero-card__bg,
.custom-upcoming-events
  .adgc-hero-card--no-overlay .adgc-hero-card__bg img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Mobile tweaks
   ============================================================ */

/* --- hero strip on mobile: allow wrapping --- */
@media (max-width: 640px){
  /* stack the two hero cards */
  .custom-events-left > .wp-block-group.is-layout-flex{
    display: block;
  }

  /* space between them when stacked */
  .custom-events-left .adgc-hero-card + .adgc-hero-card{
   margin-top: 20px !important;
  }

  /* hero bottom strip layout */
  .custom-upcoming-events .adgc-hero-card__overlay-inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px 14px;
  }

  .custom-upcoming-events .adgc-hero-card__arrow{
    margin-left: 0;
  }
}

/* --- sponsor logos row on mobile --- */
@media (max-width: 640px){
  .wp-container-core-group-is-layout-5da3ba9d.wp-block-group-is-layout-flex{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }

  .wp-container-core-group-is-layout-5da3ba9d figure.wp-block-image{
    flex: 0 0 50%;
    max-width: 50%;
    margin: 0 0 12px;
    text-align: center;
  }

  .wp-container-core-group-is-layout-5da3ba9d figure.wp-block-image img{
    width: 100%;
    height: auto;
  }
}

/* --- header logo align left on mobile --- */
@media (max-width: 640px){
  .wp-block-site-logo.aligncenter,
  .wp-block-site-logo.aligncenter a,
  .wp-block-site-logo.aligncenter img{
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    display: block;
  }
}
@media (max-width: 600px){

  /* Card spacing + prevent overflow */
  .custom-events-right .right-card{
    padding: 14px 14px 12px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* ----- TOP ROW: title | date badge ----- */
  .custom-events-right .custom-right-card-top-row .wp-block-columns{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 12px;
    align-items: start;
  }

  /* Hide the left spacer column (the 5% empty column) */
  .custom-events-right .custom-right-card-top-row .custom-top-l{
    display: none !important;
  }

  /* Title column: remove big paddings on mobile */
  .custom-events-right .custom-right-card-top-row .custom-top-c{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make the H3 behave nicely on narrow widths */
  .custom-events-right .right-card h3{
    margin: 0 0 6px 0 !important;
    font-size: 1.05rem;         /* tweak */
    line-height: 1.25;
  }

  /* Date badge: fixed-ish width, keep it inside the card */
  .custom-events-right .custom-right-card-top-row .custom-top-r{
    flex-basis: auto !important;     /* neutralize inline flex-basis */
    width: auto !important;
    justify-self: end;
  }
  .custom-events-right .custom-right-card-top-row .custom-top-r > p{
    margin: 0 !important;
    min-width: 56px;
    padding: 8px 10px !important;
    line-height: 1.05;
  }

  /* ----- BOTTOM ROW: icon | meta ----- */
  .custom-events-right .custom-right-card-bottom-row .wp-block-columns{
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    column-gap: 10px;
    align-items: center;
  }

  /* Remove any extra spacer right column */
  .custom-events-right .custom-right-card-bottom-row .cusotm-bottom-r,
  .custom-events-right .custom-right-card-bottom-row .custom-bottom-r{
    display: none !important;
  }

  /* Icon sizing */
  .custom-events-right .custom-icon-column svg{
    width: 24px !important;
    height: 24px !important;
  }

  /* Meta: kill weird default margins (helps with your invalid nesting too) */
  .custom-events-right .custom-right-card-bottom-row p{
    margin: 0 !important;
  }
  .custom-events-right .adgc-meta,
  .custom-events-right .adgc-meta p{
    margin: 0 !important;
  }
  .custom-upcoming-events
.custom-events-right
.right-card
p.has-dark-cerulean-background-color{
  display: none !important;
}

  .custom-upcoming-events .custom-events-left > .wp-block-group.is-layout-flex{
    display: block;
  }
}

@media (max-width: 600px){

  /* =========================================================
     MISSION SECTION — MOBILE TUNING
     1) kill the blue strip above image (override min-height)
     2) reduce gap between image + text
     ========================================================= */

  /* 1) COVER: remove the forced tall height (this is the blue strip culprit) */
  .homepage-our-mission-image-block .wp-block-cover{
    min-height: 0 !important;     /* overrides inline 332px */
    height: auto !important;
    margin: 0 !important;
  }

  /* IMPORTANT: do NOT change the cover image positioning;
     WP expects it to be absolute for cover blocks */
  .homepage-our-mission-image-block .wp-block-cover__image-background{
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
  }

  /* Remove the empty paragraph inside the cover (it can add phantom spacing) */
  .homepage-our-mission-image-block
  .wp-block-cover__inner-container > p:empty{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) GAP: tighten space between stacked columns (image column + text column) */
  .wp-block-group.alignfull.has-dark-cerulean-background-color
  > .wp-block-columns{
    row-gap: 10px !important;     /* adjust 6–14px */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Some themes add a top margin when columns stack */
  .wp-block-group.alignfull.has-dark-cerulean-background-color
  > .wp-block-columns
  > .wp-block-column{
    margin-top: 0 !important;
  }

  /* Reduce the big padding on the text column so it sits closer */
  .homepage-our-mission{
    padding-top: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .homepage-our-mission h1{
    margin-top: 0 !important;
  }
}