/*
 * Marketing Club – Elementor Widgets  v3.0.0
 * ─────────────────────────────────────────────────────────────────────
 * Every rule traced from the Lovable/React source. Tailwind → exact px.
 *
 * Tailwind breakpoints:
 *   sm  640px  → grid-cols-2
 *   md  768px  → py-28, flex nav visible
 *   lg  1024px → grid-cols-3
 *
 * Containers:
 *   max-w-6xl = 1152px  (team grid)
 *   max-w-3xl = 768px   (hero inner)
 *   max-w-xl  = 576px   (hero description)
 * ─────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS  (mirrors index.css :root)
═══════════════════════════════════════════════════ */
:root {
  --mce-bg:          hsl(30, 25%, 97%);
  --mce-fg:          hsl(220, 20%, 12%);
  --mce-card:        hsl(0, 0%, 100%);
  --mce-primary:     hsl(12, 76%, 56%);
  --mce-primary-fg:  hsl(0, 0%, 100%);
  --mce-muted-fg:    hsl(220, 10%, 46%);
  --mce-border:      hsl(30, 15%, 88%);
  --mce-radius:      0.75rem;

  --mce-shadow-card:      0 4px 24px -4px hsl(220 20% 12% / 0.06);
  --mce-shadow-hover:     0 12px 40px -8px hsl(12 76% 56% / 0.15);

  --mce-font-display: 'Playfair Display', Georgia, serif;
  --mce-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════
   SCOPED RESET
═══════════════════════════════════════════════════ */
.mce-header,  .mce-header  *,
.mce-hero,    .mce-hero    *,
.mce-team-block, .mce-team-block *,
.mce-footer,  .mce-footer  * {
  box-sizing: border-box;
}

.mce-header a, .mce-hero a, .mce-team-block a, .mce-footer a {
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════
   HEADER
   border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-50
   inner: mx-auto max-w-6xl px-6 py-4 flex items-center justify-between
═══════════════════════════════════════════════════ */
.mce-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.80);  /* bg-card/80 */
  backdrop-filter: blur(4px);                   /* backdrop-blur-sm */
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--mce-border);   /* border-b border-border */
}

/* mx-auto max-w-6xl px-6 py-4 */
.mce-header-inner {
  max-width: 1152px;     /* max-w-6xl */
  margin-inline: auto;
  padding: 16px 24px;    /* py-4 px-6 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* flex items-center gap-3 */
.mce-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;             /* gap-3 */
  flex-shrink: 0;
}

/* h-9 w-9 rounded-lg bg-primary */
.mce-logo-box {
  height: 36px;          /* h-9 */
  width: 36px;           /* w-9 */
  border-radius: 8px;    /* rounded-lg */
  background-color: var(--mce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* text-sm font-bold text-primary-foreground (Playfair from inline style) */
.mce-logo-box span {
  font-family: var(--mce-font-display);
  font-size: 0.875rem;   /* text-sm */
  font-weight: 700;
  color: var(--mce-primary-fg);
  line-height: 1;
}

/* text-lg font-bold text-foreground (Playfair from inline style) */
.mce-logo-brand {
  font-family: var(--mce-font-display);
  font-size: 1.125rem;   /* text-lg */
  font-weight: 700;
  color: var(--mce-fg);
  white-space: nowrap;
}

/* hidden md:flex items-center gap-8 */
.mce-nav {
  display: none;         /* hidden default, flex at md+ */
  align-items: center;
  gap: 32px;             /* gap-8 */
}

/* text-sm font-medium */
.mce-nav-link {
  font-family: var(--mce-font-body);
  font-size: 0.875rem;   /* text-sm */
  font-weight: 500;
  color: var(--mce-muted-fg);
  transition: color 150ms;
  white-space: nowrap;
}
.mce-nav-link:hover    { color: var(--mce-primary); } /* hover:text-primary */
.mce-nav-link.is-active{ color: var(--mce-primary); } /* text-primary */

/* Hamburger */
.mce-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.mce-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--mce-fg);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mce-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mce-burger.is-open span:nth-child(2) { opacity: 0; }
.mce-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mce-mobile-nav {
  display: none;
  flex-direction: column;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: rgba(255, 255, 255, 0.97);
  border-top: 1px solid transparent;
}
.mce-mobile-nav.is-open {
  max-height: 400px;
  border-top-color: var(--mce-border);
}
.mce-mobile-nav .mce-nav-link {
  display: block;
  padding: 14px 24px;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--mce-border);
}
.mce-mobile-nav .mce-nav-link:last-child { border-bottom: none; }

