/* EOI Team Grid — shared by the Divi module and the [eoi_team_grid] shortcode.
   Per-instance values arrive as CSS custom properties in the wrapper's style attribute.
   The fallbacks below are the "Homepage 2026" look. */

.eoi-team-grid {
  --eoi-cols: var(--eoi-cols-d, 6);
  --eoi-col-gap: var(--eoi-col-gap-d, 5.5%);
  --eoi-row-gap: var(--eoi-row-gap-d, 27px);
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--eoi-justify, center);
  column-gap: var(--eoi-col-gap);
  row-gap: var(--eoi-row-gap);
  width: 100%;
}

.eoi-team-card {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  /* Equal columns; the 0.01px guards against rounding pushing the last card onto a new row. */
  width: calc((100% - (var(--eoi-cols) - 1) * var(--eoi-col-gap)) / var(--eoi-cols) - 0.01px);
  text-align: center;
}

.eoi-team-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--eoi-aspect, 1/1);
  object-fit: cover;
  border-radius: 0;
}

.eoi-team-grid--grayscale .eoi-team-photo {
  filter: grayscale(1);
}

/* Typography defaults. :where() keeps these easy for Divi's module design settings to override. */
:where(.eoi-team-grid) .eoi-team-name {
  margin: var(--eoi-photo-gap, 38px) 0 0;
  padding: 0 0 10px;
  font-size: var(--eoi-name-size, 20px);
  line-height: var(--eoi-name-lh, 1em);
  font-weight: var(--eoi-name-weight, 500);
  font-style: var(--eoi-name-style, normal);
  text-transform: var(--eoi-name-transform, none);
  letter-spacing: var(--eoi-name-ls, 0);
  color: var(--eoi-name-color, #fff);
}

:where(.eoi-team-grid) .eoi-team-title {
  margin: 0;
  padding: 0 0 10px;
  font-size: var(--eoi-title-size, 17px);
  line-height: var(--eoi-title-lh, 1em);
  font-weight: var(--eoi-title-weight, 500);
  font-style: var(--eoi-title-style, italic);
  text-transform: var(--eoi-title-transform, none);
  letter-spacing: var(--eoi-title-ls, 0);
  color: var(--eoi-title-color, #00aef0);
}

/* Font family only when one was chosen; otherwise the theme's heading font applies. */
.eoi-team-grid--name-family .eoi-team-name { font-family: var(--eoi-name-family); }
.eoi-team-grid--title-family .eoi-team-title { font-family: var(--eoi-title-family); }

/* Tablet */
@media (max-width: 980px) {
  :where(.eoi-team-grid) .eoi-team-name { font-size: var(--eoi-name-size-t, var(--eoi-name-size, 20px)); }
  :where(.eoi-team-grid) .eoi-team-title { font-size: var(--eoi-title-size-t, var(--eoi-title-size, 17px)); }
  .eoi-team-grid {
    --eoi-cols: var(--eoi-cols-t, 3);
    --eoi-col-gap: var(--eoi-col-gap-t, var(--eoi-col-gap-d, 5.5%));
    --eoi-row-gap: var(--eoi-row-gap-t, var(--eoi-row-gap-d, 27px));
  }
}

/* Phone (Divi's breakpoint) */
@media (max-width: 767px) {
  :where(.eoi-team-grid) .eoi-team-name { font-size: var(--eoi-name-size-p, var(--eoi-name-size-t, var(--eoi-name-size, 20px))); }
  :where(.eoi-team-grid) .eoi-team-title { font-size: var(--eoi-title-size-p, var(--eoi-title-size-t, var(--eoi-title-size, 17px))); }
  .eoi-team-grid:not(.eoi-team-grid--classic) {
    --eoi-cols: var(--eoi-cols-p, 2);
    --eoi-col-gap: var(--eoi-col-gap-p, var(--eoi-col-gap-t, var(--eoi-col-gap-d, 5.5%)));
    --eoi-row-gap: var(--eoi-row-gap-p, var(--eoi-row-gap-t, var(--eoi-row-gap-d, 27px)));
  }
}

/* --- Classic (pre-1.3) look, used by the shortcode unless preset="homepage-2026" --- */
.eoi-team-grid--classic .eoi-team-name {
  margin: var(--eoi-photo-gap, 12px) 0 4px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}

.eoi-team-grid--classic .eoi-team-title {
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
  color: #00aef0;
}

/* Classic kept its original 480px phone breakpoint. */
@media (max-width: 480px) {
  .eoi-team-grid--classic {
    --eoi-cols: var(--eoi-cols-p, 1);
    --eoi-col-gap: var(--eoi-col-gap-p, var(--eoi-col-gap-t, var(--eoi-col-gap-d, 75px)));
    --eoi-row-gap: var(--eoi-row-gap-p, var(--eoi-row-gap-t, var(--eoi-row-gap-d, 75px)));
  }
}