/* md: 768px — show desktop nav */
@media (min-width: 768px) {
  .mce-nav    { display: flex; }
  .mce-burger { display: none; }
  .mce-mobile-nav { display: none !important; }
}


/* ═══════════════════════════════════════════════════
   HERO
   relative py-20 md:py-28 text-center overflow-hidden
   inner: relative mx-auto max-w-3xl px-6
═══════════════════════════════════════════════════ */
.mce-hero {
  position: relative;
  padding-top: 80px;     /* py-20 */
  padding-bottom: 80px;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.mce-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, hsl(12, 76%, 56%, 0.05), transparent);
  pointer-events: none;
}

/* relative mx-auto max-w-3xl px-6 */
.mce-hero-inner {
  position: relative;
  max-width: 768px;      /* max-w-3xl */
  margin-inline: auto;
  padding-inline: 24px;  /* px-6 */
}

/* inline-block rounded-full bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-primary mb-6 */
.mce-badge {
  display: inline-block;
  border-radius: 9999px;
  background-color: rgba(224, 90, 54, 0.10);
  padding: 6px 16px;     /* py-1.5 px-4 */
  font-family: var(--mce-font-body);
  font-size: 0.75rem;    /* text-xs */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  color: var(--mce-primary);
  margin-bottom: 24px;   /* mb-6 */
}

/* text-4xl md:text-6xl font-extrabold leading-tight tracking-tight */
.mce-hero-h {
  font-family: var(--mce-font-display);
  font-size: 2.25rem;    /* text-4xl */
  font-weight: 800;
  color: var(--mce-fg);
  line-height: 1.25;     /* leading-tight */
  letter-spacing: -0.025em; /* tracking-tight */
}
.mce-hero-accent { color: var(--mce-primary); }

/* mt-6 text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed */
.mce-hero-desc {
  margin-top: 24px;      /* mt-6 */
  font-family: var(--mce-font-body);
  font-size: 1.125rem;   /* text-lg */
  color: var(--mce-muted-fg);
  max-width: 576px;      /* max-w-xl */
  margin-inline: auto;
  line-height: 1.625;    /* leading-relaxed */
}

/* md: 768px */
@media (min-width: 768px) {
  .mce-hero     { padding-top: 112px; padding-bottom: 112px; } /* md:py-28 */
  .mce-hero-h   { font-size: 3.75rem; }                        /* md:text-6xl */
}


/* ═══════════════════════════════════════════════════
   TEAM BLOCK  (one per team group)
   Outer wrapper: padding-top, padding-bottom (Elementor-controlled)
   Inner: mx-auto max-w-6xl px-6  (matches source)
═══════════════════════════════════════════════════ */
.mce-team-block {
  width: 100%;
  padding-top: 64px;
  padding-bottom: 96px;
}

/* max-w-6xl px-6 — exact match to source team section container */
.mce-team-inner {
  max-width: 1152px;     /* max-w-6xl */
  margin-inline: auto;
  padding-inline: 24px;  /* px-6 */
}

/* ── Divider (decorative separator between team sections) ── */
.mce-section-divider {
  border: none;
  border-top: 1px solid var(--mce-border);
  margin-bottom: 48px;
  width: 100%;
}

/* ── Section Header ── */
.mce-section-header {
  margin-bottom: 40px;
  text-align: center;    /* centered to match the site's centered style */
}

/* Badge above the section title */
.mce-section-badge {
  display: inline-block;
  border-radius: 9999px;
  background-color: rgba(224, 90, 54, 0.10);
  padding: 5px 14px;
  font-family: var(--mce-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mce-primary);
  margin-bottom: 12px;
}

/* Section title */
.mce-section-title {
  font-family: var(--mce-font-display);
  font-size: 2rem;       /* text-3xl equivalent */
  font-weight: 700;
  color: var(--mce-fg);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

/* Section description */
.mce-section-desc {
  font-family: var(--mce-font-body);
  font-size: 1rem;
  color: var(--mce-muted-fg);
  line-height: 1.625;
  max-width: 540px;
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────
   GRID
   grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
───────────────────────────────────────────────────────────────── */
.mce-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);   /* grid-cols-1 (mobile-first) */
  gap: 32px;                               /* gap-8 */
}

@media (min-width: 640px) {
  .mce-grid { grid-template-columns: repeat(2, 1fr); }  /* sm:grid-cols-2 */
}
@media (min-width: 1024px) {
  .mce-grid { grid-template-columns: repeat(3, 1fr); }  /* lg:grid-cols-3 */
}

/* ─────────────────────────────────────────────────────────────────
   ORPHAN ROW  —  Centers remaining cards when count % cols ≠ 0
   ─────────────────────────────────────────────────────────────────
   Strategy: flex row, justify-content: center.
   Each .mce-orphan-cell is locked to exactly 1/cols of the grid width.
   CSS custom property --mce-cols is set inline by PHP.

   Formula for cell width (matching grid cells exactly):
     (100% - (cols - 1) * gap) / cols
   With gap = 32px and 3 cols:
     calc((100% - 64px) / 3)
   With gap = 32px and 2 cols:
     calc((100% - 32px) / 2)
───────────────────────────────────────────────────────────────── */

/* gap matches .mce-grid — set via Elementor selector too */
.mce-orphan-row {
  display: flex;
  flex-direction: row;
  justify-content: center;    /* ← THE centering */
  gap: 32px;                  /* matches gap-8 default */
  width: 100%;
  margin-top: 32px;           /* same as row gap */
}

/* Default cell = 1/3 of container (desktop, 3-col layout) */
.mce-orphan-cell {
  flex: 0 0 calc((100% - 64px) / 3);   /* (100% - 2*32px) / 3 */
  min-width: 0;
}

.mce-orphan-cell .mce-card {
  width: 100%;
}

/* When cols = 2 (tablet sm–lg) → cell = 1/2 */
@media (min-width: 640px) and (max-width: 1023px) {
  .mce-orphan-cell {
    flex: 0 0 calc((100% - 32px) / 2); /* (100% - 1*32px) / 2 */
  }
  .mce-orphan-row {
    margin-top: 24px;
  }
}

/* Mobile < 640px → full-width stack, no centering needed */
@media (max-width: 639px) {
  .mce-orphan-row {
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }
  .mce-orphan-cell {
    flex: 0 0 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────
   CARD
   group relative rounded-2xl bg-card overflow-hidden
   transition-all duration-500 hover:-translate-y-2
───────────────────────────────────────────────────────────────── */
.mce-card {
  position: relative;
  border-radius: 16px;          /* rounded-2xl */
  background-color: var(--mce-card);
  overflow: hidden;
  box-shadow: var(--mce-shadow-card);
  transition: all 500ms;        /* transition-all duration-500 */
  will-change: transform;
}
.mce-card:hover {
  transform: translateY(-8px);  /* hover:-translate-y-2 = -0.5rem */
  box-shadow: var(--mce-shadow-hover);
}

/* relative aspect-[4/5] overflow-hidden */
.mce-card-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* aspect-[4/5] = padding-bottom: 125% */
.mce-card-photo::before {
  content: '';
  display: block;
  padding-bottom: 125%;
}

/* h-full w-full object-cover object-center transition-transform duration-700 group-hover:scale-105 */
.mce-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 700ms;
}
.mce-card:hover .mce-card-img { transform: scale(1.05); }

/* absolute inset-0 bg-gradient-to-t from-foreground/60 via-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 */
.mce-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsl(220, 20%, 12%, 0.60),  /* from-foreground/60 */
    transparent,
    transparent
  );
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}
.mce-card:hover .mce-overlay { opacity: 1; }

/* absolute bottom-4 left-0 right-0 flex justify-center gap-3
   opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 */
.mce-socials {
  position: absolute;
  bottom: 16px;            /* bottom-4 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;               /* gap-3 */
  opacity: 0;
  transform: translateY(16px);  /* translate-y-4 */
  transition: all 500ms;
  z-index: 2;
}
.mce-card:hover .mce-socials {
  opacity: 1;
  transform: translateY(0);
}

/* rounded-full bg-card/90 p-2.5 backdrop-blur-sm hover:bg-primary hover:text-primary-foreground transition-colors */
.mce-soc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.90);  /* bg-card/90 */
  padding: 10px;            /* p-2.5 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--mce-fg);
  transition: background-color 150ms, color 150ms;
  line-height: 0;
}
.mce-soc-btn:hover {
  background-color: var(--mce-primary);
  color: var(--mce-primary-fg);
}
.mce-soc-btn svg { display: block; flex-shrink: 0; }

/* p-5 text-center */
.mce-card-info {
  padding: 20px;           /* p-5 */
  text-align: center;
}

/* text-lg font-bold text-foreground leading-tight */
.mce-name {
  font-family: var(--mce-font-display);
  font-size: 1.125rem;     /* text-lg */
  font-weight: 700;
  color: var(--mce-fg);
  line-height: 1.25;       /* leading-tight */
  margin: 0;
}

/* mt-1 text-sm font-semibold uppercase tracking-wider text-primary */
.mce-role {
  margin-top: 4px;         /* mt-1 */
  font-family: var(--mce-font-body);
  font-size: 0.875rem;     /* text-sm */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;  /* tracking-wider */
  color: var(--mce-primary);
}

/* mt-2 text-sm text-muted-foreground leading-relaxed */
.mce-bio {
  margin-top: 8px;         /* mt-2 */
  font-family: var(--mce-font-body);
  font-size: 0.875rem;     /* text-sm */
  color: var(--mce-muted-fg);
  line-height: 1.625;      /* leading-relaxed */
}


/* ═══════════════════════════════════════════════════
   FOOTER
   border-t border-border py-8
   p: text-center text-sm text-muted-foreground
═══════════════════════════════════════════════════ */
.mce-footer {
  border-top: 1px solid var(--mce-border);
  padding-top: 32px;      /* py-8 */
  padding-bottom: 32px;
  width: 100%;
}
.mce-footer p {
  text-align: center;
  font-family: var(--mce-font-body);
  font-size: 0.875rem;    /* text-sm */
  color: var(--mce-muted-fg);
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — global tweaks
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .mce-section-title { font-size: 1.6rem; }
  .mce-team-block    { padding-top: 40px; padding-bottom: 60px; }
  .mce-section-divider { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .mce-hero         { padding-top: 56px; padding-bottom: 56px; }
  .mce-hero-h       { font-size: 1.875rem; }
  .mce-hero-desc    { font-size: 1rem; }
  .mce-section-title{ font-size: 1.4rem; }
  .mce-header-inner { padding-inline: 16px; }
  .mce-team-inner   { padding-inline: 16px; }
}


/* ═══════════════════════════════════════════════════
   ELEMENTOR EDITOR OVERRIDES
═══════════════════════════════════════════════════ */
.elementor-editor-active .mce-header {
  position: relative !important;
  top: auto !important;
}
.elementor-editor-active .mce-nav          { display: flex !important; }
.elementor-editor-active .mce-burger       { display: none !important; }
.elementor-editor-active .mce-mobile-nav   { display: none !important; }

/* Show social icons + overlay in editor without hover */
.elementor-editor-active .mce-socials  { opacity: 1; transform: translateY(0); }
.elementor-editor-active .mce-overlay  { opacity: 0.5; }


/* ═══════════════════════════════════════════════════════════════════
   MC – APEX  (5-column team section)
   Uses .apex-* namespace to stay completely isolated from .mce-*
═══════════════════════════════════════════════════════════════════ */

/* ── Outer block ── */
.apex-block {
  width: 100%;
  padding-top: 64px;
  padding-bottom: 96px;
}

/* max-w-6xl = 1152px, px-6 = 24px — same container as the rest */
.apex-inner {
  max-width: 1152px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Divider ── */
.apex-divider {
  border: none;
  border-top: 1px solid hsl(30, 15%, 88%);
  margin-bottom: 48px;
  width: 100%;
}

/* ── Section Header ── */
.apex-header {
  text-align: center;
  margin-bottom: 40px;
}

.apex-badge {
  display: inline-block;
  border-radius: 9999px;
  background-color: rgba(224, 90, 54, 0.10);
  padding: 5px 14px;
  font-family: var(--mce-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(12, 76%, 56%);
  margin-bottom: 12px;
}

.apex-title {
  font-family: var(--mce-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: hsl(220, 20%, 12%);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.apex-desc {
  font-family: var(--mce-font-body);
  font-size: 1rem;
  color: hsl(220, 10%, 46%);
  line-height: 1.625;
  max-width: 540px;
  margin-inline: auto;
}

/* ── 5-column grid ── */
.apex-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;                          /* default gap, overridden by Elementor control */
}

/* ── Orphan / last row — centered ──────────────────────────────
   Each orphan cell = exactly 1/5 of the container.
   Formula: (100% - 4 * gap) / 5  →  with gap=20px:
   calc((100% - 80px) / 5)
   We use the CSS gap value that Elementor sets via the selector.
   Since we can't read that dynamically in CSS, we default to
   20px gap (matches the control default).
   The gap on .apex-orphan-row is also overridden by the Elementor
   selector so both grid and orphan row always stay in sync.
─────────────────────────────────────────────────────────────── */
.apex-orphan-row {
  display: flex;
  flex-direction: row;
  justify-content: center;           /* ← centers the orphan cards */
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

/* 1 cell = 1/5 column width. 5 cols, 4 gaps of 20px each = 80px total gap */
.apex-orphan-cell {
  flex: 0 0 calc((100% - 80px) / 5);
  min-width: 0;
}
.apex-orphan-cell .apex-card {
  width: 100%;
}

/* ── Card ─────────────────────────────────────────────────────
   Same design language as .mce-card — rounded-2xl, hover lift,
   shadow on hover — but with slightly reduced info padding
   to suit the narrower 5-col width.
─────────────────────────────────────────────────────────────── */
.apex-card {
  position: relative;
  border-radius: 16px;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 24px -4px hsl(220 20% 12% / 0.06);
  transition: all 500ms;
  will-change: transform;
}
.apex-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px -8px hsl(12 76% 56% / 0.15);
}

/* ── Photo: aspect-[4/5] via padding-bottom trick ── */
.apex-card-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.apex-card-photo::before {
  content: '';
  display: block;
  padding-bottom: 125%;               /* 4:5 aspect ratio */
}

.apex-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 700ms;
}
.apex-card:hover .apex-card-img { transform: scale(1.05); }

/* ── Gradient overlay ── */
.apex-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(220, 20%, 12%, 0.60), transparent, transparent);
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}
.apex-card:hover .apex-overlay { opacity: 1; }

/* ── Social icons row (slide up on hover) ── */
.apex-socials {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: all 500ms;
  z-index: 2;
}
.apex-card:hover .apex-socials {
  opacity: 1;
  transform: translateY(0);
}

/* Social button — slightly smaller than mce-soc-btn to fit 5-col cards */
.apex-soc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.90);
  padding: 8px;                       /* slightly smaller than p-2.5 (10px) */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: hsl(220, 20%, 12%);
  transition: background-color 150ms, color 150ms;
  line-height: 0;
}
.apex-soc-btn:hover {
  background-color: hsl(12, 76%, 56%);
  color: #ffffff;
}
.apex-soc-btn svg { display: block; flex-shrink: 0; }

/* ── Card info ── */
.apex-card-info {
  padding: 14px;
  text-align: center;
}

.apex-name {
  font-family: var(--mce-font-display);
  font-size: 0.9375rem;              /* slightly smaller than text-lg for 5-col */
  font-weight: 700;
  color: hsl(220, 20%, 12%);
  line-height: 1.25;
  margin: 0;
}

.apex-role {
  margin-top: 3px;
  font-family: var(--mce-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(12, 76%, 56%);
}

.apex-bio {
  margin-top: 6px;
  font-family: var(--mce-font-body);
  font-size: 0.8125rem;
  color: hsl(220, 10%, 46%);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════
   APEX RESPONSIVE BREAKPOINTS
   lg  1024px → 5-col (default desktop)
   md   768px → 3-col
   sm   640px → 2-col
         0px  → 1-col
═══════════════════════════════════════════════════════════════════ */

/* Tablet: 3 columns */
@media (max-width: 1023px) {
  .apex-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* Orphan cells = 1/3 column width with 16px gap */
  .apex-orphan-row  { gap: 16px; margin-top: 16px; }
  .apex-orphan-cell { flex: 0 0 calc((100% - 32px) / 3); }  /* (100% - 2*16px) / 3 */
}

/* Small tablet / large mobile: 2 columns */
@media (max-width: 640px) {
  .apex-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Orphan cells = 1/2 column width with 14px gap */
  .apex-orphan-row  { gap: 14px; margin-top: 14px; }
  .apex-orphan-cell { flex: 0 0 calc((100% - 14px) / 2); }

  .apex-block { padding-top: 40px; padding-bottom: 60px; }
}

/* Mobile: 1 column — orphan row just stacks */
@media (max-width: 380px) {
  .apex-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .apex-orphan-row {
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
  }
  .apex-orphan-cell { flex: 0 0 100%; }

  .apex-name { font-size: 1.0625rem; }  /* bump back up for single-col readability */
  .apex-role { font-size: 0.75rem; }
  .apex-bio  { font-size: 0.875rem; }
}

/* ── Elementor editor: always show social/overlay without hover ── */
.elementor-editor-active .apex-socials { opacity: 1; transform: translateY(0); }
.elementor-editor-active .apex-overlay { opacity: 0.5; }